THREE.JS · HANDS-ON STUDY 01

A plane becomes an ocean.

A shader is a small program that runs on the GPU. First move the vertices. Then decide how the surface catches light.

The same mesh, three steps

GLSL / WebGL 2

Preparing the local renderer…

Rendering error details

t = 0.00 s

Starts paused. Each step advances time without continuous motion.

PREDICT → CHANGE → OBSERVE

Make one comparison.

Choose stage 02 or 03, capture a baseline at t = 2 s, and write your prediction. Change one slider, then compare at the same time.

2. What do you expect to change?

4. What changed? What stayed the same?

Notes stay in this page’s memory. Reset or reload clears them.

01 / GEOMETRY

The grid is the shape.

Geometry supplies points and triangles. More segments let a wave bend smoothly; the shader does not create extra vertices.

02 / VERTEX SHADER

Move each point.

The vertex shader computes a height from x, z and time. A uniform is one value supplied from JavaScript to the whole draw.

y = A · sin(k · x − s · t)

03 / FRAGMENT SHADER

Give the surface a color.

The fragment shader combines the surface normal, light and viewing direction. Pale crests are a color mask, not simulated bubbles.

This is a small procedural wave model with approximate lighting. It does not solve ocean physics, breaking waves, buoyancy or physically based rendering.