@paper-design/shaders 0.0.45 → 0.0.47

package/dist/shaders/paper-texture.js

@@ -0,0 +1,238 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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 float u_time;
+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_fiberScale;
+uniform float u_crumples;
+uniform float u_crumplesScale;
+uniform float u_folds;
+uniform float u_foldsNumber;
+uniform float u_drops;
+uniform float u_seed;
+uniform float u_blur;
+
+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  = smoothstep(1., 1. - aax, uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top    = smoothstep(1., 1. - aay, 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(cl / wsum, .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_foldsNumber) 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));
+}
+
+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 * .1 * u_crumplesScale - u_seed) * 32.;
+  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));
+
+  vec2 fiberUV = 10. * u_fiberScale * 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.);
+  
+  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;
+
+  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));
+  normal *= (1. - 2. * blur);
+  fiber *= (1. - blur);
+
+  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);
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+  opacity = mix(opacity, 1., frame);
+  
+  color -= .007 * drops;
+
+  vec4 image = texture(u_image, imageUV);
+  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
+
+  color.rgb = mix(color, image.rgb, min(frame, image.a));
+
+  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_fiberScale - curly shaped noise\n * - u_crumples, u_crumplesScale - cell-based pattern\n * - u_folds, u_foldsNumber - lines pattern, 15 max\n * - u_drops - metaballs-like pattern\n * - u_seed - applied to folds, crumples and dots\n * - u_blur - 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 float u_time;\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_fiberScale;\nuniform float u_crumples;\nuniform float u_crumplesScale;\nuniform float u_folds;\nuniform float u_foldsNumber;\nuniform float u_drops;\nuniform float u_seed;\nuniform float u_blur;\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  = smoothstep(1., 1. - aax, uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top    = smoothstep(1., 1. - aay, 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(cl / wsum, .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_foldsNumber) 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\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 * .1 * u_crumplesScale - u_seed) * 32.;\n  float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV));\n\n  vec2 fiberUV = 10. * u_fiberScale * 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  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  float blur = u_blur * smoothstep(0., 1., fbm(.17 * patternUV + 10. * u_seed));\n  normal *= (1. - 2. * blur);\n  fiber *= (1. - blur);\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\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  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n\n  color.rgb = mix(color, image.rgb, min(frame, image.a));\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_fiberScale: number;\n  u_crumples: number;\n  u_foldsNumber: number;\n  u_folds: number;\n  u_blur: number;\n  u_crumplesScale: number;\n  u_drops: number;\n  u_seed: number;\n}\n\nexport interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorFront?: string;\n  colorBack?: string;\n  contrast?: number;\n  roughness?: number;\n  fiber?: number;\n  fiberScale?: number;\n  crumples?: number;\n  foldsNumber?: number;\n  folds?: number;\n  blur?: number;\n  crumplesScale?: 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;AAAA,EA2BhD,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;",
+  "names": []
+}

package/dist/shaders/perlin-noise.js

@@ -24,137 +24,131 @@ out vec4 fragColor;
 
 ${declarePI}
 
-uint hash(uint x, uint seed) {
-  const uint m = 0x5bd1e995U;
-  uint hash = seed;
-    // process input
-    uint k = x;
-    k *= m;
-    k ^= k >> 24;
-    k *= m;
-    hash *= m;
-    hash ^= k;
-    // some final mixing
-    hash ^= hash >> 13;
-    hash *= m;
-    hash ^= hash >> 15;
-    return hash;
+float hash11(float p) {
+  p = fract(p * 0.3183099) + 0.1;
+  p *= p + 19.19;
+  return fract(p * p);
 }
 
-uint hash(uvec3 x, uint seed){
-    const uint m = 0x5bd1e995U;
-    uint hash = seed;
-    // process first vector element
-    uint k = x.x;
-    k *= m;
-    k ^= k >> 24;
-    k *= m;
-    hash *= m;
-    hash ^= k;
-    // process second vector element
-    k = x.y;
-    k *= m;
-    k ^= k >> 24;
-    k *= m;
-    hash *= m;
-    hash ^= k;
-    // process third vector element
-    k = x.z;
-    k *= m;
-    k ^= k >> 24;
-    k *= m;
-    hash *= m;
-    hash ^= k;
-    // some final mixing
-    hash ^= hash >> 13;
-    hash *= m;
-    hash ^= hash >> 15;
-    return hash;
+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 gradientdy(uint hash) {
-    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy
-    case 0:
-        return vec3(1, 1, 0);
-    case 1:
-        return vec3(-1, 1, 0);
-    case 2:
-        return vec3(1, -1, 0);
-    case 3:
-        return vec3(-1, -1, 0);
-    case 4:
-        return vec3(1, 0, 1);
-    case 5:
-        return vec3(-1, 0, 1);
-    case 6:
-        return vec3(1, 0, -1);
-    case 7:
-        return vec3(-1, 0, -1);
-    case 8:
-        return vec3(0, 1, 1);
-    case 9:
-        return vec3(0, -1, 1);
-    case 10:
-        return vec3(0, 1, -1);
-    case 11:
-        return vec3(0, -1, -1);
-    case 12:
-        return vec3(1, 1, 0);
-    case 13:
-        return vec3(-1, 1, 0);
-    case 14:
-        return vec3(0, -1, 1);
-    case 15:
-        return vec3(0, -1, -1);
-    }
+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 interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {
-    return mix(
-        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),
-        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),
-        t.z
-    );
+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, uint seed) {
-    position += 1e+4;
-    vec3 floorPosition = floor(position);
-    vec3 fractPosition = fract(position);
-    uvec3 cellCoordinates = uvec3(floorPosition);
-    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);
-    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));
-    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));
-    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));
-    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));
-    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));
-    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));
-    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));
-    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));
+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 currentFrequency = 10.;
-    uint currentSeed = uint(0);
-    for (int i = 0; i < octaveCount; i++) {
-        currentSeed = hash(currentSeed, 0x0U);
-        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;
-        amplitude *= persistence;
-        currentFrequency *= lacunarity;
-    }
-    return value;
+  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 *= .999;
-    return (1. - pow(persistence, octaveCount)) / (1. - persistence);
+  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)) / (1.0 - persistence);
 }
 
 void main() {
@@ -165,14 +159,14 @@ void main() {
 
   vec3 p = vec3(uv, t);
 
-  float oct_count = max(0., floor(u_octaveCount));
+  float octCount = clamp(floor(u_octaveCount), 1.0, 8.0);
   float persistence = clamp(u_persistence, 0., 1.);
-  float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);
+  float noise = p_noise(p, int(octCount), persistence, u_lacunarity);
 
-  float max_amp = get_max_amp(persistence, oct_count);
-  float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);
+  float max_amp = get_max_amp(persistence, octCount);
+  float noise_normalized = clamp((noise + max_amp) / (2. * max_amp) + (u_proportion - .5), 0.0, 1.0);
   float sharpness = clamp(u_softness, 0., 1.);
-  float smooth_w = 0.5 * fwidth(noise_normalized);
+  float smooth_w = 0.5 * max(fwidth(noise_normalized), 0.001);
   float res = smoothstep(
     .5 - .5 * sharpness - smooth_w,
     .5 + .5 * sharpness + smooth_w,

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

@@ -1,7 +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\nuint hash(uint x, uint seed) {\n  const uint m = 0x5bd1e995U;\n  uint hash = seed;\n    // process input\n    uint k = x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\nuint hash(uvec3 x, uint seed){\n    const uint m = 0x5bd1e995U;\n    uint hash = seed;\n    // process first vector element\n    uint k = x.x;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process second vector element\n    k = x.y;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // process third vector element\n    k = x.z;\n    k *= m;\n    k ^= k >> 24;\n    k *= m;\n    hash *= m;\n    hash ^= k;\n    // some final mixing\n    hash ^= hash >> 13;\n    hash *= m;\n    hash ^= hash >> 15;\n    return hash;\n}\n\n\nvec3 gradientdy(uint hash) {\n    switch (int(hash) & 15) { // look at the last four bits to pick a gradient dy\n    case 0:\n        return vec3(1, 1, 0);\n    case 1:\n        return vec3(-1, 1, 0);\n    case 2:\n        return vec3(1, -1, 0);\n    case 3:\n        return vec3(-1, -1, 0);\n    case 4:\n        return vec3(1, 0, 1);\n    case 5:\n        return vec3(-1, 0, 1);\n    case 6:\n        return vec3(1, 0, -1);\n    case 7:\n        return vec3(-1, 0, -1);\n    case 8:\n        return vec3(0, 1, 1);\n    case 9:\n        return vec3(0, -1, 1);\n    case 10:\n        return vec3(0, 1, -1);\n    case 11:\n        return vec3(0, -1, -1);\n    case 12:\n        return vec3(1, 1, 0);\n    case 13:\n        return vec3(-1, 1, 0);\n    case 14:\n        return vec3(0, -1, 1);\n    case 15:\n        return vec3(0, -1, -1);\n    }\n}\n\nfloat interpolate(float value1, float value2, float value3, float value4, float value5, float value6, float value7, float value8, vec3 t) {\n    return mix(\n        mix(mix(value1, value2, t.x), mix(value3, value4, t.x), t.y),\n        mix(mix(value5, value6, t.x), mix(value7, value8, t.x), t.y),\n        t.z\n    );\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, uint seed) {\n    position += 1e+4;\n    vec3 floorPosition = floor(position);\n    vec3 fractPosition = fract(position);\n    uvec3 cellCoordinates = uvec3(floorPosition);\n    float value1 = dot(gradientdy(hash(cellCoordinates, seed)), fractPosition);\n    float value2 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 0)), seed)), fractPosition - vec3(1, 0, 0));\n    float value3 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 0)), seed)), fractPosition - vec3(0, 1, 0));\n    float value4 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 0)), seed)), fractPosition - vec3(1, 1, 0));\n    float value5 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 0, 1)), seed)), fractPosition - vec3(0, 0, 1));\n    float value6 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 0, 1)), seed)), fractPosition - vec3(1, 0, 1));\n    float value7 = dot(gradientdy(hash((cellCoordinates + uvec3(0, 1, 1)), seed)), fractPosition - vec3(0, 1, 1));\n    float value8 = dot(gradientdy(hash((cellCoordinates + uvec3(1, 1, 1)), seed)), fractPosition - vec3(1, 1, 1));\n    return interpolate(value1, value2, value3, value4, value5, value6, value7, value8, fade(fractPosition));\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 currentFrequency = 10.;\n    uint currentSeed = uint(0);\n    for (int i = 0; i < octaveCount; i++) {\n        currentSeed = hash(currentSeed, 0x0U);\n        value += perlinNoise(position * currentFrequency, currentSeed) * amplitude;\n        amplitude *= persistence;\n        currentFrequency *= lacunarity;\n    }\n    return value;\n}\n\nfloat get_max_amp(float persistence, float octaveCount) {\n    persistence *= .999;\n    return (1. - pow(persistence, octaveCount)) / (1. - 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 oct_count = max(0., floor(u_octaveCount));\n  float persistence = clamp(u_persistence, 0., 1.);\n  float noise = p_noise(p, int(oct_count), persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(persistence, oct_count);\n  float noise_normalized = (noise + max_amp) / (2. * max_amp) + (u_proportion - .5);\n  float sharpness = clamp(u_softness, 0., 1.);\n  float smooth_w = 0.5 * fwidth(noise_normalized);\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwKP,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "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)) / (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) / (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.js

@@ -4,7 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareValueNoise, colorBandingFix } from "../shader-utils.js";
+import { declarePI, textureRandomizerGB, colorBandingFix } from "../shader-utils.js";
 const pulsingBorderMeta = {
   maxColorCount: 5,
   maxSpots: 4
@@ -59,17 +59,25 @@ float roundedBoxSmoke(vec2 uv, float distance, float size) {
   return border;
 }
 
-float random(vec2 p) {
+${textureRandomizerGB}
+
+float randomG(vec2 p) {
   vec2 uv = floor(p) / 100. + .5;
-  return texture(u_noiseTexture, uv).g;
+  return texture(u_noiseTexture, fract(uv)).g;
 }
-vec2 rand2(vec2 p) {
-  vec2 uv = floor(p) / 100. + .5;
-  return texture(u_noiseTexture, uv).gb;
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomG(i);
+  float b = randomG(i + vec2(1.0, 0.0));
+  float c = randomG(i + vec2(0.0, 1.0));
+  float d = randomG(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);
 }
 
-${declareValueNoise}
-
 float linearstep(float edge0, float edge1, float x) {
   return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
 }
@@ -138,7 +146,7 @@ void main() {
     m *= (1. - clamp(length((v3 + maskOffset) / maskR), 0., 1.));
     cornerFadeMask += m;
   }
-
+  cornerFade = clamp(cornerFade, 0., 1.);
   cornerFade *= cornerFadeMask;
   border += cornerFade;
 
@@ -153,6 +161,8 @@ void main() {
   smoke = clamp(smoke, 0., 1.);
 
   border += smoke;
+  float borderBounds = 1. - smoothstep(.9, 1., length(v_responsiveUV));
+  border *= borderBounds;
   border = clamp(border, 0., 1.);
 
   vec3 blendColor = vec3(0.);
@@ -174,7 +184,7 @@ void main() {
       if (spotIdx >= int(u_spots)) break;
       float spotIdxF = float(spotIdx);
 
-      vec2 randVal = rand2(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
+      vec2 randVal = randomGB(vec2(spotIdxF * 10. + 2., 40. + colorIdxF));
 
       float time = (.1 + .15 * abs(sin(spotIdxF * (2. + colorIdxF)) * cos(spotIdxF * (2. + 2.5 * colorIdxF)))) * t + randVal.x * 3.;
       time *= mix(1., -1., step(.5, randVal.y));