Vertex displacement; procedural noise deformation

Moving a mesh's points in the vertex shader, often with animated noise, so a plain grid turns into waves, terrain, cloth, or a wobbling blob.

make the mesh wobblewavy geometry shaderanimate the surface without bonesmake a flat grid ripplenoise moving the verticeshow do people make those rippling water planesvertex wobblevertex displacment

See it

Live demo coming soon

What it is

Vertex displacement moves a mesh's existing vertices in the vertex shader before the triangles are rasterized. Feed the position, time, or another coordinate through sine waves, Ken Perlin's noise or its simplex successor, or fractal Brownian motion and the same static grid can become water, cloth, terrain, or a breathing blob without uploading new positions every frame.

Reach for it when the deformation is procedural and can run entirely on the GPU. It scales well because the CPU only updates a few uniforms, and the effect can react to audio, pointer position, or world-space fields. The mesh still needs enough subdivisions: a plane with four vertices cannot grow detailed waves no matter how clever the noise is.

Gotcha: moving positions does not automatically fix normals or bounds. Lighting can keep describing the undeformed surface unless the shader also derives a new normal, and frustum culling can make a displaced peak vanish because the original bounding sphere is too small. Expand the bounds for the largest possible displacement.

Ask AI for it

Create a three.js ShaderMaterial that deforms a 200 by 200 segment PlaneGeometry in its vertex shader. Apply 4-octave simplex noise as fractal Brownian motion to position.z, animate the noise coordinates with a uTime uniform, and expose uAmplitude and uFrequency uniforms. Reconstruct the displaced normal from neighboring noise samples so a DirectionalLight reads the waves correctly. Expand the geometry's bounding sphere by the maximum uAmplitude so frustum culling never clips the peaks, and keep all per-frame work on the GPU except updating uTime.

You might have meant

vertex vs fragment shadershadermesh geometryfrustum cullingsurface normals backface culling