WebGPURenderer: Volumetric lighting

[sunag]

Description

The PR introduces volumetric lighting compatible with native Three.js lighting. Some improvements were needed to the lighting system, the next step now is to normalize the changes to work in the other examples.

Volumetric lighting can be executed in the same rendering pass, but when used in post-processing we can use some denoising approach and improve performance by reducing the resolution of the ray-marching buffer.

Currently fog density is related only to additive blending, that's why volumetric lighting instead of volumetric fog, but I have plans to support normal blending for other fog effects.

Shadow calculations are now shared across passes if the camera is the same as the one used. We may need to review how to relate the shadow map to the camera used to avoid duplicate calculations if reflectors are also used.

I found bayer16s idea interesting where we have a relatively large matrix that we can load as a TSL function.

It's a WIP, revisions and docs would be created in the next few days.

Live example

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	336.51 78.38	336.51 78.38	+0 B +0 B
WebGPU	519.21 144.16	521.78 144.83	+2.57 kB +669 B
WebGPU Nodes	518.68 144.05	521.25 144.72	+2.57 kB +672 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	465.51 112.23	465.51 112.23	+0 B +0 B
WebGPU	591.04 160.12	592.15 160.44	+1.12 kB +325 B
WebGPU Nodes	546.35 149.59	547.28 149.88	+939 B +295 B

[sunag]

I'm still improving!

Live example

[Mugen87]

The new demos really look stunning! This is awesome stuff 🙌 .

[sunag]

Thank you @Mugen87 ❤️

Shadow calculations are now shared across passes if the camera is the same as the one used. We may need to review how to relate the shadow map to the camera used to avoid duplicate calculations if reflectors are also used.

Maybe this will cause regression, and then we could solve it with a parameter in the renderer, we could even share the objects that have passed through the frustrum using this new parameter 🤔

[wyliefoxxx]

You're a legend - That looks beautiful

[Mugen87]

Currently writing the docs for this module...

What is this TSL function about? I've tried to find some references about "Bayer16" but without success.

Is this an alternative noise texture? I know the term "Bayer" only from Bayer Filters in context of image sensors but I don't understand how it relates to this code.

[sunag]

Bayer Matrix is ​​a pattern, it is used for dithering effects as well, but in this case it was used as an alternative to blue-noise. I use bayer16 which is a 16x16 texture with the bayer pattern, when used in Ray Marching specifically in VolumeNodeMaterial.offsetNode, it reduces banding problem, thus being able to use fewer steps without affecting the visuals as much.