Add reflector resolutionScale factor to webgl mirror example (#31692)

* Add reflector resolution factor

* Add resolutionScale factor

* Add GUI

Author: WestLangley

examples/webgl_mirror.html

@@ -33,6 +33,8 @@
 
 			import * as THREE from 'three';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Reflector } from 'three/addons/objects/Reflector.js';
 
@@ -44,6 +46,10 @@
 
 			let groundMirror, verticalMirror;
 
+			let resolutionScale = 1; // render target scale factor in [ 0, 1 ]
+
+			const size = new THREE.Vector2();
+
 			init();
 
 			function init() {
@@ -78,11 +84,14 @@
 
 				let geometry, material;
 
+				renderer.getDrawingBufferSize( size );
+				size.multiplyScalar( resolutionScale ).round();
+
 				geometry = new THREE.CircleGeometry( 40, 64 );
 				groundMirror = new Reflector( geometry, {
 					clipBias: 0.003,
-					textureWidth: window.innerWidth * window.devicePixelRatio,
-					textureHeight: window.innerHeight * window.devicePixelRatio,
+					textureWidth: size.width,
+					textureHeight: size.heignt,
 					color: 0xb5b5b5
 				} );
 				groundMirror.position.y = 0.5;
@@ -92,8 +101,8 @@
 				geometry = new THREE.PlaneGeometry( 100, 100 );
 				verticalMirror = new Reflector( geometry, {
 					clipBias: 0.003,
-					textureWidth: window.innerWidth * window.devicePixelRatio,
-					textureHeight: window.innerHeight * window.devicePixelRatio,
+					textureWidth: size.width,
+					textureHeight: size.heignt,
 					color: 0xc1cbcb
 				} );
 				verticalMirror.position.y = 50;
@@ -169,6 +178,26 @@
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 
+				// GUI
+
+				const params = {
+					resolution: resolutionScale,
+				};
+
+				const gui = new GUI();
+
+				const folder = gui.addFolder( 'Mirrors' );
+
+				folder.add( params, 'resolution', 0.2, 1, 0.1 )
+					.onChange( function ( val ) {
+
+						resolutionScale = val;
+						onWindowResize();
+
+					} );
+
+				folder.open();
+
 				window.addEventListener( 'resize', onWindowResize );
 
 			}
@@ -180,14 +209,11 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				groundMirror.getRenderTarget().setSize(
-					window.innerWidth * window.devicePixelRatio,
-					window.innerHeight * window.devicePixelRatio
-				);
-				verticalMirror.getRenderTarget().setSize(
-					window.innerWidth * window.devicePixelRatio,
-					window.innerHeight * window.devicePixelRatio
-				);
+				renderer.getDrawingBufferSize( size );
+				size.multiplyScalar( resolutionScale ).round();
+
+				groundMirror.getRenderTarget().setSize( size.width, size.height );
+				verticalMirror.getRenderTarget().setSize( size.width, size.height );
 
 			}