SMAAShader.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. import {
  2. Vector2
  3. } from '../../../build/three.module.js';
  4. /**
  5. * WebGL port of Subpixel Morphological Antialiasing (SMAA) v2.8
  6. * Preset: SMAA 1x Medium (with color edge detection)
  7. * https://github.com/iryoku/smaa/releases/tag/v2.8
  8. */
  9. var SMAAEdgesShader = {
  10. defines: {
  11. 'SMAA_THRESHOLD': '0.1'
  12. },
  13. uniforms: {
  14. 'tDiffuse': { value: null },
  15. 'resolution': { value: new Vector2( 1 / 1024, 1 / 512 ) }
  16. },
  17. vertexShader: [
  18. 'uniform vec2 resolution;',
  19. 'varying vec2 vUv;',
  20. 'varying vec4 vOffset[ 3 ];',
  21. 'void SMAAEdgeDetectionVS( vec2 texcoord ) {',
  22. ' vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0, 1.0 );', // WebGL port note: Changed sign in W component
  23. ' vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( 1.0, 0.0, 0.0, -1.0 );', // WebGL port note: Changed sign in W component
  24. ' vOffset[ 2 ] = texcoord.xyxy + resolution.xyxy * vec4( -2.0, 0.0, 0.0, 2.0 );', // WebGL port note: Changed sign in W component
  25. '}',
  26. 'void main() {',
  27. ' vUv = uv;',
  28. ' SMAAEdgeDetectionVS( vUv );',
  29. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  30. '}'
  31. ].join( '\n' ),
  32. fragmentShader: [
  33. 'uniform sampler2D tDiffuse;',
  34. 'varying vec2 vUv;',
  35. 'varying vec4 vOffset[ 3 ];',
  36. 'vec4 SMAAColorEdgeDetectionPS( vec2 texcoord, vec4 offset[3], sampler2D colorTex ) {',
  37. ' vec2 threshold = vec2( SMAA_THRESHOLD, SMAA_THRESHOLD );',
  38. // Calculate color deltas:
  39. ' vec4 delta;',
  40. ' vec3 C = texture2D( colorTex, texcoord ).rgb;',
  41. ' vec3 Cleft = texture2D( colorTex, offset[0].xy ).rgb;',
  42. ' vec3 t = abs( C - Cleft );',
  43. ' delta.x = max( max( t.r, t.g ), t.b );',
  44. ' vec3 Ctop = texture2D( colorTex, offset[0].zw ).rgb;',
  45. ' t = abs( C - Ctop );',
  46. ' delta.y = max( max( t.r, t.g ), t.b );',
  47. // We do the usual threshold:
  48. ' vec2 edges = step( threshold, delta.xy );',
  49. // Then discard if there is no edge:
  50. ' if ( dot( edges, vec2( 1.0, 1.0 ) ) == 0.0 )',
  51. ' discard;',
  52. // Calculate right and bottom deltas:
  53. ' vec3 Cright = texture2D( colorTex, offset[1].xy ).rgb;',
  54. ' t = abs( C - Cright );',
  55. ' delta.z = max( max( t.r, t.g ), t.b );',
  56. ' vec3 Cbottom = texture2D( colorTex, offset[1].zw ).rgb;',
  57. ' t = abs( C - Cbottom );',
  58. ' delta.w = max( max( t.r, t.g ), t.b );',
  59. // Calculate the maximum delta in the direct neighborhood:
  60. ' float maxDelta = max( max( max( delta.x, delta.y ), delta.z ), delta.w );',
  61. // Calculate left-left and top-top deltas:
  62. ' vec3 Cleftleft = texture2D( colorTex, offset[2].xy ).rgb;',
  63. ' t = abs( C - Cleftleft );',
  64. ' delta.z = max( max( t.r, t.g ), t.b );',
  65. ' vec3 Ctoptop = texture2D( colorTex, offset[2].zw ).rgb;',
  66. ' t = abs( C - Ctoptop );',
  67. ' delta.w = max( max( t.r, t.g ), t.b );',
  68. // Calculate the final maximum delta:
  69. ' maxDelta = max( max( maxDelta, delta.z ), delta.w );',
  70. // Local contrast adaptation in action:
  71. ' edges.xy *= step( 0.5 * maxDelta, delta.xy );',
  72. ' return vec4( edges, 0.0, 0.0 );',
  73. '}',
  74. 'void main() {',
  75. ' gl_FragColor = SMAAColorEdgeDetectionPS( vUv, vOffset, tDiffuse );',
  76. '}'
  77. ].join( '\n' )
  78. };
  79. var SMAAWeightsShader = {
  80. defines: {
  81. 'SMAA_MAX_SEARCH_STEPS': '8',
  82. 'SMAA_AREATEX_MAX_DISTANCE': '16',
  83. 'SMAA_AREATEX_PIXEL_SIZE': '( 1.0 / vec2( 160.0, 560.0 ) )',
  84. 'SMAA_AREATEX_SUBTEX_SIZE': '( 1.0 / 7.0 )'
  85. },
  86. uniforms: {
  87. 'tDiffuse': { value: null },
  88. 'tArea': { value: null },
  89. 'tSearch': { value: null },
  90. 'resolution': { value: new Vector2( 1 / 1024, 1 / 512 ) }
  91. },
  92. vertexShader: [
  93. 'uniform vec2 resolution;',
  94. 'varying vec2 vUv;',
  95. 'varying vec4 vOffset[ 3 ];',
  96. 'varying vec2 vPixcoord;',
  97. 'void SMAABlendingWeightCalculationVS( vec2 texcoord ) {',
  98. ' vPixcoord = texcoord / resolution;',
  99. // We will use these offsets for the searches later on (see @PSEUDO_GATHER4):
  100. ' 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
  101. ' 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
  102. // And these for the searches, they indicate the ends of the loops:
  103. ' 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 );',
  104. '}',
  105. 'void main() {',
  106. ' vUv = uv;',
  107. ' SMAABlendingWeightCalculationVS( vUv );',
  108. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  109. '}'
  110. ].join( '\n' ),
  111. fragmentShader: [
  112. '#define SMAASampleLevelZeroOffset( tex, coord, offset ) texture2D( tex, coord + float( offset ) * resolution, 0.0 )',
  113. 'uniform sampler2D tDiffuse;',
  114. 'uniform sampler2D tArea;',
  115. 'uniform sampler2D tSearch;',
  116. 'uniform vec2 resolution;',
  117. 'varying vec2 vUv;',
  118. 'varying vec4 vOffset[3];',
  119. 'varying vec2 vPixcoord;',
  120. '#if __VERSION__ == 100',
  121. 'vec2 round( vec2 x ) {',
  122. ' return sign( x ) * floor( abs( x ) + 0.5 );',
  123. '}',
  124. '#endif',
  125. 'float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {',
  126. // Not required if searchTex accesses are set to point:
  127. // float2 SEARCH_TEX_PIXEL_SIZE = 1.0 / float2(66.0, 33.0);
  128. // e = float2(bias, 0.0) + 0.5 * SEARCH_TEX_PIXEL_SIZE +
  129. // e * float2(scale, 1.0) * float2(64.0, 32.0) * SEARCH_TEX_PIXEL_SIZE;
  130. ' e.r = bias + e.r * scale;',
  131. ' return 255.0 * texture2D( searchTex, e, 0.0 ).r;',
  132. '}',
  133. 'float SMAASearchXLeft( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {',
  134. /**
  135. * @PSEUDO_GATHER4
  136. * This texcoord has been offset by (-0.25, -0.125) in the vertex shader to
  137. * sample between edge, thus fetching four edges in a row.
  138. * Sampling with different offsets in each direction allows to disambiguate
  139. * which edges are active from the four fetched ones.
  140. */
  141. ' vec2 e = vec2( 0.0, 1.0 );',
  142. ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  143. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;',
  144. ' texcoord -= vec2( 2.0, 0.0 ) * resolution;',
  145. ' if ( ! ( texcoord.x > end && e.g > 0.8281 && e.r == 0.0 ) ) break;',
  146. ' }',
  147. // We correct the previous (-0.25, -0.125) offset we applied:
  148. ' texcoord.x += 0.25 * resolution.x;',
  149. // The searches are bias by 1, so adjust the coords accordingly:
  150. ' texcoord.x += resolution.x;',
  151. // Disambiguate the length added by the last step:
  152. ' texcoord.x += 2.0 * resolution.x;', // Undo last step
  153. ' texcoord.x -= resolution.x * SMAASearchLength(searchTex, e, 0.0, 0.5);',
  154. ' return texcoord.x;',
  155. '}',
  156. 'float SMAASearchXRight( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {',
  157. ' vec2 e = vec2( 0.0, 1.0 );',
  158. ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  159. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;',
  160. ' texcoord += vec2( 2.0, 0.0 ) * resolution;',
  161. ' if ( ! ( texcoord.x < end && e.g > 0.8281 && e.r == 0.0 ) ) break;',
  162. ' }',
  163. ' texcoord.x -= 0.25 * resolution.x;',
  164. ' texcoord.x -= resolution.x;',
  165. ' texcoord.x -= 2.0 * resolution.x;',
  166. ' texcoord.x += resolution.x * SMAASearchLength( searchTex, e, 0.5, 0.5 );',
  167. ' return texcoord.x;',
  168. '}',
  169. 'float SMAASearchYUp( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {',
  170. ' vec2 e = vec2( 1.0, 0.0 );',
  171. ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  172. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;',
  173. ' texcoord += vec2( 0.0, 2.0 ) * resolution;', // WebGL port note: Changed sign
  174. ' if ( ! ( texcoord.y > end && e.r > 0.8281 && e.g == 0.0 ) ) break;',
  175. ' }',
  176. ' texcoord.y -= 0.25 * resolution.y;', // WebGL port note: Changed sign
  177. ' texcoord.y -= resolution.y;', // WebGL port note: Changed sign
  178. ' texcoord.y -= 2.0 * resolution.y;', // WebGL port note: Changed sign
  179. ' texcoord.y += resolution.y * SMAASearchLength( searchTex, e.gr, 0.0, 0.5 );', // WebGL port note: Changed sign
  180. ' return texcoord.y;',
  181. '}',
  182. 'float SMAASearchYDown( sampler2D edgesTex, sampler2D searchTex, vec2 texcoord, float end ) {',
  183. ' vec2 e = vec2( 1.0, 0.0 );',
  184. ' for ( int i = 0; i < SMAA_MAX_SEARCH_STEPS; i ++ ) {', // WebGL port note: Changed while to for
  185. ' e = texture2D( edgesTex, texcoord, 0.0 ).rg;',
  186. ' texcoord -= vec2( 0.0, 2.0 ) * resolution;', // WebGL port note: Changed sign
  187. ' if ( ! ( texcoord.y < end && e.r > 0.8281 && e.g == 0.0 ) ) break;',
  188. ' }',
  189. ' texcoord.y += 0.25 * resolution.y;', // WebGL port note: Changed sign
  190. ' texcoord.y += resolution.y;', // WebGL port note: Changed sign
  191. ' texcoord.y += 2.0 * resolution.y;', // WebGL port note: Changed sign
  192. ' texcoord.y -= resolution.y * SMAASearchLength( searchTex, e.gr, 0.5, 0.5 );', // WebGL port note: Changed sign
  193. ' return texcoord.y;',
  194. '}',
  195. 'vec2 SMAAArea( sampler2D areaTex, vec2 dist, float e1, float e2, float offset ) {',
  196. // Rounding prevents precision errors of bilinear filtering:
  197. ' vec2 texcoord = float( SMAA_AREATEX_MAX_DISTANCE ) * round( 4.0 * vec2( e1, e2 ) ) + dist;',
  198. // We do a scale and bias for mapping to texel space:
  199. ' texcoord = SMAA_AREATEX_PIXEL_SIZE * texcoord + ( 0.5 * SMAA_AREATEX_PIXEL_SIZE );',
  200. // Move to proper place, according to the subpixel offset:
  201. ' texcoord.y += SMAA_AREATEX_SUBTEX_SIZE * offset;',
  202. ' return texture2D( areaTex, texcoord, 0.0 ).rg;',
  203. '}',
  204. 'vec4 SMAABlendingWeightCalculationPS( vec2 texcoord, vec2 pixcoord, vec4 offset[ 3 ], sampler2D edgesTex, sampler2D areaTex, sampler2D searchTex, ivec4 subsampleIndices ) {',
  205. ' vec4 weights = vec4( 0.0, 0.0, 0.0, 0.0 );',
  206. ' vec2 e = texture2D( edgesTex, texcoord ).rg;',
  207. ' if ( e.g > 0.0 ) {', // Edge at north
  208. ' vec2 d;',
  209. // Find the distance to the left:
  210. ' vec2 coords;',
  211. ' coords.x = SMAASearchXLeft( edgesTex, searchTex, offset[ 0 ].xy, offset[ 2 ].x );',
  212. ' coords.y = offset[ 1 ].y;', // offset[1].y = texcoord.y - 0.25 * resolution.y (@CROSSING_OFFSET)
  213. ' d.x = coords.x;',
  214. // Now fetch the left crossing edges, two at a time using bilinear
  215. // filtering. Sampling at -0.25 (see @CROSSING_OFFSET) enables to
  216. // discern what value each edge has:
  217. ' float e1 = texture2D( edgesTex, coords, 0.0 ).r;',
  218. // Find the distance to the right:
  219. ' coords.x = SMAASearchXRight( edgesTex, searchTex, offset[ 0 ].zw, offset[ 2 ].y );',
  220. ' d.y = coords.x;',
  221. // We want the distances to be in pixel units (doing this here allow to
  222. // better interleave arithmetic and memory accesses):
  223. ' d = d / resolution.x - pixcoord.x;',
  224. // SMAAArea below needs a sqrt, as the areas texture is compressed
  225. // quadratically:
  226. ' vec2 sqrt_d = sqrt( abs( d ) );',
  227. // Fetch the right crossing edges:
  228. ' coords.y -= 1.0 * resolution.y;', // WebGL port note: Added
  229. ' float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 1, 0 ) ).r;',
  230. // Ok, we know how this pattern looks like, now it is time for getting
  231. // the actual area:
  232. ' weights.rg = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.y ) );',
  233. ' }',
  234. ' if ( e.r > 0.0 ) {', // Edge at west
  235. ' vec2 d;',
  236. // Find the distance to the top:
  237. ' vec2 coords;',
  238. ' coords.y = SMAASearchYUp( edgesTex, searchTex, offset[ 1 ].xy, offset[ 2 ].z );',
  239. ' coords.x = offset[ 0 ].x;', // offset[1].x = texcoord.x - 0.25 * resolution.x;
  240. ' d.x = coords.y;',
  241. // Fetch the top crossing edges:
  242. ' float e1 = texture2D( edgesTex, coords, 0.0 ).g;',
  243. // Find the distance to the bottom:
  244. ' coords.y = SMAASearchYDown( edgesTex, searchTex, offset[ 1 ].zw, offset[ 2 ].w );',
  245. ' d.y = coords.y;',
  246. // We want the distances to be in pixel units:
  247. ' d = d / resolution.y - pixcoord.y;',
  248. // SMAAArea below needs a sqrt, as the areas texture is compressed
  249. // quadratically:
  250. ' vec2 sqrt_d = sqrt( abs( d ) );',
  251. // Fetch the bottom crossing edges:
  252. ' coords.y -= 1.0 * resolution.y;', // WebGL port note: Added
  253. ' float e2 = SMAASampleLevelZeroOffset( edgesTex, coords, ivec2( 0, 1 ) ).g;',
  254. // Get the area for this direction:
  255. ' weights.ba = SMAAArea( areaTex, sqrt_d, e1, e2, float( subsampleIndices.x ) );',
  256. ' }',
  257. ' return weights;',
  258. '}',
  259. 'void main() {',
  260. ' gl_FragColor = SMAABlendingWeightCalculationPS( vUv, vPixcoord, vOffset, tDiffuse, tArea, tSearch, ivec4( 0.0 ) );',
  261. '}'
  262. ].join( '\n' )
  263. };
  264. var SMAABlendShader = {
  265. uniforms: {
  266. 'tDiffuse': { value: null },
  267. 'tColor': { value: null },
  268. 'resolution': { value: new Vector2( 1 / 1024, 1 / 512 ) }
  269. },
  270. vertexShader: [
  271. 'uniform vec2 resolution;',
  272. 'varying vec2 vUv;',
  273. 'varying vec4 vOffset[ 2 ];',
  274. 'void SMAANeighborhoodBlendingVS( vec2 texcoord ) {',
  275. ' vOffset[ 0 ] = texcoord.xyxy + resolution.xyxy * vec4( -1.0, 0.0, 0.0, 1.0 );', // WebGL port note: Changed sign in W component
  276. ' vOffset[ 1 ] = texcoord.xyxy + resolution.xyxy * vec4( 1.0, 0.0, 0.0, -1.0 );', // WebGL port note: Changed sign in W component
  277. '}',
  278. 'void main() {',
  279. ' vUv = uv;',
  280. ' SMAANeighborhoodBlendingVS( vUv );',
  281. ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
  282. '}'
  283. ].join( '\n' ),
  284. fragmentShader: [
  285. 'uniform sampler2D tDiffuse;',
  286. 'uniform sampler2D tColor;',
  287. 'uniform vec2 resolution;',
  288. 'varying vec2 vUv;',
  289. 'varying vec4 vOffset[ 2 ];',
  290. 'vec4 SMAANeighborhoodBlendingPS( vec2 texcoord, vec4 offset[ 2 ], sampler2D colorTex, sampler2D blendTex ) {',
  291. // Fetch the blending weights for current pixel:
  292. ' vec4 a;',
  293. ' a.xz = texture2D( blendTex, texcoord ).xz;',
  294. ' a.y = texture2D( blendTex, offset[ 1 ].zw ).g;',
  295. ' a.w = texture2D( blendTex, offset[ 1 ].xy ).a;',
  296. // Is there any blending weight with a value greater than 0.0?
  297. ' if ( dot(a, vec4( 1.0, 1.0, 1.0, 1.0 )) < 1e-5 ) {',
  298. ' return texture2D( colorTex, texcoord, 0.0 );',
  299. ' } else {',
  300. // Up to 4 lines can be crossing a pixel (one through each edge). We
  301. // favor blending by choosing the line with the maximum weight for each
  302. // direction:
  303. ' vec2 offset;',
  304. ' offset.x = a.a > a.b ? a.a : -a.b;', // left vs. right
  305. ' offset.y = a.g > a.r ? -a.g : a.r;', // top vs. bottom // WebGL port note: Changed signs
  306. // Then we go in the direction that has the maximum weight:
  307. ' if ( abs( offset.x ) > abs( offset.y )) {', // horizontal vs. vertical
  308. ' offset.y = 0.0;',
  309. ' } else {',
  310. ' offset.x = 0.0;',
  311. ' }',
  312. // Fetch the opposite color and lerp by hand:
  313. ' vec4 C = texture2D( colorTex, texcoord, 0.0 );',
  314. ' texcoord += sign( offset ) * resolution;',
  315. ' vec4 Cop = texture2D( colorTex, texcoord, 0.0 );',
  316. ' float s = abs( offset.x ) > abs( offset.y ) ? abs( offset.x ) : abs( offset.y );',
  317. // WebGL port note: Added gamma correction
  318. ' C.xyz = pow(C.xyz, vec3(2.2));',
  319. ' Cop.xyz = pow(Cop.xyz, vec3(2.2));',
  320. ' vec4 mixed = mix(C, Cop, s);',
  321. ' mixed.xyz = pow(mixed.xyz, vec3(1.0 / 2.2));',
  322. ' return mixed;',
  323. ' }',
  324. '}',
  325. 'void main() {',
  326. ' gl_FragColor = SMAANeighborhoodBlendingPS( vUv, vOffset, tColor, tDiffuse );',
  327. '}'
  328. ].join( '\n' )
  329. };
  330. export { SMAAEdgesShader, SMAAWeightsShader, SMAABlendShader };