@paper-design/shaders 0.0.0-canary.156ab35

package/dist/shaders/paper-texture.js

@@ -0,0 +1,248 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { rotation2, declarePI, fiberNoise, textureRandomizerR } from "../shader-utils.js";
+const paperTextureFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_contrast;
+uniform float u_roughness;
+uniform float u_fiber;
+uniform float u_fiberSize;
+uniform float u_crumples;
+uniform float u_crumpleSize;
+uniform float u_folds;
+uniform float u_foldCount;
+uniform float u_drops;
+uniform float u_seed;
+uniform float u_fade;
+
+uniform sampler2D u_noiseTexture;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+
+  float left   = smoothstep(0., aax, uv.x);
+  float right = 1. - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1. - smoothstep(1. - aay, 1., uv.y);
+
+  return left * right * bottom * top;
+}
+
+${declarePI}
+${rotation2}
+${textureRandomizerR}
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+float fbm(vec2 n) {
+  float total = 0.0, amplitude = .4;
+  for (int i = 0; i < 3; i++) {
+    total += valueNoise(n) * amplitude;
+    n *= 1.99;
+    amplitude *= 0.65;
+  }
+  return total;
+}
+
+
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 50. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+float roughness(vec2 p) {
+  p *= .1;
+  float o = 0.;
+  for (float i = 0.; ++i < 4.; p *= 2.1) {
+    vec4 w = vec4(floor(p), ceil(p));
+    vec2 f = fract(p);
+    o += mix(
+      mix(randomG(w.xy), randomG(w.xw), f.y),
+      mix(randomG(w.zy), randomG(w.zw), f.y),
+      f.x);
+    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));
+  }
+  return o / 3.;
+}
+
+${fiberNoise}
+
+vec2 randomGB(vec2 p) {
+  vec2 uv = floor(p) / 50. + .5;
+  return texture(u_noiseTexture, fract(uv)).gb;
+}
+float crumpledNoise(vec2 t, float pw) {
+  vec2 p = floor(t);
+  float wsum = 0.;
+  float cl = 0.;
+  for (int y = -1; y < 2; y += 1) {
+    for (int x = -1; x < 2; x += 1) {
+      vec2 b = vec2(float(x), float(y));
+      vec2 q = b + p;
+      vec2 q2 = q - floor(q / 8.) * 8.;
+      vec2 c = q + randomGB(q2);
+      vec2 r = c - t;
+      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);
+      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;
+      wsum += w;
+    }
+  }
+  return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.;
+}
+float crumplesShape(vec2 uv) {
+  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);
+}
+
+
+vec2 folds(vec2 uv) {
+    vec3 pp = vec3(0.);
+    float l = 9.;
+    for (float i = 0.; i < 15.; i++) {
+      if (i >= u_foldCount) break;
+      vec2 rand = randomGB(vec2(i, i * u_seed));
+      float an = rand.x * TWO_PI;
+      vec2 p = vec2(cos(an), sin(an)) * rand.y;
+      float dist = distance(uv, p);
+      l = min(l, dist);
+
+      if (l == dist) {
+        pp.xy = (uv - p.xy);
+        pp.z = dist;
+      }
+    }
+    return mix(pp.xy, vec2(0.), pow(pp.z, .25));
+}
+
+float drops(vec2 uv) {
+  vec2 iDropsUV = floor(uv);
+  vec2 fDropsUV = fract(uv);
+  float dropsMinDist = 1.;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 neighbor = vec2(float(i), float(j));
+      vec2 offset = randomGB(iDropsUV + neighbor);
+      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);
+      vec2 pos = neighbor + offset - fDropsUV;
+      float dist = length(pos);
+      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);
+    }
+  }
+  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));
+}
+
+float lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+void main() {
+
+  vec2 imageUV = v_imageUV;
+  vec2 patternUV = v_imageUV - .5;
+  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));
+
+  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;
+  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));
+
+  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;
+  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));
+
+  vec2 fiberUV = 2. / u_fiberSize * patternUV;
+  float fiber = fiberNoise(fiberUV, vec2(0.));
+  fiber = .5 * u_fiber * (fiber - 1.);
+
+  vec2 normal = vec2(0.);
+  vec2 normalImage = vec2(0.);
+
+  vec2 foldsUV = patternUV * .12;
+  foldsUV = rotate(foldsUV, 4. * u_seed);
+  vec2 w = folds(foldsUV);
+  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));
+  vec2 w2 = folds(foldsUV);
+
+  float drops = u_drops * drops(patternUV * 2.);
+
+  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);
+  fade = clamp(8. * fade * fade * fade, 0., 1.);
+
+  w = mix(w, vec2(0.), fade);
+  w2 = mix(w2, vec2(0.), fade);
+  crumples = mix(crumples, 0., fade);
+  drops = mix(drops, 0., fade);
+  fiber *= mix(1., .5, fade);
+  roughness *= mix(1., .5, fade);
+
+  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);
+  normalImage.xy += u_folds * 2. * w;
+
+  normal.xy += crumples;
+  normalImage.xy += 1.5 * crumples;
+
+  normal.xy += 3. * drops;
+  normalImage.xy += .2 * drops;
+
+  normal.xy += u_roughness * 1.5 * roughness;
+  normal.xy += fiber;
+
+  normalImage += u_roughness * .75 * roughness;
+  normalImage += .2 * fiber;
+
+  vec3 lightPos = vec3(1., 2., 1.);
+  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
+
+  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;
+
+  imageUV += .02 * normalImage;
+  float frame = getUvFrame(imageUV);
+  vec4 image = texture(u_image, imageUV);
+  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
+
+  frame *= image.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+  opacity = mix(opacity, 1., frame);
+
+  color -= .007 * drops;
+
+  color.rgb = mix(color, image.rgb, frame);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  paperTextureFragmentShader
+};
+//# sourceMappingURL=paper-texture.js.map

package/dist/shaders/paper-texture.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/paper-texture.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * Mimicking paper texture with a combination of noises\n *\n * Uniforms:\n * - u_colorFront, u_colorBack (RGBA)\n * - u_contrast - mixing front and back colors\n * - u_roughness - pixel noise, related to canvas => not scalable\n * - u_fiber, u_fiberSize - curly shaped noise\n * - u_crumples, u_crumpleSize - cell-based pattern\n * - u_folds, u_foldCount - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_fade - big-scale noise mask applied to everything but roughness\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const paperTextureFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberSize;\nuniform float u_crumples;\nuniform float u_crumpleSize;\nuniform float u_folds;\nuniform float u_foldCount;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_fade;\n\nuniform sampler2D u_noiseTexture;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n\n  float left   = smoothstep(0., aax, uv.x);\n  float right = 1. - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1. - smoothstep(1. - aay, 1., uv.y);\n\n  return left * right * bottom * top;\n}\n\n${declarePI}\n${rotation2}\n${textureRandomizerR}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\nfloat fbm(vec2 n) {\n  float total = 0.0, amplitude = .4;\n  for (int i = 0; i < 3; i++) {\n    total += valueNoise(n) * amplitude;\n    n *= 1.99;\n    amplitude *= 0.65;\n  }\n  return total;\n}\n\n\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat roughness(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(\n      mix(randomG(w.xy), randomG(w.xw), f.y),\n      mix(randomG(w.zy), randomG(w.zw), f.y),\n      f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\n${fiberNoise}\n\nvec2 randomGB(vec2 p) {\n  vec2 uv = floor(p) / 50. + .5;\n  return texture(u_noiseTexture, fract(uv)).gb;\n}\nfloat crumpledNoise(vec2 t, float pw) {\n  vec2 p = floor(t);\n  float wsum = 0.;\n  float cl = 0.;\n  for (int y = -1; y < 2; y += 1) {\n    for (int x = -1; x < 2; x += 1) {\n      vec2 b = vec2(float(x), float(y));\n      vec2 q = b + p;\n      vec2 q2 = q - floor(q / 8.) * 8.;\n      vec2 c = q + randomGB(q2);\n      vec2 r = c - t;\n      float w = pow(smoothstep(0., 1., 1. - abs(r.x)), pw) * pow(smoothstep(0., 1., 1. - abs(r.y)), pw);\n      cl += (.5 + .5 * sin((q2.x + q2.y * 5.) * 8.)) * w;\n      wsum += w;\n    }\n  }\n  return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.;\n}\nfloat crumplesShape(vec2 uv) {\n  return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.);\n}\n\n\nvec2 folds(vec2 uv) {\n    vec3 pp = vec3(0.);\n    float l = 9.;\n    for (float i = 0.; i < 15.; i++) {\n      if (i >= u_foldCount) break;\n      vec2 rand = randomGB(vec2(i, i * u_seed));\n      float an = rand.x * TWO_PI;\n      vec2 p = vec2(cos(an), sin(an)) * rand.y;\n      float dist = distance(uv, p);\n      l = min(l, dist);\n\n      if (l == dist) {\n        pp.xy = (uv - p.xy);\n        pp.z = dist;\n      }\n    }\n    return mix(pp.xy, vec2(0.), pow(pp.z, .25));\n}\n\nfloat drops(vec2 uv) {\n  vec2 iDropsUV = floor(uv);\n  vec2 fDropsUV = fract(uv);\n  float dropsMinDist = 1.;\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 neighbor = vec2(float(i), float(j));\n      vec2 offset = randomGB(iDropsUV + neighbor);\n      offset = .5 + .5 * sin(10. * u_seed + TWO_PI * offset);\n      vec2 pos = neighbor + offset - fDropsUV;\n      float dist = length(pos);\n      dropsMinDist = min(dropsMinDist, dropsMinDist*dist);\n    }\n  }\n  return 1. - smoothstep(.05, .09, pow(dropsMinDist, .5));\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nvoid main() {\n\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio;\n  float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.));\n\n  vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 2. / u_fiberSize * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  vec2 foldsUV = patternUV * .12;\n  foldsUV = rotate(foldsUV, 4. * u_seed);\n  vec2 w = folds(foldsUV);\n  foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed));\n  vec2 w2 = folds(foldsUV);\n\n  float drops = u_drops * drops(patternUV * 2.);\n\n  float fade = u_fade * fbm(.17 * patternUV + 10. * u_seed);\n  fade = clamp(8. * fade * fade * fade, 0., 1.);\n\n  w = mix(w, vec2(0.), fade);\n  w2 = mix(w2, vec2(0.), fade);\n  crumples = mix(crumples, 0., fade);\n  drops = mix(drops, 0., fade);\n  fiber *= mix(1., .5, fade);\n  roughness *= mix(1., .5, fade);\n\n  normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2);\n  normalImage.xy += u_folds * 2. * w;\n\n  normal.xy += crumples;\n  normalImage.xy += 1.5 * crumples;\n\n  normal.xy += 3. * drops;\n  normalImage.xy += .2 * drops;\n\n  normal.xy += u_roughness * 1.5 * roughness;\n  normal.xy += fiber;\n\n  normalImage += u_roughness * .75 * roughness;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n\n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n\n  color -= .007 * drops;\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PaperTextureUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_noiseTexture?: HTMLImageElement;\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_contrast: number;\n  u_roughness: number;\n  u_fiber: number;\n  u_fiberSize: number;\n  u_crumples: number;\n  u_foldCount: number;\n  u_folds: number;\n  u_fade: number;\n  u_crumpleSize: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberSize?: number;\n  crumples?: number;\n  foldCount?: number;\n  folds?: number;\n  fade?: number;\n  crumpleSize?: number;\n  drops?: number;\n  seed?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,YAAY,0BAA0B;AAqB9D,MAAM,6BAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BhD,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ClB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": []
+}

package/dist/shaders/perlin-noise.d.ts

@@ -0,0 +1,33 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * 3d Perlin noise; original algorithm: https://www.shadertoy.com/view/NlSGDz
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorFront (RGBA)
+ * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)
+ * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)
+ * - u_octaveCount: more octaves => more detailed pattern
+ * - u_persistence: roughness, falloff between octaves
+ * - u_lacunarity: frequency step, typically around 2, defines how compressed is the pattern
+ *
+ */
+export declare const perlinNoiseFragmentShader: string;
+export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_proportion: number;
+    u_softness: number;
+    u_octaveCount: number;
+    u_persistence: number;
+    u_lacunarity: number;
+}
+export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
+    colorFront?: string;
+    colorBack?: string;
+    proportion?: number;
+    softness?: number;
+    octaveCount?: number;
+    persistence?: number;
+    lacunarity?: number;
+}

package/dist/shaders/perlin-noise.js

@@ -0,0 +1,195 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, colorBandingFix } from "../shader-utils.js";
+const perlinNoiseFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_proportion;
+uniform float u_softness;
+uniform float u_octaveCount;
+uniform float u_persistence;
+uniform float u_lacunarity;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+
+float hash11(float p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p *= p + 19.19;
+  return fract(p * p);
+}
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+  p += dot(p, p + 19.19);
+  return fract(p.x * p.y);
+}
+
+float hash31(vec3 p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p += dot(p, p.yzx + 19.19);
+  return fract(p.x * (p.y + p.z));
+}
+
+vec3 hash33(vec3 p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p += dot(p, p.yzx + 19.19);
+  return fract(vec3(p.x * p.y, p.y * p.z, p.z * p.x));
+}
+
+vec3 gradientSafe(vec3 p) {
+  vec3 h = hash33(p) * 2.0 - 1.;
+  return normalize(h + 0.001);
+}
+
+vec3 gradientPredefined(float hash) {
+  int idx = int(hash * 12.0) % 12;
+
+  if (idx == 0) return vec3(1, 1, 0);
+  if (idx == 1) return vec3(-1, 1, 0);
+  if (idx == 2) return vec3(1, -1, 0);
+  if (idx == 3) return vec3(-1, -1, 0);
+  if (idx == 4) return vec3(1, 0, 1);
+  if (idx == 5) return vec3(-1, 0, 1);
+  if (idx == 6) return vec3(1, 0, -1);
+  if (idx == 7) return vec3(-1, 0, -1);
+  if (idx == 8) return vec3(0, 1, 1);
+  if (idx == 9) return vec3(0, -1, 1);
+  if (idx == 10) return vec3(0, 1, -1);
+  return vec3(0, -1, -1);// idx == 11
+}
+
+float interpolateSafe(float v000, float v001, float v010, float v011,
+float v100, float v101, float v110, float v111, vec3 t) {
+  t = clamp(t, 0.0, 1.0);
+
+  float v00 = mix(v000, v100, t.x);
+  float v01 = mix(v001, v101, t.x);
+  float v10 = mix(v010, v110, t.x);
+  float v11 = mix(v011, v111, t.x);
+
+  float v0 = mix(v00, v10, t.y);
+  float v1 = mix(v01, v11, t.y);
+
+  return mix(v0, v1, t.z);
+}
+
+vec3 fade(vec3 t) {
+    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float perlinNoise(vec3 position, float seed) {
+  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);
+
+  vec3 i = floor(position);
+  vec3 f = fract(position);
+  float h000 = hash31(i);
+  float h001 = hash31(i + vec3(0, 0, 1));
+  float h010 = hash31(i + vec3(0, 1, 0));
+  float h011 = hash31(i + vec3(0, 1, 1));
+  float h100 = hash31(i + vec3(1, 0, 0));
+  float h101 = hash31(i + vec3(1, 0, 1));
+  float h110 = hash31(i + vec3(1, 1, 0));
+  float h111 = hash31(i + vec3(1, 1, 1));
+  vec3 g000 = gradientPredefined(h000);
+  vec3 g001 = gradientPredefined(h001);
+  vec3 g010 = gradientPredefined(h010);
+  vec3 g011 = gradientPredefined(h011);
+  vec3 g100 = gradientPredefined(h100);
+  vec3 g101 = gradientPredefined(h101);
+  vec3 g110 = gradientPredefined(h110);
+  vec3 g111 = gradientPredefined(h111);
+  float v000 = dot(g000, f - vec3(0, 0, 0));
+  float v001 = dot(g001, f - vec3(0, 0, 1));
+  float v010 = dot(g010, f - vec3(0, 1, 0));
+  float v011 = dot(g011, f - vec3(0, 1, 1));
+  float v100 = dot(g100, f - vec3(1, 0, 0));
+  float v101 = dot(g101, f - vec3(1, 0, 1));
+  float v110 = dot(g110, f - vec3(1, 1, 0));
+  float v111 = dot(g111, f - vec3(1, 1, 1));
+
+  vec3 u = fade(f);
+  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);
+}
+
+float p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {
+  float value = 0.0;
+  float amplitude = 1.0;
+  float frequency = 10.0;
+  float maxValue = 0.0;
+  octaveCount = clamp(octaveCount, 1, 8);
+
+  for (int i = 0; i < octaveCount; i++) {
+    float seed = float(i) * 0.7319;
+    value += perlinNoise(position * frequency, seed) * amplitude;
+    maxValue += amplitude;
+    amplitude *= persistence;
+    frequency *= lacunarity;
+  }
+  return value;
+}
+
+float get_max_amp(float persistence, float octaveCount) {
+  persistence = clamp(persistence * 0.999, 0.0, 0.999);
+  octaveCount = clamp(octaveCount, 1.0, 8.0);
+
+  if (abs(persistence - 1.0) < 0.001) {
+    return octaveCount;
+  }
+
+  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));
+}
+
+void main() {
+  vec2 uv = v_patternUV;
+  uv *= .5;
+  
+  float t = .2 * u_time;
+
+  vec3 p = vec3(uv, t);
+
+  float octCount = clamp(floor(u_octaveCount), 1.0, 8.0);
+  float persistence = clamp(u_persistence, 0., 1.);
+  float noise = p_noise(p, int(octCount), persistence, u_lacunarity);
+
+  float max_amp = get_max_amp(persistence, octCount);
+  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);
+  float sharpness = clamp(u_softness, 0., 1.);
+  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);
+  float res = smoothstep(
+    .5 - .5 * sharpness - smooth_w,
+    .5 + .5 * sharpness + smooth_w,
+    noise_normalized
+  );
+
+  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 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  ${colorBandingFix}
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  perlinNoiseFragmentShader
+};
+//# sourceMappingURL=perlin-noise.js.map

package/dist/shaders/perlin-noise.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/perlin-noise.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix } from '../shader-utils.js';\n\n/**\n * 3d Perlin noise; original algorithm: https://www.shadertoy.com/view/NlSGDz\n *\n * Uniforms:\n * - u_colorBack, u_colorFront (RGBA)\n * - u_proportion: (0..1) blend point between 2 colors (0.5 = equal distribution)\n * - u_softness: color transition sharpness (0 = hard edge, 1 = smooth fade)\n * - u_octaveCount: more octaves => more detailed pattern\n * - u_persistence: roughness, falloff between octaves\n * - u_lacunarity: frequency step, typically around 2, defines how compressed is the pattern\n *\n */\n\n// language=GLSL\nexport const perlinNoiseFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_octaveCount;\nuniform float u_persistence;\nuniform float u_lacunarity;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nfloat hash11(float p) {\n  p = fract(p * 0.3183099) + 0.1;\n  p *= p + 19.19;\n  return fract(p * p);\n}\n\nfloat hash21(vec2 p) {\n  p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n  p += dot(p, p + 19.19);\n  return fract(p.x * p.y);\n}\n\nfloat hash31(vec3 p) {\n  p = fract(p * 0.3183099) + 0.1;\n  p += dot(p, p.yzx + 19.19);\n  return fract(p.x * (p.y + p.z));\n}\n\nvec3 hash33(vec3 p) {\n  p = fract(p * 0.3183099) + 0.1;\n  p += dot(p, p.yzx + 19.19);\n  return fract(vec3(p.x * p.y, p.y * p.z, p.z * p.x));\n}\n\nvec3 gradientSafe(vec3 p) {\n  vec3 h = hash33(p) * 2.0 - 1.;\n  return normalize(h + 0.001);\n}\n\nvec3 gradientPredefined(float hash) {\n  int idx = int(hash * 12.0) % 12;\n\n  if (idx == 0) return vec3(1, 1, 0);\n  if (idx == 1) return vec3(-1, 1, 0);\n  if (idx == 2) return vec3(1, -1, 0);\n  if (idx == 3) return vec3(-1, -1, 0);\n  if (idx == 4) return vec3(1, 0, 1);\n  if (idx == 5) return vec3(-1, 0, 1);\n  if (idx == 6) return vec3(1, 0, -1);\n  if (idx == 7) return vec3(-1, 0, -1);\n  if (idx == 8) return vec3(0, 1, 1);\n  if (idx == 9) return vec3(0, -1, 1);\n  if (idx == 10) return vec3(0, 1, -1);\n  return vec3(0, -1, -1);// idx == 11\n}\n\nfloat interpolateSafe(float v000, float v001, float v010, float v011,\nfloat v100, float v101, float v110, float v111, vec3 t) {\n  t = clamp(t, 0.0, 1.0);\n\n  float v00 = mix(v000, v100, t.x);\n  float v01 = mix(v001, v101, t.x);\n  float v10 = mix(v010, v110, t.x);\n  float v11 = mix(v011, v111, t.x);\n\n  float v0 = mix(v00, v10, t.y);\n  float v1 = mix(v01, v11, t.y);\n\n  return mix(v0, v1, t.z);\n}\n\nvec3 fade(vec3 t) {\n    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);\n}\n\nfloat perlinNoise(vec3 position, float seed) {\n  position += vec3(seed * 127.1, seed * 311.7, seed * 74.7);\n\n  vec3 i = floor(position);\n  vec3 f = fract(position);\n  float h000 = hash31(i);\n  float h001 = hash31(i + vec3(0, 0, 1));\n  float h010 = hash31(i + vec3(0, 1, 0));\n  float h011 = hash31(i + vec3(0, 1, 1));\n  float h100 = hash31(i + vec3(1, 0, 0));\n  float h101 = hash31(i + vec3(1, 0, 1));\n  float h110 = hash31(i + vec3(1, 1, 0));\n  float h111 = hash31(i + vec3(1, 1, 1));\n  vec3 g000 = gradientPredefined(h000);\n  vec3 g001 = gradientPredefined(h001);\n  vec3 g010 = gradientPredefined(h010);\n  vec3 g011 = gradientPredefined(h011);\n  vec3 g100 = gradientPredefined(h100);\n  vec3 g101 = gradientPredefined(h101);\n  vec3 g110 = gradientPredefined(h110);\n  vec3 g111 = gradientPredefined(h111);\n  float v000 = dot(g000, f - vec3(0, 0, 0));\n  float v001 = dot(g001, f - vec3(0, 0, 1));\n  float v010 = dot(g010, f - vec3(0, 1, 0));\n  float v011 = dot(g011, f - vec3(0, 1, 1));\n  float v100 = dot(g100, f - vec3(1, 0, 0));\n  float v101 = dot(g101, f - vec3(1, 0, 1));\n  float v110 = dot(g110, f - vec3(1, 1, 0));\n  float v111 = dot(g111, f - vec3(1, 1, 1));\n\n  vec3 u = fade(f);\n  return interpolateSafe(v000, v001, v010, v011, v100, v101, v110, v111, u);\n}\n\nfloat p_noise(vec3 position, int octaveCount, float persistence, float lacunarity) {\n  float value = 0.0;\n  float amplitude = 1.0;\n  float frequency = 10.0;\n  float maxValue = 0.0;\n  octaveCount = clamp(octaveCount, 1, 8);\n\n  for (int i = 0; i < octaveCount; i++) {\n    float seed = float(i) * 0.7319;\n    value += perlinNoise(position * frequency, seed) * amplitude;\n    maxValue += amplitude;\n    amplitude *= persistence;\n    frequency *= lacunarity;\n  }\n  return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n  persistence = clamp(persistence * 0.999, 0.0, 0.999);\n  octaveCount = clamp(octaveCount, 1.0, 8.0);\n\n  if (abs(persistence - 1.0) < 0.001) {\n    return octaveCount;\n  }\n\n  return (1.0 - pow(persistence, octaveCount)) / max(1e-4, (1.0 - persistence));\n}\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n  \n  float t = .2 * u_time;\n\n  vec3 p = vec3(uv, t);\n\n  float octCount = clamp(floor(u_octaveCount), 1.0, 8.0);\n  float persistence = clamp(u_persistence, 0., 1.);\n  float noise = p_noise(p, int(octCount), persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(persistence, octCount);\n  float noise_normalized = clamp((noise + max_amp) / max(1e-4, (2. * max_amp)) + (u_proportion - .5), 0.0, 1.0);\n  float sharpness = clamp(u_softness, 0., 1.);\n  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);\n  float res = smoothstep(\n    .5 - .5 * sharpness - smooth_w,\n    .5 + .5 * sharpness + smooth_w,\n    noise_normalized\n  );\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface PerlinNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_proportion: number;\n  u_softness: number;\n  u_octaveCount: number;\n  u_persistence: number;\n  u_lacunarity: number;\n}\n\nexport interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorBack?: string;\n  proportion?: number;\n  softness?: number;\n  octaveCount?: number;\n  persistence?: number;\n  lacunarity?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAgBpC,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,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,IAkKP,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/pulsing-border.d.ts

@@ -0,0 +1,72 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const pulsingBorderMeta: {
+    readonly maxColorCount: 5;
+    readonly maxSpots: 4;
+};
+/**
+ * Color spots traveling around rectangular stroke (border)
+ *
+ * Uniforms:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_roundness, u_thickness, u_softness: border parameters
+ * - u_aspectRatio
+ * - u_intensity: thickness of individual spots
+ * - u_bloom: normal / additive color blending
+ * - u_spotSize: angular size of spots
+ * - u_spots (float used as int): number of spots rendered per color
+ * - u_pulse: optional pulsing animation
+ * - u_smoke, u_smokeSize: optional noisy shapes around the border
+ *
+ * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ *
+ */
+export declare const pulsingBorderFragmentShader: string;
+export interface PulsingBorderUniforms extends ShaderSizingUniforms {
+    u_colorBack: [number, number, number, number];
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_roundness: number;
+    u_thickness: number;
+    u_marginLeft: number;
+    u_marginRight: number;
+    u_marginTop: number;
+    u_marginBottom: number;
+    u_aspectRatio: (typeof PulsingBorderAspectRatios)[PulsingBorderAspectRatio];
+    u_softness: number;
+    u_intensity: number;
+    u_bloom: number;
+    u_spots: number;
+    u_spotSize: number;
+    u_pulse: number;
+    u_smoke: number;
+    u_smokeSize: number;
+    u_noiseTexture?: HTMLImageElement;
+}
+export interface PulsingBorderParams extends ShaderSizingParams, ShaderMotionParams {
+    colorBack?: string;
+    colors?: string[];
+    roundness?: number;
+    thickness?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    aspectRatio?: PulsingBorderAspectRatio;
+    softness?: number;
+    intensity?: number;
+    bloom?: number;
+    spots?: number;
+    spotSize?: number;
+    pulse?: number;
+    smoke?: number;
+    smokeSize?: number;
+}
+export declare const PulsingBorderAspectRatios: {
+    readonly auto: 0;
+    readonly square: 1;
+};
+export type PulsingBorderAspectRatio = keyof typeof PulsingBorderAspectRatios;