Merge pull request #18045 from elalish/autoClear

Several PMREMGenerator fixes

examples/js/pmrem/PMREMGenerator.js

@@ -90,6 +90,7 @@ THREE.PMREMGenerator = ( function () {
 			}
 			_applyPMREM( cubeUVRenderTarget );
 			_cleanup();
+			cubeUVRenderTarget.scissorTest = false;
 
 			return cubeUVRenderTarget;
 
@@ -121,6 +122,7 @@ THREE.PMREMGenerator = ( function () {
 			_textureToCubeUV( cubemap, cubeUVRenderTarget );
 			_applyPMREM( cubeUVRenderTarget );
 			_cleanup();
+			cubeUVRenderTarget.scissorTest = false;
 
 			return cubeUVRenderTarget;
 
@@ -363,14 +365,20 @@ THREE.PMREMGenerator = ( function () {
 		new THREE.WebGLRenderTarget( 3 * SIZE_MAX, 3 * SIZE_MAX, params );
 		cubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
 		cubeUVRenderTarget.texture.name = 'PMREM.cubeUv';
+		cubeUVRenderTarget.scissorTest = true;
 		return cubeUVRenderTarget;
 
 	}
 
 	function _setViewport( x, y, width, height ) {
 
-		var dpr = _renderer.getPixelRatio();
-		_renderer.setViewport( x / dpr, y / dpr, width / dpr, height / dpr );
+		var invDpr = 1.0 / _renderer.getPixelRatio();
+		x *= invDpr;
+		y *= invDpr;
+		width *= invDpr;
+		height *= invDpr;
+		_renderer.setViewport( x, y, width, height );
+		_renderer.setScissor( x, y, width, height );
 
 	}
 

examples/js/postprocessing/CubeTexturePass.js

@@ -44,8 +44,8 @@ THREE.CubeTexturePass.prototype = Object.assign( Object.create( THREE.Pass.proto
 		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
 		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
 
-		this.cubeMesh.material.uniforms[ "tCube" ].value = this.envMap;
-		this.cubeMesh.material.uniforms[ "opacity" ].value = this.opacity;
+		this.cubeMesh.material.envMap = this.envMap;
+		this.cubeMesh.material.opacity = this.opacity;
 		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
 
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );

examples/jsm/pmrem/PMREMGenerator.js

@@ -116,6 +116,7 @@ var PMREMGenerator = ( function () {
 			}
 			_applyPMREM( cubeUVRenderTarget );
 			_cleanup();
+			cubeUVRenderTarget.scissorTest = false;
 
 			return cubeUVRenderTarget;
 
@@ -147,6 +148,7 @@ var PMREMGenerator = ( function () {
 			_textureToCubeUV( cubemap, cubeUVRenderTarget );
 			_applyPMREM( cubeUVRenderTarget );
 			_cleanup();
+			cubeUVRenderTarget.scissorTest = false;
 
 			return cubeUVRenderTarget;
 
@@ -389,14 +391,20 @@ var PMREMGenerator = ( function () {
 		new WebGLRenderTarget( 3 * SIZE_MAX, 3 * SIZE_MAX, params );
 		cubeUVRenderTarget.texture.mapping = CubeUVReflectionMapping;
 		cubeUVRenderTarget.texture.name = 'PMREM.cubeUv';
+		cubeUVRenderTarget.scissorTest = true;
 		return cubeUVRenderTarget;
 
 	}
 
 	function _setViewport( x, y, width, height ) {
 
-		var dpr = _renderer.getPixelRatio();
-		_renderer.setViewport( x / dpr, y / dpr, width / dpr, height / dpr );
+		var invDpr = 1.0 / _renderer.getPixelRatio();
+		x *= invDpr;
+		y *= invDpr;
+		width *= invDpr;
+		height *= invDpr;
+		_renderer.setViewport( x, y, width, height );
+		_renderer.setScissor( x, y, width, height );
 
 	}
 

examples/jsm/postprocessing/CubeTexturePass.js

@@ -55,8 +55,8 @@ CubeTexturePass.prototype = Object.assign( Object.create( Pass.prototype ), {
 		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
 		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
 
-		this.cubeMesh.material.uniforms[ "tCube" ].value = this.envMap;
-		this.cubeMesh.material.uniforms[ "opacity" ].value = this.opacity;
+		this.cubeMesh.material.envMap = this.envMap;
+		this.cubeMesh.material.opacity = this.opacity;
 		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
 
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );

examples/webgl_materials_envmaps.html

@@ -105,17 +105,8 @@
 					side: THREE.BackSide
 				} );
 
-				cubeMaterial.uniforms[ "tCube" ].value = textureCube;
-				Object.defineProperty( cubeMaterial, 'map', {
-
-					get: function () {
-
-						return this.uniforms.tCube.value;
-
-					}
-
-				} );
-
+				cubeMaterial.envMap = textureCube;
+				
 				// Skybox
 
 				cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );

examples/webgl_materials_envmaps_hdr.html

@@ -36,12 +36,49 @@
 			var container, stats;
 			var camera, scene, renderer, controls;
 			var torusMesh, planeMesh;
-			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
+			var generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
 			var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
 
 			init();
 			animate();
 
+			function getEnvScene() {
+
+				var envScene = new THREE.Scene();
+
+				var geometry = new THREE.BoxBufferGeometry();
+    			geometry.deleteAttribute('uv');
+    			var roomMaterial = new THREE.MeshStandardMaterial({metalness: 0, side: THREE.BackSide});
+				var room = new THREE.Mesh(geometry, roomMaterial);
+				room.scale.setScalar(10);
+				envScene.add(room);
+
+				var mainLight = new THREE.PointLight(0xffffff, 0.2, 0, 2);
+				mainLight.position.set(0, 0, 0);
+				envScene.add(mainLight);
+
+				var lightMaterial = new THREE.MeshBasicMaterial();
+				lightMaterial.color.setScalar(20);
+
+				var light1 = new THREE.Mesh(geometry, lightMaterial);
+				light1.position.set(-5, 2, 0);
+				light1.scale.set(0.1, 1, 1);
+				envScene.add(light1);
+
+				var light2 = new THREE.Mesh(geometry, lightMaterial);
+				light2.position.set(0, 5, 0);
+				light2.scale.set(1, 0.1, 1);
+				envScene.add(light2);
+
+				var light2 = new THREE.Mesh(geometry, lightMaterial);
+				light2.position.set(2, 1, 5);
+				light2.scale.set(1.5, 2, 0.1);
+				envScene.add(light2);
+
+				return envScene;
+
+			}
+
 			function init() {
 
 				container = document.createElement( 'div' );
@@ -84,6 +121,9 @@
 
 				}
 
+				var envScene = getEnvScene();
+				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
+
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
@@ -142,7 +182,7 @@
 
 				var gui = new GUI();
 
-				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
+				gui.add( params, 'envMap', [ 'Generated', 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
 				gui.add( params, 'metalness', 0, 1, 0.01 );
 				gui.add( params, 'exposure', 0, 2, 0.01 );
@@ -182,6 +222,10 @@
 
 				switch ( params.envMap ) {
 
+					case 'Generated':
+						renderTarget = generatedCubeRenderTarget;
+						cubeMap = generatedCubeRenderTarget.texture;
+						break;
 					case 'LDR':
 						renderTarget = ldrCubeRenderTarget;
 						cubeMap = ldrCubeMap;

examples/webgl_postprocessing_backgrounds.html

@@ -159,13 +159,13 @@
 
 				} );
 
-				cubeTexturePassP = new CubeTexturePass( cameraP );
-				composer.addPass( cubeTexturePassP );
+				cubeTexturePassP = null;
 
 				var ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
-					cubeTexturePassP.envMap = ldrCubeMap;
+					cubeTexturePassP = new CubeTexturePass( cameraP, ldrCubeMap );
+					composer.insertPass( cubeTexturePassP, 2 );
 
 				} );
 
@@ -222,8 +222,10 @@
 				texturePass.enabled = params.texturePass;
 				texturePass.opacity = params.texturePassOpacity;
 
-				cubeTexturePassP.enabled = params.cubeTexturePass;
-				cubeTexturePassP.opacity = params.cubeTexturePassOpacity;
+				if ( cubeTexturePassP != null ) {
+					cubeTexturePassP.enabled = params.cubeTexturePass;
+					cubeTexturePassP.opacity = params.cubeTexturePassOpacity;
+				}
 
 				renderPass.enabled = params.renderPass;
 

examples/webgl_postprocessing_dof2.html

@@ -86,7 +86,6 @@
 				textureCube.format = THREE.RGBFormat;
 
 				var shader = THREE.ShaderLib[ 'cube' ];
-				shader.uniforms[ 'tCube' ].value = textureCube;
 
 				var skyMaterial = new THREE.ShaderMaterial( {
 
@@ -98,6 +97,8 @@
 
 				} );
 
+				skyMaterial.envMap = textureCube;
+
 				var sky = new THREE.Mesh( new THREE.BoxBufferGeometry( 1000, 1000, 1000 ), skyMaterial );
 				scene.add( sky );