WestLangley 8 years ago
parent
commit
ac941c5761
1 changed files with 99 additions and 76 deletions
  1. 99 76
      examples/js/postprocessing/UnrealBloomPass.js

+ 99 - 76
examples/js/postprocessing/UnrealBloomPass.js

@@ -11,39 +11,40 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 	this.strength = ( strength !== undefined ) ? strength : 1;
 	this.strength = ( strength !== undefined ) ? strength : 1;
 	this.radius = radius;
 	this.radius = radius;
 	this.threshold = threshold;
 	this.threshold = threshold;
-	this.resolution = ( resolution !== undefined ) ? new THREE.Vector2(resolution.x, resolution.y) : new THREE.Vector2(256, 256);
+	this.resolution = ( resolution !== undefined ) ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 );
 
 
 	// render targets
 	// render targets
 	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
 	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
 	this.renderTargetsHorizontal = [];
 	this.renderTargetsHorizontal = [];
 	this.renderTargetsVertical = [];
 	this.renderTargetsVertical = [];
 	this.nMips = 5;
 	this.nMips = 5;
-	var resx = Math.round(this.resolution.x/2);
-	var resy = Math.round(this.resolution.y/2);
+	var resx = Math.round( this.resolution.x / 2 );
+	var resy = Math.round( this.resolution.y / 2 );
 
 
 	this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy, pars );
 	this.renderTargetBright = new THREE.WebGLRenderTarget( resx, resy, pars );
 	this.renderTargetBright.texture.name = "UnrealBloomPass.bright";
 	this.renderTargetBright.texture.name = "UnrealBloomPass.bright";
 	this.renderTargetBright.texture.generateMipmaps = false;
 	this.renderTargetBright.texture.generateMipmaps = false;
 
 
-	for( var i=0; i<this.nMips; i++) {
+	for ( var i = 0; i < this.nMips; i ++ ) {
 
 
 		var renderTarget = new THREE.WebGLRenderTarget( resx, resy, pars );
 		var renderTarget = new THREE.WebGLRenderTarget( resx, resy, pars );
 
 
 		renderTarget.texture.name = "UnrealBloomPass.h" + i;
 		renderTarget.texture.name = "UnrealBloomPass.h" + i;
 		renderTarget.texture.generateMipmaps = false;
 		renderTarget.texture.generateMipmaps = false;
 
 
-		this.renderTargetsHorizontal.push(renderTarget);
+		this.renderTargetsHorizontal.push( renderTarget );
 
 
 		var renderTarget = new THREE.WebGLRenderTarget( resx, resy, pars );
 		var renderTarget = new THREE.WebGLRenderTarget( resx, resy, pars );
 
 
 		renderTarget.texture.name = "UnrealBloomPass.v" + i;
 		renderTarget.texture.name = "UnrealBloomPass.v" + i;
 		renderTarget.texture.generateMipmaps = false;
 		renderTarget.texture.generateMipmaps = false;
 
 
-		this.renderTargetsVertical.push(renderTarget);
+		this.renderTargetsVertical.push( renderTarget );
 
 
-		resx = Math.round(resx/2);
+		resx = Math.round( resx / 2 );
+
+		resy = Math.round( resy / 2 );
 
 
-		resy = Math.round(resy/2);
 	}
 	}
 
 
 	// luminosity high pass material
 	// luminosity high pass material
@@ -59,49 +60,53 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 
 
 	this.materialHighPassFilter = new THREE.ShaderMaterial( {
 	this.materialHighPassFilter = new THREE.ShaderMaterial( {
 		uniforms: this.highPassUniforms,
 		uniforms: this.highPassUniforms,
-		vertexShader:  highPassShader.vertexShader,
+		vertexShader: highPassShader.vertexShader,
 		fragmentShader: highPassShader.fragmentShader,
 		fragmentShader: highPassShader.fragmentShader,
 		defines: {}
 		defines: {}
 	} );
 	} );
 
 
 	// Gaussian Blur Materials
 	// Gaussian Blur Materials
 	this.separableBlurMaterials = [];
 	this.separableBlurMaterials = [];
-	var kernelSizeArray = [3, 5, 7, 9, 11];
-	var resx = Math.round(this.resolution.x/2);
-	var resy = Math.round(this.resolution.y/2);
+	var kernelSizeArray = [ 3, 5, 7, 9, 11 ];
+	var resx = Math.round( this.resolution.x / 2 );
+	var resy = Math.round( this.resolution.y / 2 );
+
+	for ( var i = 0; i < this.nMips; i ++ ) {
 
 
-	for( var i=0; i<this.nMips; i++) {
+		this.separableBlurMaterials.push( this.getSeperableBlurMaterial( kernelSizeArray[ i ] ) );
 
 
-		this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i]));
+		this.separableBlurMaterials[ i ].uniforms[ "texSize" ].value = new THREE.Vector2( resx, resy );
 
 
-		this.separableBlurMaterials[i].uniforms[ "texSize" ].value = new THREE.Vector2(resx, resy);
+		resx = Math.round( resx / 2 );
 
 
-		resx = Math.round(resx/2);
+		resy = Math.round( resy / 2 );
 
 
-		resy = Math.round(resy/2);
 	}
 	}
 
 
 	// Composite material
 	// Composite material
-	this.compositeMaterial = this.getCompositeMaterial(this.nMips);
-	this.compositeMaterial.uniforms["blurTexture1"].value = this.renderTargetsVertical[0].texture;
-	this.compositeMaterial.uniforms["blurTexture2"].value = this.renderTargetsVertical[1].texture;
-	this.compositeMaterial.uniforms["blurTexture3"].value = this.renderTargetsVertical[2].texture;
-	this.compositeMaterial.uniforms["blurTexture4"].value = this.renderTargetsVertical[3].texture;
-	this.compositeMaterial.uniforms["blurTexture5"].value = this.renderTargetsVertical[4].texture;
-	this.compositeMaterial.uniforms["bloomStrength"].value = strength;
-	this.compositeMaterial.uniforms["bloomRadius"].value = 0.1;
+	this.compositeMaterial = this.getCompositeMaterial( this.nMips );
+	this.compositeMaterial.uniforms[ "blurTexture1" ].value = this.renderTargetsVertical[ 0 ].texture;
+	this.compositeMaterial.uniforms[ "blurTexture2" ].value = this.renderTargetsVertical[ 1 ].texture;
+	this.compositeMaterial.uniforms[ "blurTexture3" ].value = this.renderTargetsVertical[ 2 ].texture;
+	this.compositeMaterial.uniforms[ "blurTexture4" ].value = this.renderTargetsVertical[ 3 ].texture;
+	this.compositeMaterial.uniforms[ "blurTexture5" ].value = this.renderTargetsVertical[ 4 ].texture;
+	this.compositeMaterial.uniforms[ "bloomStrength" ].value = strength;
+	this.compositeMaterial.uniforms[ "bloomRadius" ].value = 0.1;
 	this.compositeMaterial.needsUpdate = true;
 	this.compositeMaterial.needsUpdate = true;
 
 
-	var bloomFactors = [1.0, 0.8, 0.6, 0.4, 0.2];
-	this.compositeMaterial.uniforms["bloomFactors"].value = bloomFactors;
-	this.bloomTintColors = [new THREE.Vector3(1,1,1), new THREE.Vector3(1,1,1), new THREE.Vector3(1,1,1)
-												,new THREE.Vector3(1,1,1), new THREE.Vector3(1,1,1)];
-	this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
+	var bloomFactors = [ 1.0, 0.8, 0.6, 0.4, 0.2 ];
+	this.compositeMaterial.uniforms[ "bloomFactors" ].value = bloomFactors;
+	this.bloomTintColors = [ new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ),
+							 new THREE.Vector3( 1, 1, 1 ), new THREE.Vector3( 1, 1, 1 ) ];
+	this.compositeMaterial.uniforms[ "bloomTintColors" ].value = this.bloomTintColors;
 
 
 	// copy material
 	// copy material
-	if ( THREE.CopyShader === undefined )
+	if ( THREE.CopyShader === undefined ) {
+
 		console.error( "THREE.BloomPass relies on THREE.CopyShader" );
 		console.error( "THREE.BloomPass relies on THREE.CopyShader" );
 
 
+	}
+
 	var copyShader = THREE.CopyShader;
 	var copyShader = THREE.CopyShader;
 
 
 	this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
 	this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
@@ -124,7 +129,7 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 	this.oldClearAlpha = 1;
 	this.oldClearAlpha = 1;
 
 
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene  = new THREE.Scene();
+	this.scene = new THREE.Scene();
 
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.quad.frustumCulled = false; // Avoid getting clipped
@@ -136,33 +141,43 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 
 	constructor: THREE.UnrealBloomPass,
 	constructor: THREE.UnrealBloomPass,
 
 
-	dispose: function() {
-		for( var i=0; i< this.renderTargetsHorizontal.length; i++) {
-			this.renderTargetsHorizontal[i].dispose();
+	dispose: function () {
+
+		for ( var i = 0; i < this.renderTargetsHorizontal.length; i ++ ) {
+
+			this.renderTargetsHorizontal[ i ].dispose();
+
 		}
 		}
-		for( var i=0; i< this.renderTargetsVertical.length; i++) {
-			this.renderTargetsVertical[i].dispose();
+
+		for ( var i = 0; i < this.renderTargetsVertical.length; i ++ ) {
+
+			this.renderTargetsVertical[ i ].dispose();
+
 		}
 		}
+
 		this.renderTargetBright.dispose();
 		this.renderTargetBright.dispose();
+
 	},
 	},
 
 
 	setSize: function ( width, height ) {
 	setSize: function ( width, height ) {
 
 
-		var resx = Math.round(width/2);
-		var resy = Math.round(height/2);
+		var resx = Math.round( width / 2 );
+		var resy = Math.round( height / 2 );
+
+		this.renderTargetBright.setSize( resx, resy );
 
 
-		this.renderTargetBright.setSize(resx, resy);
+		for ( var i = 0; i < this.nMips; i ++ ) {
 
 
-		for( var i=0; i<this.nMips; i++) {
+			this.renderTargetsHorizontal[ i ].setSize( resx, resy );
+			this.renderTargetsVertical[ i ].setSize( resx, resy );
 
 
-			this.renderTargetsHorizontal[i].setSize(resx, resy);
-			this.renderTargetsVertical[i].setSize(resx, resy);
+			this.separableBlurMaterials[ i ].uniforms[ "texSize" ].value = new THREE.Vector2( resx, resy );
 
 
-			this.separableBlurMaterials[i].uniforms[ "texSize" ].value = new THREE.Vector2(resx, resy);
+			resx = Math.round( resx / 2 );
+			resy = Math.round( resy / 2 );
 
 
-			resx = Math.round(resx/2);
-			resy = Math.round(resy/2);
 		}
 		}
+
 	},
 	},
 
 
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
@@ -177,43 +192,48 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
 		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
 
 
 		// 1. Extract Bright Areas
 		// 1. Extract Bright Areas
+
 		this.highPassUniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.highPassUniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.highPassUniforms[ "luminosityThreshold" ].value = this.threshold;
 		this.highPassUniforms[ "luminosityThreshold" ].value = this.threshold;
 		this.quad.material = this.materialHighPassFilter;
 		this.quad.material = this.materialHighPassFilter;
 		renderer.render( this.scene, this.camera, this.renderTargetBright, true );
 		renderer.render( this.scene, this.camera, this.renderTargetBright, true );
 
 
 		// 2. Blur All the mips progressively
 		// 2. Blur All the mips progressively
+
 		var inputRenderTarget = this.renderTargetBright;
 		var inputRenderTarget = this.renderTargetBright;
 
 
-		for(var i=0; i<this.nMips; i++) {
+		for ( var i = 0; i < this.nMips; i ++ ) {
+
+			this.quad.material = this.separableBlurMaterials[ i ];
 
 
-			this.quad.material = this.separableBlurMaterials[i];
+			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = inputRenderTarget.texture;
 
 
-			this.separableBlurMaterials[i].uniforms[ "colorTexture" ].value = inputRenderTarget.texture;
+			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionX;
 
 
-			this.separableBlurMaterials[i].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionX;
+			renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[ i ], true );
 
 
-			renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[i], true );
+			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = this.renderTargetsHorizontal[ i ].texture;
 
 
-			this.separableBlurMaterials[i].uniforms[ "colorTexture" ].value = this.renderTargetsHorizontal[i].texture;
+			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionY;
 
 
-			this.separableBlurMaterials[i].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionY;
+			renderer.render( this.scene, this.camera, this.renderTargetsVertical[ i ], true );
 
 
-			renderer.render( this.scene, this.camera, this.renderTargetsVertical[i], true );
+			inputRenderTarget = this.renderTargetsVertical[ i ];
 
 
-			inputRenderTarget = this.renderTargetsVertical[i];
 		}
 		}
 
 
 		// Composite All the mips
 		// Composite All the mips
+
 		this.quad.material = this.compositeMaterial;
 		this.quad.material = this.compositeMaterial;
-		this.compositeMaterial.uniforms["bloomStrength"].value = this.strength;
-		this.compositeMaterial.uniforms["bloomRadius"].value = this.radius;
-		this.compositeMaterial.uniforms["bloomTintColors"].value = this.bloomTintColors;
-		renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[0], true );
+		this.compositeMaterial.uniforms[ "bloomStrength" ].value = this.strength;
+		this.compositeMaterial.uniforms[ "bloomRadius" ].value = this.radius;
+		this.compositeMaterial.uniforms[ "bloomTintColors" ].value = this.bloomTintColors;
+		renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[ 0 ], true );
 
 
 		// Blend it additively over the input texture
 		// Blend it additively over the input texture
+
 		this.quad.material = this.materialCopy;
 		this.quad.material = this.materialCopy;
-		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetsHorizontal[0].texture;
+		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetsHorizontal[ 0 ].texture;
 
 
 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
 
 
@@ -221,21 +241,22 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 
 		renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
 		renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
 		renderer.autoClear = oldAutoClear;
 		renderer.autoClear = oldAutoClear;
+
 	},
 	},
 
 
-	getSeperableBlurMaterial: function(kernelRadius) {
+	getSeperableBlurMaterial: function ( kernelRadius ) {
 
 
 		return new THREE.ShaderMaterial( {
 		return new THREE.ShaderMaterial( {
 
 
 			defines: {
 			defines: {
-				"KERNEL_RADIUS" : kernelRadius,
-				"SIGMA" : kernelRadius
+				"KERNEL_RADIUS": kernelRadius,
+				"SIGMA": kernelRadius
 			},
 			},
 
 
 			uniforms: {
 			uniforms: {
 				"colorTexture": { value: null },
 				"colorTexture": { value: null },
-				"texSize": 				{ value: new THREE.Vector2( 0.5, 0.5 ) },
-				"direction": 				{ value: new THREE.Vector2( 0.5, 0.5 ) }
+				"texSize": { value: new THREE.Vector2( 0.5, 0.5 ) },
+				"direction": { value: new THREE.Vector2( 0.5, 0.5 ) }
 			},
 			},
 
 
 			vertexShader:
 			vertexShader:
@@ -272,14 +293,15 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);\n\
 					gl_FragColor = vec4(diffuseSum/weightSum, 1.0);\n\
 				}"
 				}"
 		} );
 		} );
+
 	},
 	},
 
 
-	getCompositeMaterial: function(nMips) {
+	getCompositeMaterial: function ( nMips ) {
 
 
 		return new THREE.ShaderMaterial( {
 		return new THREE.ShaderMaterial( {
 
 
-			defines:{
-				"NUM_MIPS" : nMips
+			defines: {
+				"NUM_MIPS": nMips
 			},
 			},
 
 
 			uniforms: {
 			uniforms: {
@@ -289,10 +311,10 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 				"blurTexture4": { value: null },
 				"blurTexture4": { value: null },
 				"blurTexture5": { value: null },
 				"blurTexture5": { value: null },
 				"dirtTexture": { value: null },
 				"dirtTexture": { value: null },
-				"bloomStrength" : { value: 1.0 },
-				"bloomFactors" : { value: null },
-				"bloomTintColors" : { value: null },
-				"bloomRadius" : { value: 0.0 }
+				"bloomStrength": { value: 1.0 },
+				"bloomFactors": { value: null },
+				"bloomTintColors": { value: null },
+				"bloomRadius": { value: 0.0 }
 			},
 			},
 
 
 			vertexShader:
 			vertexShader:
@@ -322,12 +344,13 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 				\
 				\
 				void main() {\
 				void main() {\
 					gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) + \
 					gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) + \
-					 							 lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) + \
-												 lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) + \
-												 lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) + \
-												 lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );\
+													 lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) + \
+													 lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) + \
+													 lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) + \
+													 lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );\
 				}"
 				}"
 		} );
 		} );
+
 	}
 	}
 
 
 } );
 } );