Preventing setting zero sized EffectComposer (which leads to WebGL and math...

Preventing setting zero sized EffectComposer (which leads to WebGL and math errors). Also more examples resizing handling.

examples/js/postprocessing/EffectComposer.js

@@ -10,8 +10,11 @@ THREE.EffectComposer = function( renderer, renderTarget ) {
 
 	if ( this.renderTarget1 === undefined ) {
 
+		var width = window.innerWidth || 1;
+		var height = window.innerHeight || 1;
+
 		this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-		this.renderTarget1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
+		this.renderTarget1 = new THREE.WebGLRenderTarget( width, height, this.renderTargetParameters );
 
 	}
 
@@ -121,7 +124,10 @@ THREE.EffectComposer.prototype = {
 
 // shared ortho camera
 
-THREE.EffectComposer.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+THREE.EffectComposer.initWidth = window.innerWidth | 1;
+THREE.EffectComposer.initHeight = window.innerHeight | 1;
+
+THREE.EffectComposer.camera = new THREE.OrthographicCamera( THREE.EffectComposer.initWidth / - 2, THREE.EffectComposer.initWidth / 2, THREE.EffectComposer.initHeight / 2, THREE.EffectComposer.initHeight / - 2, -10000, 10000 );
 
 // shared fullscreen quad scene
 
@@ -130,7 +136,7 @@ THREE.EffectComposer.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Ma
 
 THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null );
 THREE.EffectComposer.quad.position.z = -100;
-THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
+THREE.EffectComposer.quad.scale.set( THREE.EffectComposer.initWidth, THREE.EffectComposer.initHeight, 1 );
 
 THREE.EffectComposer.scene = new THREE.Scene();
 THREE.EffectComposer.scene.add( THREE.EffectComposer.quad );

examples/webgl_lights_pointlights.html

@@ -118,6 +118,19 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//

examples/webgl_lights_pointlights2.html

@@ -239,6 +239,21 @@
 
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				controls.handleResize();
+
 			}
 
 			//

examples/webgl_lines_colors.html

@@ -61,6 +61,8 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			var effectFXAA;
+
 			var mouseX = 0, mouseY = 0,
 
 			windowHalfX = window.innerWidth / 2,
@@ -158,9 +160,13 @@
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectBloom = new THREE.BloomPass( 1.3 );
 				var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
-				var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
 
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
+				effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
+
+				var width = window.innerWidth || 2;
+				var height = window.innerHeight || 2;
+
+				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 
 				effectScreen.renderToScreen = true;
 
@@ -171,6 +177,26 @@
 				composer.addPass( effectBloom );
 				composer.addPass( effectScreen );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2,
+				windowHalfY = window.innerHeight / 2,
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
+
+				composer.reset();
+
 			}
 
 			// port of Processing Java code by Thomas Diewald

examples/webgl_lines_cubes.html

@@ -125,6 +125,22 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			// port of Processing Java code by Thomas Diewald
@@ -167,6 +183,7 @@
 				}
 
 				return vec;
+
 			}
 
 			//
@@ -185,7 +202,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -196,7 +215,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			//

examples/webgl_lines_sphere.html

@@ -104,7 +104,7 @@
 
 				}
 
-				for( i = 0; i < parameters.length; ++i ) {
+				for( i = 0; i < parameters.length; ++ i ) {
 
 					p = parameters[ i ];
 
@@ -127,6 +127,22 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -144,6 +160,7 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 
 			}
@@ -156,6 +173,7 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
 
 			}

examples/webgl_lines_splines.html

@@ -153,6 +153,22 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			// port of Processing Java code by Thomas Diewald

examples/webgl_loader_collada.html

@@ -127,6 +127,19 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			//

examples/webgl_loader_collada_keyframe.html

@@ -151,6 +151,19 @@
 
 				container.appendChild( stats.domElement );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function start() {

examples/webgl_loader_json_objconverter.html

@@ -191,6 +191,23 @@
 				//loader.load( "obj/male02/Male02_bin.js", callbackMale );
 				//loader.load( "obj/female02/Female02_bin.js", callbackFemale );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				if ( render_gl && has_gl ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
+				if ( render_canvas ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
+
 			}
 
 			function createScene( geometry, x, y, z, b ) {