TriangleBlurShader.js 1.2 KB

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