Three.js Shaders & Materials

Every shader here was built in Shaderfrog and runs in Three.js. Click one to open it in the editor, where you can edit the GLSL, rewire the node graph, and export the result as a Three.js material.

Shaderfrog shaders compose: you can plug a noise shader into a fire shader, or a vertex displacement shader into the position of a MeshPhysicalMaterial. Many are built on the standard Three.js materials, with custom code plugged into their color, normal, and roughness. See how Shaderfrog works.

583 Three.js Shaders & Materials

0 0
Falling Water screenshot
0 0
Noise Ripples screenshot
0 0
Kaleidoscope screenshot
0 0
Spiral Stripes screenshot
0 0
Flower Grid screenshot
Three
0 0
Pixelated Grid screenshot
0 0
Hexagon Grid screenshot
0 0
Hexagon Tunnel screenshot
0 0
Cat Eye screenshot
Three
0 0
Marching Ants screenshot
0 0
Sin Noise screenshot
Three
0 0
Galaxy screenshot
Three
0 0
Normal Map-ify screenshot
0 0
Hell on Earth screenshot
0 0
Static Snow screenshot
Three
0 0
Serpent Split screenshot
0 0
Twister screenshot
Three
0 0
Parallax Eye 3 screenshot
0 0
Parallax Eye 4 screenshot
0 0
Parallax Eye 6 screenshot
0 0
Parallax Eye 2 screenshot
0 0
Virus Noise screenshot
Three
0 0
Voronoi Noise screenshot
0 0
Big Wiggles screenshot
Three
0 0
Wiggly Rings screenshot
0 0
Procedural Wood screenshot
0 0
Fluid Circles screenshot
0 0
Petal Spinner screenshot
0 0
Dot Wave screenshot
Three
0 0
Beating Heart screenshot
0 0
Animated Julia screenshot
0 0
Polkadots screenshot
Three
0 0
Mandelbrot screenshot
Three
0 0
Spiral Fade screenshot
Three