Create Option to Have Spotlights Use Rectangular Projection #24589

N8python · 2022-09-02T20:11:22Z

With the new mapping capabilities of spotlights, many people will want to use them as movie-projectors. However, their shape is purely circular - this pull request allows you to set the projector boolean on a spot light to have it attenuate based off its shadowcam's frustum. It also includes the projectorAspect attribute to allow varying the width of the projection.

It also supports the use of the penumbra parameter for attenuation (see image 3). This is accomplished via a signed distance function.

mrdoob · 2022-09-02T20:19:56Z

We'll have to refactor the code a bit...
I think it'd be more intuitive to introduce a RectLight but we'll still need to a aspect property.

mrdoob · 2022-09-02T20:20:47Z

Btw... Make sure to not include the builds nor changes to package.json in the PR.

N8python · 2022-09-02T20:23:17Z

Sorry about that! Still very new to the whole pull-requesting thing 😓

N8python · 2022-09-02T20:28:07Z

All right the files are no longer being overwritten! How would you recommend I refactor things?

I would be against a RectLight - One, because there's already RectAreaLight, and two, adding another light type would mean a large codebase overhaul.

gkjohnson · 2022-09-07T05:28:18Z

Are we against calling this something like "ProjectorLight", then, if a SpotLight modification isn't acceptable? I agree that "RectLight" is a bit confusing.

N8python · 2022-09-07T23:12:18Z

Are we against calling this something like "ProjectorLight", then, if a SpotLight modification isn't acceptable? I agree that "RectLight" is a bit confusing.

I think ProjectorLight would make the most sense. Another thing I was thinking is perhaps having an attenuation mode for spotlights that can toggle between this and the traditional circle attenuation - maybe THREE.CircleAttenuation and THREE.RectAttenuation. Maybe that would be more "idiomatic", or in the style of threejs.

As I said before, I'm not sure the additional code complexity warranted by a ProjectorLight would be worth it - given how simple the modifications to the SpotLight are.

gkjohnson · 2022-09-07T23:33:49Z

As I said before, I'm not sure the additional code complexity warranted by a ProjectorLight would be worth it - given how simple the modifications to the SpotLight are.

If an "attenuation" field like you've suggested is not acceptable for the public API then I would think it would still be okay to implement it that way internally while the public facing API separates the lights into "Spot" and "Projector" lights. Best of both worlds!

N8python · 2022-09-08T01:07:15Z

As I said before, I'm not sure the additional code complexity warranted by a ProjectorLight would be worth it - given how simple the modifications to the SpotLight are.

If an "attenuation" field like you've suggested is not acceptable for the public API then I would think it would still be okay to implement it that way internally while the public facing API separates the lights into "Spot" and "Projector" lights. Best of both worlds!

You, my friend, are a genius. ProjectorLight is a subclass of SpotLight that internally is just a SpotLight with an attenuated field.

gkjohnson

Probably worth waiting for approval from @mrdoob on the path forward for the PR but I've added a few comments on code style to the review.

gkjohnson · 2022-09-09T22:25:16Z

src/renderers/webgl/WebGLLights.js

-				// WebGL 2
+				// WebGL 2ÍÍ


Looks like an inadvertent change

gkjohnson · 2022-09-09T22:25:31Z

src/renderers/webgl/WebGLLights.js

-			hash.pointLength !== pointLength ||
-			hash.spotLength !== spotLength ||
-			hash.rectAreaLength !== rectAreaLength ||
-			hash.hemiLength !== hemiLength ||
-			hash.numDirectionalShadows !== numDirectionalShadows ||
-			hash.numPointShadows !== numPointShadows ||
-			hash.numSpotShadows !== numSpotShadows ||
-			hash.numSpotMaps !== numSpotMaps ) {
+            hash.pointLength !== pointLength ||
+            hash.spotLength !== spotLength ||
+            hash.rectAreaLength !== rectAreaLength ||
+            hash.hemiLength !== hemiLength ||
+            hash.numDirectionalShadows !== numDirectionalShadows ||
+            hash.numPointShadows !== numPointShadows ||
+            hash.numSpotShadows !== numSpotShadows ||
+            hash.numSpotMaps !== numSpotMaps ) {


There are a few places in the PR where indentation looks off.

gkjohnson · 2022-09-09T22:27:10Z

src/renderers/shaders/ShaderChunk/lights_pars_begin.glsl.js

+		if (spotLight.projector) {
+			vec3 spotLightCoord = spotCoord.xyz / spotCoord.w;
+			spotAttenuation = clamp((-2.0 * sdBox(spotLightCoord.xy - vec2(0.5), vec2(0.5, 0.5))) * (-1.0 / ((1.0 - acos(spotLight.penumbraCos)) - 1.0)), 0.0, 1.0);
+		}


Can we update this to use the three.js code style and remove the unnecessary parentheses.

@N8python See the guide here, which includes tools for automatically formatting the code:

https://github.com/mrdoob/three.js/wiki/Mr.doob's-Code-Style%E2%84%A2

gkjohnson · 2022-09-09T22:27:26Z

src/renderers/shaders/ShaderChunk/lights_pars_begin.glsl.js

+	float sdBox( in vec2 p, in vec2 b )
+	{
+		vec2 d = abs(p)-b;
+		return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
+	}


nit: spacing around the function and remove the newline before the first brace

gkjohnson · 2022-09-09T22:27:34Z

src/renderers/shaders/ShaderChunk/lights_pars_begin.glsl.js

@@ -1,4 +1,4 @@
-export default /* glsl */`
+export default /* glsl */ `


nit: unnecessary change

gkjohnson · 2022-09-09T22:27:50Z

src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js

@@ -1,4 +1,4 @@
-export default /* glsl */`
+export default /* glsl */ `


nit: same unnecessary change

gkjohnson · 2022-09-09T22:28:16Z

examples/webgl_lights_spotlight.html

+				lightHelperProjector.update();
+				if (spotLight.projector) {
+					lightHelper.visible = false;
+					lightHelperProjector.visible = true;
+				} else {
+					lightHelper.visible = true;
+					lightHelperProjector.visible = false;
+				}


nit: code style (spaces inside parentheses and newlines within braces)

WREQI · 2025-04-15T06:08:36Z

@N8python @gkjohnson Hello, has the rectangular projection been completed and can it be used simply by merging the code? Do you have any cases? How can I extract it as a plugin and use it locally?

paulzhu0903 · 2025-04-19T05:41:45Z

I appreciate your library for the rectangular spotlight—it's been very helpful.
However, I’ve noticed some light leakage occurring behind the light source. I’m wondering if I might be using it incorrectly. I even tried placing a plane behind it to block the light, but unfortunately, that didn’t solve the issue.
Could you please advise me on how to fix this?
Thank you in advance for your help.

WREQI · 2025-04-21T07:31:16Z

@paulzhu0903 Do you support the latest version?

WREQI · 2025-04-21T07:32:25Z

Can we share code? @paulzhu0903

paulzhu0903 · 2025-04-21T16:59:36Z

Sorry, I am a newbie. I just modified N8python's code to create a scene with a projector. I found the light leakage issue. The code is similar to N8python's demo.

N8 added 2 commits September 2, 2022 16:05

add spotlight projection options

206d4b7

make the projected vertexes line up

3c2cf72

mrdoob added this to the r145 milestone Sep 2, 2022

revert all da changes

558ed08

N8 added 2 commits September 2, 2022 16:50

oop

99a2237

fix formatting

4c74ddc

gkjohnson reviewed Sep 9, 2022

View reviewed changes

mrdoob modified the milestones: r145, r146 Sep 29, 2022

mrdoob modified the milestones: r146, r147 Oct 27, 2022

mrdoob modified the milestones: r147, r148 Nov 30, 2022

mrdoob modified the milestones: r148, r149 Dec 22, 2022

mrdoob modified the milestones: r149, r150 Jan 26, 2023

mrdoob modified the milestones: r150, r151 Feb 23, 2023

mrdoob modified the milestones: r151, r152 Mar 30, 2023

mrdoob removed this from the r152 milestone Apr 27, 2023

mrdoob added this to the r170 milestone Sep 26, 2024

mrdoob modified the milestones: r170, r171 Oct 31, 2024

mrdoob modified the milestones: r171, r172 Nov 29, 2024

mrdoob modified the milestones: r172, r173 Dec 31, 2024

mrdoob modified the milestones: r173, r174 Jan 31, 2025

mrdoob modified the milestones: r174, r175 Feb 27, 2025

mrdoob modified the milestones: r175, r176 Mar 28, 2025

mrdoob modified the milestones: r176, r177 Apr 24, 2025

WREQI mentioned this pull request Apr 25, 2025

Spotlights Use Rectangular Projection #30993

Closed

sunag mentioned this pull request Apr 28, 2025

WebGPURenderer: Introduce ProjectorLight #31022

Merged

5 tasks

mrdoob modified the milestones: r177, r178 May 30, 2025

mrdoob modified the milestones: r178, r179 Jun 30, 2025

This was referenced Jul 22, 2025

WebGPURenderer: ProjectorLight unintentionally emits light from its back side #31461

Closed

ProjectorLightNode: Fix back-projection. #31473

Merged

mrdoob modified the milestones: r179, r180 Aug 1, 2025

		@@ -1,4 +1,4 @@
		export default /* glsl */`
		export default /* glsl */ `

Uh oh!

Create Option to Have Spotlights Use Rectangular Projection #24589

Are you sure you want to change the base?

Create Option to Have Spotlights Use Rectangular Projection #24589

Uh oh!

Conversation

N8python commented Sep 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob commented Sep 2, 2022

Uh oh!

mrdoob commented Sep 2, 2022

Uh oh!

N8python commented Sep 2, 2022

Uh oh!

N8python commented Sep 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gkjohnson commented Sep 7, 2022

Uh oh!

N8python commented Sep 7, 2022

Uh oh!

gkjohnson commented Sep 7, 2022

Uh oh!

N8python commented Sep 8, 2022

Uh oh!

gkjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WREQI commented Apr 15, 2025

Uh oh!

paulzhu0903 commented Apr 19, 2025

Uh oh!

WREQI commented Apr 21, 2025

Uh oh!

WREQI commented Apr 21, 2025

Uh oh!

paulzhu0903 commented Apr 21, 2025

Uh oh!

Uh oh!

N8python commented Sep 2, 2022 •

edited

Loading

N8python commented Sep 2, 2022 •

edited

Loading