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.

[aaaidan]

This is an extremely exciting and useful feature. A texture will massively expand the use cases for the area light. I’m going to check out this branch to check in on progress, but please let me know if there’s anything specific we spectators can do to help (e.g. any kind of testing, api opinions, etc)

good luck 👍