@paper-design/shaders 0.0.67 → 0.0.69

package/dist/shaders/metaballs.d.ts

@@ -6,16 +6,32 @@ export declare const metaballsMeta: {
     readonly maxBallsCount: 20;
 };
 /**
- * N circular shapes moving around the center, blending and merging based on distance
+ * Up to 20 colored gooey balls moving around the center and merging into smooth organic shapes.
  *
- * Uniforms:
- * - u_colorBack (RGBA)
- * - u_colors (vec4[]), u_colorsCount (float used as integer)
- * - u_size: ball base size
- * - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size
- * - u_count: number of balls on the canvas
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_colors (vec4[]): Up to 8 base colors in RGBA
+ * - u_colorsCount (float): Number of active colors
+ * - u_count (float): Number of balls (1 to 20)
+ * - u_size (float): Size of the balls (0 to 1)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
- * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ * Vertex shader outputs (used in fragment shader):
+ * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, 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_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - 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.01 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)
  *
  */
 export declare const metaballsFragmentShader: string;

package/dist/shaders/metaballs.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { declarePI, textureRandomizerR, colorBandingFix } from "../shader-utils.js";
 const metaballsMeta = {
   maxColorCount: 8,
@@ -23,7 +23,7 @@ uniform float u_size;
 uniform float u_sizeRange;
 uniform float u_count;
 
-${sizingVariablesDeclaration}
+in vec2 v_objectUV;
 
 out vec4 fragColor;
 

package/dist/shaders/metaballs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/metaballs.ts"],
-  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * N circular shapes moving around the center, blending and merging based on distance\n *\n * Uniforms:\n * - u_colorBack (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_size: ball base size\n * - u_sizeRange (0..1): randomizes the size of balls between 0 and u_size\n * - u_count: number of balls on the canvas\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const metaballsFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${metaballsMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${textureRandomizerR}\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  const float firstFrameOffset = 2503.4;\n  float t = .2 * (u_time + firstFrameOffset);\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < ${metaballsMeta.maxBallsCount}; i++) {\n    if (i >= int(ceil(u_count))) break;\n\n    float idxFract = float(i) / float(${metaballsMeta.maxBallsCount});\n    float angle = TWO_PI * idxFract;\n\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAiBO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQvB,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjD,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,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,wBA6BI,cAAc,aAAa;AAAA;AAAA;AAAA,wCAGX,cAAc,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwC/D,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerR, colorBandingFix } from '../shader-utils.js';\n\nexport const metaballsMeta = {\n  maxColorCount: 8,\n  maxBallsCount: 20,\n} as const;\n\n/**\n * Up to 20 colored gooey balls moving around the center and merging into smooth organic shapes.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorBack (vec4): Background color in RGBA\n * - u_colors (vec4[]): Up to 8 base colors in RGBA\n * - u_colorsCount (float): Number of active colors\n * - u_count (float): Number of balls (1 to 20)\n * - u_size (float): Size of the balls (0 to 1)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_objectUV (vec2): Object box UV coordinates with global sizing (scale, rotation, offsets, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n */\n\n// language=GLSL\nexport const metaballsFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[${ metaballsMeta.maxColorCount }];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_sizeRange;\nuniform float u_count;\n\nin vec2 v_objectUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ textureRandomizerR }\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 shape_uv = v_objectUV;\n\n  shape_uv += .5;\n\n  const float firstFrameOffset = 2503.4;\n  float t = .2 * (u_time + firstFrameOffset);\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < ${ metaballsMeta.maxBallsCount }; i++) {\n    if (i >= int(ceil(u_count))) break;\n\n    float idxFract = float(i) / float(${ metaballsMeta.maxBallsCount });\n    float angle = TWO_PI * idxFract;\n\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface MetaballsUniforms extends ShaderSizingUniforms {\n  u_colorBack: [number, number, number, number];\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_count: number;\n  u_size: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {\n  colorBack?: string;\n  colors?: string[];\n  count?: number;\n  size?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,eAAmE;AACnE,SAAS,WAAW,oBAAoB,uBAAuB;AAExD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,eAAe;AACjB;AAiCO,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUlD,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA6BG,cAAc,aAAc;AAAA;AAAA;AAAA,wCAGZ,cAAc,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwChE,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,14 +1,36 @@
 import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
+ * A glowing, web-like structure of fluid lines and soft intersections.
+ * Great for creating atmospheric, organic-yet-futuristic visuals.
  *
- * Fractal-like structure made of several layers of sine arches
- * Original algorithm: https://x.com/zozuar/status/1625182758745128981/
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_colorFront (vec4): Graphics highlight color in RGBA
+ * - u_colorMid (vec4): Graphics main color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_brightness (float): Luminosity of the crossing points (0 to 1)
+ * - u_contrast (float): Sharpness of the bright-dark transition (0 to 1)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied
  *
- * Uniforms:
- * - u_colorBack, u_colorMid, u_colorFront (RGBA)
- * - u_brightness, u_contrast
+ * 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_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - 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.01 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)
  *
+ * Original algorithm: https://x.com/zozuar/status/1625182758745128981/
  */
 export declare const neuroNoiseFragmentShader: string;
 export interface NeuroNoiseUniforms extends ShaderSizingUniforms {

package/dist/shaders/neuro-noise.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { rotation2, colorBandingFix } from "../shader-utils.js";
 const neuroNoiseFragmentShader = `#version 300 es
 precision mediump float;
@@ -18,8 +18,7 @@ uniform vec4 u_colorBack;
 uniform float u_brightness;
 uniform float u_contrast;
 
-
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 out vec4 fragColor;
 

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/neuro-noise.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, colorBandingFix } from '../shader-utils.js';\n\n/**\n *\n * Fractal-like structure made of several layers of sine arches\n * Original algorithm: https://x.com/zozuar/status/1625182758745128981/\n *\n * Uniforms:\n * - u_colorBack, u_colorMid, u_colorFront (RGBA)\n * - u_brightness, u_contrast\n *\n */\n\n// language=GLSL\nexport const neuroNoiseFragmentShader: 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_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${rotation2}\n\nfloat neuroShape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .13;\n\n  float t = .5 * u_time;\n\n  float noise = neuroShape(shape_uv, t);\n\n  noise = (1. + u_brightness) * noise * noise;\n  noise = pow(noise, .7 + 6. * u_contrast);\n  noise = min(1.4, noise);\n\n  float blend = smoothstep(0.7, 1.4, noise);\n\n  vec4 frontC = u_colorFront;\n  frontC.rgb *= frontC.a;\n  vec4 midC = u_colorMid;\n  midC.rgb *= midC.a;\n  vec4 blendFront = mix(midC, frontC, blend);\n\n  float safeNoise = max(noise, 0.0);\n  vec3 color = blendFront.rgb * safeNoise;\n  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n  u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorMid?: string;\n  colorBack?: string;\n  brightness?: number;\n  contrast?: number;\n}\n"],
-  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,uBAAuB;AAcpC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc9C,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,IA8CP,eAAe;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, colorBandingFix } from '../shader-utils.js';\n\n/**\n * A glowing, web-like structure of fluid lines and soft intersections.\n * Great for creating atmospheric, organic-yet-futuristic visuals.\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_colorFront (vec4): Graphics highlight color in RGBA\n * - u_colorMid (vec4): Graphics main color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_brightness (float): Luminosity of the crossing points (0 to 1)\n * - u_contrast (float): Sharpness of the bright-dark transition (0 to 1)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n *\n * Original algorithm: https://x.com/zozuar/status/1625182758745128981/\n */\n\n// language=GLSL\nexport const neuroNoiseFragmentShader: 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_colorMid;\nuniform vec4 u_colorBack;\nuniform float u_brightness;\nuniform float u_contrast;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ rotation2 }\n\nfloat neuroShape(vec2 uv, float t) {\n  vec2 sine_acc = vec2(0.);\n  vec2 res = vec2(0.);\n  float scale = 8.;\n\n  for (int j = 0; j < 15; j++) {\n    uv = rotate(uv, 1.);\n    sine_acc = rotate(sine_acc, 1.);\n    vec2 layer = uv * scale + float(j) + sine_acc - t;\n    sine_acc += sin(layer);\n    res += (.5 + .5 * cos(layer)) / scale;\n    scale *= (1.2);\n  }\n  return res.x + res.y;\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= .13;\n\n  float t = .5 * u_time;\n\n  float noise = neuroShape(shape_uv, t);\n\n  noise = (1. + u_brightness) * noise * noise;\n  noise = pow(noise, .7 + 6. * u_contrast);\n  noise = min(1.4, noise);\n\n  float blend = smoothstep(0.7, 1.4, noise);\n\n  vec4 frontC = u_colorFront;\n  frontC.rgb *= frontC.a;\n  vec4 midC = u_colorMid;\n  midC.rgb *= midC.a;\n  vec4 blendFront = mix(midC, frontC, blend);\n\n  float safeNoise = max(noise, 0.0);\n  vec3 color = blendFront.rgb * safeNoise;\n  float opacity = clamp(blendFront.a * safeNoise, 0., 1.);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  ${ colorBandingFix }\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface NeuroNoiseUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorMid: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_brightness: number;\n  u_contrast: number;\n}\n\nexport interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {\n  colorFront?: string;\n  colorMid?: string;\n  colorBack?: string;\n  brightness?: number;\n  contrast?: number;\n}\n"],
+  "mappings": ";;;;;AACA,eAAmE;AACnE,SAAS,WAAW,uBAAuB;AAoCpC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB7C,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,IA8CR,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/shaders/paper-texture.d.ts

@@ -1,20 +1,45 @@
 import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
 /**
- * Mimicking paper texture with a combination of noises
+ * A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces.
+ * Can be used as an image filter or as a standalone texture.
  *
- * Uniforms:
- * - u_colorFront, u_colorBack (RGBA)
- * - u_contrast - mixing front and back colors
- * - u_roughness - pixel noise, related to canvas => not scalable
- * - u_fiber, u_fiberSize - curly shaped noise
- * - u_crumples, u_crumpleSize - cell-based pattern
- * - u_folds, u_foldCount - lines pattern, 15 max
- * - u_drops - metaballs-like pattern
- * - u_seed - applied to folds, crumples and dots
- * - u_fade - big-scale noise mask applied to everything but roughness
+ * Fragment shader uniforms:
+ * - u_resolution (vec2): Canvas resolution in pixels
+ * - u_pixelRatio (float): Device pixel ratio
+ * - u_image (sampler2D): Optional source image texture
+ * - u_imageAspectRatio (float): Aspect ratio of the source image
+ * - u_colorFront (vec4): Foreground color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_contrast (float): Blending behavior, sharper vs smoother color transitions (0 to 1)
+ * - u_roughness (float): Pixel noise, related to canvas and not scalable (0 to 1)
+ * - u_fiber (float): Curly-shaped noise intensity (0 to 1)
+ * - u_fiberSize (float): Curly-shaped noise scale (0 to 1)
+ * - u_crumples (float): Cell-based crumple pattern intensity (0 to 1)
+ * - u_crumpleSize (float): Cell-based crumple pattern scale (0 to 1)
+ * - u_folds (float): Depth of the folds (0 to 1)
+ * - u_foldCount (float): Number of folds (1 to 15)
+ * - u_fade (float): Big-scale noise mask applied to the pattern (0 to 1)
+ * - u_drops (float): Visibility of speckle pattern (0 to 1)
+ * - u_seed (float): Seed applied to folds, crumples and dots (0 to 1000)
+ * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
- * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ * Vertex shader outputs (used in fragment shader):
+ * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset 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_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - 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.01 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 paperTextureFragmentShader: string;

package/dist/shaders/paper-texture.js

@@ -3,7 +3,7 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import {} from "../shader-sizing.js";
 import { rotation2, declarePI, fiberNoise, textureRandomizerR } from "../shader-utils.js";
 const paperTextureFragmentShader = `#version 300 es
 precision mediump float;
@@ -31,7 +31,7 @@ uniform float u_fade;
 
 uniform sampler2D u_noiseTexture;
 
-${sizingVariablesDeclaration}
+in vec2 v_imageUV;
 
 out vec4 fragColor;
 
@@ -84,9 +84,9 @@ float roughness(vec2 p) {
     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);
+    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.;
@@ -122,22 +122,22 @@ float crumplesShape(vec2 uv) {
 
 
 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;
-      }
+  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));
+  }
+  return mix(pp.xy, vec2(0.), pow(pp.z, .25));
 }
 
 float drops(vec2 uv) {

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

@@ -1,7 +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;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js';\n\n/**\n * A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces.\n * Can be used as an image filter or as a standalone texture.\n *\n * Fragment shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_image (sampler2D): Optional source image texture\n * - u_imageAspectRatio (float): Aspect ratio of the source image\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_contrast (float): Blending behavior, sharper vs smoother color transitions (0 to 1)\n * - u_roughness (float): Pixel noise, related to canvas and not scalable (0 to 1)\n * - u_fiber (float): Curly-shaped noise intensity (0 to 1)\n * - u_fiberSize (float): Curly-shaped noise scale (0 to 1)\n * - u_crumples (float): Cell-based crumple pattern intensity (0 to 1)\n * - u_crumpleSize (float): Cell-based crumple pattern scale (0 to 1)\n * - u_folds (float): Depth of the folds (0 to 1)\n * - u_foldCount (float): Number of folds (1 to 15)\n * - u_fade (float): Big-scale noise mask applied to the pattern (0 to 1)\n * - u_drops (float): Visibility of speckle pattern (0 to 1)\n * - u_seed (float): Seed applied to folds, crumples and dots (0 to 1000)\n * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_imageUV (vec2): UV coordinates for sampling the source image, with fit, scale, rotation, and offset applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\n * - u_imageAspectRatio (float): Aspect ratio of the source image\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\nin vec2 v_imageUV;\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,eAAmE;AACnE,SAAS,WAAW,WAAW,YAAY,0BAA0B;AA8C9D,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0C/C,SAAU;AAAA,EACV,SAAU;AAAA,EACV,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2CnB,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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

@@ -1,15 +1,34 @@
 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
+ * Classic animated 3D Perlin noise with exposed controls.
+ * 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
+ * Fragment shader uniforms:
+ * - u_time (float): Animation time
+ * - u_colorFront (vec4): Foreground color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_proportion (float): Blend point between 2 colors, 0.5 = equal distribution (0 to 1)
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)
+ * - u_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)
+ * - u_persistence (float): Roughness, falloff between octaves (0.3 to 1)
+ * - u_lacunarity (float): Frequency step, defines how compressed the pattern is (1.5 to 10)
+ *
+ * Vertex shader outputs (used in fragment shader):
+ * - v_patternUV (vec2): UV coordinates for pattern 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_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas
+ * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas
+ * - 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.01 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)
  *
  */
 export declare const perlinNoiseFragmentShader: string;

package/dist/shaders/perlin-noise.js

@@ -3,8 +3,8 @@
  *       https://github.com/paper-design/shaders       *
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
-import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, colorBandingFix } from "../shader-utils.js";
+import {} from "../shader-sizing.js";
+import { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from "../shader-utils.js";
 const perlinNoiseFragmentShader = `#version 300 es
 precision mediump float;
 
@@ -18,23 +18,13 @@ uniform float u_octaveCount;
 uniform float u_persistence;
 uniform float u_lacunarity;
 
-${sizingVariablesDeclaration}
+in vec2 v_patternUV;
 
 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);
-}
+${proceduralHash11}
+${proceduralHash21}
 
 float hash31(vec3 p) {
   p = fract(p * 0.3183099) + 0.1;
@@ -42,17 +32,6 @@ float hash31(vec3 p) {
   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;
 
@@ -86,7 +65,7 @@ float v100, float v101, float v110, float v111, vec3 t) {
 }
 
 vec3 fade(vec3 t) {
-    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
 }
 
 float perlinNoise(vec3 position, float seed) {
@@ -154,23 +133,22 @@ float get_max_amp(float persistence, float octaveCount) {
 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 octCount = floor(u_octaveCount);
+  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);
 
-  float max_amp = get_max_amp(persistence, octCount);
+  float max_amp = get_max_amp(u_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
+  .5 - .5 * sharpness - smooth_w,
+  .5 + .5 * sharpness + smooth_w,
+  noise_normalized
   );
 
   vec3 fgColor = u_colorFront.rgb * u_colorFront.a;

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\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;",
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, colorBandingFix, proceduralHash11, proceduralHash21 } from '../shader-utils.js';\n\n/**\n * Classic animated 3D Perlin noise with exposed controls.\n * Original algorithm: https://www.shadertoy.com/view/NlSGDz\n *\n * Fragment shader uniforms:\n * - u_time (float): Animation time\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_proportion (float): Blend point between 2 colors, 0.5 = equal distribution (0 to 1)\n * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (0 to 1)\n * - u_octaveCount (float): Perlin noise octaves number, more octaves for more detailed patterns (1 to 8)\n * - u_persistence (float): Roughness, falloff between octaves (0.3 to 1)\n * - u_lacunarity (float): Frequency step, defines how compressed the pattern is (1.5 to 10)\n *\n * Vertex shader outputs (used in fragment shader):\n * - v_patternUV (vec2): UV coordinates for pattern with global sizing (rotation, scale, offset, etc) applied\n *\n * Vertex shader uniforms:\n * - u_resolution (vec2): Canvas resolution in pixels\n * - u_pixelRatio (float): Device pixel ratio\n * - u_originX (float): Reference point for positioning world width in the canvas (0 to 1)\n * - u_originY (float): Reference point for positioning world height in the canvas (0 to 1)\n * - u_worldWidth (float): Virtual width of the graphic before it's scaled to fit the canvas\n * - u_worldHeight (float): Virtual height of the graphic before it's scaled to fit the canvas\n * - u_fit (float): How to fit the rendered shader into the canvas dimensions (0 = none, 1 = contain, 2 = cover)\n * - u_scale (float): Overall zoom level of the graphics (0.01 to 4)\n * - u_rotation (float): Overall rotation angle of the graphics in degrees (0 to 360)\n * - u_offsetX (float): Horizontal offset of the graphics center (-1 to 1)\n * - u_offsetY (float): Vertical offset of the graphics center (-1 to 1)\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\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n${ proceduralHash11 }\n${ proceduralHash21 }\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 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 = floor(u_octaveCount);\n  float noise = p_noise(p, int(octCount), u_persistence, u_lacunarity);\n\n  float max_amp = get_max_amp(u_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,eAAmE;AACnE,SAAS,WAAW,iBAAiB,kBAAkB,wBAAwB;AAmCxE,MAAM,4BAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB9C,SAAU;AAAA,EACV,gBAAiB;AAAA,EACjB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0If,eAAgB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }