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
Nonsense Earth screenshot
0 0
Frog Friend screenshot
Three
0 0
Good Hair Day screenshot
0 0
Soul screenshot
Three
0 0
Alien Droid screenshot
Three
0 0
Aerial Rocks 02 screenshot
0 0
Polar Texture screenshot
0 0
2D Clouds screenshot
Three
0 0
galaxy3 screenshot
Three
0 0
Molten II screenshot
Three
0 0
Truchet 1 screenshot
Three
0 0
Bubbly Bunkie screenshot
0 0
Flip Test screenshot
Three
0 0
Checker Flush screenshot
0 0
Bullseyes screenshot
Three
0 0
Ripple screenshot
Three
0 0
Rainier mood screenshot
0 0
Charge Shot screenshot
Three
0 0
Split Loader screenshot
0 0
Boxwarp screenshot
Three
0 0
Hippy Tree screenshot
Three
0 0
Matrix Ocean screenshot
0 0
Magic Carpet screenshot
0 0
Fire Ocean screenshot
Three
0 0
Fractal Ocean screenshot
0 0
Stormy Voronoi screenshot
0 0
Ocean Waves screenshot
Three
0 0
StræppenBjøx screenshot
0 0
Ocean Dream screenshot
Three
0 0
Fractal Flower screenshot
0 0
Hex Pulse screenshot
Three
0 0
Stained Glass screenshot
0 0
Podulum screenshot
Three
0 0
Spiralgon screenshot
Three
0 0
Perfect Eggy screenshot