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
Frothy Julia screenshot
0 0
Gliefus Wave screenshot
0 0
Slippy Friend screenshot
0 0
Circle Grid screenshot
Three
0 0
Grangish screenshot
Three
0 0
Pulse Grid screenshot
Three
0 0
Loading Spinner screenshot
0 0
Rain-Bow Grid screenshot
0 0
Animated Spiral screenshot
0 0
Hippie Rings screenshot
0 0
Checkerboard screenshot
0 0
Julia Fractal screenshot
0 0
Wave Frieze screenshot
Three
0 0
Flower Garden screenshot
0 0
Relief Mapping screenshot
0 0
Edge Scan screenshot
Three
0 0
Sweet Turtle screenshot
0 0
Relief Mapping screenshot
0 0
UV Tunnel screenshot
Three
0 0
Star Warp screenshot
Three
0 0
Pixelate Image screenshot
0 0
Matrix Code screenshot
Three
0 0
Circuit Grid screenshot
0 0
Electric Wires screenshot
0 0
Frieze Divide screenshot
0 0
Old VHS screenshot
Three
0 0
Demon Tree screenshot
Three
0 0
Shredder Twist screenshot
0 0
Cloud Friend screenshot
0 0
Metal Klulb screenshot
Three
0 0
Supreme Newt screenshot