WebGLRenderer: Added map support to RectAreaLight.

[mrdoob]

Related issue: #9234

Description

• Adds map property to RectAreaLight for texturing the light surface
• Implements LTC-based texture sampling for both specular and diffuse lighting
• Updates RectAreaLightHelper to display the light's texture

There are still a couple of bugs that I need to address.

Screen.Recording.2025-12-06.at.20.26.46_.mov

For testing:
https://raw.githack.com/mrdoob/three.js/rectarealight-map/examples/webgl_lights_rectarealight_map.html

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	355.12 84.44	362.7 85.9	+7.58 kB +1.46 kB
WebGPU	616.43 171.09	616.43 171.09	+0 B +0 B
WebGPU Nodes	615.03 170.83	615.03 170.83	+0 B +0 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	487.46 119.37	495.04 120.84	+7.58 kB +1.48 kB
WebGPU	687.34 186.69	687.44 186.7	+98 B +12 B
WebGPU Nodes	637.18 173.9	637.28 173.91	+98 B +11 B

[WestLangley]

Very nice!

1. For a very-informative, temporary, test case, replace the car with a plane.

// scene.add( carModel );

const geometry = new THREE.PlaneGeometry( 10, 10, 10 );
const mesh = new THREE.Mesh( geometry, bodyMaterial );
bodyMaterial.color.setHex( 0xffffff );
mesh.position.y = 5;
scene.add( mesh );

2. Also, the video is currently static in MacOS Safari, and that makes for an even better test case.

[mrdoob]

1. For a very-informative, temporary, test case, replace the car with a plane.

// scene.add( carModel );

const geometry = new THREE.PlaneGeometry( 10, 10, 10 );
const mesh = new THREE.Mesh( geometry, bodyMaterial );
bodyMaterial.color.setHex( 0xffffff );
mesh.position.y = 5;
scene.add( mesh );

Oh! So much noise. I guess that's the hash blur...

2. Also, the video is currently static in MacOS Safari, and that makes for an even better test case.

Damn it Safari!

[mrdoob]

Ops!

Looks like I committed webgpu_postprocessing_ssgi.html‎ by mistake... but without the RapierPhysics.js fixes it won't work.

Well, in case anyone tried to see the example... this is how it's supposed to look like:

Screen.Recording.2025-12-07.at.20.37.33.mov

[Mugen87]

Instead of updating webgpu_postprocessing_ssgi, would it be possible to create a new physics demo instead (e.g. physics_rapier_ssgi)?

For further development, it's important to have a static SSGI scene with no dynamic elements so it's easier to compare and validate changes in SSGINode.

[mrdoob]

Wasn't planning on committing that ssgi physics test.

I could create a new example but I'm not happy with it yet.