SMAAShader.js 15 KB

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