TriangleBlurShader.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import {
  2. Vector2
  3. } from 'three';
  4. /**
  5. * Triangle blur shader
  6. * based on glfx.js triangle blur shader
  7. * https://github.com/evanw/glfx.js
  8. *
  9. * A basic blur filter, which convolves the image with a
  10. * pyramid filter. The pyramid filter is separable and is applied as two
  11. * perpendicular triangle filters.
  12. */
  13. const TriangleBlurShader = {
  14. uniforms: {
  15. 'texture': { value: null },
  16. 'delta': { value: new Vector2( 1, 1 ) }
  17. },
  18. vertexShader: /* glsl */`
  19. varying vec2 vUv;
  20. void main() {
  21. vUv = uv;
  22. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  23. }`,
  24. fragmentShader: /* glsl */`
  25. #include <common>
  26. #define ITERATIONS 10.0
  27. uniform sampler2D texture;
  28. uniform vec2 delta;
  29. varying vec2 vUv;
  30. void main() {
  31. vec4 color = vec4( 0.0 );
  32. float total = 0.0;
  33. // randomize the lookup values to hide the fixed number of samples
  34. float offset = rand( vUv );
  35. for ( float t = -ITERATIONS; t <= ITERATIONS; t ++ ) {
  36. float percent = ( t + offset - 0.5 ) / ITERATIONS;
  37. float weight = 1.0 - abs( percent );
  38. color += texture2D( texture, vUv + delta * percent ) * weight;
  39. total += weight;
  40. }
  41. gl_FragColor = color / total;
  42. }`
  43. };
  44. export { TriangleBlurShader };