SMAAShader.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. ( function () {
  2. /**
  3. * WebGL port of Subpixel Morphological Antialiasing (SMAA) v2.8
  4. * Preset: SMAA 1x Medium (with color edge detection)
  5. * https://github.com/iryoku/smaa/releases/tag/v2.8
  6. */
  7. var SMAAEdgesShader = {
  8. defines: {
  9. 'SMAA_THRESHOLD': '0.1'
  10. },
  11. uniforms: {
  12. 'tDiffuse': {
  13. value: null
  14. },
  15. 'resolution': {
  16. value: new THREE.Vector2( 1 / 1024, 1 / 512 )
  17. }
  18. },
  19. vertexShader: [ 'uniform vec2 resolution;', 'varying vec2 vUv;', 'varying vec4 vOffset[ 3 ];', 'void SMAAEdgeDetectionVS( vec2 texcoord ) {', ' vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0, 1.0 );', // WebGL port note: Changed sign in W component
  20. ' vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( 1.0, 0.0, 0.0, -1.0 );', // WebGL port note: Changed sign in W component
  21. ' vOffset[ 2 ] = texcoord.xyxy + resolution.xyxy * vec4( -2.0, 0.0, 0.0, 2.0 );', // WebGL port note: Changed sign in W component
  22. '}', 'void main() {', ' vUv = uv;', ' SMAAEdgeDetectionVS( vUv );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  23. fragmentShader: [ 'uniform sampler2D tDiffuse;', 'varying vec2 vUv;', 'varying vec4 vOffset[ 3 ];', 'vec4 SMAAColorEdgeDetectionPS( vec2 texcoord, vec4 offset[3], sampler2D colorTex ) {', ' vec2 threshold = vec2( SMAA_THRESHOLD, SMAA_THRESHOLD );', // Calculate color deltas:
  24. ' vec4 delta;', ' vec3 C = texture2D( colorTex, texcoord ).rgb;', ' vec3 Cleft = texture2D( colorTex, offset[0].xy ).rgb;', ' vec3 t = abs( C - Cleft );', ' delta.x = max( max( t.r, t.g ), t.b );', ' vec3 Ctop = texture2D( colorTex, offset[0].zw ).rgb;', ' t = abs( C - Ctop );', ' delta.y = max( max( t.r, t.g ), t.b );', // We do the usual threshold:
  25. ' vec2 edges = step( threshold, delta.xy );', // Then discard if there is no edge:
  26. ' if ( dot( edges, vec2( 1.0, 1.0 ) ) == 0.0 )', ' discard;', // Calculate right and bottom deltas:
  27. ' vec3 Cright = texture2D( colorTex, offset[1].xy ).rgb;', ' t = abs( C - Cright );', ' delta.z = max( max( t.r, t.g ), t.b );', ' vec3 Cbottom = texture2D( colorTex, offset[1].zw ).rgb;', ' t = abs( C - Cbottom );', ' delta.w = max( max( t.r, t.g ), t.b );', // Calculate the maximum delta in the direct neighborhood:
  28. ' float maxDelta = max( max( max( delta.x, delta.y ), delta.z ), delta.w );', // Calculate left-left and top-top deltas:
  29. ' vec3 Cleftleft = texture2D( colorTex, offset[2].xy ).rgb;', ' t = abs( C - Cleftleft );', ' delta.z = max( max( t.r, t.g ), t.b );', ' vec3 Ctoptop = texture2D( colorTex, offset[2].zw ).rgb;', ' t = abs( C - Ctoptop );', ' delta.w = max( max( t.r, t.g ), t.b );', // Calculate the final maximum delta:
  30. ' maxDelta = max( max( maxDelta, delta.z ), delta.w );', // Local contrast adaptation in action:
  31. ' edges.xy *= step( 0.5 * maxDelta, delta.xy );', ' return vec4( edges, 0.0, 0.0 );', '}', 'void main() {', ' gl_FragColor = SMAAColorEdgeDetectionPS( vUv, vOffset, tDiffuse );', '}' ].join( '\n' )
  32. };
  33. var SMAAWeightsShader = {
  34. defines: {
  35. 'SMAA_MAX_SEARCH_STEPS': '8',
  36. 'SMAA_AREATEX_MAX_DISTANCE': '16',
  37. 'SMAA_AREATEX_PIXEL_SIZE': '( 1.0 / vec2( 160.0, 560.0 ) )',
  38. 'SMAA_AREATEX_SUBTEX_SIZE': '( 1.0 / 7.0 )'
  39. },
  40. uniforms: {
  41. 'tDiffuse': {
  42. value: null
  43. },
  44. 'tArea': {
  45. value: null
  46. },
  47. 'tSearch': {
  48. value: null
  49. },
  50. 'resolution': {
  51. value: new THREE.Vector2( 1 / 1024, 1 / 512 )
  52. }
  53. },
  54. vertexShader: [ 'uniform vec2 resolution;', 'varying vec2 vUv;', 'varying vec4 vOffset[ 3 ];', 'varying vec2 vPixcoord;', 'void SMAABlendingWeightCalculationVS( vec2 texcoord ) {', ' vPixcoord = texcoord / resolution;', // We will use these offsets for the searches later on (see @PSEUDO_GATHER4):
  55. ' vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -0.25, 0.125, 1.25, 0.125 );', // WebGL port note: Changed sign in Y and W components
  56. ' vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( -0.125, 0.25, -0.125, -1.25 );', // WebGL port note: Changed sign in Y and W components
  57. // And these for the searches, they indicate the ends of the loops:
  58. ' vOffset[ 2 ] = vec4( vOffset[ 0 ].xz, vOffset[ 1 ].yw ) + vec4( -2.0, 2.0, -2.0, 2.0 ) * resolution.xxyy * float( SMAA_MAX_SEARCH_STEPS );', '}', 'void main() {', ' vUv = uv;', ' SMAABlendingWeightCalculationVS( vUv );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  59. fragmentShader: [ '#define SMAASampleLevelZeroOffset( tex, coord, offset ) texture2D( tex, coord + float( offset ) * resolution, 0.0 )', 'uniform sampler2D tDiffuse;', 'uniform sampler2D tArea;', 'uniform sampler2D tSearch;', 'uniform vec2 resolution;', 'varying vec2 vUv;', 'varying vec4 vOffset[3];', 'varying vec2 vPixcoord;', '#if __VERSION__ == 100', 'vec2 round( vec2 x ) {', ' return sign( x ) * floor( abs( x ) + 0.5 );', '}', '#endif', 'float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {', // Not required if searchTex accesses are set to point:
  60. // float2 SEARCH_TEX_PIXEL_SIZE = 1.0 / float2(66.0, 33.0);
  61. // e = float2(bias, 0.0) + 0.5 * SEARCH_TEX_PIXEL_SIZE +
  62. // e * float2(scale, 1.0) * float2(64.0, 32.0) * SEARCH_TEX_PIXEL_SIZE;
  63. ' e.r = bias + e.r * scale;', ' return 255.0 * texture2D( searchTex, e, 0.0 ).r;', '}', 'float SMAASearchXLeft( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {',
  64. /**
  65. * @PSEUDO_GATHER4
  66. * This texcoord has been offset by (-0.25, -0.125) in the vertex shader to
  67. * sample between edge, thus fetching four edges in a row.
  68. * Sampling with different offsets in each direction allows to disambiguate
  69. * which edges are active from the four fetched ones.
  70. */
  71. ' vec2 e = vec2( 0.0, 1.0 );', ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  72. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;', ' texcoord -= vec2( 2.0, 0.0 ) * resolution;', ' if ( ! ( texcoord.x > end && e.g > 0.8281 && e.r == 0.0 ) ) break;', ' }', // We correct the previous (-0.25, -0.125) offset we applied:
  73. ' texcoord.x += 0.25 * resolution.x;', // The searches are bias by 1, so adjust the coords accordingly:
  74. ' texcoord.x += resolution.x;', // Disambiguate the length added by the last step:
  75. ' texcoord.x += 2.0 * resolution.x;', // Undo last step
  76. ' texcoord.x -= resolution.x * SMAASearchLength(searchTex, e, 0.0, 0.5);', ' return texcoord.x;', '}', 'float SMAASearchXRight( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {', ' vec2 e = vec2( 0.0, 1.0 );', ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  77. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;', ' texcoord += vec2( 2.0, 0.0 ) * resolution;', ' if ( ! ( texcoord.x < end && e.g > 0.8281 && e.r == 0.0 ) ) break;', ' }', ' texcoord.x -= 0.25 * resolution.x;', ' texcoord.x -= resolution.x;', ' texcoord.x -= 2.0 * resolution.x;', ' texcoord.x += resolution.x * SMAASearchLength( searchTex, e, 0.5, 0.5 );', ' return texcoord.x;', '}', 'float SMAASearchYUp( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {', ' vec2 e = vec2( 1.0, 0.0 );', ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  78. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;', ' texcoord += vec2( 0.0, 2.0 ) * resolution;', // WebGL port note: Changed sign
  79. ' if ( ! ( texcoord.y > end && e.r > 0.8281 && e.g == 0.0 ) ) break;', ' }', ' texcoord.y -= 0.25 * resolution.y;', // WebGL port note: Changed sign
  80. ' texcoord.y -= resolution.y;', // WebGL port note: Changed sign
  81. ' texcoord.y -= 2.0 * resolution.y;', // WebGL port note: Changed sign
  82. ' texcoord.y += resolution.y * SMAASearchLength( searchTex, e.gr, 0.0, 0.5 );', // WebGL port note: Changed sign
  83. ' return texcoord.y;', '}', 'float SMAASearchYDown( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {', ' vec2 e = vec2( 1.0, 0.0 );', ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  84. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;', ' texcoord -= vec2( 0.0, 2.0 ) * resolution;', // WebGL port note: Changed sign
  85. ' if ( ! ( texcoord.y < end && e.r > 0.8281 && e.g == 0.0 ) ) break;', ' }', ' texcoord.y += 0.25 * resolution.y;', // WebGL port note: Changed sign
  86. ' texcoord.y += resolution.y;', // WebGL port note: Changed sign
  87. ' texcoord.y += 2.0 * resolution.y;', // WebGL port note: Changed sign
  88. ' texcoord.y -= resolution.y * SMAASearchLength( searchTex, e.gr, 0.5, 0.5 );', // WebGL port note: Changed sign
  89. ' return texcoord.y;', '}', 'vec2 SMAAArea( sampler2D areaTex, vec2 dist, float e1, float e2, float offset ) {', // Rounding prevents precision errors of bilinear filtering:
  90. ' vec2 texcoord = float( SMAA_AREATEX_MAX_DISTANCE ) * round( 4.0 * vec2( e1, e2 ) ) + dist;', // We do a scale and bias for mapping to texel space:
  91. ' texcoord = SMAA_AREATEX_PIXEL_SIZE * texcoord + ( 0.5 * SMAA_AREATEX_PIXEL_SIZE );', // Move to proper place, according to the subpixel offset:
  92. ' texcoord.y += SMAA_AREATEX_SUBTEX_SIZE * offset;', ' return texture2D( areaTex, texcoord, 0.0 ).rg;', '}', 'vec4 SMAABlendingWeightCalculationPS( vec2 texcoord, vec2 pixcoord, vec4 offset[ 3 ], sampler2D edgesTex, sampler2D areaTex, sampler2D searchTex, ivec4 subsampleIndices ) {', ' vec4 weights = vec4( 0.0, 0.0, 0.0, 0.0 );', ' vec2 e = texture2D( edgesTex, texcoord ).rg;', ' if ( e.g > 0.0 ) {', // Edge at north
  93. ' vec2 d;', // Find the distance to the left:
  94. ' vec2 coords;', ' coords.x = SMAASearchXLeft( edgesTex, searchTex, offset[ 0 ].xy, offset[ 2 ].x );', ' coords.y = offset[ 1 ].y;', // offset[1].y = texcoord.y - 0.25 * resolution.y (@CROSSING_OFFSET)
  95. ' d.x = coords.x;', // Now fetch the left crossing edges, two at a time using bilinear
  96. // filtering. Sampling at -0.25 (see @CROSSING_OFFSET) enables to
  97. // discern what value each edge has:
  98. ' float e1 = texture2D( edgesTex, coords, 0.0 ).r;', // Find the distance to the right:
  99. ' coords.x = SMAASearchXRight( edgesTex, searchTex, offset[ 0 ].zw, offset[ 2 ].y );', ' d.y = coords.x;', // We want the distances to be in pixel units (doing this here allow to
  100. // better interleave arithmetic and memory accesses):
  101. ' d = d / resolution.x - pixcoord.x;', // SMAAArea below needs a sqrt, as the areas texture is compressed
  102. // quadratically:
  103. ' vec2 sqrt_d = sqrt( abs( d ) );', // Fetch the right crossing edges:
  104. ' coords.y -= 1.0 * resolution.y;', // WebGL port note: Added
  105. ' float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 1, 0 ) ).r;', // Ok, we know how this pattern looks like, now it is time for getting
  106. // the actual area:
  107. ' weights.rg = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.y ) );', ' }', ' if ( e.r > 0.0 ) {', // Edge at west
  108. ' vec2 d;', // Find the distance to the top:
  109. ' vec2 coords;', ' coords.y = SMAASearchYUp( edgesTex, searchTex, offset[ 1 ].xy, offset[ 2 ].z );', ' coords.x = offset[ 0 ].x;', // offset[1].x = texcoord.x - 0.25 * resolution.x;
  110. ' d.x = coords.y;', // Fetch the top crossing edges:
  111. ' float e1 = texture2D( edgesTex, coords, 0.0 ).g;', // Find the distance to the bottom:
  112. ' coords.y = SMAASearchYDown( edgesTex, searchTex, offset[ 1 ].zw, offset[ 2 ].w );', ' d.y = coords.y;', // We want the distances to be in pixel units:
  113. ' d = d / resolution.y - pixcoord.y;', // SMAAArea below needs a sqrt, as the areas texture is compressed
  114. // quadratically:
  115. ' vec2 sqrt_d = sqrt( abs( d ) );', // Fetch the bottom crossing edges:
  116. ' coords.y -= 1.0 * resolution.y;', // WebGL port note: Added
  117. ' float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 0, 1 ) ).g;', // Get the area for this direction:
  118. ' weights.ba = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.x ) );', ' }', ' return weights;', '}', 'void main() {', ' gl_FragColor = SMAABlendingWeightCalculationPS( vUv, vPixcoord, vOffset, tDiffuse, tArea, tSearch, ivec4( 0.0 ) );', '}' ].join( '\n' )
  119. };
  120. var SMAABlendShader = {
  121. uniforms: {
  122. 'tDiffuse': {
  123. value: null
  124. },
  125. 'tColor': {
  126. value: null
  127. },
  128. 'resolution': {
  129. value: new THREE.Vector2( 1 / 1024, 1 / 512 )
  130. }
  131. },
  132. vertexShader: [ 'uniform vec2 resolution;', 'varying vec2 vUv;', 'varying vec4 vOffset[ 2 ];', 'void SMAANeighborhoodBlendingVS( vec2 texcoord ) {', ' vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0, 1.0 );', // WebGL port note: Changed sign in W component
  133. ' vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( 1.0, 0.0, 0.0, -1.0 );', // WebGL port note: Changed sign in W component
  134. '}', 'void main() {', ' vUv = uv;', ' SMAANeighborhoodBlendingVS( vUv );', ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join( '\n' ),
  135. fragmentShader: [ 'uniform sampler2D tDiffuse;', 'uniform sampler2D tColor;', 'uniform vec2 resolution;', 'varying vec2 vUv;', 'varying vec4 vOffset[ 2 ];', 'vec4 SMAANeighborhoodBlendingPS( vec2 texcoord, vec4 offset[ 2 ], sampler2D colorTex, sampler2D blendTex ) {', // Fetch the blending weights for current pixel:
  136. ' vec4 a;', ' a.xz = texture2D( blendTex, texcoord ).xz;', ' a.y = texture2D( blendTex, offset[ 1 ].zw ).g;', ' a.w = texture2D( blendTex, offset[ 1 ].xy ).a;', // Is there any blending weight with a value greater than 0.0?
  137. ' if ( dot(a, vec4( 1.0, 1.0, 1.0, 1.0 )) < 1e-5 ) {', ' return texture2D( colorTex, texcoord, 0.0 );', ' } else {', // Up to 4 lines can be crossing a pixel (one through each edge). We
  138. // favor blending by choosing the line with the maximum weight for each
  139. // direction:
  140. ' vec2 offset;', ' offset.x = a.a > a.b ? a.a : -a.b;', // left vs. right
  141. ' offset.y = a.g > a.r ? -a.g : a.r;', // top vs. bottom // WebGL port note: Changed signs
  142. // Then we go in the direction that has the maximum weight:
  143. ' if ( abs( offset.x ) > abs( offset.y )) {', // horizontal vs. vertical
  144. ' offset.y = 0.0;', ' } else {', ' offset.x = 0.0;', ' }', // Fetch the opposite color and lerp by hand:
  145. ' vec4 C = texture2D( colorTex, texcoord, 0.0 );', ' texcoord += sign( offset ) * resolution;', ' vec4 Cop = texture2D( colorTex, texcoord, 0.0 );', ' float s = abs( offset.x ) > abs( offset.y ) ? abs( offset.x ) : abs( offset.y );', // WebGL port note: Added gamma correction
  146. ' C.xyz = pow(C.xyz, vec3(2.2));', ' Cop.xyz = pow(Cop.xyz, vec3(2.2));', ' vec4 mixed = mix(C, Cop, s);', ' mixed.xyz = pow(mixed.xyz, vec3(1.0 / 2.2));', ' return mixed;', ' }', '}', 'void main() {', ' gl_FragColor = SMAANeighborhoodBlendingPS( vUv, vOffset, tColor, tDiffuse );', '}' ].join( '\n' )
  147. };
  148. THREE.SMAABlendShader = SMAABlendShader;
  149. THREE.SMAAEdgesShader = SMAAEdgesShader;
  150. THREE.SMAAWeightsShader = SMAAWeightsShader;
  151. } )();