Three.js Particle Wave — Animated WebGL Point Cloud Ocean Effect

The Three.js Particle Wave snippet turns a flat grid of 10,000 points into a living, undulating ocean surface, rendered entirely in WebGL via a single <canvas> and the Three.js library loaded from a CDN. Every point's height and color update every frame from a small trigonometric formula — no physics engine, no imported terrain data, just math driving a GPU-rendered point cloud.

A BufferGeometry grid, not individual meshes

The scene starts as a 100×100 grid of coordinates packed into a single Float32Array, assigned to a THREE.BufferGeometry via setAttribute('position', ...). Rendering 10,000 individual mesh objects would be prohibitively expensive; rendering 10,000 vertices of one THREE.Points object is nearly free, since the GPU processes the whole buffer in one draw call. This is the same technique behind every performant particle system, snow effect, or starfield built in WebGL.

Height comes from two overlapping sine waves

Each frame, every point's Y coordinate is recomputed as Math.sin(x * freq + t) + Math.cos(z * freq + t * 0.75) — two independent sine waves at slightly different speeds and axes, summed together. Overlapping two waves like this avoids the flat, mechanical look of a single sine ripple; because the two waves drift in and out of phase with each other, the surface never repeats identically, reading as organic water motion instead of a looping GIF.

Vertex colors driven by the same height value

Rather than a flat particle color, each point's RGB is derived from its own normalized height — peaks shade toward a brighter cyan, troughs toward a deeper blue — using the geometry's color buffer attribute with vertexColors: true on the PointsMaterial. This one line of shared math (computing height, then feeding it into both the Y position and the color) is what makes the wave read as a genuine surface rather than a random point cloud.

Updating a BufferAttribute efficiently

The animation loop never recreates the geometry — it writes directly into the existing position and color BufferAttributes with .setY() and .setXYZ(), then flips needsUpdate = true once per attribute per frame. This is the standard, GPU-friendly pattern for per-vertex animation in Three.js: allocate the buffers once, mutate them in place forever after.

A slow ambient rotation ties it together

On top of the wave motion, the whole point cloud rotates very slowly around its Y axis (points.rotation.y += 0.0016), so the camera appears to drift around the ocean surface even though it never actually moves. Combined with a fixed camera angle looking slightly downward, this single extra line adds a huge amount of perceived depth for almost no cost.

Why WebGL instead of CSS or Canvas 2D

A particle field this dense — 10,000 individually colored, individually positioned points, redrawn 60 times a second — is well past what Canvas 2D or CSS transforms can sustain smoothly. Three.js hands the actual per-vertex math to the GPU via a single draw call, which is why a scene like this holds a steady frame rate even on modest hardware. It's the same reason data visualizations like a radar chart or a particle network reach for canvas or WebGL rather than hundreds of DOM nodes once the element count climbs into the thousands.