Skip to content

Commit 42d6798

Browse files
alteredqalteredq
committed
Preventing setting zero sized EffectComposer (which leads to WebGL and math errors). Also more examples resizing handling.
1 parent 4dbff6d commit 42d6798

10 files changed

+164
-6
lines changed

‎examples/js/postprocessing/EffectComposer.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ THREE.EffectComposer = function( renderer, renderTarget ) {
1010

1111
if ( this.renderTarget1 === undefined ) {
1212

13+
var width = window.innerWidth || 1;
14+
var height = window.innerHeight || 1;
15+
1316
this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
14-
this.renderTarget1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
17+
this.renderTarget1 = new THREE.WebGLRenderTarget( width, height, this.renderTargetParameters );
1518

1619
}
1720

@@ -121,7 +124,10 @@ THREE.EffectComposer.prototype = {
121124

122125
// shared ortho camera
123126

124-
THREE.EffectComposer.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
127+
THREE.EffectComposer.initWidth = window.innerWidth | 1;
128+
THREE.EffectComposer.initHeight = window.innerHeight | 1;
129+
130+
THREE.EffectComposer.camera = new THREE.OrthographicCamera( THREE.EffectComposer.initWidth / - 2, THREE.EffectComposer.initWidth / 2, THREE.EffectComposer.initHeight / 2, THREE.EffectComposer.initHeight / - 2, -10000, 10000 );
125131

126132
// shared fullscreen quad scene
127133

@@ -130,7 +136,7 @@ THREE.EffectComposer.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Ma
130136

131137
THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null );
132138
THREE.EffectComposer.quad.position.z = -100;
133-
THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
139+
THREE.EffectComposer.quad.scale.set( THREE.EffectComposer.initWidth, THREE.EffectComposer.initHeight, 1 );
134140

135141
THREE.EffectComposer.scene = new THREE.Scene();
136142
THREE.EffectComposer.scene.add( THREE.EffectComposer.quad );

‎examples/webgl_lights_pointlights.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,19 @@
118118
renderer.setSize( window.innerWidth, window.innerHeight );
119119
container.appendChild( renderer.domElement );
120120

121+
//
122+
123+
window.addEventListener( 'resize', onWindowResize, false );
124+
125+
}
126+
127+
function onWindowResize() {
128+
129+
camera.aspect = window.innerWidth / window.innerHeight;
130+
camera.updateProjectionMatrix();
131+
132+
renderer.setSize( window.innerWidth, window.innerHeight );
133+
121134
}
122135

123136
//

‎examples/webgl_lights_pointlights2.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,21 @@
239239

240240
container.appendChild( stats.domElement );
241241

242+
//
243+
244+
window.addEventListener( 'resize', onWindowResize, false );
245+
246+
}
247+
248+
function onWindowResize() {
249+
250+
camera.aspect = window.innerWidth / window.innerHeight;
251+
camera.updateProjectionMatrix();
252+
253+
renderer.setSize( window.innerWidth, window.innerHeight );
254+
255+
controls.handleResize();
256+
242257
}
243258

244259
//

‎examples/webgl_lines_colors.html

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161

6262
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
6363

64+
var effectFXAA;
65+
6466
var mouseX = 0, mouseY = 0,
6567

6668
windowHalfX = window.innerWidth / 2,
@@ -158,9 +160,13 @@
158160
var renderModel = new THREE.RenderPass( scene, camera );
159161
var effectBloom = new THREE.BloomPass( 1.3 );
160162
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
161-
var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
162163

163-
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
164+
effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
165+
166+
var width = window.innerWidth || 2;
167+
var height = window.innerHeight || 2;
168+
169+
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
164170

165171
effectScreen.renderToScreen = true;
166172

@@ -171,6 +177,26 @@
171177
composer.addPass( effectBloom );
172178
composer.addPass( effectScreen );
173179

180+
//
181+
182+
window.addEventListener( 'resize', onWindowResize, false );
183+
184+
}
185+
186+
function onWindowResize() {
187+
188+
windowHalfX = window.innerWidth / 2,
189+
windowHalfY = window.innerHeight / 2,
190+
191+
camera.aspect = window.innerWidth / window.innerHeight;
192+
camera.updateProjectionMatrix();
193+
194+
renderer.setSize( window.innerWidth, window.innerHeight );
195+
196+
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
197+
198+
composer.reset();
199+
174200
}
175201

176202
// port of Processing Java code by Thomas Diewald

‎examples/webgl_lines_cubes.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,22 @@
125125
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
126126
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
127127

128+
//
129+
130+
window.addEventListener( 'resize', onWindowResize, false );
131+
132+
}
133+
134+
function onWindowResize() {
135+
136+
windowHalfX = window.innerWidth / 2;
137+
windowHalfY = window.innerHeight / 2;
138+
139+
camera.aspect = window.innerWidth / window.innerHeight;
140+
camera.updateProjectionMatrix();
141+
142+
renderer.setSize( window.innerWidth, window.innerHeight );
143+
128144
}
129145

130146
// port of Processing Java code by Thomas Diewald
@@ -167,6 +183,7 @@
167183
}
168184

169185
return vec;
186+
170187
}
171188

172189
//
@@ -185,7 +202,9 @@
185202

186203
mouseX = event.touches[ 0 ].pageX - windowHalfX;
187204
mouseY = event.touches[ 0 ].pageY - windowHalfY;
205+
188206
}
207+
189208
}
190209

191210
function onDocumentTouchMove( event ) {
@@ -196,7 +215,9 @@
196215

197216
mouseX = event.touches[ 0 ].pageX - windowHalfX;
198217
mouseY = event.touches[ 0 ].pageY - windowHalfY;
218+
199219
}
220+
200221
}
201222

202223
//

‎examples/webgl_lines_sphere.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104

105105
}
106106

107-
for( i = 0; i < parameters.length; ++i ) {
107+
for( i = 0; i < parameters.length; ++ i ) {
108108

109109
p = parameters[ i ];
110110

@@ -127,6 +127,22 @@
127127
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
128128
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
129129

130+
//
131+
132+
window.addEventListener( 'resize', onWindowResize, false );
133+
134+
}
135+
136+
function onWindowResize() {
137+
138+
windowHalfX = window.innerWidth / 2;
139+
windowHalfY = window.innerHeight / 2;
140+
141+
camera.aspect = window.innerWidth / window.innerHeight;
142+
camera.updateProjectionMatrix();
143+
144+
renderer.setSize( window.innerWidth, window.innerHeight );
145+
130146
}
131147

132148
function onDocumentMouseMove( event ) {
@@ -144,6 +160,7 @@
144160

145161
mouseX = event.touches[ 0 ].pageX - windowHalfX;
146162
mouseY = event.touches[ 0 ].pageY - windowHalfY;
163+
147164
}
148165

149166
}
@@ -156,6 +173,7 @@
156173

157174
mouseX = event.touches[ 0 ].pageX - windowHalfX;
158175
mouseY = event.touches[ 0 ].pageY - windowHalfY;
176+
159177
}
160178

161179
}

‎examples/webgl_lines_splines.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,22 @@
153153
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
154154
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
155155

156+
//
157+
158+
window.addEventListener( 'resize', onWindowResize, false );
159+
160+
}
161+
162+
function onWindowResize() {
163+
164+
windowHalfX = window.innerWidth / 2;
165+
windowHalfY = window.innerHeight / 2;
166+
167+
camera.aspect = window.innerWidth / window.innerHeight;
168+
camera.updateProjectionMatrix();
169+
170+
renderer.setSize( window.innerWidth, window.innerHeight );
171+
156172
}
157173

158174
// port of Processing Java code by Thomas Diewald

‎examples/webgl_loader_collada.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,19 @@
127127
stats.domElement.style.top = '0px';
128128
container.appendChild( stats.domElement );
129129

130+
//
131+
132+
window.addEventListener( 'resize', onWindowResize, false );
133+
134+
}
135+
136+
function onWindowResize() {
137+
138+
camera.aspect = window.innerWidth / window.innerHeight;
139+
camera.updateProjectionMatrix();
140+
141+
renderer.setSize( window.innerWidth, window.innerHeight );
142+
130143
}
131144

132145
//

‎examples/webgl_loader_collada_keyframe.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,19 @@
151151

152152
container.appendChild( stats.domElement );
153153

154+
//
155+
156+
window.addEventListener( 'resize', onWindowResize, false );
157+
158+
}
159+
160+
function onWindowResize() {
161+
162+
camera.aspect = window.innerWidth / window.innerHeight;
163+
camera.updateProjectionMatrix();
164+
165+
renderer.setSize( window.innerWidth, window.innerHeight );
166+
154167
}
155168

156169
function start() {

‎examples/webgl_loader_json_objconverter.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,23 @@ <h1>OBJ to Three.js converter test</h1>
191191
//loader.load( "obj/male02/Male02_bin.js", callbackMale );
192192
//loader.load( "obj/female02/Female02_bin.js", callbackFemale );
193193

194+
//
195+
196+
window.addEventListener( 'resize', onWindowResize, false );
197+
198+
}
199+
200+
function onWindowResize() {
201+
202+
windowHalfX = window.innerWidth / 2;
203+
windowHalfY = window.innerHeight / 2;
204+
205+
camera.aspect = window.innerWidth / window.innerHeight;
206+
camera.updateProjectionMatrix();
207+
208+
if ( render_gl && has_gl ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
209+
if ( render_canvas ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
210+
194211
}
195212

196213
function createScene( geometry, x, y, z, b ) {

0 commit comments

Comments
 (0)