shaderSources-BxWAu5ue.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. const o=`
  2. precision highp float;
  3. attribute vec2 aVertexPosition;
  4. attribute vec2 aTextureCoord;
  5. uniform float uAngle;
  6. uniform float uScale;
  7. uniform vec2 uFlip;
  8. uniform vec2 uImageSize;
  9. uniform vec2 uResolution;
  10. uniform vec2 uTranslation;
  11. varying highp vec2 vTextureCoord;
  12. void main(void) {
  13. vec2 position = aVertexPosition;
  14. // Center to 0,0
  15. position = position - uImageSize / 2.0;
  16. // Flip
  17. position = position * uFlip;
  18. // Scale
  19. position *= uScale;
  20. // Rotate
  21. vec2 rotation = vec2(sin(uAngle), cos(uAngle));
  22. position = vec2(
  23. position.x * rotation.y + position.y * rotation.x,
  24. position.y * rotation.y - position.x * rotation.x
  25. );
  26. // Go to canvas center
  27. position += uResolution / 2.0;
  28. // Translate and normalize
  29. position = ((position + uTranslation) / uResolution) * 2.0 - 1.0;
  30. gl_Position = vec4(position * vec2(1, -1), 0.0, 1.0);
  31. vTextureCoord = aTextureCoord;
  32. }
  33. `,e=`
  34. precision highp float;
  35. varying highp vec2 vTextureCoord;
  36. uniform vec2 uImageSize;
  37. uniform sampler2D uSampler;
  38. uniform vec2 uResolution;
  39. uniform float uEnhance;
  40. uniform float uSaturation;
  41. uniform float uBrightness;
  42. uniform float uContrast;
  43. uniform float uWarmth;
  44. uniform float uFade;
  45. uniform float uShadows;
  46. uniform float uHighlights;
  47. uniform float uVignette;
  48. uniform float uGrain;
  49. uniform float uSharpen;
  50. // Constants
  51. vec3 hsLuminanceWeighting = vec3(0.3, 0.3, 0.3);
  52. // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
  53. const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
  54. const lowp float permTexUnit = 1.0 / 256.0;
  55. const lowp float permTexUnitHalf = 0.5 / 256.0;
  56. const lowp float grainsize = 2.3;
  57. // Utils
  58. highp vec3 rgbToYuv(vec3 rgb){
  59. highp float y = 0.299*rgb.r + 0.587*rgb.g + 0.114*rgb.b;
  60. return vec3(y, 0.493*(rgb.b-y), 0.877*(rgb.r-y));
  61. }
  62. highp vec3 yuvToRgb(vec3 yuv){
  63. highp float y = yuv.x;
  64. highp float u = yuv.y;
  65. highp float v = yuv.z;
  66. highp vec3 r = vec3(
  67. y + 1.0/0.877*v,
  68. y - 0.39393*u - 0.58081*v,
  69. y + 1.0/0.493*u
  70. );
  71. return r;
  72. }
  73. float colorLuminosity(vec3 color) {
  74. return dot(color, luminosityFactor);
  75. }
  76. float easeInOutSigmoid(float x, float k) {
  77. x = clamp(x, 0.0, 1.0);
  78. float sigmoid = 1.0 / (1.0 + exp(-k * (x - 0.5)));
  79. return sigmoid;
  80. }
  81. highp vec4 rnm(in highp vec2 tc) {
  82. highp float noise = sin(dot(tc,vec2(12.9898,78.233))) * 43758.5453;
  83. highp float noiseR = fract(noise)*2.0-1.0;
  84. highp float noiseG = fract(noise*1.2154)*2.0-1.0;
  85. highp float noiseB = fract(noise*1.3453)*2.0-1.0;
  86. highp float noiseA = fract(noise*1.3647)*2.0-1.0;
  87. return vec4(noiseR,noiseG,noiseB,noiseA);
  88. }
  89. highp float fade(in highp float t) {
  90. return t*t*t*(t*(t*6.0-15.0)+10.0);
  91. }
  92. highp float pnoise3D(in highp vec3 p) {
  93. highp vec3 pi = permTexUnit*floor(p)+permTexUnitHalf;
  94. highp vec3 pf = fract(p);
  95. // Noise contributions from (x=0, y=0), z=0 and z=1
  96. highp float perm00 = rnm(pi.xy).a ;
  97. highp vec3 grad000 = rnm(vec2(perm00, pi.z)).rgb * 4.0 - 1.0;
  98. highp float n000 = dot(grad000, pf);
  99. highp vec3 grad001 = rnm(vec2(perm00, pi.z + permTexUnit)).rgb * 4.0 - 1.0;
  100. highp float n001 = dot(grad001, pf - vec3(0.0, 0.0, 1.0));
  101. // Noise contributions from (x=0, y=1), z=0 and z=1
  102. highp float perm01 = rnm(pi.xy + vec2(0.0, permTexUnit)).a ;
  103. highp vec3 grad010 = rnm(vec2(perm01, pi.z)).rgb * 4.0 - 1.0;
  104. highp float n010 = dot(grad010, pf - vec3(0.0, 1.0, 0.0));
  105. highp vec3 grad011 = rnm(vec2(perm01, pi.z + permTexUnit)).rgb * 4.0 - 1.0;
  106. highp float n011 = dot(grad011, pf - vec3(0.0, 1.0, 1.0));
  107. // Noise contributions from (x=1, y=0), z=0 and z=1
  108. highp float perm10 = rnm(pi.xy + vec2(permTexUnit, 0.0)).a ;
  109. highp vec3 grad100 = rnm(vec2(perm10, pi.z)).rgb * 4.0 - 1.0;
  110. highp float n100 = dot(grad100, pf - vec3(1.0, 0.0, 0.0));
  111. highp vec3 grad101 = rnm(vec2(perm10, pi.z + permTexUnit)).rgb * 4.0 - 1.0;
  112. highp float n101 = dot(grad101, pf - vec3(1.0, 0.0, 1.0));
  113. // Noise contributions from (x=1, y=1), z=0 and z=1
  114. highp float perm11 = rnm(pi.xy + vec2(permTexUnit, permTexUnit)).a ;
  115. highp vec3 grad110 = rnm(vec2(perm11, pi.z)).rgb * 4.0 - 1.0;
  116. highp float n110 = dot(grad110, pf - vec3(1.0, 1.0, 0.0));
  117. highp vec3 grad111 = rnm(vec2(perm11, pi.z + permTexUnit)).rgb * 4.0 - 1.0;
  118. highp float n111 = dot(grad111, pf - vec3(1.0, 1.0, 1.0));
  119. // Blend contributions along x
  120. highp vec4 n_x = mix(vec4(n000, n001, n010, n011), vec4(n100, n101, n110, n111), fade(pf.x));
  121. // Blend contributions along y
  122. highp vec2 n_xy = mix(n_x.xy, n_x.zw, fade(pf.y));
  123. // Blend contributions along z
  124. highp float n_xyz = mix(n_xy.x, n_xy.y, fade(pf.z));
  125. return n_xyz;
  126. }
  127. lowp vec2 coordRot(in lowp vec2 tc, in lowp float angle) {
  128. lowp float rotX = ((tc.x * 2.0 - 1.0) * cos(angle)) - ((tc.y * 2.0 - 1.0) * sin(angle));
  129. lowp float rotY = ((tc.y * 2.0 - 1.0) * cos(angle)) + ((tc.x * 2.0 - 1.0) * sin(angle));
  130. rotX = rotX * 0.5 + 0.5;
  131. rotY = rotY * 0.5 + 0.5;
  132. return vec2(rotX,rotY);
  133. }
  134. // Adjustments
  135. vec4 brightness(vec4 color, float value) {
  136. float mag = value * 1.045;
  137. float exppower = 1.0 + abs(mag);
  138. if (mag < 0.0) {
  139. exppower = 1.0 / exppower;
  140. }
  141. color.r = 1.0 - pow((1.0 - color.r), exppower);
  142. color.g = 1.0 - pow((1.0 - color.g), exppower);
  143. color.b = 1.0 - pow((1.0 - color.b), exppower);
  144. return color;
  145. }
  146. vec4 contrast(vec4 color, float value) {
  147. value *= .3;
  148. return vec4(clamp(0.5 + (1.0 + value) * (color.rgb - 0.5), 0.0, 1.0), color.a);
  149. }
  150. vec4 saturation(vec4 color, float value) {
  151. vec3 grayscale = vec3(colorLuminosity(color.rgb));
  152. return vec4(mix(grayscale, color.rgb, 1.0 + value), color.a);
  153. }
  154. vec4 warmth(vec4 color, float value) {
  155. highp vec3 yuvVec;
  156. if(value > 0.0) {
  157. yuvVec = vec3(0.1765, -0.1255, 0.0902);
  158. }
  159. else {
  160. yuvVec = -vec3(0.0588, 0.1569, -0.1255);
  161. }
  162. highp vec3 yuvColor = rgbToYuv(color.rgb);
  163. highp float luma = yuvColor.r;
  164. highp float curveScale = sin(luma * 3.14159);
  165. yuvColor += 0.375 * value * curveScale * yuvVec;
  166. return vec4(clamp(yuvToRgb(yuvColor), 0.0, 1.0), color.a);
  167. }
  168. vec4 fade(vec4 color, float value) {
  169. highp vec3 co1 = vec3(-0.9772);
  170. highp vec3 co2 = vec3(1.708);
  171. highp vec3 co3 = vec3(-0.1603);
  172. highp vec3 co4 = vec3(0.2878);
  173. highp vec3 comp1 = co1 * pow(color.rgb, vec3(3.0));
  174. highp vec3 comp2 = co2 * pow(color.rgb, vec3(2.0));
  175. highp vec3 comp3 = co3 * color.rgb;
  176. highp vec3 comp4 = co4;
  177. highp vec3 finalComponent = comp1 + comp2 + comp3 + comp4;
  178. highp vec3 difference = finalComponent - color.rgb;
  179. highp vec3 scalingValue = vec3(0.9);
  180. highp vec3 faded = color.rgb + (difference * scalingValue);
  181. return vec4((color.rgb * (1.0 - value)) + (faded * value), color.a);
  182. }
  183. vec4 highlights(vec4 color, float highlights, float shadows) {
  184. mediump float hsLuminance = dot(color.rgb, hsLuminanceWeighting);
  185. mediump float shadow = clamp((pow(hsLuminance, 1.0 / shadows) + (-0.76) * pow(hsLuminance, 2.0 / shadows)) - hsLuminance, 0.0, 1.0);
  186. mediump float highlight = clamp((1.0 - (pow(1.0 - hsLuminance, 1.0 / (2.0 - highlights)) + (-0.8) * pow(1.0 - hsLuminance, 2.0 / (2.0 - highlights)))) - hsLuminance, -1.0, 0.0);
  187. lowp vec3 hsresult = vec3(0.0, 0.0, 0.0) + ((hsLuminance + shadow + highlight) - 0.0) * ((color.rgb - vec3(0.0, 0.0, 0.0)) / (hsLuminance - 0.0));
  188. mediump float contrastedLuminance = ((hsLuminance - 0.5) * 1.5) + 0.5;
  189. mediump float whiteInterp = contrastedLuminance * contrastedLuminance * contrastedLuminance;
  190. mediump float whiteTarget = clamp(highlights, 1.0, 2.0) - 1.0;
  191. hsresult = mix(hsresult, vec3(1.0), clamp(whiteInterp * whiteTarget, 0.0, 1.0));
  192. mediump float invContrastedLuminance = 1.0 - contrastedLuminance;
  193. mediump float blackInterp = invContrastedLuminance * invContrastedLuminance * invContrastedLuminance;
  194. mediump float blackTarget = 1.0 - clamp(shadows, 0.0, 1.0);
  195. hsresult = mix(hsresult, vec3(0.0), clamp(blackInterp * blackTarget, 0.0, 1.0));
  196. return vec4(hsresult.rgb, color.a);
  197. }
  198. vec4 vignette(vec4 color, float value) {
  199. vec2 coord = vTextureCoord.xy;
  200. const lowp float midpoint = 0.7;
  201. const lowp float fuzziness = 0.62;
  202. lowp float radDist = length(coord - 0.5) / sqrt(0.5);
  203. lowp float mag = easeInOutSigmoid(radDist * midpoint, fuzziness) * value * 0.645;
  204. color.rgb = mix(pow(color.rgb, vec3(1.0 / (1.0 - mag))), vec3(0.0), mag * mag);
  205. return color;
  206. }
  207. vec4 grain(vec4 color, float value) {
  208. if(value < 0.001) return color;
  209. vec2 coord = vTextureCoord.xy;
  210. highp vec3 rotOffset = vec3(1.425, 3.892, 5.835);
  211. highp vec2 rotCoordsR = coordRot(coord, rotOffset.x);
  212. highp vec3 noise = vec3(pnoise3D(vec3(rotCoordsR * vec2(uImageSize.x / grainsize, uImageSize.y / grainsize),0.0)));
  213. lowp vec3 lumcoeff = vec3(0.299,0.587,0.114);
  214. lowp float luminance = dot(color.rgb, lumcoeff);
  215. lowp float lum = smoothstep(0.2, 0.0, luminance);
  216. lum += luminance;
  217. noise = mix(noise,vec3(0.0),pow(lum,4.0));
  218. color.rgb = color.rgb + noise * value;
  219. return color;
  220. }
  221. vec4 sharpen(float value) {
  222. vec2 coord = vTextureCoord.xy;
  223. vec2 step = 1.0 / uResolution.xy;
  224. vec3 texA = texture2D( uSampler, coord + vec2(-step.x, -step.y) * 1.5 ).rgb;
  225. vec3 texB = texture2D( uSampler, coord + vec2( step.x, -step.y) * 1.5 ).rgb;
  226. vec3 texC = texture2D( uSampler, coord + vec2(-step.x, step.y) * 1.5 ).rgb;
  227. vec3 texD = texture2D( uSampler, coord + vec2( step.x, step.y) * 1.5 ).rgb;
  228. vec3 around = value * (texA + texB + texC + texD);
  229. vec4 center = texture2D(uSampler, coord);
  230. float centerMultiplier = 1.0 + 4.0 * value;
  231. return vec4(clamp(center.rgb * centerMultiplier - around, 0.0, 1.0), center.a);
  232. }
  233. void main(void) {
  234. vec4 color = texture2D(uSampler, vTextureCoord);
  235. color = sharpen(uSharpen * 0.45 + uEnhance * .15);
  236. color = grain(color, uGrain * 0.04);
  237. color = saturation(color, uSaturation + uEnhance * .2);
  238. color = warmth(color, uWarmth);
  239. color = fade(color, uFade);
  240. color = highlights(color, (uHighlights + uEnhance * 0.15) * 0.75 + 1.0, (uShadows - uEnhance * 0.075) * 0.55 + 1.0);
  241. color = contrast(color, uContrast + uEnhance * 0.1);
  242. color = brightness(color, uBrightness + uEnhance * .25);
  243. color = vignette(color, uVignette);
  244. gl_FragColor = color;
  245. }
  246. `;export{e as fragmentShaderSource,o as vertexShaderSource};
  247. //# sourceMappingURL=shaderSources-BxWAu5ue.js.map