TriangleBlurShader.js 1.3 KB

1234567891011121314151617181920212223242526272829
  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. var TriangleBlurShader = {
  12. uniforms: {
  13. 'texture': {
  14. value: null
  15. },
  16. 'delta': {
  17. value: new THREE.Vector2( 1, 1 )
  18. }
  19. },
  20. vertexShader: [ 'varying vec2 vUv;', 'void main() {', ' vUv = uv;', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  21. fragmentShader: [ '#include <common>', '#define ITERATIONS 10.0', 'uniform sampler2D texture;', 'uniform vec2 delta;', 'varying vec2 vUv;', 'void main() {', ' vec4 color = vec4( 0.0 );', ' float total = 0.0;', // randomize the lookup values to hide the fixed number of samples
  22. ' float offset = rand( vUv );', ' 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' )
  23. };
  24. THREE.TriangleBlurShader = TriangleBlurShader;
  25. } )();