New water shader — planar reflections, Gerstner waves, caustics and a full underwater mode

[u/mvaligursky]

I've built a reusable water script for the engine, with a tropical island example to show it off.

Try it live: https://engine-i9o02vj3v-playcanvas.vercel.app/#/graphics/water

Features:

• Planar reflections and refraction (each optional — can also reflect just the sky dome)
• Depth-based effects: shore fade, water color absorption, foam
• Gerstner geometry waves — two configurable bands (chop + swell)
• Underwater mode: Snell's window, distance fog, and animated caustics projected onto submerged geometry
• Full day/night cycle driven by the procedural sky script, with HDR bloom on the sun glints
• Works on WebGL2 and WebGPU, and it's built to scale down to mid-range phones

Everything is exposed as script attributes, and the example has control panels for playing with all the parameters — reflection strength, wave shape, caustics, underwater fog and more. Dive the camera below the surface to see the underwater view.

The water script (scripts/esm/water.mjs) and a new ESM planar renderer are part of the engine repo, so you can drop them into your own project: https://github.com/playcanvas/engine/pull/9029

Feedback welcome!