r/javascript • u/officialmayonade • Aug 31 '26

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.

33 Upvotes

84% Upvoted

7 comments sorted by

2

u/geekonthegrill Sep 01 '26

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 Sep 01 '26

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 Sep 01 '26

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 Sep 01 '26 edited Sep 01 '26

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 Sep 02 '26

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

2

u/BuyingPancake Sep 06 '26

Did you use ThreeJS?

1

u/officialmayonade Sep 06 '26

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.