Create Option to Have Spotlights Use Rectangular Projection

examples/webgl_lights_spotlight.html

@@ -36,7 +36,7 @@
 
 			let renderer, scene, camera;
 
-			let spotLight, lightHelper;
+			let spotLight, lightHelper, lightHelperProjector;
 
 			init();
 
@@ -93,7 +93,7 @@
 				spotLight.decay = 2;
 				spotLight.distance = 100;
 				spotLight.map = textures[ 'disturb.jpg' ];
-
+				spotLight.projector = true;
 				spotLight.castShadow = true;
 				spotLight.shadow.mapSize.width = 1024;
 				spotLight.shadow.mapSize.height = 1024;
@@ -104,6 +104,8 @@
 
 				lightHelper = new THREE.SpotLightHelper( spotLight );
 				scene.add( lightHelper );
+				lightHelperProjector = new THREE.CameraHelper( spotLight.shadow.camera );
+				scene.add( lightHelperProjector );
 
 				//
 
@@ -151,7 +153,9 @@
 					penumbra: spotLight.penumbra,
 					decay: spotLight.decay,
 					focus: spotLight.shadow.focus,
-					shadows: true
+					shadows: true,
+					projector: true,
+					projectorAspect: 1
 				};
 
 				gui.add( params, 'map', textures ).onChange( function ( val ) {
@@ -171,6 +175,16 @@
 					spotLight.intensity = val;
 
 				} );
+				gui.add( params, 'projector' ).onChange( function ( val ) {
+
+					spotLight.projector = val;
+
+				} );
+				gui.add( params, 'projectorAspect', 0.1, 10).onChange( function ( val ) {
+
+					spotLight.projectorAspect = val;
+
+				} );
 
 
 				gui.add( params, 'distance', 50, 200 ).onChange( function ( val ) {
@@ -241,7 +255,14 @@
 				spotLight.position.z = Math.sin( time ) * 25;
 
 				lightHelper.update();
-
+				lightHelperProjector.update();
+				if (spotLight.projector) {
+					lightHelper.visible = false;
+					lightHelperProjector.visible = true;
+				} else {
+					lightHelper.visible = true;
+					lightHelperProjector.visible = false;
+				}
 				renderer.render( scene, camera );
 
 			}

src/lights/SpotLight.js

@@ -21,7 +21,8 @@ class SpotLight extends Light {
 		this.angle = angle;
 		this.penumbra = penumbra;
 		this.decay = decay; // for physically correct lights, should be 2.
-
+		this.projector = false;
+		this.projectorAspect = 1;
 		this.map = null;
 
 		this.shadow = new SpotLightShadow();

src/lights/SpotLightShadow.js

@@ -19,7 +19,7 @@ class SpotLightShadow extends LightShadow {
 		const camera = this.camera;
 
 		const fov = MathUtils.RAD2DEG * 2 * light.angle * this.focus;
-		const aspect = this.mapSize.width / this.mapSize.height;
+		const aspect = ( this.mapSize.width / this.mapSize.height ) * ( light.projector ? light.projectorAspect : 1 );
 		const far = light.distance || camera.far;
 
 		if ( fov !== camera.fov || aspect !== camera.aspect || far !== camera.far ) {

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

@@ -1,4 +1,4 @@
-export default /* glsl */`
+export default /* glsl */ `
 /**
  * This is a template that can be used to light a material, it uses pluggable
  * RenderEquations (RE)for specific lighting scenarios.
@@ -95,8 +95,6 @@ IncidentLight directLight;
 
 		spotLight = spotLights[ i ];
 
-		getSpotLightInfo( spotLight, geometry, directLight );
-
 		// spot lights are ordered [shadows with maps, shadows without maps, maps without shadows, none]
 		#if ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS_WITH_MAPS )
 		#define SPOT_LIGHT_MAP_INDEX UNROLLED_LOOP_INDEX
@@ -105,6 +103,11 @@ IncidentLight directLight;
 		#else
 		#define SPOT_LIGHT_MAP_INDEX ( UNROLLED_LOOP_INDEX - NUM_SPOT_LIGHT_SHADOWS + NUM_SPOT_LIGHT_SHADOWS_WITH_MAPS )
 		#endif
+		#if ( SPOT_LIGHT_MAP_INDEX < NUM_SPOT_LIGHT_MAPS )
+		getSpotLightInfo( spotLight, geometry, vSpotLightCoord[ i ], directLight );
+		#else 
+		getSpotLightInfo( spotLight, geometry, vec4(0.0), directLight );
+		#endif
 
 		#if ( SPOT_LIGHT_MAP_INDEX < NUM_SPOT_LIGHT_MAPS )
 			spotLightCoord = vSpotLightCoord[ i ].xyz / vSpotLightCoord[ i ].w;

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

@@ -1,4 +1,4 @@
-export default /* glsl */`
+export default /* glsl */ `
 uniform bool receiveShadow;
 uniform vec3 ambientLightColor;
 uniform vec3 lightProbe[ 9 ];
@@ -144,12 +144,17 @@ float getSpotAttenuation( const in float coneCosine, const in float penumbraCosi
 		float decay;
 		float coneCos;
 		float penumbraCos;
+		bool projector;
 	};
 
 	uniform SpotLight spotLights[ NUM_SPOT_LIGHTS ];
-
+	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);
+	}
 	// light is an out parameter as having it as a return value caused compiler errors on some devices
-	void getSpotLightInfo( const in SpotLight spotLight, const in GeometricContext geometry, out IncidentLight light ) {
+	void getSpotLightInfo( const in SpotLight spotLight, const in GeometricContext geometry, const in vec4 spotCoord, out IncidentLight light ) {
 
 		vec3 lVector = spotLight.position - geometry.position;
 
@@ -158,7 +163,10 @@ float getSpotAttenuation( const in float coneCosine, const in float penumbraCosi
 		float angleCos = dot( light.direction, spotLight.direction );
 
 		float spotAttenuation = getSpotAttenuation( spotLight.coneCos, spotLight.penumbraCos, angleCos );
-
+		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);
+		}
 		if ( spotAttenuation > 0.0 ) {
 
 			float lightDistance = length( lVector );

src/renderers/webgl/WebGLLights.js

@@ -37,7 +37,8 @@ function UniformsCache() {
 						distance: 0,
 						coneCos: 0,
 						penumbraCos: 0,
-						decay: 0
+						decay: 0,
+						projector: false
 					};
 					break;
 
@@ -126,7 +127,7 @@ function ShadowUniformsCache() {
 					};
 					break;
 
-				// TODO (abelnation): set RectAreaLight shadow uniforms
+                    // TODO (abelnation): set RectAreaLight shadow uniforms
 
 			}
 
@@ -204,7 +205,9 @@ function WebGLLights( extensions, capabilities ) {
 
 	function setup( lights, physicallyCorrectLights ) {
 
-		let r = 0, g = 0, b = 0;
+		let r = 0,
+			g = 0,
+			b = 0;
 
 		for ( let i = 0; i < 9; i ++ ) state.probe[ i ].set( 0, 0, 0 );
 
@@ -289,9 +292,9 @@ function WebGLLights( extensions, capabilities ) {
 				uniforms.distance = distance;
 
 				uniforms.coneCos = Math.cos( light.angle );
-				uniforms.penumbraCos = Math.cos( light.angle * ( 1 - light.penumbra ) );
+				uniforms.penumbraCos = Math.cos( light.angle * ( light.projector ? light.penumbra : 1 - ( light.penumbra ) ) );
 				uniforms.decay = light.decay;
-
+				uniforms.projector = light.projector;
 				state.spot[ spotLength ] = uniforms;
 
 				const shadow = light.shadow;
@@ -398,7 +401,7 @@ function WebGLLights( extensions, capabilities ) {
 
 			if ( capabilities.isWebGL2 ) {
 
-				// WebGL 2
+				// WebGL 2ÍÍ
 
 				state.rectAreaLTC1 = UniformsLib.LTC_FLOAT_1;
 				state.rectAreaLTC2 = UniformsLib.LTC_FLOAT_2;
@@ -434,14 +437,14 @@ function WebGLLights( extensions, capabilities ) {
 		const hash = state.hash;
 
 		if ( hash.directionalLength !== directionalLength ||
-			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 ) {
 
 			state.directional.length = directionalLength;
 			state.spot.length = spotLength;