SMAAShader.js 15 KB

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