WebGPURenderer: Introduce ProjectorLight

[sunag]

Related issue: #31020 (comment)

Description

Based on the @N8python PR (#24589) and @WestLangley and @Mugen87 conversations, it introduces ProjectorLight to WebGPURenderer allowing the use of .map and TSL functions for procedural effects like the caustic effect in the demo below.

Live demo

projectorLight = new THREE.ProjectorLight( 0xffffff, 100 );
projectorLight.colorNode = Fn( ( [ projectorUV ] ) => {

	const waterLayer0 = mx_worley_noise_float( projectorUV.mul( 10 ).add( time ) );
	const waterLayer1 = mx_worley_noise_float( projectorUV.mul( 5 ).add( time ) );

	const caustic = waterLayer0.mul( waterLayer1 ).mul( color( 0x5abcd8 ) ).mul( 2 );

	return caustic;

} );

** Summary **

• Texture: Introduce width, height, depth
• Fix lightShadowMatrix() if renderer.shadowMap.enabled is false
• Remove spotLight.attenuationNode
• Introduce ProjectorLight
• add webgpu_lights_projector example

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	336.33 78.33	336.33 78.33	+0 B +0 B
WebGPU	547.85 151.9	548.77 152.17	+924 B +265 B
WebGPU Nodes	547.2 151.74	548.12 152.01	+924 B +264 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	466.15 112.56	466.15 112.56	+0 B +0 B
WebGPU	623.1 168.69	623.98 168.91	+882 B +228 B
WebGPU Nodes	577.97 157.98	578.85 158.2	+882 B +220 B

[WestLangley]

ProjectorLight should probably have its own ProjectorLightHelper since SpotLightHelper is conical.

[mrdoob]

Considering that we have RectAreaLight, shouldn't we call it RectLight? 🤔

[mrdoob]

Unreal and USD do use that naming:

• https://dev.epicgames.com/documentation/en-us/unreal-engine/rect-lights?application_version=4.27
• https://openusd.org/release/user_guides/schemas/usdLux/RectLight.html

[sunag]

I don't have a strong opinion on this if you prefer to change it. But I believe that the RectLight in other renderers is the equivalent of RectAreaLight and not the current ProjectorLight.

[WestLangley]

ProjectorLight is akin to a movie projector. Hence the name.

[mrdoob]

Yes I understand that...

But SpotLight also has a map and it could also be thought of a projector with a mask...

How about we add a new property to SpotLight instead?

light.shape = THREE.RectShape;

That would open the door for more shapes without resulting in more API/docs work.

Same for RectAreaLight, we could rename it to AreaLight and add a shape property so in the future we could add support for CircleShape, etc