Made WebGLDeferredRenderer self-standing.

It now creates own internal WebGLRenderer and manages render targets scaling internally.

examples/js/renderers/WebGLDeferredRenderer.js

@@ -5,15 +5,33 @@
 
 THREE.WebGLDeferredRenderer = function ( parameters ) {
 
+	var _this = this;
+
 	var width = parameters.width;
 	var height = parameters.height;
 	var scale = parameters.scale;
 
-	var renderer = parameters.renderer;
+	var scaledWidth = Math.floor( scale * width );
+	var scaledHeight = Math.floor( scale * height );
 
 	var additiveSpecular = parameters.additiveSpecular;
 	var multiply = parameters.multiply;
 
+	this.renderer = parameters.renderer;
+
+	if ( this.renderer === undefined ) {
+
+		this.renderer = new THREE.WebGLRenderer( { alpha: false } );
+		this.renderer.setSize( width, height );
+		this.renderer.setClearColorHex( 0x000000, 1 );
+
+		this.renderer.autoClear = false;
+
+	}
+
+	this.domElement = this.renderer.domElement;
+
+
 	//
 
 	var geometryLight = new THREE.SphereGeometry( 1, 16, 8 );
@@ -268,8 +286,8 @@ THREE.WebGLDeferredRenderer = 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[ "viewWidth" ].value = scaledWidth;
+		materialLight.uniforms[ "viewHeight" ].value = scaledHeight;
 
 		materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
 		materialLight.uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
@@ -310,8 +328,8 @@ THREE.WebGLDeferredRenderer = 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[ "viewWidth" ].value = scaledWidth;
+		materialLight.uniforms[ "viewHeight" ].value = scaledHeight;
 
 		materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
 		materialLight.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
@@ -345,8 +363,8 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		} );
 
 
-		materialLight.uniforms[ "viewWidth" ].value = width;
-		materialLight.uniforms[ "viewHeight" ].value = height;
+		materialLight.uniforms[ "viewWidth" ].value = scaledWidth;
+		materialLight.uniforms[ "viewHeight" ].value = scaledHeight;
 
 		materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
 		materialLight.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
@@ -410,18 +428,23 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 	this.setSize = function ( width, height ) {
 
-		compColor.setSize( width, height );
-		compNormal.setSize( width, height );
-		compDepth.setSize( width, height );
-		compLight.setSize( width, height );
-		compFinal.setSize( width, height );
+		this.renderer.setSize( width, height );
+
+		scaledWidth = Math.floor( scale * width );
+		scaledHeight = Math.floor( scale * height );
+
+		compColor.setSize( scaledWidth, scaledHeight );
+		compNormal.setSize( scaledWidth, scaledHeight );
+		compDepth.setSize( scaledWidth, scaledHeight );
+		compLight.setSize( scaledWidth, scaledHeight );
+		compFinal.setSize( scaledWidth, scaledHeight );
 
 		for ( var i = 0, il = lightMaterials.length; i < il; i ++ ) {
 
 			var uniforms = lightMaterials[ i ].uniforms;
 
-			uniforms[ "viewWidth" ].value = width;
-			uniforms[ "viewHeight" ].value = height;
+			uniforms[ "viewWidth" ].value = scaledWidth;
+			uniforms[ "viewHeight" ].value = scaledHeight;
 
 			uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
 			uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
@@ -436,7 +459,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
 
-		effectFXAA.uniforms[ 'resolution' ].value.set( scale / width, scale / height );
+		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 
 	};
 
@@ -530,11 +553,11 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// g-buffers
 
-		var rtColor   = new THREE.WebGLRenderTarget( width, height, rtParamsFloatNearest );
-		var rtNormal  = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
-		var rtDepth   = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
-		var rtLight   = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
-		var rtFinal   = new THREE.WebGLRenderTarget( width, height, rtParamsUByte );
+		var rtColor   = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatNearest );
+		var rtNormal  = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatLinear );
+		var rtDepth   = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatLinear );
+		var rtLight   = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatLinear );
+		var rtFinal   = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsUByte );
 
 		rtColor.generateMipmaps = false;
 		rtNormal.generateMipmaps = false;
@@ -545,22 +568,22 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		// composers
 
 		passColor = new THREE.RenderPass();
-		compColor = new THREE.EffectComposer( renderer, rtColor );
+		compColor = new THREE.EffectComposer( _this.renderer, rtColor );
 		compColor.addPass( passColor );
 
 		passNormal = new THREE.RenderPass();
-		compNormal = new THREE.EffectComposer( renderer, rtNormal );
+		compNormal = new THREE.EffectComposer( _this.renderer, rtNormal );
 		compNormal.addPass( passNormal );
 
 		passDepth = new THREE.RenderPass();
-		compDepth = new THREE.EffectComposer( renderer, rtDepth );
+		compDepth = new THREE.EffectComposer( _this.renderer, rtDepth );
 		compDepth.addPass( passDepth );
 
 		passLightFullscreen = new THREE.RenderPass();
 		passLightProxy = new THREE.RenderPass();
 		passLightProxy.clear = false;
 
-		compLight = new THREE.EffectComposer( renderer, rtLight );
+		compLight = new THREE.EffectComposer( _this.renderer, rtLight );
 		compLight.addPass( passLightFullscreen );
 		compLight.addPass( passLightProxy );
 
@@ -573,12 +596,12 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		// FXAA
 
 		effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-		effectFXAA.uniforms[ 'resolution' ].value.set( scale / width, scale / height );
+		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
 		effectFXAA.renderToScreen = true;
 
 		//
 
-		compFinal = new THREE.EffectComposer( renderer, rtFinal );
+		compFinal = new THREE.EffectComposer( _this.renderer, rtFinal );
 		compFinal.addPass( compositePass );
 		compFinal.addPass( effectFXAA );
 

examples/webgl_lights_deferred_morphs.html

@@ -72,9 +72,6 @@
 			var WIDTH = window.innerWidth;
 			var HEIGHT = window.innerHeight - 2 * MARGIN;
 
-			var SCALED_WIDTH = Math.floor( SCALE * WIDTH );
-			var SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
-
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
 
@@ -114,11 +111,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { alpha: false } );
-				renderer.setSize( WIDTH, HEIGHT );
-				renderer.setClearColorHex( 0x000000, 1 );
-
-				renderer.autoClear = false;
+				renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, multiply: 2, additiveSpecular: true } );
 
 				renderer.domElement.style.position = "absolute";
 				renderer.domElement.style.top = MARGIN + "px";
@@ -149,10 +142,6 @@
 
 				clock = new THREE.Clock();
 
-				// deferred helper
-
-				deferredRenderer = new THREE.WebGLDeferredRenderer( { renderer: renderer, width: SCALED_WIDTH, height: SCALED_HEIGHT, scale: SCALE, multiply: 2, additiveSpecular: true } );
-
 				// add lights
 
 				initLights();
@@ -328,11 +317,7 @@
 				WIDTH = window.innerWidth;
 				HEIGHT = window.innerHeight - 2 * MARGIN;
 
-				SCALED_WIDTH = Math.floor( SCALE * WIDTH );
-				SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
-
 				renderer.setSize( WIDTH, HEIGHT );
-				deferredRenderer.setSize( SCALED_WIDTH, SCALED_HEIGHT );
 
 				camera.aspect = WIDTH / HEIGHT;
 				camera.updateProjectionMatrix();
@@ -412,7 +397,9 @@
 
 				camera.lookAt( target );
 
-				deferredRenderer.render( scene, camera );
+				// render
+
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_lights_deferred_pointlights.html

@@ -76,9 +76,6 @@
 			var WIDTH = window.innerWidth;
 			var HEIGHT = window.innerHeight - 2 * MARGIN;
 
-			var SCALED_WIDTH = Math.floor( SCALE * WIDTH );
-			var SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
-
 			var NEAR = 1.0, FAR = 350.0;
 			var VIEW_ANGLE = 45;
 
@@ -114,11 +111,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { alpha: false } );
-				renderer.setSize( WIDTH, HEIGHT );
-				renderer.setClearColorHex( 0x000000, 1 );
-
-				renderer.autoClear = false;
+				renderer = new THREE.WebGLDeferredRenderer( { width: WIDTH, height: HEIGHT, scale: SCALE, additiveSpecular: false, multiply: 2 } );
 
 				renderer.domElement.style.position = "absolute";
 				renderer.domElement.style.top = MARGIN + "px";
@@ -149,10 +142,6 @@
 
 				clock = new THREE.Clock();
 
-				// deferred helper
-
-				deferredRenderer = new THREE.WebGLDeferredRenderer( { renderer: renderer, width: SCALED_WIDTH, height: SCALED_HEIGHT, scale: SCALE, additiveSpecular: false, multiply: 2 } );
-
 				// add lights
 
 				initLights();
@@ -375,11 +364,7 @@
 				WIDTH = window.innerWidth;
 				HEIGHT = window.innerHeight - 2 * MARGIN;
 
-				SCALED_WIDTH = Math.floor( SCALE * WIDTH );
-				SCALED_HEIGHT = Math.floor( SCALE * HEIGHT );
-
 				renderer.setSize( WIDTH, HEIGHT );
-				deferredRenderer.setSize( SCALED_WIDTH, SCALED_HEIGHT );
 
 				camera.aspect = WIDTH / HEIGHT;
 				camera.updateProjectionMatrix();
@@ -433,6 +418,8 @@
 
 				}
 
+				// update camera
+
 				var delta = clock.getDelta();
 
 				targetX = mouseX * .001;
@@ -445,7 +432,9 @@
 
 				camera.lookAt( target );
 
-				deferredRenderer.render( scene, camera );
+				// render
+
+				renderer.render( scene, camera );
 
 			}