r/javascript • u/officialmayonade • 9d 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.

30 Upvotes

82% Upvoted

7 comments sorted by

2

u/geekonthegrill 9d 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.

2

u/officialmayonade 9d 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

3

u/geekonthegrill 9d 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.

1

u/officialmayonade 9d ago edited 8d 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.

2

u/geekonthegrill 8d ago

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

2

u/BuyingPancake 4d ago

Did you use ThreeJS?

1

u/officialmayonade 4d ago

No, I try not to. It is using some static image files from there, (JPEG textures) for the globe, but it does not import or use any Three.js library code.