Ocean HUD

What this is

Quest log, inventory and status bar laid out in real HTML/CSS, then rendered into the same WebGL canvas as the ocean. The water treats the UI as part of the world: waves distort it, depth refracts it, gameplay can occlude it. Inspired by @dangreenheck's ocean experiments.

The puzzle that started it

Game UI on the web is almost always a flat overlay. The HUD lives on top of the canvas, not inside it. The puzzle was whether the same html-in-canvas pipeline could fold the UI into the scene properly, so the water reacted to the inventory the same way it reacted to a boat.

How I built it

HTML/CSS layout for the HUD panels. Render the layout to a texture. Project that texture as part of the scene rather than as a screen-space overlay. Apply the same shader passes (wave distortion, depth refraction, post-processing) to the UI texture as to everything else. Pointer events route back through the inverse projection so the HUD stays interactive.

What this is an example of

Once html-in-canvas lands, game UI stops being a flat overlay. Full HTML/CSS layout, unified post-processing, depth-correct occlusion. This is the proof. Same instinct applies to immersive product UIs: when the interface lives inside the scene rather than on top of it, everything reads as more real.

If your interface needs to react to its environment, or your environment needs to react to its interface, the same pipeline applies.