1. Directly call getRenderTarget() in onWindowResize().

2. BlurNode also honor devicePixelRatio.
3. emove stats.js.

Author: gonnavis

examples/webgl_mirror.html

@@ -26,7 +26,6 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Reflector } from './jsm/objects/Reflector.js';
-			import Stats from "./jsm/libs/stats.module.js";
 
 			// camera
 			const VIEW_ANGLE = 45;
@@ -40,8 +39,7 @@
 
 			let sphereGroup, smallSphere;
 
-			let groundMirrorRenderTarget, verticalMirrorRenderTarget;
-			let stats;
+			let groundMirror, verticalMirror;
 
 			init();
 			animate();
@@ -78,25 +76,23 @@
 				let geometry, material;
 
 				geometry = new THREE.CircleGeometry( 40, 64 );
-				const groundMirror = new Reflector( geometry, {
+				groundMirror = new Reflector( geometry, {
 					clipBias: 0.003,
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio,
 					color: 0x777777
 				} );
-				groundMirrorRenderTarget = groundMirror.getRenderTarget()
 				groundMirror.position.y = 0.5;
 				groundMirror.rotateX( - Math.PI / 2 );
 				scene.add( groundMirror );
 
 				geometry = new THREE.PlaneGeometry( 100, 100 );
-				const verticalMirror = new Reflector( geometry, {
+				verticalMirror = new Reflector( geometry, {
 					clipBias: 0.003,
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio,
 					color: 0x889999
 				} );
-				verticalMirrorRenderTarget = verticalMirror.getRenderTarget()
 				verticalMirror.position.y = 50;
 				verticalMirror.position.z = - 50;
 				scene.add( verticalMirror );
@@ -170,10 +166,8 @@
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( "resize", onWindowResize, false );
+
 			}
 
 			function onWindowResize() {
@@ -183,8 +177,15 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				groundMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
-				verticalMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
+
+				groundMirror.getRenderTarget().setSize(
+					window.innerWidth * window.devicePixelRatio,
+					window.innerHeight * window.devicePixelRatio
+				);
+				verticalMirror.getRenderTarget().setSize(
+					window.innerWidth * window.devicePixelRatio,
+					window.innerHeight * window.devicePixelRatio
+				);
 
 			}
 
@@ -206,8 +207,6 @@
 
 				renderer.render( scene, camera );
 
-				stats.update();
-
 			}
 
 		</script>

examples/webgl_mirror_nodes.html

@@ -26,7 +26,6 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
-			import Stats from "./jsm/libs/stats.module.js";
 
 			import {
 				NodeFrame,
@@ -65,8 +64,7 @@
 
 			const frame = new NodeFrame();
 
-			let groundMirrorRenderTarget;
-			let stats;
+			let groundMirror;
 			let blurMirror;
 
 			function init() {
@@ -92,10 +90,8 @@
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
 				window.addEventListener( "resize", onWindowResize, false );
+				
 			}
 
 			function onWindowResize() {
@@ -105,8 +101,16 @@
 				camera.updateProjectionMatrix();
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				groundMirrorRenderTarget.setSize(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);
-				blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
+
+				groundMirror.getRenderTarget().setSize(
+					window.innerWidth * window.devicePixelRatio,
+					window.innerHeight * window.devicePixelRatio
+				);
+
+				blurMirror.size.set(
+					window.innerWidth * window.devicePixelRatio,
+					window.innerHeight * window.devicePixelRatio
+				);
 				blurMirror.updateFrame()
 
 			}
@@ -119,12 +123,11 @@
 
 				// reflector/mirror plane
 				geometry = new THREE.PlaneGeometry( 100, 100 );
-				const groundMirror = new ReflectorRTT( geometry, { 
+				groundMirror = new ReflectorRTT( geometry, {
 					clipBias: 0.003,
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio
 				} );
-				groundMirrorRenderTarget = groundMirror.getRenderTarget()
 
 				const mask = new SwitchNode( new TextureNode( decalDiffuse ), 'w' );
 
@@ -150,7 +153,10 @@
 				);
 
 				blurMirror = new BlurNode( mirror );
-				blurMirror.size = new THREE.Vector2( window.innerWidth, window.innerHeight );
+				blurMirror.size = new THREE.Vector2(
+					window.innerWidth * window.devicePixelRatio,
+					window.innerHeight * window.devicePixelRatio
+				);
 				blurMirror.uv = new ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
 				blurMirror.uv.keywords[ "projCoord" ] = new OperatorNode( mirror.offset, mirror.uv, OperatorNode.ADD );
 				blurMirror.radius.x = blurMirror.radius.y = 0;
@@ -286,7 +292,6 @@
 
 				render();
 
-				stats.update();
 			}
 
 			init();