WebGLRenderer: Using Object.keys() so the for loops can get optimised. See #5186.

src/renderers/WebGLRenderer.js

@@ -588,9 +588,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( geometry.__webglCustomAttributesList !== undefined ) {
 
-			for ( var id in geometry.__webglCustomAttributesList ) {
+			var attributes = geometry.__webglCustomAttributesList;
+			var keys = Object.keys( attributes );
 
-				_gl.deleteBuffer( geometry.__webglCustomAttributesList[ id ].buffer );
+			for ( var i = 0; i < keys.length; i ++ ) {
+
+				var name = keys[ i ];
+
+				_gl.deleteBuffer( attributes[ name ].buffer );
 
 			}
 
@@ -607,12 +612,15 @@ THREE.WebGLRenderer = function ( parameters ) {
 		if ( geometry instanceof THREE.BufferGeometry ) {
 
 			var attributes = geometry.attributes;
+			var keys = Object.keys( attributes );
 
-			for ( var key in attributes ) {
+			for ( var i = 0; i < keys.length; i ++ ) {
 
-				if ( attributes[ key ].buffer !== undefined ) {
+				var name = keys[ i ];
 
-					_gl.deleteBuffer( attributes[ key ].buffer );
+				if ( attributes[ name ].buffer !== undefined ) {
+
+					_gl.deleteBuffer( attributes[ name ].buffer );
 
 				}
 
@@ -786,9 +794,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			}
 
-			for ( var a in material.attributes ) {
+			var keys = Object.keys( material.attributes );
+
+			for ( var i = 0; i < keys.length; i ++ ) {
 
-				var attribute = material.attributes[ a ];
+				var name = keys[ i ];
+				var attribute = material.attributes[ name ];
 
 				if ( ! attribute.__webglInitialized || attribute.createUniqueBuffers ) {
 
@@ -806,7 +817,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					attribute.array = new Float32Array( nvertices * size );
 
 					attribute.buffer = _gl.createBuffer();
-					attribute.buffer.belongsToAttribute = a;
+					attribute.buffer.belongsToAttribute = name;
 
 					attribute.needsUpdate = true;
 
@@ -930,17 +941,23 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			}
 
-			for ( var a in material.attributes ) {
+			var keys = Object.keys( material.attributes );
+
+			for ( var i = 0; i < keys.length; i ++ ) {
 
 				// Do a shallow copy of the attribute object so different geometryGroup chunks use different
 				// attribute buffers which are correctly indexed in the setMeshBuffers function
 
-				var originalAttribute = material.attributes[ a ];
+				var name = keys[ i ];
+				var originalAttribute = material.attributes[ name ];
 
 				var attribute = {};
 
-				for ( var property in originalAttribute ) {
+				var keys2 = Object.keys( originalAttribute );
+
+				for ( var j = 0; j < keys2.length; j ++ ) {
 
+					var property = keys2[ j ];
 					attribute[ property ] = originalAttribute[ property ];
 
 				}
@@ -961,7 +978,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 					attribute.array = new Float32Array( nvertices * size );
 
 					attribute.buffer = _gl.createBuffer();
-					attribute.buffer.belongsToAttribute = a;
+					attribute.buffer.belongsToAttribute = name;
 
 					originalAttribute.needsUpdate = true;
 					attribute.__original = originalAttribute;
@@ -996,7 +1013,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function initDirectBuffers( geometry ) {
 
-		for ( var name in geometry.attributes ) {
+		var keys = Object.keys( geometry.attributes );
+
+		for ( var i = 0; i < keys.length; i ++ ) {
+
+			var name = keys[ i ];
 
 			var bufferType = ( name === 'index' ) ? _gl.ELEMENT_ARRAY_BUFFER : _gl.ARRAY_BUFFER;
 
@@ -2308,11 +2329,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		var attributes = geometry.attributes;
 
-		var attributeName, attributeItem;
+		var keys = Object.keys( attributes );
 
-		for ( attributeName in attributes ) {
+		for ( var i = 0; i < keys.length; i ++ ) {
 
-			attributeItem = attributes[ attributeName ];
+			var attributeName = keys[ i ];
+			var attributeItem = attributes[ attributeName ];
 
 			if ( attributeItem.needsUpdate ) {
 
@@ -2437,10 +2459,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function setupVertexAttributes( material, programAttributes, geometryAttributes, startIndex ) {
 
-		for ( var attributeName in programAttributes ) {
+		var keys = Object.keys( programAttributes );
+
+		for ( var i = 0; i < keys.length; i ++ ) {
+
+			var attributeName = keys[ i ];
 
-			var attributePointer = programAttributes[ attributeName ];
 			var attributeItem = geometryAttributes[ attributeName ];
+			var attributePointer = programAttributes[ attributeName ];
 
 			if ( attributePointer >= 0 ) {
 
@@ -3874,9 +3900,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function areCustomAttributesDirty( material ) {
 
-		for ( var a in material.attributes ) {
+		var keys = Object.keys( material.attributes );
+
+		for ( var i = 0; i < keys.length; i ++ ) {
+
+			var name = keys[ i ];
 
-			if ( material.attributes[ a ].needsUpdate ) return true;
+			if ( material.attributes[ name ].needsUpdate ) return true;
 
 		}
 
@@ -3886,9 +3916,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function clearCustomAttributes( material ) {
 
-		for ( var a in material.attributes ) {
+		var keys = Object.keys( material.attributes );
 
-			material.attributes[ a ].needsUpdate = false;
+		for ( var i = 0; i < keys.length; i ++ ) {
+
+			var name = keys[ i ];
+
+			material.attributes[ name ].needsUpdate = false;
 
 		}
 
@@ -3940,7 +3974,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		material.addEventListener( 'dispose', onMaterialDispose );
 
-		var u, a, identifiers, i, parameters, maxLightCount, maxBones, maxShadows, shaderID;
+		var shaderID;
 
 		if ( material instanceof THREE.MeshDepthMaterial ) {
 
@@ -3999,13 +4033,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 		// heuristics to create shader parameters according to lights in the scene
 		// (not to blow over maxLights budget)
 
-		maxLightCount = allocateLights( lights );
-
-		maxShadows = allocateShadows( lights );
-
-		maxBones = allocateBones( object );
+		var maxLightCount = allocateLights( lights );
+		var maxShadows = allocateShadows( lights );
+		var maxBones = allocateBones( object );
 
-		parameters = {
+		var parameters = {
 
 			precision: _precision,
 			supportsVertexTextures: _supportsVertexTextures,
@@ -4070,14 +4102,28 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		for ( var d in material.defines ) {
+		var keys;
+
+		if ( material.defines !== undefined ) {
+
+			keys = Object.keys( material.defines );
+
+			for ( var i = 0; i < keys.length; i ++ ) {
 
-			chunks.push( d );
-			chunks.push( material.defines[ d ] );
+				var d = keys[ i ];
+
+				chunks.push( d );
+				chunks.push( material.defines[ d ] );
+
+			}
 
 		}
 
-		for ( var p in parameters ) {
+		keys = Object.keys( parameters );
+
+		for ( var i = 0; i < keys.length; i ++ ) {
+
+			var p = keys[ i ];
 
 			chunks.push( p );
 			chunks.push( parameters[ p ] );
@@ -4160,8 +4206,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		material.uniformsList = [];
 
-		for ( u in material.__webglShader.uniforms ) {
+		keys = Object.keys( material.__webglShader.uniforms );
+
+		for ( var i = 0; i < keys.length; i ++ ) {
 
+			var u = keys[ i ];
 			var location = material.program.uniforms[ u ];
 
 			if ( location ) {