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	350.9 83.23	358.49 84.69	+7.58 kB +1.46 kB
WebGPU	616.15 171.03	616.15 171.03	+0 B +0 B
WebGPU Nodes	614.75 170.76	614.75 170.76	+0 B +0 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	482.96 118.03	490.55 119.51	+7.58 kB +1.48 kB
WebGPU	686.81 186.58	686.91 186.6	+98 B +13 B
WebGPU Nodes	636.65 173.8	636.75 173.81	+98 B +10 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!