BokehShader.js 5.7 KB

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