Merge pull request #14935 from WestLangley/dev-rect_light_orientation

Adopt glTF convention: lights face local neg-z direction

Author: mrdoob

docs/api/en/helpers/RectAreaLightHelper.html

@@ -23,7 +23,7 @@ <h3>Example</h3>
 
 var helper = new THREE.RectAreaLightHelper( light );
 
-scene.add( helper );
+light.add( helper ); // helper must be added as a child of the light
 		</code>
 
 

docs/api/en/lights/RectAreaLight.html

@@ -41,7 +41,7 @@ <h2>Examples</h2>
 scene.add( rectLight )
 
 rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
-scene.add( rectLightHelper );
+rectLight.add( rectLightHelper );
 
 			</code>
 		</p>

examples/webgl_lights_rectarealight.html

@@ -108,13 +108,12 @@
 				rectLight.position.set( 5, 5, 0 );
 				scene.add( rectLight );
 
-				var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial() );
+				var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { side: THREE.BackSide } ) );
 				rectLightMesh.scale.x = rectLight.width;
 				rectLightMesh.scale.y = rectLight.height;
 				rectLight.add( rectLightMesh );
 
 				var rectLightMeshBack = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { color: 0x080808 } ) );
-				rectLightMeshBack.rotation.y = Math.PI;
 				rectLightMesh.add( rectLightMeshBack );
 
 				var geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );

src/core/Object3D.js

@@ -332,7 +332,7 @@ Object3D.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 			position.setFromMatrixPosition( this.matrixWorld );
 
-			if ( this.isCamera ) {
+			if ( this.isCamera || this.isLight ) {
 
 				m1.lookAt( position, target, this.up );
 

src/helpers/RectAreaLightHelper.js

@@ -2,79 +2,82 @@
  * @author abelnation / http://github.com/abelnation
  * @author Mugen87 / http://github.com/Mugen87
  * @author WestLangley / http://github.com/WestLangley
+ *
+ *  This helper must be added as a child of the light
  */
 
-import { Object3D } from '../core/Object3D.js';
 import { Line } from '../objects/Line.js';
+import { Mesh } from '../objects/Mesh.js';
 import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
+import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
+import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
-import { BufferAttribute } from '../core/BufferAttribute.js';
 
 function RectAreaLightHelper( light, color ) {
 
-	Object3D.call( this );
+	this.type = 'RectAreaLightHelper';
 
 	this.light = light;
-	this.light.updateMatrixWorld();
 
-	this.matrix = light.matrixWorld;
-	this.matrixAutoUpdate = false;
+	this.color = color; // optional hardwired color for the helper
 
-	this.color = color;
+	var positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, - 1, 0, 1, 1, 0 ];
+
+	var geometry = new BufferGeometry();
+	geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+	geometry.computeBoundingSphere();
 
 	var material = new LineBasicMaterial( { fog: false } );
 
-	var geometry = new BufferGeometry();
+	Line.call( this, geometry, material );
 
-	geometry.addAttribute( 'position', new BufferAttribute( new Float32Array( 5 * 3 ), 3 ) );
+	//
 
-	this.line = new Line( geometry, material );
-	this.add( this.line );
+	var positions2 = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
 
+	var geometry2 = new BufferGeometry();
+	geometry2.addAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
+	geometry2.computeBoundingSphere();
+
+	this.add( new Mesh( geometry2, new MeshBasicMaterial( { side: THREE.BackSide, fog: false } ) ) );
 
 	this.update();
 
 }
 
-RectAreaLightHelper.prototype = Object.create( Object3D.prototype );
+RectAreaLightHelper.prototype = Object.create( Line.prototype );
 RectAreaLightHelper.prototype.constructor = RectAreaLightHelper;
 
-RectAreaLightHelper.prototype.dispose = function () {
-
-	this.children[ 0 ].geometry.dispose();
-	this.children[ 0 ].material.dispose();
-
-};
-
 RectAreaLightHelper.prototype.update = function () {
 
-	// calculate new dimensions of the helper
+	this.scale.set( 0.5 * this.light.width, 0.5 * this.light.height, 1 );
 
-	var hx = this.light.width * 0.5;
-	var hy = this.light.height * 0.5;
+	if ( this.color !== undefined ) {
 
-	var position = this.line.geometry.attributes.position;
-	var array = position.array;
+		this.material.color.set( this.color );
+		this.children[ 0 ].material.color.set( this.color );
 
-	// update vertices
+	} else {
 
-	array[ 0 ] = hx; array[ 1 ] = - hy; array[ 2 ] = 0;
-	array[ 3 ] = hx; array[ 4 ] = hy; array[ 5 ] = 0;
-	array[ 6 ] = - hx; array[ 7 ] = hy; array[ 8 ] = 0;
-	array[ 9 ] = - hx; array[ 10 ] = - hy; array[ 11 ] = 0;
-	array[ 12 ] = hx; array[ 13 ] = - hy; array[ 14 ] = 0;
+		this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	position.needsUpdate = true;
+		// prevent hue shift
+		var c = this.material.color;
+		var max = Math.max( c.r, c.g, c.b );
+		if ( max > 1 ) c.multiplyScalar( 1 / max );
 
-	if ( this.color !== undefined ) {
+		this.children[ 0 ].material.color.copy( this.material.color );
 
-		this.line.material.color.set( this.color );
+	}
 
-	} else {
+};
 
-		this.line.material.color.copy( this.light.color );
+RectAreaLightHelper.prototype.dispose = function () {
 
-	}
+	this.geometry.dispose();
+	this.material.dispose();
+	this.children[ 0 ].geometry.dispose();
+	this.children[ 0 ].material.dispose();
 
 };
 

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

@@ -36,10 +36,10 @@ float clearCoatDHRApprox( const in float roughness, const in float dotNL ) {
 		float roughness = material.specularRoughness;
 
 		vec3 rectCoords[ 4 ];
-		rectCoords[ 0 ] = lightPos - halfWidth - halfHeight; // counterclockwise
-		rectCoords[ 1 ] = lightPos + halfWidth - halfHeight;
-		rectCoords[ 2 ] = lightPos + halfWidth + halfHeight;
-		rectCoords[ 3 ] = lightPos - halfWidth + halfHeight;
+		rectCoords[ 0 ] = lightPos + halfWidth - halfHeight; // counterclockwise; light shines in local neg z direction
+		rectCoords[ 1 ] = lightPos - halfWidth - halfHeight;
+		rectCoords[ 2 ] = lightPos - halfWidth + halfHeight;
+		rectCoords[ 3 ] = lightPos + halfWidth + halfHeight;
 
 		vec2 uv = LTC_Uv( normal, viewDir, roughness );