Lab · Experiment
Sunset ocean
The beach, surf and setting sun that opened the v2 home page, now an experiment you start on purpose.
three.js · GLSL · React 19 · TypeScript
This experiment needs JavaScript and WebGL. The write up below describes what it does.
Notes
- Background
- On the v2 home page a scroll driven camera flew from the beach to the shack door, where the ocean crossfaded into the portrait. It made three.js part of the home page load.
- How it works
- One three.js scene under ACES filmic tone mapping: a sun shader that sets behind a wavy, moving waterline, a Gerstner wave sea whose reflection breaks into glints on the crests, sand, a shack, surfboards and a skate bowl. Here the camera drifts along the first part of the v2 fly through; the pointer nudges it.
- Now
- Measured for v2 in Chrome DevTools on a 4x CPU throttled mobile profile (390 x 844, DPR capped at 2): the worst frame in the ocean phase was 16.8 ms. On desktop with no throttle the worst frame of the whole crossing was 8.4 ms.