@paper-design/shaders 0.0.80 → 0.0.82

package/dist/shaders/neuro-noise.js

@@ -9,8 +9,6 @@ const neuroNoiseFragmentShader = `#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_colorMid;

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 { 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;",
+  "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_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 transition between colorMid and colorBack (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;\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;AAkCpC,MAAM,2BAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAe7C,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,27 +1,39 @@
 import type { ShaderMotionParams } from '../shader-mount.js';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const paperTextureMeta: {
+    readonly maxCrumpleCount: 15;
+};
 /**
- * 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.
+ * Static paper-like texture built from a combination of grain, noise and multiple fold patterns.
+ * Works as an image filter or as a standalone texture.
  *
  * Fragment shader uniforms:
- * - u_resolution (vec2): Canvas resolution in pixels
- * - u_pixelRatio (float): Device pixel ratio
  * - u_image (sampler2D): Optional source image texture
+ * - u_isImage (bool): Whether a source image was provided
  * - 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_colorBack (vec4): Color behind the paper sheet in RGBA
+ * - u_colorPaper (vec4): Color of the paper sheet in RGBA
+ * - u_colorShadow (vec4): Color of the patterns over the paper sheet in RGBA
+ * - u_blending (float): Amount of image-to-paper blending, needs image (0 to 1)
+ * - u_distortion (float): How much the image bends with the paper surface, needs image (-1 to 1)
+ * - u_clip (bool): Cuts the paper sheet to the image frame, needs image
+ * - u_angle (float): Direction the surface is lit from in degrees, also the roughness rows direction, needs crumples, wrinkles, folds, roughnessRows or drops > 0 (0 to 360)
+ * - u_seed (float): Seed applied to every pattern (0 to 1000)
+ * - u_roughness (float): Fine grain covering the surface evenly (0 to 1)
+ * - u_roughnessSize (float): Scale of the roughness grain, needs roughness > 0 (0 to 1)
+ * - u_roughnessRows (float): Lines the roughness up into stripes, 0 = even scatter, 1 = laid-paper rows, needs roughness > 0 (0 to 1)
+ * - u_fiber (float): Curly thread-like noise covering the surface evenly (0 to 1)
+ * - u_fiberSize (float): Scale of the fiber noise, needs fiber > 0 (0 to 1)
+ * - u_folds (float): Straight vertical and horizontal fold lines producing ridges and valleys (0 to 1)
+ * - u_foldSizeX (float): Size of the vertical folds, needs folds > 0 (0 to 1)
+ * - u_foldSizeY (float): Size of the horizontal folds, needs folds > 0 (0 to 1)
+ * - u_foldOffsetX (float): Shifts the vertical folds across the surface, needs folds > 0 (0 to 1)
+ * - u_foldOffsetY (float): Shifts the horizontal folds across the surface, needs folds > 0 (0 to 1)
+ * - u_wrinkles (float): Crumple-like facets repeating across the surface (0 to 1)
+ * - u_wrinkleSize (float): Scale of the wrinkle facets, needs wrinkles > 0 (0 to 1)
+ * - u_crumples (float): A set of irregular folding lines (0 to 1)
+ * - u_crumpleCount (float): Number of facets in the crumple field, needs crumples > 0 (2 to 15)
+ * - u_drops (float): Visibility of the speckle pattern, darkens the image instead of coloring it (0 to 1)
  * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture
  *
  * Vertex shader outputs (used in fragment shader):
@@ -32,8 +44,6 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * - 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)
@@ -45,34 +55,55 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
 export declare const paperTextureFragmentShader: string;
 export interface PaperTextureUniforms extends ShaderSizingUniforms {
     u_image: HTMLImageElement | string | undefined;
-    u_noiseTexture?: HTMLImageElement;
-    u_colorFront: [number, number, number, number];
+    u_isImage: boolean;
     u_colorBack: [number, number, number, number];
-    u_contrast: number;
+    u_colorPaper: [number, number, number, number];
+    u_colorShadow: [number, number, number, number];
+    u_blending: number;
+    u_distortion: number;
+    u_clip: boolean;
+    u_angle: number;
+    u_seed: number;
     u_roughness: number;
+    u_roughnessSize: number;
+    u_roughnessRows: number;
     u_fiber: number;
     u_fiberSize: number;
-    u_crumples: number;
-    u_foldCount: number;
     u_folds: number;
-    u_fade: number;
-    u_crumpleSize: number;
+    u_foldSizeX: number;
+    u_foldSizeY: number;
+    u_foldOffsetX: number;
+    u_foldOffsetY: number;
+    u_wrinkles: number;
+    u_wrinkleSize: number;
+    u_crumples: number;
+    u_crumpleCount: number;
     u_drops: number;
-    u_seed: number;
+    u_noiseTexture?: HTMLImageElement;
 }
 export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {
     image?: HTMLImageElement | string;
-    colorFront?: string;
     colorBack?: string;
-    contrast?: number;
+    colorPaper?: string;
+    colorShadow?: string;
+    blending?: number;
+    distortion?: number;
+    clip?: boolean;
+    angle?: number;
+    seed?: number;
     roughness?: number;
+    roughnessSize?: number;
+    roughnessRows?: number;
     fiber?: number;
     fiberSize?: number;
-    crumples?: number;
-    foldCount?: number;
     folds?: number;
-    fade?: number;
-    crumpleSize?: number;
+    foldSizeX?: number;
+    foldSizeY?: number;
+    foldOffsetX?: number;
+    foldOffsetY?: number;
+    wrinkles?: number;
+    wrinkleSize?: number;
+    crumples?: number;
+    crumpleCount?: number;
     drops?: number;
-    seed?: number;
 }