Swell Surface
Points moved in circles rather than up and down, so crests peak and troughs flatten without either being shaped.
The scene in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
"use client";
import * as React from "react";
import * as THREE from "three";
/**
* Swell Surface — the crest sharpens because the water moves sideways.
*About this effect
For something that is working and does not need watching — a sync, a background job, a long import — where a rhythm is wanted but a progress bar's implied promise about when it will finish is not. Displace a grid up and down with a sine and the result is a corrugated sheet: every crest as round as every trough, symmetric, obviously not water. Real swell is not symmetric, and the reason is that a particle in a wave does not bob straight up. It travels in a circle, moving forward at the top and backward at the bottom, and that forward motion at the top bunches the surface into a narrow, peaked crest while the trough spreads out flat. So this displaces along x and z as well as y, which is all a Gerstner wave is. Nothing sharpens a crest and nothing flattens a trough; both shapes are what happens when points move in circles instead of in lines, and pushing the steepness far enough would fold the surface over itself exactly as a real wave breaks. Three swells at different headings share one clock, so it reads as one body of water crossed by three waves rather than as three sheets added together.
Related effects
- Star ParallaxSize, brightness and colour all read off one depth, so the field reads as distance rather than as assorted dots.
- Aurora CurtainRays that arrive where a sampled sheet folds end-on, so no line of code decides where a ray belongs.
- Fog BankSlabs composited back to front, each dimming what is behind it, so the bank has an inside rather than a surface.