mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Added sepia shader / effect.
This commit is contained in:
alteredq
@@ -356,6 +356,7 @@ THREE.ShaderChunk.fog_fragment,"}"].join("\n"),vertexShader:"attribute vec4 tang
|
||||
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:"varying vec2 vUv;\nuniform vec2 uImageIncrement;\nvoid main(void) {\nvUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform vec2 uImageIncrement;\nuniform float cKernel[KERNEL_SIZE];\nvoid main(void) {\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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float time;\nuniform bool grayscale;\nuniform float nIntensity;\nuniform float sIntensity;\nuniform float sCount;\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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float amount;\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}"},
|
||||
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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float opacity;\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(b){var c,e,f,g,j=2*Math.ceil(b*3)+1;j>25&&(j=25);g=(j-1)*0.5;e=Array(j);for(c=f=0;c<j;++c)e[c]=Math.exp(-((c-g)*(c-g))/(2*b*b)),f+=e[c];for(c=0;c<j;++c)e[c]/=f;return e}};
|
||||
THREE.AnimationHandler=function(){var b=[],c={},e={update:function(c){for(var e=0;e<b.length;e++)b[e].update(c)},addToUpdate:function(c){b.indexOf(c)===-1&&b.push(c)},removeFromUpdate:function(c){c=b.indexOf(c);c!==-1&&b.splice(c,1)},add:function(b){c[b.name]!==void 0&&console.log("THREE.AnimationHandler.add: Warning! "+b.name+" already exists in library. Overwriting.");c[b.name]=b;if(b.initialized!==!0){for(var e=0;e<b.hierarchy.length;e++){for(var f=0;f<b.hierarchy[e].keys.length;f++){if(b.hierarchy[e].keys[f].time<
|
||||
|
||||
@@ -22,6 +22,7 @@ THREE.ShaderChunk.fog_fragment,"}"].join("\n"),vertexShader:"attribute vec4 tang
|
||||
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:"varying vec2 vUv;\nuniform vec2 uImageIncrement;\nvoid main(void) {\nvUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform vec2 uImageIncrement;\nuniform float cKernel[KERNEL_SIZE];\nvoid main(void) {\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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float time;\nuniform bool grayscale;\nuniform float nIntensity;\nuniform float sIntensity;\nuniform float sCount;\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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float amount;\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}"},
|
||||
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:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float opacity;\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}};
|
||||
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,0 +1,44 @@
|
||||
/**
|
||||
* @author alteredq / http://alteredqualia.com/
|
||||
*/
|
||||
|
||||
THREE.SepiaPass = function( amount ) {
|
||||
|
||||
var shader = THREE.ShaderUtils.lib[ "sepia" ];
|
||||
|
||||
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
|
||||
this.uniforms[ "amount" ].value = ( amount !== undefined ) ? amount : 1.0;
|
||||
|
||||
this.material = new THREE.MeshShaderMaterial( {
|
||||
|
||||
uniforms: this.uniforms,
|
||||
vertexShader: shader.vertexShader,
|
||||
fragmentShader: shader.fragmentShader
|
||||
|
||||
} );
|
||||
|
||||
this.renderToScreen = false;
|
||||
|
||||
};
|
||||
|
||||
THREE.SepiaPass.prototype = {
|
||||
|
||||
render: function ( renderer, renderTarget, delta ) {
|
||||
|
||||
this.uniforms[ "tDiffuse" ].texture = renderTarget;
|
||||
|
||||
THREE.EffectComposer.quad.materials[ 0 ] = this.material;
|
||||
|
||||
if ( this.renderToScreen ) {
|
||||
|
||||
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
|
||||
|
||||
} else {
|
||||
|
||||
renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@@ -41,6 +41,7 @@
|
||||
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
|
||||
<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
|
||||
<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
|
||||
<script type="text/javascript" src="js/postprocessing/SepiaPass.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/Detector.js"></script>
|
||||
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
||||
@@ -156,8 +157,9 @@
|
||||
|
||||
var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
|
||||
var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
|
||||
var effectBloom = new THREE.BloomPass( 1.0 );
|
||||
var effectFilm = new THREE.FilmPass( 0.25, 0.5 );
|
||||
var effectBloom = new THREE.BloomPass( 0.75 );
|
||||
var effectFilm = new THREE.FilmPass( 0.35, 0.5, 2048, false );
|
||||
var effectSepia = new THREE.SepiaPass( 1.0 );
|
||||
|
||||
renderModel.clear = false;
|
||||
effectFilm.renderToScreen = true;
|
||||
@@ -167,8 +169,33 @@
|
||||
composer.addPass( renderBackground );
|
||||
composer.addPass( renderModel );
|
||||
composer.addPass( effectBloom );
|
||||
composer.addPass( effectSepia );
|
||||
composer.addPass( effectFilm );
|
||||
|
||||
//
|
||||
|
||||
onWindowResize();
|
||||
|
||||
window.addEventListener( 'resize', onWindowResize, false );
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize( event ) {
|
||||
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
cameraPerspective.aspect = window.innerWidth / window.innerHeight;
|
||||
cameraPerspective.updateProjectionMatrix();
|
||||
|
||||
cameraOrtho.left = window.innerWidth / - 2;
|
||||
cameraOrtho.right = window.innerWidth / 2;
|
||||
cameraOrtho.top = window.innerHeight / 2;
|
||||
cameraOrtho.bottom = window.innerHeight / - 2;
|
||||
|
||||
cameraOrtho.updateProjectionMatrix();
|
||||
|
||||
composer.reset();
|
||||
|
||||
}
|
||||
|
||||
function getText( id ) {
|
||||
|
||||
@@ -562,6 +562,58 @@ THREE.ShaderUtils = {
|
||||
|
||||
},
|
||||
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
// 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: [
|
||||
|
||||
"varying vec2 vUv;",
|
||||
"uniform sampler2D tDiffuse;",
|
||||
"uniform float amount;",
|
||||
|
||||
"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")
|
||||
|
||||
},
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
// Full-screen textured quad shader
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user