WebGLRenderer: Fixed shadow not being renderer at first frame. See #8379.

src/renderers/WebGLRenderer.js

@@ -139,7 +139,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		pointShadowMatrix: [],
 		hemi: [],
 
-		shadows: [],
+		shadows: 0,
 		shadowsPointLight: 0
 
 	},
@@ -303,7 +303,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	// shadow map
 
-	var shadowMap = new THREE.WebGLShadowMap( this, _lights, objects );
+	var shadowMap = new THREE.WebGLShadowMap( this, lights, objects );
 
 	this.shadowMap = shadowMap;
 
@@ -1158,12 +1158,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		setupLights( lights, camera );
-
 		//
 
 		shadowMap.render( scene, camera );
 
+		setupLights( lights, camera );
+
 		//
 
 		_infoRender.calls = 0;
@@ -1625,8 +1625,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		if ( materialProperties.lightsHash !== undefined &&
-			materialProperties.lightsHash !== _lights.hash ) {
+		if ( materialProperties.lightsHash !== _lights.hash ) {
 
 			material.needsUpdate = true;
 
@@ -2602,10 +2601,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 		directionalLength = 0,
 		pointLength = 0,
 		spotLength = 0,
-		hemiLength = 0,
-
-		shadowsLength = 0;
+		hemiLength = 0;
 
+		_lights.shadows = 0;
 		_lights.shadowsPointLight = 0;
 
 		for ( l = 0, ll = lights.length; l < ll; l ++ ) {
@@ -2640,7 +2638,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					uniforms.shadowRadius = light.shadow.radius;
 					uniforms.shadowMapSize = light.shadow.mapSize;
 
-					_lights.shadows[ shadowsLength ++ ] = light;
+					_lights.shadows ++;
 
 				}
 
@@ -2675,7 +2673,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					uniforms.shadowRadius = light.shadow.radius;
 					uniforms.shadowMapSize = light.shadow.mapSize;
 
-					_lights.shadows[ shadowsLength ++ ] = light;
+					_lights.shadows ++;
 
 				}
 
@@ -2702,7 +2700,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					uniforms.shadowRadius = light.shadow.radius;
 					uniforms.shadowMapSize = light.shadow.mapSize;
 
-					_lights.shadows[ shadowsLength ++ ] = light;
+					_lights.shadows ++;
 
 				}
 
@@ -2747,9 +2745,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		_lights.point.length = pointLength;
 		_lights.hemi.length = hemiLength;
 
-		_lights.shadows.length = shadowsLength;
-
-		_lights.hash = directionalLength + ',' + pointLength + ',' + spotLength + ',' + hemiLength + ',' + shadowsLength;
+		_lights.hash = directionalLength + ',' + pointLength + ',' + spotLength + ',' + hemiLength + ',' + _lights.shadows;
 
 	}
 

src/renderers/webgl/WebGLPrograms.js

@@ -172,7 +172,7 @@ THREE.WebGLPrograms = function ( renderer, capabilities ) {
 
 			pointLightShadows: lights.shadowsPointLight,
 
-			shadowMapEnabled: renderer.shadowMap.enabled && object.receiveShadow && lights.shadows.length > 0,
+			shadowMapEnabled: renderer.shadowMap.enabled && object.receiveShadow && lights.shadows > 0,
 			shadowMapType: renderer.shadowMap.type,
 
 			toneMapping: renderer.toneMapping,

src/renderers/webgl/WebGLShadowMap.js

@@ -10,6 +10,8 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 	_frustum = new THREE.Frustum(),
 	_projScreenMatrix = new THREE.Matrix4(),
 
+	_lightShadows = [],
+
 	_shadowMapSize = new THREE.Vector2(),
 
 	_lookTarget = new THREE.Vector3(),
@@ -92,14 +94,29 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 
 	this.render = function ( scene, camera ) {
 
-		var faceCount, isPointLight;
-		var shadows = _lights.shadows;
-
-		if ( shadows.length === 0 ) return;
-
 		if ( scope.enabled === false ) return;
 		if ( scope.autoUpdate === false && scope.needsUpdate === false ) return;
 
+		// Collect lights with shadows
+
+		var lightShadowsLength = 0;
+
+		for ( var i = 0, l = _lights.length; i < l; i ++ ) {
+
+			var light = _lights[ i ];
+
+			if ( light.castShadow ) {
+
+				_lightShadows[ lightShadowsLength ++ ] = light;
+
+			}
+
+		}
+
+		if ( lightShadowsLength === 0 ) return;
+
+		_lightShadows.length = lightShadowsLength;
+
 		// Set GL state for depth map.
 		_state.clearColor( 1, 1, 1, 1 );
 		_state.disable( _gl.BLEND );
@@ -111,9 +128,11 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 
 		// render depth map
 
-		for ( var i = 0, il = shadows.length; i < il; i ++ ) {
+		var faceCount, isPointLight;
+
+		for ( var i = 0, il = _lightShadows.length; i < il; i ++ ) {
 
-			var light = shadows[ i ];
+			var light = _lightShadows[ i ];
 
 			var shadow = light.shadow;
 			var shadowCamera = shadow.camera;