shaders-oneshot 0.0.81-shared.1

package/dist/shaders/image-dithering.js

@@ -0,0 +1,199 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { proceduralHash21, declarePI } from "../shader-utils.js";
+const imageDitheringFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_fit;
+
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_type;
+uniform float u_pxSize;
+uniform bool u_originalColors;
+uniform bool u_inverted;
+uniform float u_colorSteps;
+
+out vec4 fragColor;
+
+
+${proceduralHash21}
+${declarePI}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+
+  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+
+  return left * right * bottom * top;
+}
+
+vec2 getImageUV(vec2 uv) {
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  float r = u_rotation * PI / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  vec2 imageBoxSize;
+  if (u_fit == 1.) { // contain
+    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else if (u_fit == 2.) { // cover
+    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else {
+    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
+  }
+  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+  vec2 imageUV = uv;
+  imageUV *= imageBoxScale;
+  imageUV += boxOrigin * (imageBoxScale - 1.);
+  imageUV += graphicOffset;
+  imageUV /= u_scale;
+  imageUV.x *= u_imageAspectRatio;
+  imageUV = graphicRotation * imageUV;
+  imageUV.x /= u_imageAspectRatio;
+
+  imageUV += .5;
+  imageUV.y = 1. - imageUV.y;
+
+  return imageUV;
+}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+0, 8, 2, 10,
+12, 4, 14, 6,
+3, 11, 1, 9,
+15, 7, 13, 5
+);
+
+const int bayer8x8[64] = int[64](
+0, 32, 8, 40, 2, 34, 10, 42,
+48, 16, 56, 24, 50, 18, 58, 26,
+12, 44, 4, 36, 14, 46, 6, 38,
+60, 28, 52, 20, 62, 30, 54, 22,
+3, 35, 11, 43, 1, 33, 9, 41,
+51, 19, 59, 27, 49, 17, 57, 25,
+15, 47, 7, 39, 13, 45, 5, 37,
+63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+
+
+void main() {
+
+  float pxSize = u_pxSize * u_pixelRatio;
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / u_resolution;
+
+  vec2 imageUV = getImageUV(normalizedUV);
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec4 image = texture(u_image, imageUV);
+  float frame = getUvFrame(imageUV, pxSize / u_resolution);
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);
+  lum = u_inverted ? (1. - lum) : lum;
+
+  switch (type) {
+    case 1: {
+      dithering = step(hash21(ditheringNoiseUV), lum);
+    } break;
+    case 2:
+    dithering = getBayerValue(pxSizeUV, 2);
+    break;
+    case 3:
+    dithering = getBayerValue(pxSizeUV, 4);
+    break;
+    default :
+    dithering = getBayerValue(pxSizeUV, 8);
+    break;
+  }
+
+  float colorSteps = max(floor(u_colorSteps), 1.);
+  vec3 color = vec3(0.0);
+  float opacity = 1.;
+
+  dithering -= .5;
+  float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);
+  brightness = mix(0.0, brightness, frame);
+  brightness = mix(0.0, brightness, image.a);
+  float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;
+  quantLum = mix(0.0, quantLum, frame);
+
+  if (u_originalColors == true) {
+    vec3 normColor = image.rgb / max(lum, 0.001);
+    color = normColor * quantLum;
+
+    float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;
+    opacity = mix(quantLum, 1., quantAlpha);
+  } else {
+    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+    float fgOpacity = u_colorFront.a;
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    float bgOpacity = u_colorBack.a;
+    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;
+    float hlOpacity = u_colorHighlight.a;
+
+    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));
+    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));
+
+    color = fgColor * quantLum;
+    opacity = fgOpacity * quantLum;
+    color += bgColor * (1.0 - opacity);
+    opacity += bgOpacity * (1.0 - opacity);
+  }
+
+  fragColor = vec4(color, opacity);
+}
+`;
+const DitheringTypes = {
+  "random": 1,
+  "2x2": 2,
+  "4x4": 3,
+  "8x8": 4
+};
+export {
+  DitheringTypes,
+  imageDitheringFragmentShader
+};
+//# sourceMappingURL=image-dithering.js.map

package/dist/shaders/image-dithering.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/image-dithering.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { proceduralHash21, declarePI } from '../shader-utils.js';\r\n\r\n/**\r\n * A dithering image filter with support for 4 dithering modes and multiple color palettes\r\n * (2-color, 3-color, and multicolor options, using either predefined colors or colors sampled\r\n * from the original image).\r\n *\r\n * SIZING NOTE: This shader performs sizing in the fragment shader (not vertex shader) to keep\r\n * u_pxSize in consistent actual pixels. The pixel grid is computed from gl_FragCoord before any\r\n * transforms, so scaling/rotating only affects the underlying image.\r\n * No vertex shader outputs (v_imageUV, v_objectUV, etc.) are used.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n * - u_image (sampler2D): Source image texture\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n * - u_colorFront (vec4): Foreground color in RGBA, needs originalColors off\r\n * - u_colorBack (vec4): Background color in RGBA, needs originalColors off\r\n * - u_colorHighlight (vec4): Secondary foreground color in RGBA (set same as colorFront for classic 2-color dithering), needs originalColors off\r\n * - u_originalColors (bool): Use the original colors of the image instead of the color palette\r\n * - u_inverted (bool): Inverts the image luminance, doesn't affect the color scheme\r\n * - u_type (float): Dithering type (1 = random, 2 = 2x2 Bayer, 3 = 4x4 Bayer, 4 = 8x8 Bayer)\r\n * - u_pxSize (float): Pixel size of dithering grid (0.5 to 20)\r\n * - u_colorSteps (float): Number of colors to use, applies to both color modes (1 to 7)\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const imageDitheringFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform vec2 u_resolution;\r\nuniform float u_pixelRatio;\r\nuniform float u_originX;\r\nuniform float u_originY;\r\nuniform float u_fit;\r\n\r\nuniform float u_scale;\r\nuniform float u_rotation;\r\nuniform float u_offsetX;\r\nuniform float u_offsetY;\r\n\r\nuniform vec4 u_colorFront;\r\nuniform vec4 u_colorBack;\r\nuniform vec4 u_colorHighlight;\r\n\r\nuniform sampler2D u_image;\r\nuniform float u_imageAspectRatio;\r\n\r\nuniform float u_type;\r\nuniform float u_pxSize;\r\nuniform bool u_originalColors;\r\nuniform bool u_inverted;\r\nuniform float u_colorSteps;\r\n\r\nout vec4 fragColor;\r\n\r\n\r\n${ proceduralHash21 }\r\n${ declarePI }\r\n\r\nfloat getUvFrame(vec2 uv, vec2 pad) {\r\n  float aa = 0.0001;\r\n\r\n  float left   = smoothstep(-pad.x, -pad.x + aa, uv.x);\r\n  float right  = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);\r\n  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);\r\n  float top    = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);\r\n\r\n  return left * right * bottom * top;\r\n}\r\n\r\nvec2 getImageUV(vec2 uv) {\r\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\r\n  float r = u_rotation * PI / 180.;\r\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\r\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\r\n\r\n  vec2 imageBoxSize;\r\n  if (u_fit == 1.) { // contain\r\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\r\n  } else if (u_fit == 2.) { // cover\r\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\r\n  } else {\r\n    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\r\n  }\r\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\r\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\r\n\r\n  vec2 imageUV = uv;\r\n  imageUV *= imageBoxScale;\r\n  imageUV += boxOrigin * (imageBoxScale - 1.);\r\n  imageUV += graphicOffset;\r\n  imageUV /= u_scale;\r\n  imageUV.x *= u_imageAspectRatio;\r\n  imageUV = graphicRotation * imageUV;\r\n  imageUV.x /= u_imageAspectRatio;\r\n\r\n  imageUV += .5;\r\n  imageUV.y = 1. - imageUV.y;\r\n\r\n  return imageUV;\r\n}\r\n\r\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\r\nconst int bayer4x4[16] = int[16](\r\n0, 8, 2, 10,\r\n12, 4, 14, 6,\r\n3, 11, 1, 9,\r\n15, 7, 13, 5\r\n);\r\n\r\nconst int bayer8x8[64] = int[64](\r\n0, 32, 8, 40, 2, 34, 10, 42,\r\n48, 16, 56, 24, 50, 18, 58, 26,\r\n12, 44, 4, 36, 14, 46, 6, 38,\r\n60, 28, 52, 20, 62, 30, 54, 22,\r\n3, 35, 11, 43, 1, 33, 9, 41,\r\n51, 19, 59, 27, 49, 17, 57, 25,\r\n15, 47, 7, 39, 13, 45, 5, 37,\r\n63, 31, 55, 23, 61, 29, 53, 21\r\n);\r\n\r\nfloat getBayerValue(vec2 uv, int size) {\r\n  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));\r\n  int index = pos.y * size + pos.x;\r\n\r\n  if (size == 2) {\r\n    return float(bayer2x2[index]) / 4.0;\r\n  } else if (size == 4) {\r\n    return float(bayer4x4[index]) / 16.0;\r\n  } else if (size == 8) {\r\n    return float(bayer8x8[index]) / 64.0;\r\n  }\r\n  return 0.0;\r\n}\r\n\r\n\r\nvoid main() {\r\n\r\n  float pxSize = u_pxSize * u_pixelRatio;\r\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * u_resolution;\r\n  pxSizeUV /= pxSize;\r\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\r\n  vec2 normalizedUV = canvasPixelizedUV / u_resolution;\r\n\r\n  vec2 imageUV = getImageUV(normalizedUV);\r\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\r\n  vec4 image = texture(u_image, imageUV);\r\n  float frame = getUvFrame(imageUV, pxSize / u_resolution);\r\n\r\n  int type = int(floor(u_type));\r\n  float dithering = 0.0;\r\n\r\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\r\n  lum = u_inverted ? (1. - lum) : lum;\r\n\r\n  switch (type) {\r\n    case 1: {\r\n      dithering = step(hash21(ditheringNoiseUV), lum);\r\n    } break;\r\n    case 2:\r\n    dithering = getBayerValue(pxSizeUV, 2);\r\n    break;\r\n    case 3:\r\n    dithering = getBayerValue(pxSizeUV, 4);\r\n    break;\r\n    default :\r\n    dithering = getBayerValue(pxSizeUV, 8);\r\n    break;\r\n  }\r\n\r\n  float colorSteps = max(floor(u_colorSteps), 1.);\r\n  vec3 color = vec3(0.0);\r\n  float opacity = 1.;\r\n\r\n  dithering -= .5;\r\n  float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);\r\n  brightness = mix(0.0, brightness, frame);\r\n  brightness = mix(0.0, brightness, image.a);\r\n  float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;\r\n  quantLum = mix(0.0, quantLum, frame);\r\n\r\n  if (u_originalColors == true) {\r\n    vec3 normColor = image.rgb / max(lum, 0.001);\r\n    color = normColor * quantLum;\r\n\r\n    float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;\r\n    opacity = mix(quantLum, 1., quantAlpha);\r\n  } else {\r\n    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\r\n    float fgOpacity = u_colorFront.a;\r\n    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\r\n    float bgOpacity = u_colorBack.a;\r\n    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\r\n    float hlOpacity = u_colorHighlight.a;\r\n\r\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\r\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\r\n\r\n    color = fgColor * quantLum;\r\n    opacity = fgOpacity * quantLum;\r\n    color += bgColor * (1.0 - opacity);\r\n    opacity += bgOpacity * (1.0 - opacity);\r\n  }\r\n\r\n  fragColor = vec4(color, opacity);\r\n}\r\n`;\r\n\r\nexport interface ImageDitheringUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string;\r\n  u_colorFront: [number, number, number, number];\r\n  u_colorBack: [number, number, number, number];\r\n  u_colorHighlight: [number, number, number, number];\r\n  u_type: (typeof DitheringTypes)[DitheringType];\r\n  u_pxSize: number;\r\n  u_colorSteps: number;\r\n  u_originalColors: boolean;\r\n  u_inverted: boolean;\r\n}\r\n\r\nexport interface ImageDitheringParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image: HTMLImageElement | string;\r\n  colorFront?: string;\r\n  colorBack?: string;\r\n  colorHighlight?: string;\r\n  type?: DitheringType;\r\n  size?: number;\r\n  colorSteps?: number;\r\n  originalColors?: boolean;\r\n  inverted?: boolean;\r\n}\r\n\r\nexport const DitheringTypes = {\r\n  'random': 1,\r\n  '2x2': 2,\r\n  '4x4': 3,\r\n  '8x8': 4,\r\n} as const;\r\n\r\nexport type DitheringType = keyof typeof DitheringTypes;\r\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,kBAAkB,iBAAiB;AAoCrC,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8BjD,gBAAiB;AAAA,EACjB,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+KN,MAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
+  "names": []
+}

package/dist/shaders/lens-distortion.d.ts

@@ -0,0 +1,97 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const lensDistortionMeta: {
+    readonly maxSamples: 50;
+};
+/**
+ *
+ * Lens Distortion image filter separates an image into shifting color layers
+ * (recreating the chromatic aberration of a lens) and warps the image geometry,
+ * curving it outward or inward like barrel and pincushion distortion.
+ *
+ * Fragment shader uniforms:
+ * - u_image (sampler2D): Source image texture
+ * - u_spread (float): Strength of the color split; how far the color layers are pushed apart; 0 is off (0 to 1)
+ * - u_bias (float): Shifts the colors toward one end of the spread; 0 spaces them evenly, needs spread > 0, count > 2 (-1 to 1)
+ * - u_angle (float): Direction of the spread in degrees, needs spread > 0, perspective < 1 (0 to 360)
+ * - u_perspective (float): Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1), needs spread > 0 (0 to 1)
+ * - u_count (float): Number of sampled color layers along the spread; higher is smoother and costlier, needs spread > 0 (2 to 50)
+ * - u_dispersion (float): Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original image color, needs spread > 0 (0 to 1)
+ * - u_dispersionShift (float): Balance of the dispersion between a soft circular zone at the centre and the rest of the image; 0 applies it evenly, -1 keeps it in the centre only, 1 keeps it at the edges only, needs spread > 0, dispersion > 0 (-1 to 1)
+ * - u_dispersionColor (float): Rotates the colors around the hue wheel, 0 to 1 for a full turn, needs spread > 0, dispersion > 0
+ * - u_focusCenter (float): Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre, needs spread > 0 (0 to 1)
+ * - u_focusEdges (float): Reduces the spread toward the edges; 0 keeps it full to the edges, 1 restores the original image there, needs spread > 0 (0 to 1)
+ * - u_swirl (float): Rotates the color layers around the centre by an angle growing along the spread; 0 is off, needs spread > 0 (-1 to 1)
+ * - u_noise (float): Scatters the spread direction with noise; 0 is off, needs spread > 0 (0 to 1)
+ * - u_noiseFrequency (float): Frequency of the noise, 0 to 1 mapped internally to 0 to 18; higher is finer, needs spread > 0, noise > 0
+ * - u_noiseOffset (float): Offsets the noise pattern for a different seed, 0 to 1 mapped internally to 0 to 30, needs spread > 0, noise > 0
+ * - u_lensBulge (float): Radial lens warp of the image geometry; positive bulges out like a fisheye/barrel, negative pinches in like a pincushion; strong positive values fade out the corners (-1 to 1)
+ * - u_lensCircle (float): Squeezes pixels outside the inscribed circle inward so the outline becomes a circle; also turns the spread radial and damps it near the rim; 0 is off, 1 is full (0 to 1)
+ * - u_grainMixer (float): Scatters the spread with grain noise, breaking up the edges of the color layers, needs spread > 0 (0 to 1)
+ * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)
+ * - u_imageX (float): Pans the image horizontally behind the effect; 0 is centred (-1 to 1)
+ * - u_imageY (float): Pans the image vertically behind the effect; 0 is centred (-1 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied
+ *
+ * Vertex shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)
+ * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)
+ * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)
+ * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)
+ * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)
+ * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)
+ * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ *
+ */
+export declare const lensDistortionFragmentShader: string;
+export interface LensDistortionUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_spread: number;
+    u_bias: number;
+    u_angle: number;
+    u_perspective: number;
+    u_count: number;
+    u_dispersion: number;
+    u_dispersionShift: number;
+    u_dispersionColor: number;
+    u_focusCenter: number;
+    u_focusEdges: number;
+    u_swirl: number;
+    u_noise: number;
+    u_noiseFrequency: number;
+    u_noiseOffset: number;
+    u_lensBulge: number;
+    u_lensCircle: number;
+    u_grainMixer: number;
+    u_grainOverlay: number;
+    u_imageX: number;
+    u_imageY: number;
+}
+export interface LensDistortionParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string;
+    spread?: number;
+    bias?: number;
+    angle?: number;
+    perspective?: number;
+    count?: number;
+    dispersion?: number;
+    dispersionShift?: number;
+    dispersionColor?: number;
+    focusCenter?: number;
+    focusEdges?: number;
+    swirl?: number;
+    noise?: number;
+    noiseFrequency?: number;
+    noiseOffset?: number;
+    lensBulge?: number;
+    lensCircle?: number;
+    grainMixer?: number;
+    grainOverlay?: number;
+    imageX?: number;
+    imageY?: number;
+}

package/dist/shaders/lens-distortion.js

@@ -0,0 +1,276 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI, proceduralHash21, rotation2 } from "../shader-utils.js";
+const lensDistortionMeta = {
+  maxSamples: 50
+};
+const lensDistortionFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+uniform float u_spread;
+uniform float u_bias;
+uniform float u_angle;
+uniform float u_perspective;
+uniform float u_count;
+uniform float u_dispersion;
+uniform float u_dispersionShift;
+uniform float u_dispersionColor;
+uniform float u_focusCenter;
+uniform float u_focusEdges;
+uniform float u_swirl;
+uniform float u_noise;
+uniform float u_noiseFrequency;
+uniform float u_noiseOffset;
+uniform float u_lensBulge;
+uniform float u_lensCircle;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_imageX;
+uniform float u_imageY;
+
+in vec2 v_imageUV;
+
+out vec4 fragColor;
+
+${declarePI}
+${proceduralHash21}
+${rotation2}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1., 0.));
+  float c = hash21(i + vec2(0., 1.));
+  float d = hash21(i + vec2(1., 1.));
+  vec2 u = f * f * (3. - 2. * f);
+  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
+}
+
+float getUvFrame(vec2 uv) {
+  vec2 invAA = 1. / clamp(fwidth(uv), 1e-5, .02);
+  vec2 lo = clamp(uv * invAA + .5, 0., 1.);
+  vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);
+  return lo.x * hi.x * lo.y * hi.y;
+}
+
+vec4 sampleOverWhite(vec2 uv) {
+  vec4 img = texture(u_image, uv);
+  float cover = img.a * getUvFrame(uv);
+  vec3 colorOverWhite = mix(vec3(1.), img.rgb, cover);
+  return vec4(colorOverWhite, cover);
+}
+
+vec3 hueColor(float hue) {
+  vec3 rgb = clamp(abs(mod(hue * 6. + vec3(0., 4., 2.), 6.) - 3.) - 1., 0., 1.);
+  rgb = rgb * rgb * (3. - 2. * rgb);
+  return rgb;
+}
+                                            
+float boxInradius() {
+  return .5 * min(u_imageAspectRatio, 1.);
+}
+
+float boxOutradius() {
+  return .5 * length(vec2(u_imageAspectRatio, 1.));
+}
+
+float spreadReach() {
+  return .7 * pow(u_spread, 1.3 + 2.7 * u_spread);
+}
+
+float innerCircleMask(float radius, float inradius) {
+  return 1. - smoothstep(.5 * inradius, 1.1 * inradius, radius);
+}
+
+float dispersionCurve(float t, float biasPow) {
+  float mirroredT = u_bias < 0. ? 1. - t : t;
+  float curved = pow(mirroredT, biasPow);
+  return u_bias < 0. ? 1. - curved : curved;
+}
+
+vec2 getSpread(vec2 fromCenter, float radius, vec2 warpedUV, float edgeAA, float inradius, float outradius, float reach, out float outStrength) {
+  float angleRad = radians(u_angle);
+  vec2 uniformDir = vec2(cos(angleRad), sin(angleRad));
+
+  float invInradius = 1. / inradius;
+  vec2 radialDir = fromCenter * invInradius;
+  float maxLen = (outradius + reach) * invInradius;
+  float radialLen = radius * invInradius;
+  if (radialLen > maxLen) radialDir *= maxLen / radialLen;
+  vec2 spreadDir = mix(uniformDir, radialDir, u_perspective);
+
+  float bandProximity = smoothstep(inradius * .8, inradius, radius);
+  float lensCircleMaxing = bandProximity * u_lensCircle * u_lensCircle * u_lensCircle;
+  spreadDir = mix(spreadDir, radialDir, lensCircleMaxing);
+
+  vec2 warpedAbs = abs(warpedUV - .5);
+  float inner = mix(1., smoothstep(0., mix(inradius, outradius, u_focusCenter), radius), u_focusCenter);
+  float boxDist = max(warpedAbs.x, warpedAbs.y) * 2.;
+  float outer = mix(1., 1. - min(boxDist, 1.), u_focusEdges);
+  float strength = inner * outer;
+
+  strength *= mix(1., mix(.15, .03, max(-u_lensBulge, 0.)), lensCircleMaxing);
+
+  vec2 outside = max(warpedAbs - .5, 0.);
+  float margin = max(reach * length(spreadDir) * (1. - u_lensCircle), edgeAA);
+  strength *= 1. - smoothstep(0., margin, length(outside));
+
+  outStrength = strength;
+  vec2 axis = spreadDir * (reach * strength);
+
+  if (u_noise > 0.) {
+    float turn = (valueNoise(fromCenter * u_noiseFrequency * 18. + u_noiseOffset * 30.) - .5) * 2. * u_noise;
+    float cs = cos(turn), sn = sin(turn);
+    axis = mat2(cs, -sn, sn, cs) * axis;
+  }
+
+  axis.x /= u_imageAspectRatio;
+  return axis;
+}
+
+vec2 lensWarp(vec2 fromCenter, float radius, float inradius, out float bulgeFade) {
+  bulgeFade = 1.;
+  if (u_lensBulge == 0. && u_lensCircle <= 0.) return fromCenter;
+  if (radius < 1e-5) return fromCenter;
+  
+  float r = radius;
+
+  if (u_lensBulge != 0.) {
+    float rn = radius / inradius;
+    float bulge = abs(u_lensBulge) * (u_lensBulge > 0. ? 1.4 : 1.2);
+    if (u_lensBulge > 0.) bulgeFade = 1. - smoothstep(1.45, 1.53, rn * bulge);
+    float map = u_lensBulge > 0.
+      ? tan(min(rn * bulge, 1.53)) / tan(bulge)
+      : atan(rn * tan(bulge)) / bulge;
+    float bulgeScale = map / rn;
+    fromCenter *= bulgeScale;
+    r *= bulgeScale;
+  }
+
+  if (u_lensCircle > 0.) {
+    vec2 dir = fromCenter / max(r, 1e-5);
+    vec2 halfBox = vec2(u_imageAspectRatio, 1.) * .5;
+    float rBox = min(halfBox.x / max(abs(dir.x), 1e-4), halfBox.y / max(abs(dir.y), 1e-4));
+    float band = inradius * mix(.03, .2, .5 * (u_lensBulge + 1.));
+    float innerEdge = inradius - band;
+    float over = smoothstep(0., 1., (r - innerEdge) / band);
+    float g = r + (rBox - inradius) * pow(over, 14.);
+    fromCenter = dir * mix(r, g, u_lensCircle);
+  }
+
+  return fromCenter;
+}
+
+void main() {
+  vec2 uv = v_imageUV;
+
+  float invAspect = 1. / u_imageAspectRatio;
+  float inradius = boxInradius();
+  float outradius = boxOutradius();
+  float reach = spreadReach();
+
+  vec2 fromCenter = uv - .5;
+  fromCenter.x *= u_imageAspectRatio;
+  float radius = length(fromCenter);
+
+  float bulgeFade;
+  vec2 warpedFromCenter = lensWarp(fromCenter, radius, inradius, bulgeFade);
+  vec2 baseUV = vec2(warpedFromCenter.x * invAspect, warpedFromCenter.y) + .5;
+
+  vec2 baseDerivative = fwidth(baseUV);
+  float edgeAA = clamp(2. * max(baseDerivative.x, baseDerivative.y), .001, .02);
+
+  float spreadStrength;
+  vec2 spreadAxis = getSpread(fromCenter, radius, baseUV, edgeAA, inradius, outradius, reach, spreadStrength);
+
+  vec2 grainUV = vec2(0.);
+  if (u_grainMixer > 0. || u_grainOverlay > 0.) {
+    vec2 dudx = dFdx(v_imageUV);
+    vec2 dudy = dFdy(v_imageUV);
+    grainUV = (v_imageUV - .5) * (.8 / vec2(length(dudx), length(dudy))) + .5;
+  }
+
+  if (u_grainMixer > 0.) {
+    float grainSeed = valueNoise(grainUV);
+    vec2 jit = fract(grainSeed * vec2(157.31, 113.57)) * 2. - 1.;
+    spreadAxis += jit * .3 * u_grainMixer * length(spreadAxis);
+  }
+
+  float count = floor(u_count);
+  int countInteger = int(count);
+
+  float invCount = 1. / count;
+  float invSpan = 1. / max(count - 1., 1.);
+  float hueBase = u_dispersionColor + .5;
+  float biasPower = 1. + 2. * abs(u_bias);
+  vec2 tapBias = .5 - vec2(u_imageX, u_imageY);
+
+  float centerAmount = clamp(1. - u_dispersionShift, 0., 1.);
+  float edgesAmount = clamp(1. + u_dispersionShift, 0., 1.);
+  float dispersion = u_dispersion * mix(edgesAmount, centerAmount, innerCircleMask(radius, inradius));
+  float dispersionPower = pow(dispersion, .8);
+
+  float warpedRadius = length(warpedFromCenter);
+  float swirlAngle = u_swirl * .4 * PI * spreadStrength * u_spread * min(1., inradius / max(warpedRadius, 1e-4));
+
+  vec3 colorSum = vec3(0.);
+  vec3 weightSum = vec3(0.);
+  float coverSum = 0.;
+
+  for (int i = 0; i < ${lensDistortionMeta.maxSamples}; i++) {
+    if (i >= countInteger) break;
+
+    float layer = float(i);
+    float hue = hueBase + layer * invCount;
+
+    float spread = layer * invSpan;
+    if (u_bias != 0.) spread = dispersionCurve(spread, biasPower);
+
+    // mix(axis, -axis, spread) is axis scaled by the signed position along the fan
+    float fanPos = 1. - 2. * spread;
+    vec2 tapUV = baseUV + spreadAxis * fanPos - .5;
+
+    if (u_swirl != 0.) {
+      tapUV.x *= u_imageAspectRatio;
+      tapUV = rotate(tapUV, swirlAngle * fanPos);
+      tapUV.x *= invAspect;
+    }
+
+    vec4 tap = sampleOverWhite(tapUV + tapBias);
+    vec3 weight = 1. - dispersionPower * hueColor(hue);
+
+    colorSum += tap.rgb * weight;
+    weightSum += weight;
+    coverSum += tap.a;
+  }
+
+  vec3 color = colorSum / max(weightSum, 1e-4);
+  float coverAvg = coverSum * invCount;
+
+  float ground = min(color.r, min(color.g, color.b));
+  float alpha = max(coverAvg, 1. - ground);
+  vec3 premult = max(color - (1. - alpha), 0.);
+  fragColor = vec4(premult, alpha) * bulgeFade;
+
+  if (u_grainOverlay > 0.) {
+    float grain = valueNoise(rotate(grainUV, 1.) + vec2(3.));
+    grain = mix(grain, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);
+    grain = pow(grain, 1.3);
+    float grainV = grain * 2. - 1.;
+    float grainStrength = pow(u_grainOverlay * abs(grainV), .8) * fragColor.a;
+    fragColor.rgb = mix(fragColor.rgb, vec3(step(0., grainV)) * fragColor.a, .35 * grainStrength);
+  }
+}
+`;
+export {
+  lensDistortionFragmentShader,
+  lensDistortionMeta
+};
+//# sourceMappingURL=lens-distortion.js.map

package/dist/shaders/lens-distortion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/lens-distortion.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\r\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\r\nimport { declarePI, proceduralHash21, rotation2 } from '../shader-utils.js';\r\n\r\nexport const lensDistortionMeta = {\r\n  maxSamples: 50,\r\n} as const;\r\n\r\n/**\r\n *\r\n * Lens Distortion image filter separates an image into shifting color layers\r\n * (recreating the chromatic aberration of a lens) and warps the image geometry,\r\n * curving it outward or inward like barrel and pincushion distortion.\r\n *\r\n * Fragment shader uniforms:\r\n * - u_image (sampler2D): Source image texture\r\n * - u_spread (float): Strength of the color split; how far the color layers are pushed apart; 0 is off (0 to 1)\r\n * - u_bias (float): Shifts the colors toward one end of the spread; 0 spaces them evenly, needs spread > 0, count > 2 (-1 to 1)\r\n * - u_angle (float): Direction of the spread in degrees, needs spread > 0, perspective < 1 (0 to 360)\r\n * - u_perspective (float): Shapes the spread direction from a straight line (0) to a radial burst out from the centre (1), needs spread > 0 (0 to 1)\r\n * - u_count (float): Number of sampled color layers along the spread; higher is smoother and costlier, needs spread > 0 (2 to 50)\r\n * - u_dispersion (float): Overall amount of color dispersion; 1 gives each layer its own color from the spectrum, 0 keeps the original image color, needs spread > 0 (0 to 1)\r\n * - u_dispersionShift (float): Balance of the dispersion between a soft circular zone at the centre and the rest of the image; 0 applies it evenly, -1 keeps it in the centre only, 1 keeps it at the edges only, needs spread > 0, dispersion > 0 (-1 to 1)\r\n * - u_dispersionColor (float): Rotates the colors around the hue wheel, 0 to 1 for a full turn, needs spread > 0, dispersion > 0\r\n * - u_focusCenter (float): Reduces the spread in a circular zone at the centre; 0 keeps it full to the centre, needs spread > 0 (0 to 1)\r\n * - u_focusEdges (float): Reduces the spread toward the edges; 0 keeps it full to the edges, 1 restores the original image there, needs spread > 0 (0 to 1)\r\n * - u_swirl (float): Rotates the color layers around the centre by an angle growing along the spread; 0 is off, needs spread > 0 (-1 to 1)\r\n * - u_noise (float): Scatters the spread direction with noise; 0 is off, needs spread > 0 (0 to 1)\r\n * - u_noiseFrequency (float): Frequency of the noise, 0 to 1 mapped internally to 0 to 18; higher is finer, needs spread > 0, noise > 0\r\n * - u_noiseOffset (float): Offsets the noise pattern for a different seed, 0 to 1 mapped internally to 0 to 30, needs spread > 0, noise > 0\r\n * - u_lensBulge (float): Radial lens warp of the image geometry; positive bulges out like a fisheye/barrel, negative pinches in like a pincushion; strong positive values fade out the corners (-1 to 1)\r\n * - u_lensCircle (float): Squeezes pixels outside the inscribed circle inward so the outline becomes a circle; also turns the spread radial and damps it near the rim; 0 is off, 1 is full (0 to 1)\r\n * - u_grainMixer (float): Scatters the spread with grain noise, breaking up the edges of the color layers, needs spread > 0 (0 to 1)\r\n * - u_grainOverlay (float): Post-processing black/white grain overlay (0 to 1)\r\n * - u_imageX (float): Pans the image horizontally behind the effect; 0 is centred (-1 to 1)\r\n * - u_imageY (float): Pans the image vertically behind the effect; 0 is centred (-1 to 1)\r\n *\r\n * Vertex shader outputs (used in fragment shader):\r\n * - v_imageUV (vec2): Image UV coordinates with global sizing (rotation, scale, offset, etc) applied\r\n *\r\n * Vertex shader uniforms:\r\n * - u_resolution (vec2): Canvas resolution in pixels\r\n * - u_pixelRatio (float): Device pixel ratio\r\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\r\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\r\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\r\n * - u_scale (float): Overall zoom level of the graphics (0.1 to 4)\r\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\r\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\r\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\r\n * - u_imageAspectRatio (float): Aspect ratio of the source image\r\n *\r\n */\r\n\r\n// language=GLSL\r\nexport const lensDistortionFragmentShader: string = `#version 300 es\r\nprecision mediump float;\r\n\r\nuniform sampler2D u_image;\r\nuniform float u_imageAspectRatio;\r\nuniform float u_spread;\r\nuniform float u_bias;\r\nuniform float u_angle;\r\nuniform float u_perspective;\r\nuniform float u_count;\r\nuniform float u_dispersion;\r\nuniform float u_dispersionShift;\r\nuniform float u_dispersionColor;\r\nuniform float u_focusCenter;\r\nuniform float u_focusEdges;\r\nuniform float u_swirl;\r\nuniform float u_noise;\r\nuniform float u_noiseFrequency;\r\nuniform float u_noiseOffset;\r\nuniform float u_lensBulge;\r\nuniform float u_lensCircle;\r\nuniform float u_grainMixer;\r\nuniform float u_grainOverlay;\r\nuniform float u_imageX;\r\nuniform float u_imageY;\r\n\r\nin vec2 v_imageUV;\r\n\r\nout vec4 fragColor;\r\n\r\n${declarePI}\r\n${proceduralHash21}\r\n${rotation2}\r\n\r\nfloat valueNoise(vec2 st) {\r\n  vec2 i = floor(st);\r\n  vec2 f = fract(st);\r\n  float a = hash21(i);\r\n  float b = hash21(i + vec2(1., 0.));\r\n  float c = hash21(i + vec2(0., 1.));\r\n  float d = hash21(i + vec2(1., 1.));\r\n  vec2 u = f * f * (3. - 2. * f);\r\n  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);\r\n}\r\n\r\nfloat getUvFrame(vec2 uv) {\r\n  vec2 invAA = 1. / clamp(fwidth(uv), 1e-5, .02);\r\n  vec2 lo = clamp(uv * invAA + .5, 0., 1.);\r\n  vec2 hi = clamp((1. - uv) * invAA + .5, 0., 1.);\r\n  return lo.x * hi.x * lo.y * hi.y;\r\n}\r\n\r\nvec4 sampleOverWhite(vec2 uv) {\r\n  vec4 img = texture(u_image, uv);\r\n  float cover = img.a * getUvFrame(uv);\r\n  vec3 colorOverWhite = mix(vec3(1.), img.rgb, cover);\r\n  return vec4(colorOverWhite, cover);\r\n}\r\n\r\nvec3 hueColor(float hue) {\r\n  vec3 rgb = clamp(abs(mod(hue * 6. + vec3(0., 4., 2.), 6.) - 3.) - 1., 0., 1.);\r\n  rgb = rgb * rgb * (3. - 2. * rgb);\r\n  return rgb;\r\n}\r\n                                            \r\nfloat boxInradius() {\r\n  return .5 * min(u_imageAspectRatio, 1.);\r\n}\r\n\r\nfloat boxOutradius() {\r\n  return .5 * length(vec2(u_imageAspectRatio, 1.));\r\n}\r\n\r\nfloat spreadReach() {\r\n  return .7 * pow(u_spread, 1.3 + 2.7 * u_spread);\r\n}\r\n\r\nfloat innerCircleMask(float radius, float inradius) {\r\n  return 1. - smoothstep(.5 * inradius, 1.1 * inradius, radius);\r\n}\r\n\r\nfloat dispersionCurve(float t, float biasPow) {\r\n  float mirroredT = u_bias < 0. ? 1. - t : t;\r\n  float curved = pow(mirroredT, biasPow);\r\n  return u_bias < 0. ? 1. - curved : curved;\r\n}\r\n\r\nvec2 getSpread(vec2 fromCenter, float radius, vec2 warpedUV, float edgeAA, float inradius, float outradius, float reach, out float outStrength) {\r\n  float angleRad = radians(u_angle);\r\n  vec2 uniformDir = vec2(cos(angleRad), sin(angleRad));\r\n\r\n  float invInradius = 1. / inradius;\r\n  vec2 radialDir = fromCenter * invInradius;\r\n  float maxLen = (outradius + reach) * invInradius;\r\n  float radialLen = radius * invInradius;\r\n  if (radialLen > maxLen) radialDir *= maxLen / radialLen;\r\n  vec2 spreadDir = mix(uniformDir, radialDir, u_perspective);\r\n\r\n  float bandProximity = smoothstep(inradius * .8, inradius, radius);\r\n  float lensCircleMaxing = bandProximity * u_lensCircle * u_lensCircle * u_lensCircle;\r\n  spreadDir = mix(spreadDir, radialDir, lensCircleMaxing);\r\n\r\n  vec2 warpedAbs = abs(warpedUV - .5);\r\n  float inner = mix(1., smoothstep(0., mix(inradius, outradius, u_focusCenter), radius), u_focusCenter);\r\n  float boxDist = max(warpedAbs.x, warpedAbs.y) * 2.;\r\n  float outer = mix(1., 1. - min(boxDist, 1.), u_focusEdges);\r\n  float strength = inner * outer;\r\n\r\n  strength *= mix(1., mix(.15, .03, max(-u_lensBulge, 0.)), lensCircleMaxing);\r\n\r\n  vec2 outside = max(warpedAbs - .5, 0.);\r\n  float margin = max(reach * length(spreadDir) * (1. - u_lensCircle), edgeAA);\r\n  strength *= 1. - smoothstep(0., margin, length(outside));\r\n\r\n  outStrength = strength;\r\n  vec2 axis = spreadDir * (reach * strength);\r\n\r\n  if (u_noise > 0.) {\r\n    float turn = (valueNoise(fromCenter * u_noiseFrequency * 18. + u_noiseOffset * 30.) - .5) * 2. * u_noise;\r\n    float cs = cos(turn), sn = sin(turn);\r\n    axis = mat2(cs, -sn, sn, cs) * axis;\r\n  }\r\n\r\n  axis.x /= u_imageAspectRatio;\r\n  return axis;\r\n}\r\n\r\nvec2 lensWarp(vec2 fromCenter, float radius, float inradius, out float bulgeFade) {\r\n  bulgeFade = 1.;\r\n  if (u_lensBulge == 0. && u_lensCircle <= 0.) return fromCenter;\r\n  if (radius < 1e-5) return fromCenter;\r\n  \r\n  float r = radius;\r\n\r\n  if (u_lensBulge != 0.) {\r\n    float rn = radius / inradius;\r\n    float bulge = abs(u_lensBulge) * (u_lensBulge > 0. ? 1.4 : 1.2);\r\n    if (u_lensBulge > 0.) bulgeFade = 1. - smoothstep(1.45, 1.53, rn * bulge);\r\n    float map = u_lensBulge > 0.\r\n      ? tan(min(rn * bulge, 1.53)) / tan(bulge)\r\n      : atan(rn * tan(bulge)) / bulge;\r\n    float bulgeScale = map / rn;\r\n    fromCenter *= bulgeScale;\r\n    r *= bulgeScale;\r\n  }\r\n\r\n  if (u_lensCircle > 0.) {\r\n    vec2 dir = fromCenter / max(r, 1e-5);\r\n    vec2 halfBox = vec2(u_imageAspectRatio, 1.) * .5;\r\n    float rBox = min(halfBox.x / max(abs(dir.x), 1e-4), halfBox.y / max(abs(dir.y), 1e-4));\r\n    float band = inradius * mix(.03, .2, .5 * (u_lensBulge + 1.));\r\n    float innerEdge = inradius - band;\r\n    float over = smoothstep(0., 1., (r - innerEdge) / band);\r\n    float g = r + (rBox - inradius) * pow(over, 14.);\r\n    fromCenter = dir * mix(r, g, u_lensCircle);\r\n  }\r\n\r\n  return fromCenter;\r\n}\r\n\r\nvoid main() {\r\n  vec2 uv = v_imageUV;\r\n\r\n  float invAspect = 1. / u_imageAspectRatio;\r\n  float inradius = boxInradius();\r\n  float outradius = boxOutradius();\r\n  float reach = spreadReach();\r\n\r\n  vec2 fromCenter = uv - .5;\r\n  fromCenter.x *= u_imageAspectRatio;\r\n  float radius = length(fromCenter);\r\n\r\n  float bulgeFade;\r\n  vec2 warpedFromCenter = lensWarp(fromCenter, radius, inradius, bulgeFade);\r\n  vec2 baseUV = vec2(warpedFromCenter.x * invAspect, warpedFromCenter.y) + .5;\r\n\r\n  vec2 baseDerivative = fwidth(baseUV);\r\n  float edgeAA = clamp(2. * max(baseDerivative.x, baseDerivative.y), .001, .02);\r\n\r\n  float spreadStrength;\r\n  vec2 spreadAxis = getSpread(fromCenter, radius, baseUV, edgeAA, inradius, outradius, reach, spreadStrength);\r\n\r\n  vec2 grainUV = vec2(0.);\r\n  if (u_grainMixer > 0. || u_grainOverlay > 0.) {\r\n    vec2 dudx = dFdx(v_imageUV);\r\n    vec2 dudy = dFdy(v_imageUV);\r\n    grainUV = (v_imageUV - .5) * (.8 / vec2(length(dudx), length(dudy))) + .5;\r\n  }\r\n\r\n  if (u_grainMixer > 0.) {\r\n    float grainSeed = valueNoise(grainUV);\r\n    vec2 jit = fract(grainSeed * vec2(157.31, 113.57)) * 2. - 1.;\r\n    spreadAxis += jit * .3 * u_grainMixer * length(spreadAxis);\r\n  }\r\n\r\n  float count = floor(u_count);\r\n  int countInteger = int(count);\r\n\r\n  float invCount = 1. / count;\r\n  float invSpan = 1. / max(count - 1., 1.);\r\n  float hueBase = u_dispersionColor + .5;\r\n  float biasPower = 1. + 2. * abs(u_bias);\r\n  vec2 tapBias = .5 - vec2(u_imageX, u_imageY);\r\n\r\n  float centerAmount = clamp(1. - u_dispersionShift, 0., 1.);\r\n  float edgesAmount = clamp(1. + u_dispersionShift, 0., 1.);\r\n  float dispersion = u_dispersion * mix(edgesAmount, centerAmount, innerCircleMask(radius, inradius));\r\n  float dispersionPower = pow(dispersion, .8);\r\n\r\n  float warpedRadius = length(warpedFromCenter);\r\n  float swirlAngle = u_swirl * .4 * PI * spreadStrength * u_spread * min(1., inradius / max(warpedRadius, 1e-4));\r\n\r\n  vec3 colorSum = vec3(0.);\r\n  vec3 weightSum = vec3(0.);\r\n  float coverSum = 0.;\r\n\r\n  for (int i = 0; i < ${lensDistortionMeta.maxSamples}; i++) {\r\n    if (i >= countInteger) break;\r\n\r\n    float layer = float(i);\r\n    float hue = hueBase + layer * invCount;\r\n\r\n    float spread = layer * invSpan;\r\n    if (u_bias != 0.) spread = dispersionCurve(spread, biasPower);\r\n\r\n    // mix(axis, -axis, spread) is axis scaled by the signed position along the fan\r\n    float fanPos = 1. - 2. * spread;\r\n    vec2 tapUV = baseUV + spreadAxis * fanPos - .5;\r\n\r\n    if (u_swirl != 0.) {\r\n      tapUV.x *= u_imageAspectRatio;\r\n      tapUV = rotate(tapUV, swirlAngle * fanPos);\r\n      tapUV.x *= invAspect;\r\n    }\r\n\r\n    vec4 tap = sampleOverWhite(tapUV + tapBias);\r\n    vec3 weight = 1. - dispersionPower * hueColor(hue);\r\n\r\n    colorSum += tap.rgb * weight;\r\n    weightSum += weight;\r\n    coverSum += tap.a;\r\n  }\r\n\r\n  vec3 color = colorSum / max(weightSum, 1e-4);\r\n  float coverAvg = coverSum * invCount;\r\n\r\n  float ground = min(color.r, min(color.g, color.b));\r\n  float alpha = max(coverAvg, 1. - ground);\r\n  vec3 premult = max(color - (1. - alpha), 0.);\r\n  fragColor = vec4(premult, alpha) * bulgeFade;\r\n\r\n  if (u_grainOverlay > 0.) {\r\n    float grain = valueNoise(rotate(grainUV, 1.) + vec2(3.));\r\n    grain = mix(grain, valueNoise(rotate(grainUV, 2.) + vec2(-1.)), .5);\r\n    grain = pow(grain, 1.3);\r\n    float grainV = grain * 2. - 1.;\r\n    float grainStrength = pow(u_grainOverlay * abs(grainV), .8) * fragColor.a;\r\n    fragColor.rgb = mix(fragColor.rgb, vec3(step(0., grainV)) * fragColor.a, .35 * grainStrength);\r\n  }\r\n}\r\n`;\r\n\r\nexport interface LensDistortionUniforms extends ShaderSizingUniforms {\r\n  u_image: HTMLImageElement | string | undefined;\r\n  u_spread: number;\r\n  u_bias: number;\r\n  u_angle: number;\r\n  u_perspective: number;\r\n  u_count: number;\r\n  u_dispersion: number;\r\n  u_dispersionShift: number;\r\n  u_dispersionColor: number;\r\n  u_focusCenter: number;\r\n  u_focusEdges: number;\r\n  u_swirl: number;\r\n  u_noise: number;\r\n  u_noiseFrequency: number;\r\n  u_noiseOffset: number;\r\n  u_lensBulge: number;\r\n  u_lensCircle: number;\r\n  u_grainMixer: number;\r\n  u_grainOverlay: number;\r\n  u_imageX: number;\r\n  u_imageY: number;\r\n}\r\n\r\nexport interface LensDistortionParams extends ShaderSizingParams, ShaderMotionParams {\r\n  image?: HTMLImageElement | string;\r\n  spread?: number;\r\n  bias?: number;\r\n  angle?: number;\r\n  perspective?: number;\r\n  count?: number;\r\n  dispersion?: number;\r\n  dispersionShift?: number;\r\n  dispersionColor?: number;\r\n  focusCenter?: number;\r\n  focusEdges?: number;\r\n  swirl?: number;\r\n  noise?: number;\r\n  noiseFrequency?: number;\r\n  noiseOffset?: number;\r\n  lensBulge?: number;\r\n  lensCircle?: number;\r\n  grainMixer?: number;\r\n  grainOverlay?: number;\r\n  imageX?: number;\r\n  imageY?: number;\r\n}\r\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,kBAAkB,iBAAiB;AAEhD,MAAM,qBAAqB;AAAA,EAChC,YAAY;AACd;AAiDO,MAAM,+BAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8BlD,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAwLa,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}