BokehShader.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /**
  2. * Depth-of-field shader with bokeh
  3. * ported from GLSL shader by Martins Upitis
  4. * http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html
  5. */
  6. const BokehShader = {
  7. defines: {
  8. 'DEPTH_PACKING': 1,
  9. 'PERSPECTIVE_CAMERA': 1,
  10. },
  11. uniforms: {
  12. 'tColor': { value: null },
  13. 'tDepth': { value: null },
  14. 'focus': { value: 1.0 },
  15. 'aspect': { value: 1.0 },
  16. 'aperture': { value: 0.025 },
  17. 'maxblur': { value: 0.01 },
  18. 'nearClip': { value: 1.0 },
  19. 'farClip': { value: 1000.0 },
  20. },
  21. vertexShader: /* glsl */`
  22. varying vec2 vUv;
  23. void main() {
  24. vUv = uv;
  25. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  26. }`,
  27. fragmentShader: /* glsl */`
  28. #include <common>
  29. varying vec2 vUv;
  30. uniform sampler2D tColor;
  31. uniform sampler2D tDepth;
  32. uniform float maxblur; // max blur amount
  33. uniform float aperture; // aperture - bigger values for shallower depth of field
  34. uniform float nearClip;
  35. uniform float farClip;
  36. uniform float focus;
  37. uniform float aspect;
  38. #include <packing>
  39. float getDepth( const in vec2 screenPosition ) {
  40. #if DEPTH_PACKING == 1
  41. return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );
  42. #else
  43. return texture2D( tDepth, screenPosition ).x;
  44. #endif
  45. }
  46. float getViewZ( const in float depth ) {
  47. #if PERSPECTIVE_CAMERA == 1
  48. return perspectiveDepthToViewZ( depth, nearClip, farClip );
  49. #else
  50. return orthographicDepthToViewZ( depth, nearClip, farClip );
  51. #endif
  52. }
  53. void main() {
  54. vec2 aspectcorrect = vec2( 1.0, aspect );
  55. float viewZ = getViewZ( getDepth( vUv ) );
  56. float factor = ( focus + viewZ ); // viewZ is <= 0, so this is a difference equation
  57. vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );
  58. vec2 dofblur9 = dofblur * 0.9;
  59. vec2 dofblur7 = dofblur * 0.7;
  60. vec2 dofblur4 = dofblur * 0.4;
  61. vec4 col = vec4( 0.0 );
  62. col += texture2D( tColor, vUv.xy );
  63. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );
  64. col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );
  65. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );
  66. col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );
  67. col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );
  68. col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );
  69. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );
  70. col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );
  71. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );
  72. col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );
  73. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );
  74. col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );
  75. col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );
  76. col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
  77. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
  78. col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );
  79. col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
  80. col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
  81. col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
  82. col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
  83. col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
  84. col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
  85. col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
  86. col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
  87. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
  88. col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );
  89. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
  90. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );
  91. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
  92. col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );
  93. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
  94. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );
  95. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
  96. col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
  97. col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
  98. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );
  99. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
  100. col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
  101. col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
  102. col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );
  103. gl_FragColor = col / 41.0;
  104. gl_FragColor.a = 1.0;
  105. }`
  106. };
  107. export { BokehShader };