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
Chain Chomp screenshot
Three
0 0
Embossed Julia screenshot
0 1
Star Field screenshot
Three
0 0
Parallax Polka screenshot
0 0
Halofish screenshot
Three
0 0
Chain Chomp screenshot
Three
0 0
Fire vs Glass screenshot
0 0
Disco Ball screenshot
Three
0 0
Virus Glass screenshot
Three
0 0
The Source screenshot
Three
0 0
Swimming Stone screenshot
0 0
Cartography screenshot
Three
0 0
Leliel screenshot
Three
0 0
Hex Shield screenshot
Three
0 0
Electric Wave screenshot
0 0
Hex Shield screenshot
Three
0 0
Diamond Warp screenshot
0 0
Ceramack screenshot
Three
0 0
Boiling screenshot
Three
0 0
Opal Mine screenshot
Three
0 0
RingFlipper screenshot
Three
0 0
Moleculeifier screenshot
0 0
Spiralizer screenshot
Three
0 0
Flop Hop screenshot
Three
0 0
Seychelles screenshot
Three
0 0
Babel Screw screenshot
Three
0 0
Grime screenshot
Three
0 0
Hypnosis Warp screenshot
0 0
Portal Bunny screenshot
0 0
Interrodon screenshot
Three
0 0
Fool's Ghould screenshot
0 0
Glass Rose screenshot
Three
0 0
Voronoi Ice screenshot
Three
0 0
conundrum screenshot
Three
0 0
Perlin Warp screenshot
Three
0 0
Slime screenshot
Three
0 0
Split Brian screenshot
Three
0 0
Nifty Nate screenshot
Three
0 0
Metal Klulb screenshot
Three
0 0
Distortion Hole screenshot
0 0
Tunnel Warp screenshot
Three