topical media & game development
mobile-query-three-vendor-three-r53.js-shaders-TriangleBlurShader.js / js
author: zz85 / www.lab4games.net/zz85/blog
Triangle blur shader
based on glfx.js triangle blur shader
github.com/evanw/glfx.js
A basic blur filter, which convolves the image with a
pyramid filter. The pyramid filter is separable and is applied as two
perpendicular triangle filters.
THREE.TriangleBlurShader = {
uniforms : {
"texture": { type: "t", value: null },
"delta": { type: "v2", value:new THREE.Vector2( 1, 1 ) }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"#define ITERATIONS 10.0",
"uniform sampler2D texture;",
"uniform vec2 delta;",
"varying vec2 vUv;",
"float random( vec3 scale, float seed ) {",
// use the fragment position for a different seed per-pixel
"return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed );",
"}",
"void main() {",
"vec4 color = vec4( 0.0 );",
"float total = 0.0;",
// randomize the lookup values to hide the fixed number of samples
"float offset = random( vec3( 12.9898, 78.233, 151.7182 ), 0.0 );",
"for ( float t = -ITERATIONS; t <= ITERATIONS; t ++ ) {",
"float percent = ( t + offset - 0.5 ) / ITERATIONS;",
"float weight = 1.0 - abs( percent );",
"color += texture2D( texture, vUv + delta * percent ) * weight;",
"total += weight;",
"}",
"gl_FragColor = color / total;",
"}"
].join("\n")
};
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.