From 1dfbba57a8efdbfcee0a885dce6804d09ed6ef6e Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Wed, 8 May 2019 13:20:01 +0200 Subject: [PATCH] EffectComposer: Introduce .setPixelRatio() and harmonize resizing. --- examples/js/postprocessing/EffectComposer.js | 41 +++++++++++++++---- examples/misc_controls_fly.html | 5 +-- examples/webgl_materials_video.html | 2 +- examples/webgl_points_dynamic.html | 13 +++--- .../webgl_postprocessing_backgrounds.html | 6 +-- examples/webgl_postprocessing_smaa.html | 6 +-- examples/webgl_postprocessing_sobel.html | 8 ++-- examples/webgl_postprocessing_ssaa.html | 6 +-- .../webgl_postprocessing_ssaa_unbiased.html | 7 +--- examples/webgl_postprocessing_taa.html | 6 +-- .../webgl_postprocessing_unreal_bloom.html | 1 - ...postprocessing_unreal_bloom_selective.html | 6 +-- examples/webgl_shader_lava.html | 5 +-- 13 files changed, 57 insertions(+), 55 deletions(-) diff --git a/examples/js/postprocessing/EffectComposer.js b/examples/js/postprocessing/EffectComposer.js index 194a6f40ead82a..8c7dd4608e7803 100644 --- a/examples/js/postprocessing/EffectComposer.js +++ b/examples/js/postprocessing/EffectComposer.js @@ -15,10 +15,20 @@ THREE.EffectComposer = function ( renderer, renderTarget ) { stencilBuffer: false }; - var size = renderer.getDrawingBufferSize( new THREE.Vector2() ); - renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters ); + var size = renderer.getSize( new THREE.Vector2() ); + this._pixelRatio = renderer.getPixelRatio(); + this._width = size.width; + this._height = size.height; + + renderTarget = new THREE.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, parameters ); renderTarget.texture.name = 'EffectComposer.rt1'; + } else { + + this._pixelRatio = 1; + this._width = renderTarget.width; + this._height = renderTarget.height; + } this.renderTarget1 = renderTarget; @@ -162,10 +172,13 @@ Object.assign( THREE.EffectComposer.prototype, { if ( renderTarget === undefined ) { - var size = this.renderer.getDrawingBufferSize( new THREE.Vector2() ); + var size = this.renderer.getSize( new THREE.Vector2() ); + this._pixelRatio = this.renderer.getPixelRatio(); + this._width = size.width; + this._height = size.height; renderTarget = this.renderTarget1.clone(); - renderTarget.setSize( size.width, size.height ); + renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio ); } @@ -181,15 +194,29 @@ Object.assign( THREE.EffectComposer.prototype, { setSize: function ( width, height ) { - this.renderTarget1.setSize( width, height ); - this.renderTarget2.setSize( width, height ); + this._width = width; + this._height = height; + + var effectiveWidth = this._width * this._pixelRatio; + var effectiveHeight = this._height * this._pixelRatio; + + this.renderTarget1.setSize( effectiveWidth, effectiveHeight ); + this.renderTarget2.setSize( effectiveWidth, effectiveHeight ); for ( var i = 0; i < this.passes.length; i ++ ) { - this.passes[ i ].setSize( width, height ); + this.passes[ i ].setSize( effectiveWidth, effectiveHeight ); } + }, + + setPixelRatio: function ( pixelRatio ) { + + this._pixelRatio = pixelRatio; + + this.setSize( this._width, this._height ); + } } ); diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html index 7442db8b7fa19a..f4e8697074fb3d 100644 --- a/examples/misc_controls_fly.html +++ b/examples/misc_controls_fly.html @@ -252,12 +252,11 @@ SCREEN_HEIGHT = window.innerHeight; SCREEN_WIDTH = window.innerWidth; - renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); - camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); - composer.reset(); + renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); + composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); } diff --git a/examples/webgl_materials_video.html b/examples/webgl_materials_video.html index f9e359468804bc..ba2c93f5988427 100644 --- a/examples/webgl_materials_video.html +++ b/examples/webgl_materials_video.html @@ -244,7 +244,7 @@ camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); - composer.reset(); + composer.setSize( window.innerWidth, window.innerHeight ); } diff --git a/examples/webgl_points_dynamic.html b/examples/webgl_points_dynamic.html index f7b4bbdc56e202..f208c74bf69e8e 100644 --- a/examples/webgl_points_dynamic.html +++ b/examples/webgl_points_dynamic.html @@ -135,8 +135,8 @@ effectFocus = new THREE.ShaderPass( THREE.FocusShader ); - effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth; - effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight; + effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio; + effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio; composer = new THREE.EffectComposer( renderer ); @@ -156,17 +156,16 @@ function onWindowResize() { - renderer.setSize( window.innerWidth, window.innerHeight ); - camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); camera.lookAt( scene.position ); - composer.reset(); + renderer.setSize( window.innerWidth, window.innerHeight ); + composer.setSize( window.innerWidth, window.innerHeight ); - effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth; - effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight; + effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio; + effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio; } diff --git a/examples/webgl_postprocessing_backgrounds.html b/examples/webgl_postprocessing_backgrounds.html index 91fdc506fceaf6..e4aded4a99fa66 100644 --- a/examples/webgl_postprocessing_backgrounds.html +++ b/examples/webgl_postprocessing_backgrounds.html @@ -239,11 +239,7 @@ cameraO.updateProjectionMatrix();*/ renderer.setSize( width, height ); - - var pixelRatio = renderer.getPixelRatio(); - var newWidth = Math.floor( width * pixelRatio ) || 1; - var newHeight = Math.floor( height * pixelRatio ) || 1; - composer.setSize( newWidth, newHeight ); + composer.setSize( width, height ); } diff --git a/examples/webgl_postprocessing_smaa.html b/examples/webgl_postprocessing_smaa.html index b2ce73ecda25a5..69672127514605 100644 --- a/examples/webgl_postprocessing_smaa.html +++ b/examples/webgl_postprocessing_smaa.html @@ -92,11 +92,7 @@ camera.updateProjectionMatrix(); renderer.setSize( width, height ); - - var pixelRatio = renderer.getPixelRatio(); - var newWidth = Math.floor( width * pixelRatio ) || 1; - var newHeight = Math.floor( height * pixelRatio ) || 1; - composer.setSize( newWidth, newHeight ); + composer.setSize( width, height ); } diff --git a/examples/webgl_postprocessing_sobel.html b/examples/webgl_postprocessing_sobel.html index 2e6c5f34b4eac8..ece0bfd4be4e55 100644 --- a/examples/webgl_postprocessing_sobel.html +++ b/examples/webgl_postprocessing_sobel.html @@ -118,8 +118,8 @@ // Sobel operator effectSobel = new THREE.ShaderPass( THREE.SobelOperatorShader ); - effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth; - effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight; + effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio; + effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio; composer.addPass( effectSobel ); var controls = new THREE.OrbitControls( camera, renderer.domElement ); @@ -145,8 +145,8 @@ renderer.setSize( window.innerWidth, window.innerHeight ); composer.setSize( window.innerWidth, window.innerHeight ); - effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth; - effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight; + effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio; + effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio; } diff --git a/examples/webgl_postprocessing_ssaa.html b/examples/webgl_postprocessing_ssaa.html index 71f1d2a014bfba..9b7d5d3d59a826 100644 --- a/examples/webgl_postprocessing_ssaa.html +++ b/examples/webgl_postprocessing_ssaa.html @@ -143,11 +143,7 @@ camera.updateProjectionMatrix(); renderer.setSize( width, height ); - - var pixelRatio = renderer.getPixelRatio(); - var newWidth = Math.floor( width * pixelRatio ) || 1; - var newHeight = Math.floor( height * pixelRatio ) || 1; - composer.setSize( newWidth, newHeight ); + composer.setSize( width, height ); } diff --git a/examples/webgl_postprocessing_ssaa_unbiased.html b/examples/webgl_postprocessing_ssaa_unbiased.html index aacef40faefb07..d4cc13fbcfbc94 100644 --- a/examples/webgl_postprocessing_ssaa_unbiased.html +++ b/examples/webgl_postprocessing_ssaa_unbiased.html @@ -177,6 +177,7 @@ // postprocessing composer = new THREE.EffectComposer( renderer ); + composer.setPixelRatio( 1 ); // ensure pixel ratio is always 1 for performance reasons ssaaRenderPassP = new THREE.SSAARenderPass( scene, cameraP ); composer.addPass( ssaaRenderPassP ); ssaaRenderPassO = new THREE.SSAARenderPass( scene, cameraO ); @@ -204,11 +205,7 @@ cameraO.updateProjectionMatrix(); renderer.setSize( width, height ); - - var pixelRatio = renderer.getPixelRatio(); - var newWidth = Math.floor( width * pixelRatio ) || 1; - var newHeight = Math.floor( height * pixelRatio ) || 1; - composer.setSize( newWidth, newHeight ); + composer.setSize( width, height ); } diff --git a/examples/webgl_postprocessing_taa.html b/examples/webgl_postprocessing_taa.html index 3aa7d717d8fecd..115add0db0ec79 100644 --- a/examples/webgl_postprocessing_taa.html +++ b/examples/webgl_postprocessing_taa.html @@ -172,11 +172,7 @@ camera.updateProjectionMatrix(); renderer.setSize( width, height ); - - var pixelRatio = renderer.getPixelRatio(); - var newWidth = Math.floor( width * pixelRatio ) || 1; - var newHeight = Math.floor( height * pixelRatio ) || 1; - composer.setSize( newWidth, newHeight ); + composer.setSize( width, height ); } diff --git a/examples/webgl_postprocessing_unreal_bloom.html b/examples/webgl_postprocessing_unreal_bloom.html index 68784e97e06a7c..0b9e8d6800b9c4 100644 --- a/examples/webgl_postprocessing_unreal_bloom.html +++ b/examples/webgl_postprocessing_unreal_bloom.html @@ -109,7 +109,6 @@ bloomPass.radius = params.bloomRadius; composer = new THREE.EffectComposer( renderer ); - composer.setSize( window.innerWidth, window.innerHeight ); composer.addPass( renderScene ); composer.addPass( bloomPass ); diff --git a/examples/webgl_postprocessing_unreal_bloom_selective.html b/examples/webgl_postprocessing_unreal_bloom_selective.html index d5707596cf030e..501f9bacd806c1 100644 --- a/examples/webgl_postprocessing_unreal_bloom_selective.html +++ b/examples/webgl_postprocessing_unreal_bloom_selective.html @@ -140,7 +140,6 @@ var bloomComposer = new THREE.EffectComposer( renderer ); bloomComposer.renderToScreen = false; - bloomComposer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio ); bloomComposer.addPass( renderScene ); bloomComposer.addPass( bloomPass ); @@ -158,7 +157,6 @@ finalPass.needsSwap = true; var finalComposer = new THREE.EffectComposer( renderer ); - finalComposer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio ); finalComposer.addPass( renderScene ); finalComposer.addPass( finalPass ); @@ -251,8 +249,8 @@ renderer.setSize( width, height ); - bloomComposer.setSize( width * window.devicePixelRatio, height * window.devicePixelRatio ); - finalComposer.setSize( width * window.devicePixelRatio, height * window.devicePixelRatio ); + bloomComposer.setSize( width, height ); + finalComposer.setSize( width, height ); render(); diff --git a/examples/webgl_shader_lava.html b/examples/webgl_shader_lava.html index a45afddca6ced0..39c30fd236ed95 100644 --- a/examples/webgl_shader_lava.html +++ b/examples/webgl_shader_lava.html @@ -199,12 +199,11 @@ function onWindowResize() { - renderer.setSize( window.innerWidth, window.innerHeight ); - camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); - composer.reset(); + renderer.setSize( window.innerWidth, window.innerHeight ); + composer.setSize( window.innerWidth, window.innerHeight ); }