提交 797530e4 编写于 作者: A alteredq

Moved 2d filter shaders from ShaderUtils to ShaderExtras.

上级 10e12a83
此差异已折叠。
......@@ -19,15 +19,7 @@ normal:{uniforms:THREE.UniformsUtils.merge([THREE.UniformsLib.fog,THREE.Uniforms
value:new THREE.Color(15658734)},uSpecularColor:{type:"c",value:new THREE.Color(1118481)},uAmbientColor:{type:"c",value:new THREE.Color(328965)},uShininess:{type:"f",value:30},uOpacity:{type:"f",value:1}}]),fragmentShader:["uniform vec3 uAmbientColor;\nuniform vec3 uDiffuseColor;\nuniform vec3 uSpecularColor;\nuniform float uShininess;\nuniform float uOpacity;\nuniform bool enableDiffuse;\nuniform bool enableSpecular;\nuniform bool enableAO;\nuniform sampler2D tDiffuse;\nuniform sampler2D tNormal;\nuniform sampler2D tSpecular;\nuniform sampler2D tAO;\nuniform float uNormalScale;\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nuniform vec3 ambientLightColor;\n#if MAX_DIR_LIGHTS > 0\nuniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];\nuniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];\n#endif\n#if MAX_POINT_LIGHTS > 0\nuniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];\nvarying vec4 vPointLight[ MAX_POINT_LIGHTS ];\n#endif\nvarying vec3 vViewPosition;",
THREE.ShaderChunk.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( 1.0 );\nvec4 mColor = vec4( uDiffuseColor, uOpacity );\nvec4 mSpecular = vec4( uSpecularColor, uOpacity );\nvec3 specularTex = vec3( 1.0 );\nvec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;\nnormalTex.xy *= uNormalScale;\nnormalTex = normalize( normalTex );\nif( enableDiffuse )\ngl_FragColor = gl_FragColor * texture2D( tDiffuse, vUv );\nif( enableAO )\ngl_FragColor = gl_FragColor * texture2D( tAO, vUv );\nif( enableSpecular )\nspecularTex = texture2D( tSpecular, vUv ).xyz;\nmat3 tsb = mat3( vTangent, vBinormal, vNormal );\nvec3 finalNormal = tsb * normalTex;\nvec3 normal = normalize( finalNormal );\nvec3 viewPosition = normalize( vViewPosition );\n#if MAX_POINT_LIGHTS > 0\nvec4 pointTotal = vec4( vec3( 0.0 ), 1.0 );\nfor ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {\nvec3 pointVector = normalize( vPointLight[ i ].xyz );\nvec3 pointHalfVector = normalize( vPointLight[ i ].xyz + viewPosition );\nfloat pointDistance = vPointLight[ i ].w;\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = specularTex.r * pow( pointDotNormalHalf, uShininess );\npointTotal += pointDistance * vec4( pointLightColor[ i ], 1.0 ) * ( mColor * pointDiffuseWeight + mSpecular * pointSpecularWeight * pointDiffuseWeight );\n}\n#endif\n#if MAX_DIR_LIGHTS > 0\nvec4 dirTotal = vec4( vec3( 0.0 ), 1.0 );\nfor( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {\nvec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + viewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = specularTex.r * pow( dirDotNormalHalf, uShininess );\ndirTotal += vec4( directionalLightColor[ i ], 1.0 ) * ( mColor * dirDiffuseWeight + mSpecular * dirSpecularWeight * dirDiffuseWeight );\n}\n#endif\nvec4 totalLight = vec4( ambientLightColor * uAmbientColor, uOpacity );\n#if MAX_DIR_LIGHTS > 0\ntotalLight += dirTotal;\n#endif\n#if MAX_POINT_LIGHTS > 0\ntotalLight += pointTotal;\n#endif\ngl_FragColor = gl_FragColor * totalLight;",
THREE.ShaderChunk.fog_fragment,"}"].join("\n"),vertexShader:"attribute vec4 tangent;\n#ifdef VERTEX_TEXTURES\nuniform sampler2D tDisplacement;\nuniform float uDisplacementScale;\nuniform float uDisplacementBias;\n#endif\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\n#if MAX_POINT_LIGHTS > 0\nuniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];\nuniform float pointLightDistance[ MAX_POINT_LIGHTS ];\nvarying vec4 vPointLight[ MAX_POINT_LIGHTS ];\n#endif\nvarying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\nvTangent = normalize( normalMatrix * tangent.xyz );\nvBinormal = cross( vNormal, vTangent ) * tangent.w;\nvBinormal = normalize( vBinormal );\nvUv = uv;\n#if MAX_POINT_LIGHTS > 0\nfor( int i = 0; i < MAX_POINT_LIGHTS; i++ ) {\nvec4 lPosition = viewMatrix * vec4( pointLightPosition[ i ], 1.0 );\nvec3 lVector = lPosition.xyz - mvPosition.xyz;\nfloat lDistance = 1.0;\nif ( pointLightDistance[ i ] > 0.0 )\nlDistance = 1.0 - min( ( length( lVector ) / pointLightDistance[ i ] ), 1.0 );\nlVector = normalize( lVector );\nvPointLight[ i ] = vec4( lVector, lDistance );\n}\n#endif\n#ifdef VERTEX_TEXTURES\nvec3 dv = texture2D( tDisplacement, uv ).xyz;\nfloat df = uDisplacementScale * dv.x + uDisplacementBias;\nvec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;\ngl_Position = projectionMatrix * displacedPosition;\n#else\ngl_Position = projectionMatrix * mvPosition;\n#endif\n}"},
cube:{uniforms:{tCube:{type:"t",value:1,texture:null}},vertexShader:"varying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform samplerCube tCube;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 wPos = cameraPosition - vViewPosition;\ngl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );\n}"},convolution:{uniforms:{tDiffuse:{type:"t",
value:0,texture:null},uImageIncrement:{type:"v2",value:new THREE.Vector2(0.001953125,0)},cKernel:{type:"fv1",value:[]}},vertexShader:"uniform vec2 uImageIncrement;\nvarying vec2 vUv;\nvoid main() {\nvUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float cKernel[ KERNEL_SIZE ];\nuniform sampler2D tDiffuse;\nuniform vec2 uImageIncrement;\nvarying vec2 vUv;\nvoid main() {\nvec2 imageCoord = vUv;\nvec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );\nfor( int i = 0; i < KERNEL_SIZE; i ++ ) {\nsum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];\nimageCoord += uImageIncrement;\n}\ngl_FragColor = sum;\n}"},
film:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},time:{type:"f",value:0},nIntensity:{type:"f",value:0.5},sIntensity:{type:"f",value:0.05},sCount:{type:"f",value:4096},grayscale:{type:"i",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float time;\nuniform bool grayscale;\nuniform float nIntensity;\nuniform float sIntensity;\nuniform float sCount;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nvoid main() {\nvec4 cTextureScreen = texture2D( tDiffuse, vUv );\nfloat x = vUv.x * vUv.y * time * 1000.0;\nx = mod( x, 13.0 ) * mod( x, 123.0 );\nfloat dx = mod( x, 0.01 );\nvec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );\nvec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );\ncResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;\ncResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );\nif( grayscale ) {\ncResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );\n}\ngl_FragColor = vec4( cResult, cTextureScreen.a );\n}"},
sepia:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},amount:{type:"f",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float amount;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nvoid main() {\nvec4 color = texture2D( tDiffuse, vUv );\nvec3 c = color.rgb;\ncolor.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );\ncolor.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );\ncolor.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );\ngl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );\n}"},
dotscreen:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},tSize:{type:"v2",value:new THREE.Vector2(256,256)},center:{type:"v2",value:new THREE.Vector2(0.5,0.5)},angle:{type:"f",value:1.57},scale:{type:"f",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform vec2 center;\nuniform float angle;\nuniform float scale;\nuniform vec2 tSize;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nfloat pattern() {\nfloat s = sin( angle ), c = cos( angle );\nvec2 tex = vUv * tSize - center;\nvec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;\nreturn ( sin( point.x ) * sin( point.y ) ) * 4.0;\n}\nvoid main() {\nvec4 color = texture2D( tDiffuse, vUv );\nfloat average = ( color.r + color.g + color.b ) / 3.0;\ngl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );\n}"},
vignette:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},offset:{type:"f",value:1},darkness:{type:"f",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float offset;\nuniform float darkness;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nvoid main() {\nvec4 texel = texture2D( tDiffuse, vUv );\nvec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );\ngl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );\n}"},
bleachbypass:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},opacity:{type:"f",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float opacity;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nvoid main() {\nvec4 base = texture2D( tDiffuse, vUv );\nvec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );\nfloat lum = dot( lumCoeff, base.rgb );\nvec3 blend = vec3( lum );\nfloat L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );\nvec3 result1 = 2.0 * base.rgb * blend;\nvec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );\nvec3 newColor = mix( result1, result2, L );\nfloat A2 = opacity * base.a;\nvec3 mixRGB = A2 * newColor.rgb;\nmixRGB += ( ( 1.0 - A2 ) * base.rgb );\ngl_FragColor = vec4( mixRGB, base.a );\n}"},
screen:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},opacity:{type:"f",value:1}},vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float opacity;\nuniform sampler2D tDiffuse;\nvarying vec2 vUv;\nvoid main() {\nvec4 texel = texture2D( tDiffuse, vUv );\ngl_FragColor = opacity * texel;\n}"},basic:{uniforms:{},vertexShader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"void main() {\ngl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );\n}"}},buildKernel:function(a){var b,c,e,f,h=2*Math.ceil(a*3)+1;h>25&&(h=25);f=(h-1)*0.5;c=Array(h);for(b=e=0;b<h;++b)c[b]=Math.exp(-((b-f)*(b-f))/(2*a*a)),e+=c[b];for(b=0;b<h;++b)c[b]/=e;return c}};
cube:{uniforms:{tCube:{type:"t",value:1,texture:null}},vertexShader:"varying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform samplerCube tCube;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 wPos = cameraPosition - vViewPosition;\ngl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );\n}"}}};
THREE.AnimationHandler=function(){var a=[],b={},c={update:function(c){for(var b=0;b<a.length;b++)a[b].update(c)},addToUpdate:function(c){a.indexOf(c)===-1&&a.push(c)},removeFromUpdate:function(c){c=a.indexOf(c);c!==-1&&a.splice(c,1)},add:function(a){b[a.name]!==void 0&&console.log("THREE.AnimationHandler.add: Warning! "+a.name+" already exists in library. Overwriting.");b[a.name]=a;if(a.initialized!==!0){for(var c=0;c<a.hierarchy.length;c++){for(var e=0;e<a.hierarchy[c].keys.length;e++){if(a.hierarchy[c].keys[e].time<
0)a.hierarchy[c].keys[e].time=0;if(a.hierarchy[c].keys[e].rot!==void 0&&!(a.hierarchy[c].keys[e].rot instanceof THREE.Quaternion)){var j=a.hierarchy[c].keys[e].rot;a.hierarchy[c].keys[e].rot=new THREE.Quaternion(j[0],j[1],j[2],j[3])}}if(a.hierarchy[c].keys[0].morphTargets!==void 0){j={};for(e=0;e<a.hierarchy[c].keys.length;e++)for(var k=0;k<a.hierarchy[c].keys[e].morphTargets.length;k++){var l=a.hierarchy[c].keys[e].morphTargets[k];j[l]=-1}a.hierarchy[c].usedMorphTargets=j;for(e=0;e<a.hierarchy[c].keys.length;e++){var m=
{};for(l in j){for(k=0;k<a.hierarchy[c].keys[e].morphTargets.length;k++)if(a.hierarchy[c].keys[e].morphTargets[k]===l){m[l]=a.hierarchy[c].keys[e].morphTargetsInfluences[k];break}k===a.hierarchy[c].keys[e].morphTargets.length&&(m[l]=0)}a.hierarchy[c].keys[e].morphTargetsInfluences=m}}for(e=1;e<a.hierarchy[c].keys.length;e++)a.hierarchy[c].keys[e].time===a.hierarchy[c].keys[e-1].time&&(a.hierarchy[c].keys.splice(e,1),e--);for(e=1;e<a.hierarchy[c].keys.length;e++)a.hierarchy[c].keys[e].index=e}e=parseInt(a.length*
......
var ShaderExtras = {
/**
* @author alteredq / http://alteredqualia.com/
*
* ShaderExtras currently contains:
*
* screen
* convolution
* film
* bokeh
* sepia
* dotscreen
* vignette
* bleachbypass
* basic
*
*/
THREE.ShaderExtras = {
/* -------------------------------------------------------------------------
// Full-screen textured quad shader
------------------------------------------------------------------------- */
'screen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
opacity: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join("\n")
},
/* ------------------------------------------------------------------------
// Convolution shader
// - ported from o3d sample to WebGL / GLSL
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
------------------------------------------------------------------------ */
'convolution': {
uniforms: {
"tDiffuse" : { type: "t", value: 0, texture: null },
"uImageIncrement" : { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
"cKernel" : { type: "fv1", value: [] }
},
vertexShader: [
//"#define KERNEL_SIZE 25.0",
"uniform vec2 uImageIncrement;",
"varying vec2 vUv;",
"void main() {",
"vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
//"#define KERNEL_SIZE 25",
"uniform float cKernel[ KERNEL_SIZE ];",
"uniform sampler2D tDiffuse;",
"uniform vec2 uImageIncrement;",
"varying vec2 vUv;",
"void main() {",
"vec2 imageCoord = vUv;",
"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
"for( int i = 0; i < KERNEL_SIZE; i ++ ) {",
"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
"imageCoord += uImageIncrement;",
"}",
"gl_FragColor = sum;",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Film grain & scanlines shader
// - ported from HLSL to WebGL / GLSL
// http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
// Screen Space Static Postprocessor
//
// Produces an analogue noise overlay similar to a film grain / TV static
//
// Original implementation and noise algorithm
// Pat 'Hawthorne' Shearon
//
// Optimized scanlines + noise version with intensity scaling
// Georg 'Leviathan' Steinrohder
// This version is provided under a Creative Commons Attribution 3.0 License
// http://creativecommons.org/licenses/by/3.0/
------------------------------------------------------------------------- */
'film': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
time: { type: "f", value: 0.0 },
nIntensity: { type: "f", value: 0.5 },
sIntensity: { type: "f", value: 0.05 },
sCount: { type: "f", value: 4096 },
grayscale: { type: "i", value: 1 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
// control parameter
"uniform float time;",
"uniform bool grayscale;",
// noise effect intensity value (0 = no effect, 1 = full effect)
"uniform float nIntensity;",
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"uniform float sIntensity;",
// scanlines effect count value (0 = no effect, 4096 = full effect)
"uniform float sCount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// sample the source
"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
// make some noise
"float x = vUv.x * vUv.y * time * 1000.0;",
"x = mod( x, 13.0 ) * mod( x, 123.0 );",
"float dx = mod( x, 0.01 );",
// add noise
"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );",
// get us a sine and cosine
"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
// add scanlines
"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
// interpolate between source and result by intensity
"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
// convert to grayscale if desired
"if( grayscale ) {",
"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
"}",
"gl_FragColor = vec4( cResult, cTextureScreen.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Depth-of-field shader with bokeh
// ported from GLSL shader by Martins Upitis
// ported from GLSL shader by Martins Upitis
// http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
------------------------------------------------------------------------- */
'bokeh' : {
uniforms: { tColor: { type: "t", value: 0, texture: null },
......@@ -21,10 +252,10 @@ var ShaderExtras = {
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
......@@ -32,16 +263,16 @@ var ShaderExtras = {
fragmentShader: [
"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 focus;",
"uniform float aspect;",
"void main() {",
"vec2 aspectcorrect = vec2( 1.0, aspect );",
......@@ -49,9 +280,9 @@ var ShaderExtras = {
"vec4 depth1 = texture2D( tDepth, vUv );",
"float factor = depth1.x - focus;",
"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
"vec2 dofblur9 = dofblur * 0.9;",
"vec2 dofblur7 = dofblur * 0.7;",
"vec2 dofblur4 = dofblur * 0.4;",
......@@ -64,52 +295,361 @@ var ShaderExtras = {
"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.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.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.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.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.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.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.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.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.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")
}
].join("\n")
},
/* -------------------------------------------------------------------------
// Sepia tone shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'sepia': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
amount: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float amount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"vec3 c = color.rgb;",
"color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );",
"color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );",
"color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );",
"gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Dot screen shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'dotscreen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
tSize: { type: "v2", value: new THREE.Vector2( 256, 256 ) },
center: { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
angle: { type: "f", value: 1.57 },
scale: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform vec2 center;",
"uniform float angle;",
"uniform float scale;",
"uniform vec2 tSize;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"float pattern() {",
"float s = sin( angle ), c = cos( angle );",
"vec2 tex = vUv * tSize - center;",
"vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;",
"return ( sin( point.x ) * sin( point.y ) ) * 4.0;",
"}",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"float average = ( color.r + color.g + color.b ) / 3.0;",
"gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );",
"}"
].join("\n")
},
/* ------------------------------------------------------------------------------------------------
// Vignette shader
// - based on PaintEffect postprocess from ro.me
// http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
------------------------------------------------------------------------------------------------ */
'vignette': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
offset: { type: "f", value: 1.0 },
darkness: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float offset;",
"uniform float darkness;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// Eskil's vignette
"vec4 texel = texture2D( tDiffuse, vUv );",
"vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );",
"gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );",
/*
// alternative version from glfx.js
// this one makes more "dusty" look (as opposed to "burned")
"vec4 color = texture2D( tDiffuse, vUv );",
"float dist = distance( vUv, vec2( 0.5 ) );",
"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
"gl_FragColor = color;",
*/
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
// - based on Nvidia example
// http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
------------------------------------------------------------------------- */
'bleachbypass': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
opacity: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"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")
},
/* -------------------------------------------------------------------------
// Simple test shader
------------------------------------------------------------------------- */
'basic': {
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")
},
// METHODS
buildKernel: function( sigma ) {
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
function gauss( x, sigma ) {
return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
}
var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
halfWidth = ( kernelSize - 1 ) * 0.5
values = new Array( kernelSize );
sum = 0.0;
for ( i = 0; i < kernelSize; ++i ) {
values[ i ] = gauss( i - halfWidth, sigma );
sum += values[ i ];
}
// normalize the kernel
for ( i = 0; i < kernelSize; ++i ) values[ i ] /= sum;
return values;
}
};
......@@ -18,7 +18,7 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// screen material
var screenShader = THREE.ShaderUtils.lib[ "screen" ];
var screenShader = THREE.ShaderExtras[ "screen" ];
this.screenUniforms = THREE.UniformsUtils.clone( screenShader.uniforms );
......@@ -36,12 +36,12 @@ THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
// convolution material
var convolutionShader = THREE.ShaderUtils.lib[ "convolution" ];
var convolutionShader = THREE.ShaderExtras[ "convolution" ];
this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx;
this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( sigma );
this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderExtras.buildKernel( sigma );
this.materialConvolution = new THREE.MeshShaderMaterial( {
......
......@@ -4,7 +4,7 @@
THREE.DotScreenPass = function( center, angle, scale ) {
var shader = THREE.ShaderUtils.lib[ "dotscreen" ];
var shader = THREE.ShaderExtras[ "dotscreen" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
......
......@@ -4,7 +4,7 @@
THREE.FilmPass = function( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
var shader = THREE.ShaderUtils.lib[ "film" ];
var shader = THREE.ShaderExtras[ "film" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
......
......@@ -4,7 +4,7 @@
THREE.TexturePass = function( texture, opacity ) {
var shader = THREE.ShaderUtils.lib[ "screen" ];
var shader = THREE.ShaderExtras[ "screen" ];
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
......
......@@ -33,6 +33,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
......
......@@ -41,6 +41,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
......
......@@ -45,6 +45,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
......@@ -153,7 +155,7 @@
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.3 );
var effectScreen = new THREE.ShaderPass( THREE.ShaderUtils.lib[ "screen" ] );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
......
......@@ -53,8 +53,6 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var postprocessing = false;
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
......@@ -62,8 +60,6 @@
camera, scene, renderer, material;
var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
init();
animate();
......@@ -81,7 +77,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
var geometry = new THREE.Geometry(),
......@@ -93,14 +89,14 @@
n_sub = 6;
var position, index;
var spline = new THREE.Spline( points );
for ( i = 0; i < points.length * n_sub; i ++ ) {
index = i / ( points.length * n_sub );
position = spline.getPoint( index );
geometry.vertices[ i ] = new THREE.Vertex( new THREE.Vector3( position.x, position.y, position.z ) );
colors[ i ] = new THREE.Color( 0xffffff );
......@@ -112,8 +108,8 @@
colors3[ i ] = new THREE.Color( 0xffffff );
colors3[ i ].setHSV( i / ( points.length * n_sub ), 1.0, 1.0 );
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
......@@ -133,7 +129,7 @@
material.vertexColors = true;
for ( i = 0; i < parameters.length; ++i ) {
for ( i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
......@@ -145,57 +141,6 @@
}
// postprocessing
cameraOrtho = new THREE.Camera();
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
cameraOrtho.position.z = 100;
sceneScreen = new THREE.Scene();
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = rtTexture1;
screen_uniforms["opacity"].value = 1.0;
materialScreen = new THREE.MeshShaderMaterial( {
uniforms: screen_uniforms,
vertexShader: screen_shader.vertexShader,
fragmentShader: screen_shader.fragmentShader,
blending: THREE.AdditiveBlending
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
blurx = new THREE.Vector2( 0.001953125, 0.0 ),
blury = new THREE.Vector2( 0.0, 0.001953125 );
convolution_uniforms["tDiffuse"].texture = rtTexture1;
convolution_uniforms["uImageIncrement"].value = blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
materialConvolution = new THREE.MeshShaderMaterial( {
uniforms: convolution_uniforms,
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
} );
var plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
quadScreen = new THREE.Mesh( plane, materialConvolution );
quadScreen.position.z = -100;
sceneScreen.addObject( quadScreen );
stats = new Stats();
stats.domElement.style.position = 'absolute';
......@@ -249,6 +194,7 @@
}
return vec;
}
//
......@@ -279,6 +225,7 @@
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
......@@ -294,60 +241,16 @@
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.updateMatrix();
var time = new Date().getTime() * 0.0005;
for( var i = 0; i<scene.objects.length; i++ ) {
scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
}
renderer.clear();
if ( postprocessing ) {
// Render scene into texture
renderer.render( scene, camera, rtTexture1 );
// Render quad with blured scene into texture (convolution pass 1)
quadScreen.materials = [ materialConvolution ];
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
materialConvolution.uniforms.uImageIncrement.value = blurx;
renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
// Render quad with blured scene into texture (convolution pass 2)
materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
materialConvolution.uniforms.uImageIncrement.value = blury;
renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
// Render original scene with superimposed blur to texture
quadScreen.materials = [ materialScreen ];
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
materialScreen.uniforms.opacity.value = 1.3;
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
// Render to screen
materialScreen.uniforms.tDiffuse.texture = rtTexture1;
renderer.render( sceneScreen, cameraOrtho );
for( var i = 0; i < scene.objects.length; i ++ ) {
} else {
renderer.render( scene, camera );
scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1);
}
renderer.render( scene, camera );
}
......
......@@ -38,6 +38,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -207,7 +209,7 @@
postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_shader = THREE.ShaderExtras["screen"];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
......@@ -223,7 +225,7 @@
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_shader = THREE.ShaderExtras["convolution"];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
......@@ -231,7 +233,7 @@
convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
......
......@@ -41,6 +41,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
......@@ -355,7 +357,7 @@
effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
var screen_shader = THREE.ShaderUtils.lib["screen"];
var screen_shader = THREE.ShaderExtras[ "screen" ];
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
......@@ -371,7 +373,7 @@
} );
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
var convolution_shader = THREE.ShaderExtras[ "convolution" ];
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
......@@ -379,7 +381,7 @@
convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
convolution_uniforms["uImageIncrement"].value = effect.blurx;
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
effect.materialConvolution = new THREE.MeshShaderMaterial( {
......@@ -389,7 +391,7 @@
} );
var film_shader = THREE.ShaderUtils.lib["film"];
var film_shader = THREE.ShaderExtras[ "film" ];
var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
film_uniforms["tDiffuse"].texture = effect.rtTexture1;
......
......@@ -41,6 +41,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
......@@ -165,10 +167,10 @@
//
var shaderBleach = THREE.ShaderUtils.lib[ "bleachbypass" ];
var shaderSepia = THREE.ShaderUtils.lib[ "sepia" ];
var shaderVignette = THREE.ShaderUtils.lib[ "vignette" ];
var shaderScreen = THREE.ShaderUtils.lib[ "screen" ];
var shaderBleach = THREE.ShaderExtras[ "bleachbypass" ];
var shaderSepia = THREE.ShaderExtras[ "sepia" ];
var shaderVignette = THREE.ShaderExtras[ "vignette" ];
var shaderScreen = THREE.ShaderExtras[ "screen" ];
var effectBleach = new THREE.ShaderPass( shaderBleach );
var effectSepia = new THREE.ShaderPass( shaderSepia );
......
......@@ -241,7 +241,7 @@
postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );
var bokeh_shader = ShaderExtras[ "bokeh" ];
var bokeh_shader = THREE.ShaderExtras[ "bokeh" ];
postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
......
......@@ -33,6 +33,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
......@@ -198,7 +200,7 @@
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.0 );
var effectScreen = new THREE.ShaderPass( THREE.ShaderUtils.lib[ "screen" ] );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
effectScreen.renderToScreen = true;
......
......@@ -139,6 +139,8 @@
<script type="text/javascript" src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
<script type="text/javascript" src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -173,9 +175,9 @@
var geometry = new THREE.SphereGeometry( 50, 32, 16 );
var uniforms = THREE.ShaderUtils.lib[ 'basic' ].uniforms;
var vertexShader = THREE.ShaderUtils.lib[ 'basic' ].vertexShader;
var fragmentShader = THREE.ShaderUtils.lib[ 'basic' ].fragmentShader;
var uniforms = THREE.ShaderExtras[ 'basic' ].uniforms;
var vertexShader = THREE.ShaderExtras[ 'basic' ].vertexShader;
var fragmentShader = THREE.ShaderExtras[ 'basic' ].fragmentShader;
var texture = new THREE.Texture( generateTexture( 0, 0.5, 1 ), new THREE.UVMapping() );
var texture2 = new THREE.Texture( generateTexture( 0, 1, 0 ), new THREE.SphericalReflectionMapping() );
......
......@@ -37,6 +37,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
......
......@@ -32,6 +32,8 @@
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
......@@ -138,7 +140,7 @@
cameraOrtho = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
cameraOrtho.position.z = 10;
var shader = THREE.ShaderUtils.lib[ "screen" ];
var shader = THREE.ShaderExtras[ "screen" ];
var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
hudMaterial = new THREE.MeshShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
......
......@@ -2,14 +2,12 @@
* @author alteredq / http://alteredqualia.com/
* @author mr.doob / http://mrdoob.com/
*
* ShaderUtils currently contains
* ShaderUtils currently contains:
*
* fresnel
* normal
* cube
* convolution
* film
* screen
* basic
*
*/
if ( THREE.WebGLRenderer ) {
......@@ -400,530 +398,8 @@ THREE.ShaderUtils = {
].join("\n")
},
/* ------------------------------------------------------------------------
// Convolution shader
// - ported from o3d sample to WebGL / GLSL
// http://o3d.googlecode.com/svn/trunk/samples/convolution.html
------------------------------------------------------------------------ */
'convolution': {
uniforms: {
"tDiffuse" : { type: "t", value: 0, texture: null },
"uImageIncrement" : { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
"cKernel" : { type: "fv1", value: [] }
},
vertexShader: [
//"#define KERNEL_SIZE 25.0",
"uniform vec2 uImageIncrement;",
"varying vec2 vUv;",
"void main() {",
"vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
//"#define KERNEL_SIZE 25",
"uniform float cKernel[ KERNEL_SIZE ];",
"uniform sampler2D tDiffuse;",
"uniform vec2 uImageIncrement;",
"varying vec2 vUv;",
"void main() {",
"vec2 imageCoord = vUv;",
"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
"for( int i = 0; i < KERNEL_SIZE; i ++ ) {",
"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
"imageCoord += uImageIncrement;",
"}",
"gl_FragColor = sum;",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Film grain & scanlines shader
// - ported from HLSL to WebGL / GLSL
// http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
// Screen Space Static Postprocessor
//
// Produces an analogue noise overlay similar to a film grain / TV static
//
// Original implementation and noise algorithm
// Pat 'Hawthorne' Shearon
//
// Optimized scanlines + noise version with intensity scaling
// Georg 'Leviathan' Steinrohder
// This version is provided under a Creative Commons Attribution 3.0 License
// http://creativecommons.org/licenses/by/3.0/
------------------------------------------------------------------------- */
'film': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
time: { type: "f", value: 0.0 },
nIntensity: { type: "f", value: 0.5 },
sIntensity: { type: "f", value: 0.05 },
sCount: { type: "f", value: 4096 },
grayscale: { type: "i", value: 1 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
// control parameter
"uniform float time;",
"uniform bool grayscale;",
// noise effect intensity value (0 = no effect, 1 = full effect)
"uniform float nIntensity;",
// scanlines effect intensity value (0 = no effect, 1 = full effect)
"uniform float sIntensity;",
// scanlines effect count value (0 = no effect, 4096 = full effect)
"uniform float sCount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// sample the source
"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
// make some noise
"float x = vUv.x * vUv.y * time * 1000.0;",
"x = mod( x, 13.0 ) * mod( x, 123.0 );",
"float dx = mod( x, 0.01 );",
// add noise
"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );",
// get us a sine and cosine
"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",
// add scanlines
"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",
// interpolate between source and result by intensity
"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
// convert to grayscale if desired
"if( grayscale ) {",
"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
"}",
"gl_FragColor = vec4( cResult, cTextureScreen.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Sepia tone shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'sepia': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
amount: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float amount;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"vec3 c = color.rgb;",
"color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );",
"color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );",
"color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );",
"gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Dot screen shader
// - based on glfx.js sepia shader
// https://github.com/evanw/glfx.js
------------------------------------------------------------------------- */
'dotscreen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
tSize: { type: "v2", value: new THREE.Vector2( 256, 256 ) },
center: { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
angle: { type: "f", value: 1.57 },
scale: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform vec2 center;",
"uniform float angle;",
"uniform float scale;",
"uniform vec2 tSize;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"float pattern() {",
"float s = sin( angle ), c = cos( angle );",
"vec2 tex = vUv * tSize - center;",
"vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;",
"return ( sin( point.x ) * sin( point.y ) ) * 4.0;",
"}",
"void main() {",
"vec4 color = texture2D( tDiffuse, vUv );",
"float average = ( color.r + color.g + color.b ) / 3.0;",
"gl_FragColor = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );",
"}"
].join("\n")
},
/* ------------------------------------------------------------------------------------------------
// Vignette shader
// - based on PaintEffect postprocess from ro.me
// http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
------------------------------------------------------------------------------------------------ */
'vignette': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
offset: { type: "f", value: 1.0 },
darkness: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float offset;",
"uniform float darkness;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
// Eskil's vignette
"vec4 texel = texture2D( tDiffuse, vUv );",
"vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );",
"gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );",
/*
// alternative version from glfx.js
// this one makes more "dusty" look (as opposed to "burned")
"vec4 color = texture2D( tDiffuse, vUv );",
"float dist = distance( vUv, vec2( 0.5 ) );",
"color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
"gl_FragColor = color;",
*/
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
// - based on Nvidia example
// http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
------------------------------------------------------------------------- */
'bleachbypass': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
opacity: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"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")
},
/* -------------------------------------------------------------------------
// Full-screen textured quad shader
------------------------------------------------------------------------- */
'screen': {
uniforms: {
tDiffuse: { type: "t", value: 0, texture: null },
opacity: { type: "f", value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = vec2( uv.x, 1.0 - uv.y );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join("\n")
},
/* -------------------------------------------------------------------------
// Simple test shader
------------------------------------------------------------------------- */
'basic': {
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")
}
},
buildKernel: function( sigma ) {
// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
function gauss( x, sigma ) {
return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
}
var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
halfWidth = ( kernelSize - 1 ) * 0.5
values = new Array( kernelSize );
sum = 0.0;
for ( i = 0; i < kernelSize; ++i ) {
values[ i ] = gauss( i - halfWidth, sigma );
sum += values[ i ];
}
// normalize the kernel
for ( i = 0; i < kernelSize; ++i ) values[ i ] /= sum;
return values;
}
};
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册