HorizontalTiltShiftShader.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * Simple fake tilt-shift effect, modulating two pass Gaussian blur (see above) by vertical position
  3. *
  4. * - 9 samples per pass
  5. * - standard deviation 2.7
  6. * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
  7. * - "r" parameter control where "focused" horizontal line lies
  8. */
  9. const HorizontalTiltShiftShader = {
  10. uniforms: {
  11. 'tDiffuse': { value: null },
  12. 'h': { value: 1.0 / 512.0 },
  13. 'r': { value: 0.35 }
  14. },
  15. vertexShader: /* glsl */`
  16. varying vec2 vUv;
  17. void main() {
  18. vUv = uv;
  19. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  20. }`,
  21. fragmentShader: /* glsl */`
  22. uniform sampler2D tDiffuse;
  23. uniform float h;
  24. uniform float r;
  25. varying vec2 vUv;
  26. void main() {
  27. vec4 sum = vec4( 0.0 );
  28. float hh = h * abs( r - vUv.y );
  29. sum += texture2D( tDiffuse, vec2( vUv.x - 4.0 * hh, vUv.y ) ) * 0.051;
  30. sum += texture2D( tDiffuse, vec2( vUv.x - 3.0 * hh, vUv.y ) ) * 0.0918;
  31. sum += texture2D( tDiffuse, vec2( vUv.x - 2.0 * hh, vUv.y ) ) * 0.12245;
  32. sum += texture2D( tDiffuse, vec2( vUv.x - 1.0 * hh, vUv.y ) ) * 0.1531;
  33. sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y ) ) * 0.1633;
  34. sum += texture2D( tDiffuse, vec2( vUv.x + 1.0 * hh, vUv.y ) ) * 0.1531;
  35. sum += texture2D( tDiffuse, vec2( vUv.x + 2.0 * hh, vUv.y ) ) * 0.12245;
  36. sum += texture2D( tDiffuse, vec2( vUv.x + 3.0 * hh, vUv.y ) ) * 0.0918;
  37. sum += texture2D( tDiffuse, vec2( vUv.x + 4.0 * hh, vUv.y ) ) * 0.051;
  38. gl_FragColor = sum;
  39. }`
  40. };
  41. export { HorizontalTiltShiftShader };