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

1 0
Red Sphere screenshot
Three
1 0
Magic Orb screenshot
Three
1 1
Scan Loader screenshot
Three
0 0
Mario Stars screenshot
Three
0 0
Fractal Turbine screenshot
0 0
Glorgon screenshot
Three
0 0
Piper screenshot
Three
0 0
Galaxy Turbine screenshot
0 0
Skraug screenshot
Three
0 0
Grow a Gear screenshot
Three
0 0
Cloudbox screenshot
Three
0 0
Bugbox screenshot
Three
0 0
Parallax Eye 8 screenshot
0 0
Parallax Eye 8 screenshot
0 0
Parallax Eye 8 screenshot
0 0
Parablocks screenshot
Three
0 0
Worm Indent screenshot
Three
0 0
Blendon Eye screenshot
Three
0 0
Clown Fractal screenshot
0 0
Metal Clown screenshot
Three
0 0
Inner Mechanism screenshot
0 0
Hexaparallax screenshot
0 0
Pisces Resting screenshot
0 0
Gooey Warp screenshot
Three
0 0
Candy Shell screenshot
Three
0 0
Aurora Melt screenshot
Three
0 0
Water Caustics screenshot
0 0
Metal Cards screenshot
Three
0 0
Card Storm screenshot
Three
0 0
Shatter screenshot
Three
0 0
Crystal Cells screenshot
0 0
Circle Shunk screenshot
0 0
Electric Arcs screenshot
0 0
Kaleidoscope screenshot
0 0
The Blob screenshot
Three
0 0
Neon Grid screenshot
Three
0 0
Aurora Lights screenshot
0 0
Lava Crust screenshot
Three
0 0
Soap Film screenshot
Three