FXAAShader.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import * as THREE from "../../../../libs/three.js/build/three.module.js";
  2. /**
  3. * NVIDIA FXAA by Timothy Lottes
  4. * https://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf
  5. * - WebGL port by @supereggbert
  6. * http://www.glge.org/demos/fxaa/
  7. * Further improved by Daniel Sturk
  8. */
  9. const FXAAShader = {
  10. uniforms: {
  11. 'tDiffuse': { value: null },
  12. 'resolution': { value: new THREE.Vector2( 1 / 1024, 1 / 512 ) }
  13. },
  14. vertexShader: /* glsl */`
  15. varying vec2 vUv;
  16. void main() {
  17. vUv = uv;
  18. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  19. }`,
  20. fragmentShader: `
  21. precision highp float;
  22. uniform sampler2D tDiffuse;
  23. uniform vec2 resolution;
  24. varying vec2 vUv;
  25. // FXAA 3.11 implementation by NVIDIA, ported to WebGL by Agost Biro (biro@archilogic.com)
  26. //----------------------------------------------------------------------------------
  27. // File: es3-kepler\FXAA\assets\shaders/FXAA_DefaultES.frag
  28. // SDK Version: v3.00
  29. // Email: gameworks@nvidia.com
  30. // Site: http://developer.nvidia.com/
  31. //
  32. // Copyright (c) 2014-2015, NVIDIA CORPORATION. All rights reserved.
  33. //
  34. // Redistribution and use in source and binary forms, with or without
  35. // modification, are permitted provided that the following conditions
  36. // are met:
  37. // * Redistributions of source code must retain the above copyright
  38. // notice, this list of conditions and the following disclaimer.
  39. // * Redistributions in binary form must reproduce the above copyright
  40. // notice, this list of conditions and the following disclaimer in the
  41. // documentation and/or other materials provided with the distribution.
  42. // * Neither the name of NVIDIA CORPORATION nor the names of its
  43. // contributors may be used to endorse or promote products derived
  44. // from this software without specific prior written permission.
  45. //
  46. // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS ''AS IS'' AND ANY
  47. // EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  48. // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  49. // PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
  50. // CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  51. // EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  52. // PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  53. // PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  54. // OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  55. // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  56. // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  57. //
  58. //----------------------------------------------------------------------------------
  59. #ifndef FXAA_DISCARD
  60. //
  61. // Only valid for PC OpenGL currently.
  62. // Probably will not work when FXAA_GREEN_AS_LUMA = 1.
  63. //
  64. // 1 = Use discard on pixels which don't need AA.
  65. // For APIs which enable concurrent TEX+ROP from same surface.
  66. // 0 = Return unchanged color on pixels which don't need AA.
  67. //
  68. #define FXAA_DISCARD 0
  69. #endif
  70. /*--------------------------------------------------------------------------*/
  71. //第三个参数加入后只能在片元着色器中调用,且只对采样器为mipmap类型纹理时有效。不明白作用??? 但警告说范围在16之内
  72. #define FxaaTexTop(t, p) texture2D(t, p, -15.0); //-100.0);
  73. #define FxaaTexOff(t, p, o, r) texture2D(t, p + (o * r), -15.0); //-100.0)
  74. /*--------------------------------------------------------------------------*/
  75. #define NUM_SAMPLES 5
  76. // assumes colors have premultipliedAlpha, so that the calculated color contrast is scaled by alpha
  77. float contrast( vec4 a, vec4 b ) {
  78. vec4 diff = abs( a - b );
  79. return max( max( max( diff.r, diff.g ), diff.b ), diff.a );
  80. }
  81. /*============================================================================
  82. FXAA3 QUALITY - PC
  83. ============================================================================*/
  84. /*--------------------------------------------------------------------------*/
  85. vec4 FxaaPixelShader(
  86. vec2 posM,
  87. sampler2D tex,
  88. vec2 fxaaQualityRcpFrame,
  89. float fxaaQualityEdgeThreshold,
  90. float fxaaQualityinvEdgeThreshold
  91. ) {
  92. vec4 rgbaM = FxaaTexTop(tex, posM);
  93. vec4 rgbaS = FxaaTexOff(tex, posM, vec2( 0.0, 1.0), fxaaQualityRcpFrame.xy);
  94. vec4 rgbaE = FxaaTexOff(tex, posM, vec2( 1.0, 0.0), fxaaQualityRcpFrame.xy);
  95. vec4 rgbaN = FxaaTexOff(tex, posM, vec2( 0.0,-1.0), fxaaQualityRcpFrame.xy);
  96. vec4 rgbaW = FxaaTexOff(tex, posM, vec2(-1.0, 0.0), fxaaQualityRcpFrame.xy);
  97. // . S .
  98. // W M E
  99. // . N .
  100. bool earlyExit = max( max( max(
  101. contrast( rgbaM, rgbaN ),
  102. contrast( rgbaM, rgbaS ) ),
  103. contrast( rgbaM, rgbaE ) ),
  104. contrast( rgbaM, rgbaW ) )
  105. < fxaaQualityEdgeThreshold;
  106. // . 0 .
  107. // 0 0 0
  108. // . 0 .
  109. #if (FXAA_DISCARD == 1)
  110. if(earlyExit) FxaaDiscard;
  111. #else
  112. if(earlyExit) return rgbaM;
  113. #endif
  114. float contrastN = contrast( rgbaM, rgbaN );
  115. float contrastS = contrast( rgbaM, rgbaS );
  116. float contrastE = contrast( rgbaM, rgbaE );
  117. float contrastW = contrast( rgbaM, rgbaW );
  118. float relativeVContrast = ( contrastN + contrastS ) - ( contrastE + contrastW );
  119. relativeVContrast *= fxaaQualityinvEdgeThreshold;
  120. bool horzSpan = relativeVContrast > 0.;
  121. // . 1 .
  122. // 0 0 0
  123. // . 1 .
  124. // 45 deg edge detection and corners of objects, aka V/H contrast is too similar
  125. if( abs( relativeVContrast ) < .3 ) {
  126. // locate the edge
  127. vec2 dirToEdge;
  128. dirToEdge.x = contrastE > contrastW ? 1. : -1.;
  129. dirToEdge.y = contrastS > contrastN ? 1. : -1.;
  130. // . 2 . . 1 .
  131. // 1 0 2 ~= 0 0 1
  132. // . 1 . . 0 .
  133. // tap 2 pixels and see which ones are "outside" the edge, to
  134. // determine if the edge is vertical or horizontal
  135. vec4 rgbaAlongH = FxaaTexOff(tex, posM, vec2( dirToEdge.x, -dirToEdge.y ), fxaaQualityRcpFrame.xy);
  136. float matchAlongH = contrast( rgbaM, rgbaAlongH );
  137. // . 1 .
  138. // 0 0 1
  139. // . 0 H
  140. vec4 rgbaAlongV = FxaaTexOff(tex, posM, vec2( -dirToEdge.x, dirToEdge.y ), fxaaQualityRcpFrame.xy);
  141. float matchAlongV = contrast( rgbaM, rgbaAlongV );
  142. // V 1 .
  143. // 0 0 1
  144. // . 0 .
  145. relativeVContrast = matchAlongV - matchAlongH;
  146. relativeVContrast *= fxaaQualityinvEdgeThreshold;
  147. if( abs( relativeVContrast ) < .3 ) { // 45 deg edge
  148. // 1 1 .
  149. // 0 0 1
  150. // . 0 1
  151. // do a simple blur
  152. return mix(
  153. rgbaM,
  154. (rgbaN + rgbaS + rgbaE + rgbaW) * .25,
  155. .4
  156. );
  157. }
  158. horzSpan = relativeVContrast > 0.;
  159. }
  160. if(!horzSpan) rgbaN = rgbaW;
  161. if(!horzSpan) rgbaS = rgbaE;
  162. // . 0 . 1
  163. // 1 0 1 -> 0
  164. // . 0 . 1
  165. bool pairN = contrast( rgbaM, rgbaN ) > contrast( rgbaM, rgbaS );
  166. if(!pairN) rgbaN = rgbaS;
  167. vec2 offNP;
  168. offNP.x = (!horzSpan) ? 0.0 : fxaaQualityRcpFrame.x;
  169. offNP.y = ( horzSpan) ? 0.0 : fxaaQualityRcpFrame.y;
  170. bool doneN = false;
  171. bool doneP = false;
  172. float nDist = 0.;
  173. float pDist = 0.;
  174. vec2 posN = posM;
  175. vec2 posP = posM;
  176. int iterationsUsed = 0;
  177. int iterationsUsedN = 0;
  178. int iterationsUsedP = 0;
  179. for( int i = 0; i < NUM_SAMPLES; i++ ) {
  180. iterationsUsed = i;
  181. float increment = float(i + 1);
  182. if(!doneN) {
  183. nDist += increment;
  184. posN = posM + offNP * nDist;
  185. vec4 rgbaEndN = FxaaTexTop(tex, posN.xy);
  186. doneN = contrast( rgbaEndN, rgbaM ) > contrast( rgbaEndN, rgbaN );
  187. iterationsUsedN = i;
  188. }
  189. if(!doneP) {
  190. pDist += increment;
  191. posP = posM - offNP * pDist;
  192. vec4 rgbaEndP = FxaaTexTop(tex, posP.xy);
  193. doneP = contrast( rgbaEndP, rgbaM ) > contrast( rgbaEndP, rgbaN );
  194. iterationsUsedP = i;
  195. }
  196. if(doneN || doneP) break;
  197. }
  198. if ( !doneP && !doneN ) return rgbaM; // failed to find end of edge
  199. float dist = min(
  200. doneN ? float( iterationsUsedN ) / float( NUM_SAMPLES - 1 ) : 1.,
  201. doneP ? float( iterationsUsedP ) / float( NUM_SAMPLES - 1 ) : 1.
  202. );
  203. // hacky way of reduces blurriness of mostly diagonal edges
  204. // but reduces AA quality
  205. dist = pow(dist, .5);
  206. dist = 1. - dist;
  207. return mix(
  208. rgbaM,
  209. rgbaN,
  210. dist * .5
  211. );
  212. }
  213. void main() {
  214. const float edgeDetectionQuality = 0.1 ;//.05 ; //越高,越保留细节;越低,越平滑 但模糊
  215. const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
  216. gl_FragColor = FxaaPixelShader(
  217. vUv,
  218. tDiffuse,
  219. resolution,
  220. edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
  221. invEdgeDetectionQuality
  222. );
  223. //单独渲染测量线有黑边,因为透明区域的clearColor是(0,0,0),模糊化的时候采用了这些黑色因子来混色。因为测量线颜色可能多种,也不能直接修改clearColor为其颜色,且还有label。
  224. //故而无法单独渲染测量线,而需要将底图一起渲染。
  225. }
  226. `
  227. };
  228. export default FXAAShader