r/javascript • u/officialmayonade • 1d ago

RDR2-style volumetric WebGL 2 clouds in the browser

https://codepen.io/Andrew-Fisher-the-decoder/full/pveJYze

I've been working with clouds in the browser for a couple years now, and these are the best I've made so far. I've tried noise, particles, voxels, etc. and every combination of the options. Each approach has its upsides and downsides.

21 Upvotes

80% Upvoted

5 comments sorted by

2

u/geekonthegrill 1d ago

These look great. Since youve tried the whole menu, which approach did this pen finally land on? And the thing that always decides it for me in the browser: how are you keeping the raymarch cost sane on integrated GPUs? Half res march with temporal reprojection, blue noise jitter with fewer steps, or just eating the fill rate? RDR2 leaned hard on temporal amortization, curious how much of that survives in WebGL 2 without compute shaders.

•

u/officialmayonade 22h ago

Since it's clouds, you can get away with a lot of tricks that wouldn't work normally. For example, because there's likely nothing ever above the clouds or between the clouds and the Sun, aside from other clouds, the ray marching doesn't have to look very far. It also doesn't have to be super detailed. Then caching helps a lot too, which acts essentially like baking the shadows in.

I would rank the biggest savings roughly like this: Precomputed volumetric lighting, Empty-space skipping, Tiled culling, On-demand rendering, Single-cloud fast path, Sparse shadow marching, Dirty-flag caching, and Low-resolution shadow mapping

•

u/geekonthegrill 17h ago

That ranking is exactly what I was after. Precomputed lighting winning makes sense, clouds forgive staleness like nothing else so you basically get baked shadows without looking baked. Saving this breakdown, thanks for taking the time.

•

u/officialmayonade 15h ago edited 9h ago

For ray marching, I don't use the actual sun location, by the way. All the rays are parallel, and extend from the cloud toward a direction representative of the sun. That saves looking up the light location for each ray.

•

u/geekonthegrill 2h ago

Makes sense, the sun is at infinity for all practical purposes anyway. Nice cheat.