Write a Wave Shader
Shaders & effects
Lesson 14 of 15
Displace vertices on the GPU and pass a height value to a fragment shader.
Animate a subdivided plane with ShaderMaterial, a time uniform, and a height-based color gradient.
How this scene works
A vertex shader runs once per vertex, so the plane needs subdivisions for smooth displacement. uTime is a uniform shared by all vertices for a frame. vHeight is interpolated across each triangle and used in the fragment shader to blend two linear-space colors. The material does not respond to scene lights because this shader implements its own color calculation. Tone-mapping and color-space shader chunks convert the final output correctly. A padded bounding sphere prevents culling from ignoring the GPU displacement.
Write a Wave Shader
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Double the wave frequency and lower the amplitude to 0.2. Then reduce the plane subdivisions from 100 to 10 to see why a shader cannot bend triangles that do not exist.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
