TriangleBlurShader.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /**
  2. * @author zz85 / http://www.lab4games.net/zz85/blog
  3. *
  4. * Triangle blur shader
  5. * based on glfx.js triangle blur shader
  6. * https://github.com/evanw/glfx.js
  7. *
  8. * A basic blur filter, which convolves the image with a
  9. * pyramid filter. The pyramid filter is separable and is applied as two
  10. * perpendicular triangle filters.
  11. */
  12. THREE.TriangleBlurShader = {
  13. uniforms : {
  14. "texture": { type: "t", value: null },
  15. "delta": { type: "v2", value:new THREE.Vector2( 1, 1 ) }
  16. },
  17. vertexShader: [
  18. "varying vec2 vUv;",
  19. "void main() {",
  20. "vUv = uv;",
  21. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  22. "}"
  23. ].join("\n"),
  24. fragmentShader: [
  25. "#define ITERATIONS 10.0",
  26. "uniform sampler2D texture;",
  27. "uniform vec2 delta;",
  28. "varying vec2 vUv;",
  29. "float random( vec3 scale, float seed ) {",
  30. // use the fragment position for a different seed per-pixel
  31. "return fract( sin( dot( gl_FragCoord.xyz + seed, scale ) ) * 43758.5453 + seed );",
  32. "}",
  33. "void main() {",
  34. "vec4 color = vec4( 0.0 );",
  35. "float total = 0.0;",
  36. // randomize the lookup values to hide the fixed number of samples
  37. "float offset = random( vec3( 12.9898, 78.233, 151.7182 ), 0.0 );",
  38. "for ( float t = -ITERATIONS; t <= ITERATIONS; t ++ ) {",
  39. "float percent = ( t + offset - 0.5 ) / ITERATIONS;",
  40. "float weight = 1.0 - abs( percent );",
  41. "color += texture2D( texture, vUv + delta * percent ) * weight;",
  42. "total += weight;",
  43. "}",
  44. "gl_FragColor = color / total;",
  45. "}"
  46. ].join("\n")
  47. };