Added handling of resizing to DeferredHelper.

examples/js/DeferredHelper.js

@@ -29,16 +29,15 @@ THREE.DeferredHelper = function ( parameters ) {
 	var lightShader = THREE.ShaderDeferred[ "light" ];
 	var compositeShader = THREE.ShaderDeferred[ "composite" ];
 
-	unlitShader.uniforms[ "viewWidth" ].value = width;
-	unlitShader.uniforms[ "viewHeight" ].value = height;
-
-	lightShader.uniforms[ "viewWidth" ].value = width;
-	lightShader.uniforms[ "viewHeight" ].value = height;
+	var unlitMaterials = [];
+	var lightMaterials = [];
 
 	//
 
-	var compColor, compNormal, compDepth, compEmitter, compLightBuffer, compFinal, compositePass;
-	var passColor, passNormal, passDepth, passEmitter, passLight;
+	var compColor, compNormal, compDepth, compEmitter, compLight, compFinal;
+	var passColor, passNormal, passDepth, passEmitter, passLight, compositePass;
+
+	var effectFXAA;
 
 	var emitterScene, lightScene;
 
@@ -225,12 +224,23 @@ THREE.DeferredHelper = function ( parameters ) {
 		materialLight.uniforms[ "lightIntensity" ].value = light.intensity;
 		materialLight.uniforms[ "lightColor" ].value = light.color;
 
+		materialLight.uniforms[ "viewWidth" ].value = width;
+		materialLight.uniforms[ "viewHeight" ].value = height;
+
+		materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
+		materialLight.uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
+		materialLight.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
+
 		// create light proxy mesh
 
 		var geometryLight = new THREE.SphereGeometry( light.distance, 16, 8 );
 		var meshLight = new THREE.Mesh( geometryLight, materialLight );
 		meshLight.position = light.position;
 
+		// keep reference for size reset
+
+		lightMaterials.push( materialLight );
+
 		return meshLight;
 
 	};
@@ -247,6 +257,8 @@ THREE.DeferredHelper = function ( parameters ) {
 
 		} );
 
+		matEmitter.uniforms[ "viewWidth" ].value = width;
+		matEmitter.uniforms[ "viewHeight" ].value = height;
 		matEmitter.uniforms[ "samplerDepth" ].value = compDepth.renderTarget2;
 		matEmitter.uniforms[ "lightColor" ].value = light.color;
 
@@ -255,6 +267,10 @@ THREE.DeferredHelper = function ( parameters ) {
 		var meshEmitter = new THREE.Mesh( geometryEmitter, matEmitter );
 		meshEmitter.position = light.position;
 
+		// keep reference for size reset
+
+		unlitMaterials.push( matEmitter );
+
 		return meshEmitter;
 
 	};
@@ -301,6 +317,46 @@ THREE.DeferredHelper = function ( parameters ) {
 
 	//
 
+	this.setSize = function ( width, height ) {
+
+		compColor.setSize( width, height );
+		compNormal.setSize( width, height );
+		compDepth.setSize( width, height );
+		compEmitter.setSize( width, height );
+		compLight.setSize( width, height );
+		compFinal.setSize( width, height );
+
+		for ( var i = 0, il = unlitMaterials.length; i < il; i ++ ) {
+
+			var uniforms = unlitMaterials[ i ].uniforms;
+
+			uniforms[ "viewWidth" ].value = width;
+			uniforms[ "viewHeight" ].value = height;
+
+		}
+
+		for ( var i = 0, il = lightMaterials.length; i < il; i ++ ) {
+
+			var uniforms = lightMaterials[ i ].uniforms;
+
+			uniforms[ "viewWidth" ].value = width;
+			uniforms[ "viewHeight" ].value = height;
+
+			uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
+			uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
+			uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
+
+		}
+
+		compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
+		compositePass.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
+
+		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
+
+	};
+
+	//
+
 	this.render = function ( scene, camera ) {
 
 		// setup deferred properties
@@ -357,7 +413,7 @@ THREE.DeferredHelper = function ( parameters ) {
 
 		}
 
-		compLightBuffer.render();
+		compLight.render();
 
 		// composite pass
 
@@ -402,33 +458,32 @@ THREE.DeferredHelper = function ( parameters ) {
 		compEmitter.addPass( passEmitter );
 
 		passLight = new THREE.RenderPass();
-		compLightBuffer = new THREE.EffectComposer( renderer, rtLight );
-		compLightBuffer.addPass( passLight );
-
-		//
-
-		lightShader.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
-		lightShader.uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
-		lightShader.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
-		lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLight;
-
-		compositeShader.uniforms[ 'samplerLightBuffer' ].value = compLightBuffer.renderTarget2;
-		compositeShader.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
+		compLight = new THREE.EffectComposer( renderer, rtLight );
+		compLight.addPass( passLight );
 
 		// composite
 
-		var compositePass = new THREE.ShaderPass( compositeShader );
+		compositePass = new THREE.ShaderPass( compositeShader );
 		compositePass.needsSwap = true;
 
-		var effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
+		compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
+		compositePass.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
+
+		// FXAA
+
+		effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 
+		// color correction
+
 		var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
 		effectColor.renderToScreen = true;
 
 		effectColor.uniforms[ 'powRGB' ].value.set( 1, 1, 1 );
 		effectColor.uniforms[ 'mulRGB' ].value.set( 2, 2, 2 );
 
+		//
+
 		compFinal = new THREE.EffectComposer( renderer, rtFinal );
 		compFinal.addPass( compositePass );
 		compFinal.addPass( effectFXAA );

examples/js/ShaderDeferred.js

@@ -313,21 +313,21 @@ THREE.ShaderDeferred = {
 
 		uniforms: {
 
-			samplerLightBuffer: { type: "t", value: null },
-			samplerEmitter: 	{ type: "t", value: null }
+			samplerLight: 	{ type: "t", value: null },
+			samplerEmitter: { type: "t", value: null }
 
 		},
 
 		fragmentShader : [
 
 			"varying vec2 texCoord;",
-			"uniform sampler2D samplerLightBuffer;",
+			"uniform sampler2D samplerLight;",
 			"uniform sampler2D samplerEmitter;",
 			"uniform vec3 lightPos;",
 
 			"void main() {",
 
-				"vec3 color = texture2D( samplerLightBuffer, texCoord ).xyz;",
+				"vec3 color = texture2D( samplerLight, texCoord ).xyz;",
 				"vec3 emitter = texture2D( samplerEmitter, texCoord ).xyz;",
 
 				"if ( emitter != vec3( 0.0 ) ) {",
@@ -364,7 +364,6 @@ THREE.ShaderDeferred = {
 
 		uniforms: {
 
-			samplerLightBuffer: { type: "t", value: null },
 			samplerNormals: { type: "t", value: null },
 			samplerDepth: 	{ type: "t", value: null },
 			samplerColor: 	{ type: "t", value: null },
@@ -387,7 +386,6 @@ THREE.ShaderDeferred = {
 			"uniform sampler2D samplerColor;",
 			"uniform sampler2D samplerDepth;",
 			"uniform sampler2D samplerNormals;",
-			"uniform sampler2D samplerLightBuffer;",
 
 			"uniform float lightRadius;",
 			"uniform float lightIntensity;",

examples/webgl_lights_deferred_morphs.html

@@ -78,7 +78,6 @@
 
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
-			var ASPECT = WIDTH / HEIGHT;
 
 			// controls
 
@@ -129,7 +128,7 @@
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
 				camera.position.z = 150;
 
 				// scene
@@ -164,6 +163,7 @@
 				// events
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
@@ -315,6 +315,25 @@
 
 			// -----------------------------
 
+			function onWindowResize( event ) {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				WIDTH = window.innerWidth;
+				HEIGHT = window.innerHeight - 2 * MARGIN;
+
+				SCALED_WIDTH = Math.floor( SCALE * WIDTH );
+				SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
+
+				renderer.setSize( WIDTH, HEIGHT );
+				deferredHelper.setSize( SCALED_WIDTH, SCALED_HEIGHT );
+
+				camera.aspect = WIDTH / HEIGHT;
+				camera.updateProjectionMatrix();
+
+			}
+
 			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 1;

examples/webgl_lights_deferred_pointlights.html

@@ -82,7 +82,6 @@
 
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
-			var ASPECT = WIDTH / HEIGHT;
 
 			// controls
 
@@ -129,7 +128,7 @@
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
+				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );
 				camera.position.z = 150;
 
 				// scene
@@ -164,6 +163,7 @@
 				// events
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
@@ -331,6 +331,25 @@
 
 			// -----------------------------
 
+			function onWindowResize( event ) {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				WIDTH = window.innerWidth;
+				HEIGHT = window.innerHeight - 2 * MARGIN;
+
+				SCALED_WIDTH = Math.floor( SCALE * WIDTH );
+				SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
+
+				renderer.setSize( WIDTH, HEIGHT );
+				deferredHelper.setSize( SCALED_WIDTH, SCALED_HEIGHT );
+
+				camera.aspect = WIDTH / HEIGHT;
+				camera.updateProjectionMatrix();
+
+			}
+
 			function onDocumentMouseMove( event ) {
 
 				mouseX = ( event.clientX - windowHalfX ) * 1;