Started THREE.WebGLState.

examples/js/renderers/plugins/DepthPassPlugin.js

@@ -33,21 +33,21 @@ THREE.DepthPassPlugin = function () {
 			vertexShader: depthShader.vertexShader,
 			uniforms: depthUniforms
 		} );
-		
+
 		_depthMaterialMorph = new THREE.ShaderMaterial( {
 			fragmentShader: depthShader.fragmentShader,
 			vertexShader: depthShader.vertexShader,
 			uniforms: depthUniforms,
 			morphTargets: true
 		} );
-		
+
 		_depthMaterialSkin = new THREE.ShaderMaterial( {
 			fragmentShader: depthShader.fragmentShader,
 			vertexShader: depthShader.vertexShader,
 			uniforms: depthUniforms,
 			skinning: true
 		} );
-		
+
 		_depthMaterialMorphSkin = new THREE.ShaderMaterial( {
 			fragmentShader: depthShader.fragmentShader,
 			vertexShader: depthShader.vertexShader,
@@ -86,7 +86,7 @@ THREE.DepthPassPlugin = function () {
 		_gl.clearColor( 1, 1, 1, 1 );
 		_gl.disable( _gl.BLEND );
 
-		_renderer.setDepthTest( true );
+		_renderer.state.setDepthTest( true );
 
 		// update scene
 
@@ -105,7 +105,7 @@ THREE.DepthPassPlugin = function () {
 		_renderer.clear();
 
 		// set object matrices & frustum culling
-		
+
 		_renderList.length = 0;
 		projectObject(scene, scene, camera);
 
@@ -188,31 +188,31 @@ THREE.DepthPassPlugin = function () {
 		_gl.enable( _gl.BLEND );
 
 	};
-	
+
 	function projectObject(scene, object,camera) {
-		
+
 		if ( object.visible ) {
-	
+
 			var webglObjects = _webglObjects[object.id];
-	
+
 			if (webglObjects && (object.frustumCulled === false || _frustum.intersectsObject( object ) === true) ) {
-		
-		
+
+
 				for (var i = 0, l = webglObjects.length; i < l; i ++) {
-			
+
 					var webglObject = webglObjects[i];
-					
+
 					object._modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 					_renderList.push(webglObject);
-					
+
 				}
 			}
-	
+
 			for (var i = 0, l = object.children.length; i < l; i ++) {
-				
+
 				projectObject(scene, object.children[i], camera);
 			}
-		
+
 		}
 	}
 
@@ -228,4 +228,3 @@ THREE.DepthPassPlugin = function () {
 	};
 
 };
-

src/renderers/WebGLRenderer.js

@@ -123,24 +123,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 	_currentDoubleSided = - 1,
 	_currentFlipSided = - 1,
 
-	_currentBlending = - 1,
-
-	_currentBlendEquation = - 1,
-	_currentBlendSrc = - 1,
-	_currentBlendDst = - 1,
-	_currentBlendEquationAlpha = - 1,
-	_currentBlendSrcAlpha = - 1,
-	_currentBlendDstAlpha = - 1,
-
-	_currentDepthTest = - 1,
-	_currentDepthWrite = - 1,
-
-	_currentPolygonOffset = null,
-	_currentPolygonOffsetFactor = null,
-	_currentPolygonOffsetUnits = null,
-
-	_currentLineWidth = null,
-
 	_viewportX = 0,
 	_viewportY = 0,
 	_viewportWidth = _canvas.width,
@@ -226,6 +208,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	}
 
+	var state = new THREE.WebGLState( _gl, paramThreeToGL );
+
 	if ( _gl.getShaderPrecisionFormat === undefined ) {
 
 		_gl.getShaderPrecisionFormat = function () {
@@ -296,9 +280,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 		_currentProgram = null;
 		_currentCamera = null;
 
-		_currentBlending = - 1;
-		_currentDepthTest = - 1;
-		_currentDepthWrite = - 1;
 		_currentDoubleSided = - 1;
 		_currentFlipSided = - 1;
 		_currentGeometryProgram = '';
@@ -312,11 +293,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
+		state.reset();
+
 	};
 
 	setDefaultGLState();
 
 	this.context = _gl;
+	this.state = state;
 
 	// GPU capabilities
 
@@ -2728,7 +2712,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			var mode = ( object.mode === THREE.LineStrip ) ? _gl.LINE_STRIP : _gl.LINES;
 
-			setLineWidth( material.linewidth );
+			state.setLineWidth( material.linewidth );
 
 			var index = geometry.attributes.index;
 
@@ -3022,7 +3006,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			if ( material.wireframe ) {
 
-				setLineWidth( material.wireframeLinewidth );
+				state.setLineWidth( material.wireframeLinewidth );
+
 				if ( updateBuffers ) _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometryGroup.__webglLineBuffer );
 				_gl.drawElements( _gl.LINES, geometryGroup.__webglLineCount, type, 0 );
 
@@ -3045,7 +3030,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			var mode = ( object.mode === THREE.LineStrip ) ? _gl.LINE_STRIP : _gl.LINES;
 
-			setLineWidth( material.linewidth );
+			state.setLineWidth( material.linewidth );
 
 			_gl.drawArrays( mode, 0, geometryGroup.__webglLineCount );
 
@@ -3409,7 +3394,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			var overrideMaterial = scene.overrideMaterial;
 
 			// Reset blending in case material.transparent = false. setMaterial() doesn't set blending in such case.
-			this.setBlending( THREE.NoBlending );
+			state.setBlending( THREE.NoBlending );
 			setMaterial( overrideMaterial );
 
 			renderObjects( opaqueObjects, camera, lights, fog, overrideMaterial );
@@ -3420,7 +3405,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			// opaque pass (front-to-back order)
 
-			this.setBlending( THREE.NoBlending );
+			state.setBlending( THREE.NoBlending );
 
 			renderObjects( opaqueObjects, camera, lights, fog, null );
 			renderObjectsImmediate( _webglObjectsImmediate, 'opaque', camera, lights, fog, null );
@@ -3447,8 +3432,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		// Ensure depth buffer writing is enabled so it can be cleared on next render
 
-		this.setDepthTest( true );
-		this.setDepthWrite( true );
+		state.setDepthTest( true );
+		state.setDepthWrite( true );
 
 		// _gl.finish();
 
@@ -4352,13 +4337,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( material.transparent === true ) {
 
-			_this.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha );
+			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha );
 
 		}
 
-		_this.setDepthTest( material.depthTest );
-		_this.setDepthWrite( material.depthWrite );
-		setPolygonOffset( material.polygonOffset, material.polygonOffsetFactor, material.polygonOffsetUnits );
+		state.setDepthTest( material.depthTest );
+		state.setDepthWrite( material.depthWrite );
+		state.setPolygonOffset( material.polygonOffset, material.polygonOffsetFactor, material.polygonOffsetUnits );
 
 	}
 
@@ -5494,163 +5479,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	this.setDepthTest = function ( depthTest ) {
-
-		if ( _currentDepthTest !== depthTest ) {
-
-			if ( depthTest ) {
-
-				_gl.enable( _gl.DEPTH_TEST );
-
-			} else {
-
-				_gl.disable( _gl.DEPTH_TEST );
-
-			}
-
-			_currentDepthTest = depthTest;
-
-		}
-
-	};
-
-	this.setDepthWrite = function ( depthWrite ) {
-
-		if ( _currentDepthWrite !== depthWrite ) {
-
-			_gl.depthMask( depthWrite );
-			_currentDepthWrite = depthWrite;
-
-		}
-
-	};
-
-	function setLineWidth ( width ) {
-
-		width *= pixelRatio;
-
-		if ( width !== _currentLineWidth ) {
-
-			_gl.lineWidth( width );
-
-			_currentLineWidth = width;
-
-		}
-
-	}
-
-	function setPolygonOffset ( polygonoffset, factor, units ) {
-
-		if ( _currentPolygonOffset !== polygonoffset ) {
-
-			if ( polygonoffset ) {
-
-				_gl.enable( _gl.POLYGON_OFFSET_FILL );
-
-			} else {
-
-				_gl.disable( _gl.POLYGON_OFFSET_FILL );
-
-			}
-
-			_currentPolygonOffset = polygonoffset;
-
-		}
-
-		if ( polygonoffset && ( _currentPolygonOffsetFactor !== factor || _currentPolygonOffsetUnits !== units ) ) {
-
-			_gl.polygonOffset( factor, units );
-
-			_currentPolygonOffsetFactor = factor;
-			_currentPolygonOffsetUnits = units;
-
-		}
-
-	}
-
-	this.setBlending = function ( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha ) {
-
-		if ( blending !== _currentBlending ) {
-
-			if ( blending === THREE.NoBlending ) {
-
-				_gl.disable( _gl.BLEND );
-
-			} else if ( blending === THREE.AdditiveBlending ) {
-
-				_gl.enable( _gl.BLEND );
-				_gl.blendEquation( _gl.FUNC_ADD );
-				_gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE );
-
-			} else if ( blending === THREE.SubtractiveBlending ) {
-
-				// TODO: Find blendFuncSeparate() combination
-				_gl.enable( _gl.BLEND );
-				_gl.blendEquation( _gl.FUNC_ADD );
-				_gl.blendFunc( _gl.ZERO, _gl.ONE_MINUS_SRC_COLOR );
-
-			} else if ( blending === THREE.MultiplyBlending ) {
-
-				// TODO: Find blendFuncSeparate() combination
-				_gl.enable( _gl.BLEND );
-				_gl.blendEquation( _gl.FUNC_ADD );
-				_gl.blendFunc( _gl.ZERO, _gl.SRC_COLOR );
-
-			} else if ( blending === THREE.CustomBlending ) {
-
-				_gl.enable( _gl.BLEND );
-
-			} else {
-
-				_gl.enable( _gl.BLEND );
-				_gl.blendEquationSeparate( _gl.FUNC_ADD, _gl.FUNC_ADD );
-				_gl.blendFuncSeparate( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
-
-			}
-
-			_currentBlending = blending;
-
-		}
-
-		if ( blending === THREE.CustomBlending ) {
-
-			blendEquationAlpha = blendEquationAlpha || blendEquation;
-			blendSrcAlpha = blendSrcAlpha || blendSrc;
-			blendDstAlpha = blendDstAlpha || blendDst;
-
-			if ( blendEquation !== _currentBlendEquation || blendEquationAlpha !== _currentBlendEquationAlpha ) {
-
-				_gl.blendEquationSeparate( paramThreeToGL( blendEquation ), paramThreeToGL( blendEquationAlpha ) );
-
-				_currentBlendEquation = blendEquation;
-				_currentBlendEquationAlpha = blendEquationAlpha;
-
-			}
-
-			if ( blendSrc !== _currentBlendSrc || blendDst !== _currentBlendDst || blendSrcAlpha !== _currentBlendSrcAlpha || blendDstAlpha !== _currentBlendDstAlpha ) {
-
-				_gl.blendFuncSeparate( paramThreeToGL( blendSrc ), paramThreeToGL( blendDst ), paramThreeToGL( blendSrcAlpha ), paramThreeToGL( blendDstAlpha ) );
-
-				_currentBlendSrc = blendSrc;
-				_currentBlendDst = blendDst;
-				_currentBlendSrcAlpha = blendSrcAlpha;
-				_currentBlendDstAlpha = blendDstAlpha;
-
-			}
-
-		} else {
-
-			_currentBlendEquation = null;
-			_currentBlendSrc = null;
-			_currentBlendDst = null;
-			_currentBlendEquationAlpha = null;
-			_currentBlendSrcAlpha = null;
-			_currentBlendDstAlpha = null;
-
-		}
-
-	};
-
 	// Textures
 
 	function setTextureParameters ( textureType, texture, isImagePowerOfTwo ) {

src/renderers/webgl/WebGLState.js

@@ -0,0 +1,188 @@
+/**
+* @author mrdoob / http://mrdoob.com/
+*/
+
+THREE.WebGLState = function ( gl, paramThreeToGL ) {
+
+	var currentBlending = - 1;
+	var currentBlendEquation = - 1;
+	var currentBlendSrc = - 1;
+	var currentBlendDst = - 1;
+	var currentBlendEquationAlpha = - 1;
+	var currentBlendSrcAlpha = - 1;
+	var currentBlendDstAlpha = - 1;
+
+	this.setBlending = function ( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha ) {
+
+		if ( blending !== currentBlending ) {
+
+			if ( blending === THREE.NoBlending ) {
+
+				gl.disable( gl.BLEND );
+
+			} else if ( blending === THREE.AdditiveBlending ) {
+
+				gl.enable( gl.BLEND );
+				gl.blendEquation( gl.FUNC_ADD );
+				gl.blendFunc( gl.SRC_ALPHA, gl.ONE );
+
+			} else if ( blending === THREE.SubtractiveBlending ) {
+
+				// TODO: Find blendFuncSeparate() combination
+				gl.enable( gl.BLEND );
+				gl.blendEquation( gl.FUNC_ADD );
+				gl.blendFunc( gl.ZERO, gl.ONE_MINUS_SRC_COLOR );
+
+			} else if ( blending === THREE.MultiplyBlending ) {
+
+				// TODO: Find blendFuncSeparate() combination
+				gl.enable( gl.BLEND );
+				gl.blendEquation( gl.FUNC_ADD );
+				gl.blendFunc( gl.ZERO, gl.SRC_COLOR );
+
+			} else if ( blending === THREE.CustomBlending ) {
+
+				gl.enable( gl.BLEND );
+
+			} else {
+
+				gl.enable( gl.BLEND );
+				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+				gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA );
+
+			}
+
+			currentBlending = blending;
+
+		}
+
+		if ( blending === THREE.CustomBlending ) {
+
+			blendEquationAlpha = blendEquationAlpha || blendEquation;
+			blendSrcAlpha = blendSrcAlpha || blendSrc;
+			blendDstAlpha = blendDstAlpha || blendDst;
+
+			if ( blendEquation !== currentBlendEquation || blendEquationAlpha !== currentBlendEquationAlpha ) {
+
+				gl.blendEquationSeparate( paramThreeToGL( blendEquation ), paramThreeToGL( blendEquationAlpha ) );
+
+				currentBlendEquation = blendEquation;
+				currentBlendEquationAlpha = blendEquationAlpha;
+
+			}
+
+			if ( blendSrc !== currentBlendSrc || blendDst !== currentBlendDst || blendSrcAlpha !== currentBlendSrcAlpha || blendDstAlpha !== currentBlendDstAlpha ) {
+
+				gl.blendFuncSeparate( paramThreeToGL( blendSrc ), paramThreeToGL( blendDst ), paramThreeToGL( blendSrcAlpha ), paramThreeToGL( blendDstAlpha ) );
+
+				currentBlendSrc = blendSrc;
+				currentBlendDst = blendDst;
+				currentBlendSrcAlpha = blendSrcAlpha;
+				currentBlendDstAlpha = blendDstAlpha;
+
+			}
+
+		} else {
+
+			currentBlendEquation = null;
+			currentBlendSrc = null;
+			currentBlendDst = null;
+			currentBlendEquationAlpha = null;
+			currentBlendSrcAlpha = null;
+			currentBlendDstAlpha = null;
+
+		}
+
+	};
+
+	var currentDepthTest = - 1;
+
+	this.setDepthTest = function ( depthTest ) {
+
+		if ( currentDepthTest !== depthTest ) {
+
+			if ( depthTest ) {
+
+				gl.enable( gl.DEPTH_TEST );
+
+			} else {
+
+				gl.disable( gl.DEPTH_TEST );
+
+			}
+
+			currentDepthTest = depthTest;
+
+		}
+
+	};
+
+	var currentDepthWrite = - 1;
+
+	this.setDepthWrite = function ( depthWrite ) {
+
+		if ( currentDepthWrite !== depthWrite ) {
+
+			gl.depthMask( depthWrite );
+			currentDepthWrite = depthWrite;
+
+		}
+
+	};
+
+	var currentLineWidth = null;
+
+	this.setLineWidth = function ( width ) {
+
+		if ( width !== currentLineWidth ) {
+
+			gl.lineWidth( width );
+
+			currentLineWidth = width;
+
+		}
+
+	};
+
+	var currentPolygonOffset = null;
+	var currentPolygonOffsetFactor = null;
+	var currentPolygonOffsetUnits = null;
+
+	this.setPolygonOffset = function ( polygonoffset, factor, units ) {
+
+		if ( currentPolygonOffset !== polygonoffset ) {
+
+			if ( polygonoffset ) {
+
+				gl.enable( gl.POLYGON_OFFSET_FILL );
+
+			} else {
+
+				gl.disable( gl.POLYGON_OFFSET_FILL );
+
+			}
+
+			currentPolygonOffset = polygonoffset;
+
+		}
+
+		if ( polygonoffset && ( currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units ) ) {
+
+			gl.polygonOffset( factor, units );
+
+			currentPolygonOffsetFactor = factor;
+			currentPolygonOffsetUnits = units;
+
+		}
+
+	};
+
+	this.reset = function () {
+
+		currentBlending = - 1;
+		currentDepthTest = - 1;
+		currentDepthWrite = - 1;
+
+	};
+
+};

src/renderers/webgl/plugins/LensFlarePlugin.js

@@ -321,7 +321,7 @@ THREE.LensFlarePlugin = function ( renderer, flares ) {
 			// calc object screen position
 
 			var flare = flares[ i ];
-			
+
 			tempPosition.set( flare.matrixWorld.elements[12], flare.matrixWorld.elements[13], flare.matrixWorld.elements[14] );
 
 			tempPosition.applyMatrix4( camera.matrixWorldInverse );
@@ -419,7 +419,7 @@ THREE.LensFlarePlugin = function ( renderer, flares ) {
 						gl.uniform1f( uniforms.opacity, sprite.opacity );
 						gl.uniform3f( uniforms.color, sprite.color.r, sprite.color.g, sprite.color.b );
 
-						renderer.setBlending( sprite.blending, sprite.blendEquation, sprite.blendSrc, sprite.blendDst );
+						renderer.state.setBlending( sprite.blending, sprite.blendEquation, sprite.blendSrc, sprite.blendDst );
 						renderer.setTexture( sprite.texture, 1 );
 
 						gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );

src/renderers/webgl/plugins/ShadowMapPlugin.js

@@ -15,7 +15,7 @@ THREE.ShadowMapPlugin = function ( _renderer, _lights, _webglObjects, _webglObje
 	_max = new THREE.Vector3(),
 
 	_matrixPosition = new THREE.Vector3(),
-	
+
 	_renderList = [];
 
 	// init
@@ -89,7 +89,7 @@ THREE.ShadowMapPlugin = function ( _renderer, _lights, _webglObjects, _webglObje
 
 		}
 
-		_renderer.setDepthTest( true );
+		_renderer.state.setDepthTest( true );
 
 		// preprocess lights
 		// 	- skip lights that are not casting shadows

src/renderers/webgl/plugins/SpritePlugin.js

@@ -214,9 +214,9 @@ THREE.SpritePlugin = function ( renderer, sprites ) {
 			gl.uniform1f( uniforms.rotation, material.rotation );
 			gl.uniform2fv( uniforms.scale, scale );
 
-			renderer.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
-			renderer.setDepthTest( material.depthTest );
-			renderer.setDepthWrite( material.depthWrite );
+			renderer.state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
+			renderer.state.setDepthTest( material.depthTest );
+			renderer.state.setDepthWrite( material.depthWrite );
 
 			if ( material.map && material.map.image && material.map.image.width ) {
 

utils/build/includes/common.json

@@ -146,6 +146,7 @@
 	"src/renderers/webgl/WebGLExtensions.js",
 	"src/renderers/webgl/WebGLProgram.js",
 	"src/renderers/webgl/WebGLShader.js",
+	"src/renderers/webgl/WebGLState.js",
 	"src/renderers/webgl/plugins/LensFlarePlugin.js",
 	"src/renderers/webgl/plugins/ShadowMapPlugin.js",
 	"src/renderers/webgl/plugins/SpritePlugin.js"