Examples: Convert shaders to ES6. (#21619)

Author: Mugen87

examples/js/shaders/ACESFilmicToneMappingShader.js

@@ -7,7 +7,7 @@
  * this implementation of ACES is modified to accommodate a brighter viewing environment.
  * the scale factor of 1/0.6 is subjective. see discussion in #19621.
  */
-	var ACESFilmicToneMappingShader = {
+	const ACESFilmicToneMappingShader = {
 		uniforms: {
 			'tDiffuse': {
 				value: null
@@ -16,15 +16,67 @@
 				value: 1.0
 			}
 		},
-		vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = uv;', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ '#define saturate(a) clamp( a, 0.0, 1.0 )', 'uniform sampler2D tDiffuse;', 'uniform float exposure;', 'varying vec2 vUv;', 'vec3 RRTAndODTFit( vec3 v ) {', '	vec3 a = v * ( v + 0.0245786 ) - 0.000090537;', '	vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081;', '	return a / b;', '}', 'vec3 ACESFilmicToneMapping( vec3 color ) {', // sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
-			'	const mat3 ACESInputMat = mat3(', '		vec3( 0.59719, 0.07600, 0.02840 ),', // transposed from source
-			'		vec3( 0.35458, 0.90834, 0.13383 ),', '		vec3( 0.04823, 0.01566, 0.83777 )', '	);', // ODT_SAT => XYZ => D60_2_D65 => sRGB
-			'	const mat3 ACESOutputMat = mat3(', '		vec3(	1.60475, -0.10208, -0.00327 ),', // transposed from source
-			'		vec3( -0.53108,	1.10813, -0.07276 ),', '		vec3( -0.07367, -0.00605,	1.07602 )', '	);', '	color = ACESInputMat * color;', // Apply RRT and ODT
-			'	color = RRTAndODTFit( color );', '	color = ACESOutputMat * color;', // Clamp to [0, 1]
-			'	return saturate( color );', '}', 'void main() {', '	vec4 tex = texture2D( tDiffuse, vUv );', '	tex.rgb *= exposure / 0.6;', // pre-exposed, outside of the tone mapping function
-			'	gl_FragColor = vec4( ACESFilmicToneMapping( tex.rgb ), tex.a );', '}' ].join( '\n' )
+		vertexShader: `varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `#define saturate(a) clamp( a, 0.0, 1.0 )
+
+		uniform sampler2D tDiffuse;
+
+		uniform float exposure;
+
+		varying vec2 vUv;
+
+		vec3 RRTAndODTFit( vec3 v ) {
+
+			vec3 a = v * ( v + 0.0245786 ) - 0.000090537;
+			vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081;
+			return a / b;
+
+		}
+
+		vec3 ACESFilmicToneMapping( vec3 color ) {
+
+		// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
+			const mat3 ACESInputMat = mat3(
+				vec3( 0.59719, 0.07600, 0.02840 ), // transposed from source
+				vec3( 0.35458, 0.90834, 0.13383 ),
+				vec3( 0.04823, 0.01566, 0.83777 )
+			);
+
+		// ODT_SAT => XYZ => D60_2_D65 => sRGB
+			const mat3 ACESOutputMat = mat3(
+				vec3(	1.60475, -0.10208, -0.00327 ), // transposed from source
+				vec3( -0.53108,	1.10813, -0.07276 ),
+				vec3( -0.07367, -0.00605,	1.07602 )
+			);
+
+			color = ACESInputMat * color;
+
+		// Apply RRT and ODT
+			color = RRTAndODTFit( color );
+
+			color = ACESOutputMat * color;
+
+		// Clamp to [0, 1]
+			return saturate( color );
+
+		}
+
+		void main() {
+
+			vec4 tex = texture2D( tDiffuse, vUv );
+
+			tex.rgb *= exposure / 0.6; // pre-exposed, outside of the tone mapping function
+
+			gl_FragColor = vec4( ACESFilmicToneMapping( tex.rgb ), tex.a );
+
+		}`
 	};
 
 	THREE.ACESFilmicToneMappingShader = ACESFilmicToneMappingShader;

examples/js/shaders/AfterimageShader.js

@@ -5,7 +5,7 @@
  * I created this effect inspired by a demo on codepen:
  * https://codepen.io/brunoimbrizi/pen/MoRJaN?page=1&
  */
-	var AfterimageShader = {
+	const AfterimageShader = {
 		uniforms: {
 			'damp': {
 				value: 0.96
@@ -17,8 +17,37 @@
 				value: null
 			}
 		},
-		vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = uv;', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ 'uniform float damp;', 'uniform sampler2D tOld;', 'uniform sampler2D tNew;', 'varying vec2 vUv;', 'vec4 when_gt( vec4 x, float y ) {', '	return max( sign( x - y ), 0.0 );', '}', 'void main() {', '	vec4 texelOld = texture2D( tOld, vUv );', '	vec4 texelNew = texture2D( tNew, vUv );', '	texelOld *= damp * when_gt( texelOld, 0.1 );', '	gl_FragColor = max(texelNew, texelOld);', '}' ].join( '\n' )
+		vertexShader: `varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `uniform float damp;
+
+		uniform sampler2D tOld;
+		uniform sampler2D tNew;
+
+		varying vec2 vUv;
+
+		vec4 when_gt( vec4 x, float y ) {
+
+			return max( sign( x - y ), 0.0 );
+
+		}
+
+		void main() {
+
+			vec4 texelOld = texture2D( tOld, vUv );
+			vec4 texelNew = texture2D( tNew, vUv );
+
+			texelOld *= damp * when_gt( texelOld, 0.1 );
+
+			gl_FragColor = max(texelNew, texelOld);
+
+		}`
 	};
 
 	THREE.AfterimageShader = AfterimageShader;

examples/js/shaders/BasicShader.js

@@ -3,10 +3,18 @@
 	/**
  * Simple test shader
  */
-	var BasicShader = {
+	const BasicShader = {
 		uniforms: {},
-		vertexShader: [ 'void main() {', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ 'void main() {', '	gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );', '}' ].join( '\n' )
+		vertexShader: `void main() {
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `void main() {
+
+			gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
+
+		}`
 	};
 
 	THREE.BasicShader = BasicShader;

examples/js/shaders/BleachBypassShader.js

@@ -5,7 +5,7 @@
  * - based on Nvidia example
  * http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
  */
-	var BleachBypassShader = {
+	const BleachBypassShader = {
 		uniforms: {
 			'tDiffuse': {
 				value: null
@@ -14,8 +14,42 @@
 				value: 1.0
 			}
 		},
-		vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = uv;', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ 'uniform float opacity;', 'uniform sampler2D tDiffuse;', 'varying vec2 vUv;', 'void main() {', '	vec4 base = texture2D( tDiffuse, vUv );', '	vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );', '	float lum = dot( lumCoeff, base.rgb );', '	vec3 blend = vec3( lum );', '	float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );', '	vec3 result1 = 2.0 * base.rgb * blend;', '	vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );', '	vec3 newColor = mix( result1, result2, L );', '	float A2 = opacity * base.a;', '	vec3 mixRGB = A2 * newColor.rgb;', '	mixRGB += ( ( 1.0 - A2 ) * base.rgb );', '	gl_FragColor = vec4( mixRGB, base.a );', '}' ].join( '\n' )
+		vertexShader: `varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `uniform float opacity;
+
+		uniform sampler2D tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 base = texture2D( tDiffuse, vUv );
+
+			vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );
+			float lum = dot( lumCoeff, base.rgb );
+			vec3 blend = vec3( lum );
+
+			float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );
+
+			vec3 result1 = 2.0 * base.rgb * blend;
+			vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );
+
+			vec3 newColor = mix( result1, result2, L );
+
+			float A2 = opacity * base.a;
+			vec3 mixRGB = A2 * newColor.rgb;
+			mixRGB += ( ( 1.0 - A2 ) * base.rgb );
+
+			gl_FragColor = vec4( mixRGB, base.a );
+
+		}`
 	};
 
 	THREE.BleachBypassShader = BleachBypassShader;

examples/js/shaders/BlendShader.js

@@ -3,7 +3,7 @@
 	/**
  * Blend two textures
  */
-	var BlendShader = {
+	const BlendShader = {
 		uniforms: {
 			'tDiffuse1': {
 				value: null
@@ -18,8 +18,29 @@
 				value: 1.0
 			}
 		},
-		vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = uv;', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ 'uniform float opacity;', 'uniform float mixRatio;', 'uniform sampler2D tDiffuse1;', 'uniform sampler2D tDiffuse2;', 'varying vec2 vUv;', 'void main() {', '	vec4 texel1 = texture2D( tDiffuse1, vUv );', '	vec4 texel2 = texture2D( tDiffuse2, vUv );', '	gl_FragColor = opacity * mix( texel1, texel2, mixRatio );', '}' ].join( '\n' )
+		vertexShader: `varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `uniform float opacity;
+		uniform float mixRatio;
+
+		uniform sampler2D tDiffuse1;
+		uniform sampler2D tDiffuse2;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel1 = texture2D( tDiffuse1, vUv );
+			vec4 texel2 = texture2D( tDiffuse2, vUv );
+			gl_FragColor = opacity * mix( texel1, texel2, mixRatio );
+
+		}`
 	};
 
 	THREE.BlendShader = BlendShader;

examples/js/shaders/BokehShader.js

@@ -5,7 +5,7 @@
  * ported from GLSL shader by Martins Upitis
  * http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
  */
-	var BokehShader = {
+	const BokehShader = {
 		defines: {
 			'DEPTH_PACKING': 1,
 			'PERSPECTIVE_CAMERA': 1
@@ -36,11 +36,114 @@
 				value: 1000.0
 			}
 		},
-		vertexShader: [ 'varying vec2 vUv;', 'void main() {', '	vUv = uv;', '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
-		fragmentShader: [ '#include <common>', 'varying vec2 vUv;', 'uniform sampler2D tColor;', 'uniform sampler2D tDepth;', 'uniform float maxblur;', // max blur amount
-			'uniform float aperture;', // aperture - bigger values for shallower depth of field
-			'uniform float nearClip;', 'uniform float farClip;', 'uniform float focus;', 'uniform float aspect;', '#include <packing>', 'float getDepth( const in vec2 screenPosition ) {', '	#if DEPTH_PACKING == 1', '	return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );', '	#else', '	return texture2D( tDepth, screenPosition ).x;', '	#endif', '}', 'float getViewZ( const in float depth ) {', '	#if PERSPECTIVE_CAMERA == 1', '	return perspectiveDepthToViewZ( depth, nearClip, farClip );', '	#else', '	return orthographicDepthToViewZ( depth, nearClip, farClip );', '	#endif', '}', 'void main() {', '	vec2 aspectcorrect = vec2( 1.0, aspect );', '	float viewZ = getViewZ( getDepth( vUv ) );', '	float factor = ( focus + viewZ );', // viewZ is <= 0, so this is a difference equation
-			'	vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );', '	vec2 dofblur9 = dofblur * 0.9;', '	vec2 dofblur7 = dofblur * 0.7;', '	vec2 dofblur4 = dofblur * 0.4;', '	vec4 col = vec4( 0.0 );', '	col += texture2D( tColor, vUv.xy );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.15,	0.37 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.37,	0.15 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.40,	0.0	) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.37, -0.15 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.15,	0.37 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.37,	0.15 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.15, -0.37 ) * aspectcorrect ) * dofblur );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.15,	0.37 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.37,	0.15 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.37, -0.15 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.15,	0.37 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.37,	0.15 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.15, -0.37 ) * aspectcorrect ) * dofblur9 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.40,	0.0	) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur7 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.4,	 0.0	) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );', '	col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur4 );', '	gl_FragColor = col / 41.0;', '	gl_FragColor.a = 1.0;', '}' ].join( '\n' )
+		vertexShader: `varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+		fragmentShader: `#include <common>
+
+		varying vec2 vUv;
+
+		uniform sampler2D tColor;
+		uniform sampler2D tDepth;
+
+		uniform float maxblur; // max blur amount
+		uniform float aperture; // aperture - bigger values for shallower depth of field
+
+		uniform float nearClip;
+		uniform float farClip;
+
+		uniform float focus;
+		uniform float aspect;
+
+		#include <packing>
+
+		float getDepth( const in vec2 screenPosition ) {
+			#if DEPTH_PACKING == 1
+			return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );
+			#else
+			return texture2D( tDepth, screenPosition ).x;
+			#endif
+		}
+
+		float getViewZ( const in float depth ) {
+			#if PERSPECTIVE_CAMERA == 1
+			return perspectiveDepthToViewZ( depth, nearClip, farClip );
+			#else
+			return orthographicDepthToViewZ( depth, nearClip, farClip );
+			#endif
+		}
+
+
+		void main() {
+
+			vec2 aspectcorrect = vec2( 1.0, aspect );
+
+			float viewZ = getViewZ( getDepth( vUv ) );
+
+			float factor = ( focus + viewZ ); // viewZ is <= 0, so this is a difference equation
+
+			vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );
+
+			vec2 dofblur9 = dofblur * 0.9;
+			vec2 dofblur7 = dofblur * 0.7;
+			vec2 dofblur4 = dofblur * 0.4;
+
+			vec4 col = vec4( 0.0 );
+
+			col += texture2D( tColor, vUv.xy );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.15,	0.37 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.37,	0.15 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.40,	0.0	) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.37, -0.15 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.15,	0.37 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.37,	0.15 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.15, -0.37 ) * aspectcorrect ) * dofblur );
+
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.15,	0.37 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.37,	0.15 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.15,	0.37 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.37,	0.15 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
+
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.40,	0.0	) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur7 );
+
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29,	0.29 ) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.4,	 0.0	) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	-0.4	) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29,	0.29 ) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.4,	 0.0	) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
+			col += texture2D( tColor, vUv.xy + ( vec2(	0.0,	 0.4	) * aspectcorrect ) * dofblur4 );
+
+			gl_FragColor = col / 41.0;
+			gl_FragColor.a = 1.0;
+
+		}`
 	};
 
 	THREE.BokehShader = BokehShader;