Skip to content

Commit 98c7013

Browse files
mrdoobmrdoob
authored
Merge pull request #16404 from Mugen87/dev29
EffectComposer: Introduce .setPixelRatio() and harmonize resizing.
2 parents c7500a4 + 1dfbba5 commit 98c7013

13 files changed

+57
-55
lines changed

‎examples/js/postprocessing/EffectComposer.js‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,20 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
1515
stencilBuffer: false
1616
};
1717

18-
var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
19-
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
18+
var size = renderer.getSize( new THREE.Vector2() );
19+
this._pixelRatio = renderer.getPixelRatio();
20+
this._width = size.width;
21+
this._height = size.height;
22+
23+
renderTarget = new THREE.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, parameters );
2024
renderTarget.texture.name = 'EffectComposer.rt1';
2125

26+
} else {
27+
28+
this._pixelRatio = 1;
29+
this._width = renderTarget.width;
30+
this._height = renderTarget.height;
31+
2232
}
2333

2434
this.renderTarget1 = renderTarget;
@@ -162,10 +172,13 @@ Object.assign( THREE.EffectComposer.prototype, {
162172

163173
if ( renderTarget === undefined ) {
164174

165-
var size = this.renderer.getDrawingBufferSize( new THREE.Vector2() );
175+
var size = this.renderer.getSize( new THREE.Vector2() );
176+
this._pixelRatio = this.renderer.getPixelRatio();
177+
this._width = size.width;
178+
this._height = size.height;
166179

167180
renderTarget = this.renderTarget1.clone();
168-
renderTarget.setSize( size.width, size.height );
181+
renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
169182

170183
}
171184

@@ -181,15 +194,29 @@ Object.assign( THREE.EffectComposer.prototype, {
181194

182195
setSize: function ( width, height ) {
183196

184-
this.renderTarget1.setSize( width, height );
185-
this.renderTarget2.setSize( width, height );
197+
this._width = width;
198+
this._height = height;
199+
200+
var effectiveWidth = this._width * this._pixelRatio;
201+
var effectiveHeight = this._height * this._pixelRatio;
202+
203+
this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
204+
this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
186205

187206
for ( var i = 0; i < this.passes.length; i ++ ) {
188207

189-
this.passes[ i ].setSize( width, height );
208+
this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
190209

191210
}
192211

212+
},
213+
214+
setPixelRatio: function ( pixelRatio ) {
215+
216+
this._pixelRatio = pixelRatio;
217+
218+
this.setSize( this._width, this._height );
219+
193220
}
194221

195222
} );

‎examples/misc_controls_fly.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -252,12 +252,11 @@
252252
SCREEN_HEIGHT = window.innerHeight;
253253
SCREEN_WIDTH = window.innerWidth;
254254

255-
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
256-
257255
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
258256
camera.updateProjectionMatrix();
259257

260-
composer.reset();
258+
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
259+
composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
261260

262261
}
263262

‎examples/webgl_materials_video.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@
244244
camera.updateProjectionMatrix();
245245

246246
renderer.setSize( window.innerWidth, window.innerHeight );
247-
composer.reset();
247+
composer.setSize( window.innerWidth, window.innerHeight );
248248

249249
}
250250

‎examples/webgl_points_dynamic.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,8 @@
135135

136136
effectFocus = new THREE.ShaderPass( THREE.FocusShader );
137137

138-
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
139-
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
138+
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio;
139+
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio;
140140

141141
composer = new THREE.EffectComposer( renderer );
142142

@@ -156,17 +156,16 @@
156156

157157
function onWindowResize() {
158158

159-
renderer.setSize( window.innerWidth, window.innerHeight );
160-
161159
camera.aspect = window.innerWidth / window.innerHeight;
162160
camera.updateProjectionMatrix();
163161

164162
camera.lookAt( scene.position );
165163

166-
composer.reset();
164+
renderer.setSize( window.innerWidth, window.innerHeight );
165+
composer.setSize( window.innerWidth, window.innerHeight );
167166

168-
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
169-
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
167+
effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio;
168+
effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio;
170169

171170
}
172171

‎examples/webgl_postprocessing_backgrounds.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -239,11 +239,7 @@
239239
cameraO.updateProjectionMatrix();*/
240240

241241
renderer.setSize( width, height );
242-
243-
var pixelRatio = renderer.getPixelRatio();
244-
var newWidth = Math.floor( width * pixelRatio ) || 1;
245-
var newHeight = Math.floor( height * pixelRatio ) || 1;
246-
composer.setSize( newWidth, newHeight );
242+
composer.setSize( width, height );
247243

248244
}
249245

‎examples/webgl_postprocessing_smaa.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,7 @@
9292
camera.updateProjectionMatrix();
9393

9494
renderer.setSize( width, height );
95-
96-
var pixelRatio = renderer.getPixelRatio();
97-
var newWidth = Math.floor( width * pixelRatio ) || 1;
98-
var newHeight = Math.floor( height * pixelRatio ) || 1;
99-
composer.setSize( newWidth, newHeight );
95+
composer.setSize( width, height );
10096

10197
}
10298

‎examples/webgl_postprocessing_sobel.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
// Sobel operator
119119

120120
effectSobel = new THREE.ShaderPass( THREE.SobelOperatorShader );
121-
effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth;
122-
effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
121+
effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
122+
effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
123123
composer.addPass( effectSobel );
124124

125125
var controls = new THREE.OrbitControls( camera, renderer.domElement );
@@ -145,8 +145,8 @@
145145
renderer.setSize( window.innerWidth, window.innerHeight );
146146
composer.setSize( window.innerWidth, window.innerHeight );
147147

148-
effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth;
149-
effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
148+
effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
149+
effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
150150

151151
}
152152

‎examples/webgl_postprocessing_ssaa.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,7 @@
143143
camera.updateProjectionMatrix();
144144

145145
renderer.setSize( width, height );
146-
147-
var pixelRatio = renderer.getPixelRatio();
148-
var newWidth = Math.floor( width * pixelRatio ) || 1;
149-
var newHeight = Math.floor( height * pixelRatio ) || 1;
150-
composer.setSize( newWidth, newHeight );
146+
composer.setSize( width, height );
151147

152148
}
153149

‎examples/webgl_postprocessing_ssaa_unbiased.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@
177177
// postprocessing
178178

179179
composer = new THREE.EffectComposer( renderer );
180+
composer.setPixelRatio( 1 ); // ensure pixel ratio is always 1 for performance reasons
180181
ssaaRenderPassP = new THREE.SSAARenderPass( scene, cameraP );
181182
composer.addPass( ssaaRenderPassP );
182183
ssaaRenderPassO = new THREE.SSAARenderPass( scene, cameraO );
@@ -204,11 +205,7 @@
204205
cameraO.updateProjectionMatrix();
205206

206207
renderer.setSize( width, height );
207-
208-
var pixelRatio = renderer.getPixelRatio();
209-
var newWidth = Math.floor( width * pixelRatio ) || 1;
210-
var newHeight = Math.floor( height * pixelRatio ) || 1;
211-
composer.setSize( newWidth, newHeight );
208+
composer.setSize( width, height );
212209

213210
}
214211

‎examples/webgl_postprocessing_taa.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -172,11 +172,7 @@
172172
camera.updateProjectionMatrix();
173173

174174
renderer.setSize( width, height );
175-
176-
var pixelRatio = renderer.getPixelRatio();
177-
var newWidth = Math.floor( width * pixelRatio ) || 1;
178-
var newHeight = Math.floor( height * pixelRatio ) || 1;
179-
composer.setSize( newWidth, newHeight );
175+
composer.setSize( width, height );
180176

181177
}
182178

0 commit comments

Comments
 (0)