From f26e972b86bbcdd509950ec3d7dac7228111074a Mon Sep 17 00:00:00 2001 From: gonnavis Date: Thu, 18 Feb 2021 19:09:10 +0800 Subject: [PATCH] Directly call getRenderTarget() in onWindowResize() & remove stats.js. --- examples/webgl_mirror.html | 27 +++++++++++++-------------- examples/webgl_mirror_nodes.html | 29 +++++++++++++++++------------ 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/examples/webgl_mirror.html b/examples/webgl_mirror.html index 7a19ceb9c40b29..8d7326456c2185 100644 --- a/examples/webgl_mirror.html +++ b/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(); - } diff --git a/examples/webgl_mirror_nodes.html b/examples/webgl_mirror_nodes.html index a09f3b70a9a2ca..067caa6e1af4c1 100644 --- a/examples/webgl_mirror_nodes.html +++ b/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();