topical media & game development

talk show tell print

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.