WebGLRenderer: Moved scissor/viewport state code to WebGLSate. Fixes #7732.

src/Three.Legacy.js

@@ -446,6 +446,11 @@ Object.defineProperties( THREE.WebGLRenderer.prototype, {
 			return this.extensions.get( 'ANGLE_instanced_arrays' );
 		}
 	},
+	enableScissorTest: {
+		value: function () {
+			console.warn( 'THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest().' );
+		}
+	},
 	initMaterial: {
 		value: function () {
 			console.warn( 'THREE.WebGLRenderer: .initMaterial() has been removed.' );

src/renderers/WebGLRenderer.js

@@ -88,6 +88,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	_usedTextureUnits = 0,
 
+	_scissor = new THREE.Vector4( 0, 0, _canvas.width, _canvas.height ),
+	_scissorTest = false,
+
 	_viewport = new THREE.Vector4( 0, 0, _canvas.width, _canvas.height ),
 
 	_currentWidth = 0,
@@ -238,7 +241,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		state.init();
 
-		_gl.viewport( _viewport.x, _viewport.y, _viewport.z, _viewport.w );
+		state.scissor( _scissor );
+		state.viewport( _viewport );
 
 		glClearColor( _clearColor.r, _clearColor.g, _clearColor.b, _clearAlpha );
 
@@ -370,39 +374,23 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	this.setViewport = function ( x, y, width, height ) {
 
-		if ( _currentRenderTarget === null ) {
-
-			x *= pixelRatio;
-			y *= pixelRatio;
-
-			width *= pixelRatio;
-			height *= pixelRatio;
-
-			_viewport.set( x, y, width, height );
+		_viewport.set( x, y, width, height ).multiplyScalar( pixelRatio );
 
-		}
-
-		_gl.viewport( x, y, width, height );
+		state.viewport( _viewport );
 
 	};
 
 	this.setScissor = function ( x, y, width, height ) {
 
-		if ( _currentRenderTarget === null ) {
+		_scissor.set( x, y, width, height ).multiplyScalar( pixelRatio );
 
-			x *= pixelRatio;
-			y *= pixelRatio;
-
-			width *= pixelRatio;
-			height *= pixelRatio;
-
-		}
-
-		_gl.scissor( x, y, width, height );
+		state.scissor( _scissor );
 
 	};
 
-	this.enableScissorTest = function ( boolean ) {
+	this.setScissorTest = function ( boolean ) {
+
+		_scissorTest = boolean;
 
 		state.setScissorTest( boolean );
 
@@ -3381,7 +3369,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 		}
 
 		var isCube = ( renderTarget instanceof THREE.WebGLRenderTargetCube );
-		var framebuffer, viewport;
+		var framebuffer, scissor, scissorTest, viewport;
 
 		if ( renderTarget ) {
 
@@ -3397,12 +3385,18 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			}
 
+			scissor = renderTarget.scissor;
+			scissorTest = renderTarget.scissorTest;
+
 			viewport = renderTarget.viewport;
 
 		} else {
 
 			framebuffer = null;
 
+			scissor = _scissor;
+			scissorTest = _scissorTest;
+
 			viewport = _viewport;
 
 		}
@@ -3410,12 +3404,16 @@ THREE.WebGLRenderer = function ( parameters ) {
 		if ( framebuffer !== _currentFramebuffer ) {
 
 			_gl.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
-			_gl.viewport( viewport.x, viewport.y, viewport.z, viewport.w );
 
 			_currentFramebuffer = framebuffer;
 
 		}
 
+		state.scissor( scissor );
+		state.setScissorTest( scissorTest );
+
+		state.viewport( viewport );
+
 		if ( isCube ) {
 
 			var textureProperties = properties.get( renderTarget.texture );
@@ -3423,8 +3421,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		_currentWidth = viewport.width;
-		_currentHeight = viewport.height;
+		_currentWidth = viewport.z;
+		_currentHeight = viewport.w;
 
 	};
 

src/renderers/webgl/WebGLShadowMap.js

@@ -96,10 +96,6 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 		if ( scope.enabled === false ) return;
 		if ( scope.autoUpdate === false && scope.needsUpdate === false ) return;
 
-		// Save GL state
-
-		var currentScissorTest = _state.getScissorTest();
-
 		// Set GL state for depth map.
 		_gl.clearColor( 1, 1, 1, 1 );
 		_state.disable( _gl.BLEND );
@@ -209,8 +205,9 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 					_lookTarget.add( cubeDirections[ face ] );
 					shadowCamera.up.copy( cubeUps[ face ] );
 					shadowCamera.lookAt( _lookTarget );
+
 					var vpDimensions = cube2DViewPorts[ face ];
-					_renderer.setViewport( vpDimensions.x, vpDimensions.y, vpDimensions.z, vpDimensions.w );
+					_state.viewport( vpDimensions );
 
 				} else {
 
@@ -294,13 +291,8 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 		var clearColor = _renderer.getClearColor(),
 		clearAlpha = _renderer.getClearAlpha();
 		_renderer.setClearColor( clearColor, clearAlpha );
-		_state.enable( _gl.BLEND );
 
-		if ( currentScissorTest === true ) {
-
-			_state.setScissorTest( true );
-
-		}
+		_state.enable( _gl.BLEND );
 
 		if ( scope.cullFace === THREE.CullFaceFront ) {