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
Brick Wall 07 screenshot
0 0
Twisted Twister screenshot
0 0
Bumping Twister screenshot
0 0
Self Hug Twist screenshot
0 0
Frosted Tips screenshot
0 0
Noise Fire screenshot
Three
0 0
Speaker Warp screenshot
0 0
Gear Speaker screenshot
0 0
Corkscrew screenshot
Three
0 0
Gas Leak screenshot
Three
0 0
Water.js test screenshot
0 0
Navajo Blanket screenshot
0 0
Apple Linen screenshot
Three
0 0
Growing Tree screenshot
0 0
Grass Pavers screenshot
0 0
Zoom Noise screenshot
Three
0 0
Metal Ripple screenshot
0 0
4D Perlin Noise screenshot
0 0
Ace of Fleece screenshot
0 0
Kraglius screenshot
Three
0 0
Noisegon screenshot
Three
0 0
Noisegon City screenshot
0 0
Gearhead screenshot
Three
0 0
Cube Droid Melt screenshot
0 0
Circle Flipflop screenshot
0 0
Rainbow Voroni screenshot
0 0
Disco Dips screenshot
Three
0 0
Pixel Brew screenshot
Three
0 0
Trippy Flips screenshot