@paper-design/shaders 0.0.45 → 0.0.47

package/dist/shaders/voronoi.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/voronoi.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 } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Double-pass Voronoi pattern cell edges\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms:\n * - u_colorBack, u_colorGlow (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_distortion (0..0.5): max distance the cell center moves away from regular grid\n * - u_gap: width of the stroke between the cells\n * - u_glow: radial glow around each cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: gaps can't be removed completely due to artifacts of Voronoi cells\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n\nvec2 hash(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, uv).gb;\n}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 raw_hash = hash(ip + g);\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash.x;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = hash(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.25;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float glows = length(voronoiRes.yz * u_glow);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,iBAAiB;AAEnB,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAqBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/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,wBAgEa,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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 { vec4 } from '../types.js';\nimport type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, textureRandomizerGB } from '../shader-utils.js';\n\nexport const voronoiMeta = {\n  maxColorCount: 5,\n} as const;\n\n/**\n * Double-pass Voronoi pattern cell edges\n * Original algorithm: https://www.shadertoy.com/view/ldl3W8\n *\n * Uniforms:\n * - u_colorBack, u_colorGlow (RGBA)\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\n * - u_stepsPerColor: discrete color steps between u_colors\n * - u_distortion (0..0.5): max distance the cell center moves away from regular grid\n * - u_gap: width of the stroke between the cells\n * - u_glow: radial glow around each cell center\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n * Note: gaps can't be removed completely due to artifacts of Voronoi cells\n *\n */\n\n// language=GLSL\nexport const voronoiFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${voronoiMeta.maxColorCount}];\nuniform float u_colorsCount;\n\nuniform float u_stepsPerColor;\nuniform vec4 u_colorGlow;\nuniform vec4 u_colorGap;\nuniform float u_distortion;\nuniform float u_gap;\nuniform float u_glow;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${textureRandomizerGB}\n\nvec4 voronoi(vec2 x, float t) {\n  vec2 ip = floor(x);\n  vec2 fp = fract(x);\n\n  vec2 mg, mr;\n  float md = 8.;\n  float rand = 0.;\n\n  for (int j = -1; j <= 1; j++) {\n    for (int i = -1; i <= 1; i++) {\n      vec2 g = vec2(float(i), float(j));\n      vec2 o = randomGB(ip + g);\n      float raw_hash = o.x;\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      float d = dot(r, r);\n\n      if (d < md) {\n        md = d;\n        mr = r;\n        mg = g;\n        rand = raw_hash;\n      }\n    }\n  }\n\n  md = 8.;\n  for (int j = -2; j <= 2; j++) {\n    for (int i = -2; i <= 2; i++) {\n      vec2 g = mg + vec2(float(i), float(j));\n      vec2 o = randomGB(ip + g);\n      o = .5 + u_distortion * sin(t + TWO_PI * o);\n      vec2 r = g + o - fp;\n      if (dot(mr - r, mr - r) > .00001) {\n        md = min(md, dot(.5 * (mr + r), normalize(r - mr)));\n      }\n    }\n  }\n\n  return vec4(md, mr, rand);\n}\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 1.25;\n\n  float t = u_time;\n\n  vec4 voronoiRes = voronoi(shape_uv, t);\n\n  float shape = clamp(voronoiRes.w, 0., 1.);\n  float mixer = shape * (u_colorsCount - 1.);\n  mixer = (shape - .5 / u_colorsCount) * u_colorsCount;\n  float steps = max(1., u_stepsPerColor);\n\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  for (int i = 1; i < ${voronoiMeta.maxColorCount}; i++) {\n      if (i >= int(u_colorsCount)) break;\n      float localT = clamp(mixer - float(i - 1), 0.0, 1.0);\n      localT = round(localT * steps) / steps;\n      vec4 c = u_colors[i];\n      c.rgb *= c.a;\n      gradient = mix(gradient, c, localT);\n  }\n\n  if ((mixer < 0.) || (mixer > (u_colorsCount - 1.))) {\n    float localT = mixer + 1.;\n    if (mixer > (u_colorsCount - 1.)) {\n      localT = mixer - (u_colorsCount - 1.);\n    }\n    localT = round(localT * steps) / steps;\n    vec4 cFst = u_colors[0];\n    cFst.rgb *= cFst.a;\n    vec4 cLast = u_colors[int(u_colorsCount - 1.)];\n    cLast.rgb *= cLast.a;\n    gradient = mix(cLast, cFst, localT);\n  }\n\n  vec3 cellColor = gradient.rgb;\n  float cellOpacity = gradient.a;\n\n  float glows = length(voronoiRes.yz * u_glow);\n  glows = pow(glows, 1.5);\n\n  vec3 color = mix(cellColor, u_colorGlow.rgb * u_colorGlow.a, u_colorGlow.a * glows);\n  float opacity = cellOpacity + u_colorGlow.a * glows;\n\n  float edge = voronoiRes.x;\n  float smoothEdge = .02 / (2. * u_scale) * (1. + .5 * u_gap);\n  edge = smoothstep(u_gap - smoothEdge, u_gap + smoothEdge, edge);\n\n  color = mix(u_colorGap.rgb * u_colorGap.a, color, edge);\n  opacity = mix(u_colorGap.a, opacity, edge);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface VoronoiUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_stepsPerColor: number;\n  u_colorGap: [number, number, number, number];\n  u_colorGlow: [number, number, number, number];\n  u_distortion: number;\n  u_gap: number;\n  u_glow: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  stepsPerColor?: number;\n  colorGap?: string;\n  colorGlow?: string;\n  distortion?: number;\n  gap?: number;\n  glow?: number;\n}\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,2BAA2B;AAExC,MAAM,cAAc;AAAA,EACzB,eAAe;AACjB;AAqBO,MAAM,wBAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASrB,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA2DG,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/warp.d.ts

@@ -19,6 +19,8 @@ export declare const warpMeta: {
  * - u_distortion: value noise distortion over the UV coordinate
  * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)
  *
+ * - u_noiseTexture (sampler2D): pre-computed randomizer source
+ *
  */
 export declare const warpFragmentShader: string;
 export interface WarpUniforms extends ShaderSizingUniforms {
@@ -31,6 +33,7 @@ export interface WarpUniforms extends ShaderSizingUniforms {
     u_distortion: number;
     u_swirl: number;
     u_swirlIterations: number;
+    u_noiseTexture?: HTMLImageElement;
 }
 export interface WarpParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];

package/dist/shaders/warp.js

@@ -4,7 +4,7 @@
  * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 import { sizingVariablesDeclaration } from "../shader-sizing.js";
-import { declarePI, declareRandom, declareValueNoise, declareRotate, colorBandingFix } from "../shader-utils.js";
+import { declarePI, rotation2, colorBandingFix } from "../shader-utils.js";
 const warpMeta = {
   maxColorCount: 10
 };
@@ -14,6 +14,8 @@ precision mediump float;
 uniform float u_time;
 uniform float u_scale;
 
+uniform sampler2D u_noiseTexture;
+
 uniform vec4 u_colors[${warpMeta.maxColorCount}];
 uniform float u_colorsCount;
 uniform float u_proportion;
@@ -29,9 +31,23 @@ ${sizingVariablesDeclaration}
 out vec4 fragColor;
 
 ${declarePI}
-${declareRandom}
-${declareRotate}
-${declareValueNoise}
+${rotation2}
+float randomG(vec2 p) {
+  vec2 uv = floor(p) / 100. + .5;
+  return texture(u_noiseTexture, fract(uv)).g;
+}
+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);
+}
 
 
 void main() {

package/dist/shaders/warp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shaders/warp.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, declareRandom, declareValueNoise, declareRotate, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\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_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${declareRandom}\n${declareRotate}\n${declareValueNoise}\n\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  float t = 0.0625 * u_time;\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n//    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
-  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,eAAe,mBAAmB,eAAe,uBAAuB;AAErF,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAoBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBA6CK,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA8BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
+  "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, rotation2, colorBandingFix } from '../shader-utils.js';\n\nexport const warpMeta = {\n  maxColorCount: 10,\n} as const;\n\n/**\n * Iterative layered + swirl-based distortion applied over different layouts (shapes)\n *\n * Uniforms:\n * - u_colors (vec4[]), u_colorsCount (float used as integer)\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_shape (float used as integer):\n * ---- 0: checks\n * ---- 1: stripes\n * ---- 2: 2x halves of canvas (mapping the canvas height regardless of resolution)\n * - u_shapeScale: the scale of layouts (underlying shapes)\n * - u_distortion: value noise distortion over the UV coordinate\n * - u_swirl, u_swirlIterations: swirly distortion (layering curves effect)\n *\n * - u_noiseTexture (sampler2D): pre-computed randomizer source\n *\n */\n\n// language=GLSL\nexport const warpFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform float u_scale;\n\nuniform sampler2D u_noiseTexture;\n\nuniform vec4 u_colors[${warpMeta.maxColorCount}];\nuniform float u_colorsCount;\nuniform float u_proportion;\nuniform float u_softness;\nuniform float u_shape;\nuniform float u_shapeScale;\nuniform float u_distortion;\nuniform float u_swirl;\nuniform float u_swirlIterations;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\nfloat randomG(vec2 p) {\n  vec2 uv = floor(p) / 100. + .5;\n  return texture(u_noiseTexture, fract(uv)).g;\n}\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomG(i);\n  float b = randomG(i + vec2(1.0, 0.0));\n  float c = randomG(i + vec2(0.0, 1.0));\n  float d = randomG(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}\n\n\nvoid main() {\n  vec2 uv = v_patternUV;\n  uv *= .5;\n\n  float t = 0.0625 * u_time;\n\n  float n1 = valueNoise(uv * 1. + t);\n  float n2 = valueNoise(uv * 2. - t);\n  float angle = n1 * TWO_PI;\n  uv.x += 4. * u_distortion * n2 * cos(angle);\n  uv.y += 4. * u_distortion * n2 * sin(angle);\n\n  float swirl = u_swirl;\n  for (int i = 1; i <= 20; i++) {\n    if (i >= int(u_swirlIterations)) break;\n    float iFloat = float(i);\n//    swirl *= (1. - smoothstep(.0, .25, length(fwidth(uv))));\n    uv.x += swirl / iFloat * cos(t + iFloat * 1.5 * uv.y);\n    uv.y += swirl / iFloat * cos(t + iFloat * 1. * uv.x);\n  }\n\n  float proportion = clamp(u_proportion, 0., 1.);\n\n  float shape = 0.;\n  if (u_shape < .5) {\n    vec2 checksShape_uv = uv * (.5 + 3.5 * u_shapeScale);\n    shape = .5 + .5 * sin(checksShape_uv.x) * cos(checksShape_uv.y);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else if (u_shape < 1.5) {\n    vec2 stripesShape_uv = uv * (2. * u_shapeScale);\n    float f = fract(stripesShape_uv.y);\n    shape = smoothstep(.0, .55, f) * smoothstep(1., .45, f);\n    shape += .48 * sign(proportion - .5) * pow(abs(proportion - .5), .5);\n  } else {\n    float shapeScaling = 5. * (1. - u_shapeScale);\n    shape = smoothstep(.45 - shapeScaling, .55 + shapeScaling, 1. - uv.y + .3 * (proportion - .5));\n  }\n\n  float mixer = shape * (u_colorsCount - 1.);\n  vec4 gradient = u_colors[0];\n  gradient.rgb *= gradient.a;\n  float aa = fwidth(shape);\n  for (int i = 1; i < ${warpMeta.maxColorCount}; i++) {\n    if (i >= int(u_colorsCount)) break;\n    float m = clamp(mixer - float(i - 1), 0.0, 1.0);\n\n    float localMixerStart = floor(m);\n    float softness = .5 * u_softness + fwidth(m);\n    float smoothed = smoothstep(max(0., .5 - softness - aa), min(1., .5 + softness + aa), m - localMixerStart);\n    float stepped = localMixerStart + smoothed;\n\n    m = mix(stepped, m, u_softness);\n\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    gradient = mix(gradient, c, m);\n  }\n\n  vec3 color = gradient.rgb;\n  float opacity = gradient.a;\n\n  ${colorBandingFix}\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WarpUniforms extends ShaderSizingUniforms {\n  u_colors: vec4[];\n  u_colorsCount: number;\n  u_proportion: number;\n  u_softness: number;\n  u_shape: (typeof WarpPatterns)[WarpPattern];\n  u_shapeScale: number;\n  u_distortion: number;\n  u_swirl: number;\n  u_swirlIterations: number;\n  u_noiseTexture?: HTMLImageElement;\n}\n\nexport interface WarpParams extends ShaderSizingParams, ShaderMotionParams {\n  colors?: string[];\n  rotation?: number;\n  proportion?: number;\n  softness?: number;\n  shape?: WarpPattern;\n  shapeScale?: number;\n  distortion?: number;\n  swirl?: number;\n  swirlIterations?: number;\n}\n\nexport const WarpPatterns = {\n  checks: 0,\n  stripes: 1,\n  edge: 2,\n} as const;\n\nexport type WarpPattern = keyof typeof WarpPatterns;\n"],
+  "mappings": ";;;;;AAEA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,uBAAuB;AAE/C,MAAM,WAAW;AAAA,EACtB,eAAe;AACjB;AAsBO,MAAM,qBAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQlB,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5C,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,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,wBA6Da,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmB1C,eAAe;AAAA;AAAA;AAAA;AAAA;AA+BZ,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;",
   "names": []
 }

package/dist/shaders/water.d.ts

@@ -0,0 +1,39 @@
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Mimicking water surface distortion with a combination of noises;
+ * Can be applied over the texture or just be used as an animated pattern
+ *
+ * Uniforms:
+ * - u_colorBack, u_colorHighlight (RGBA)
+ * - u_effectScale: pattern scale relative to the image
+ * - u_caustic: power of caustic distortion
+ * - u_layering: the power of 2nd layer of caustic distortion
+ * - u_edges: caustic distortion power on the image edges
+ * - u_waves: additional distortion based in Simplex noise, independent from caustic
+ * - u_highlights: a coloring added over the image/background, following the caustic shape
+ *
+ */
+export declare const waterFragmentShader: string;
+export interface WaterUniforms extends ShaderSizingUniforms {
+    u_image: HTMLImageElement | string | undefined;
+    u_colorBack: [number, number, number, number];
+    u_colorHighlight: [number, number, number, number];
+    u_highlights: number;
+    u_layering: number;
+    u_edges: number;
+    u_caustic: number;
+    u_waves: number;
+    u_effectScale: number;
+}
+export interface WaterParams extends ShaderSizingParams, ShaderMotionParams {
+    image?: HTMLImageElement | string | undefined;
+    colorBack?: string;
+    colorHighlight?: string;
+    highlights?: number;
+    layering?: number;
+    edges?: number;
+    caustic?: number;
+    waves?: number;
+    effectScale?: number;
+}

package/dist/shaders/water.js

@@ -0,0 +1,119 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { sizingVariablesDeclaration } from "../shader-sizing.js";
+import { declarePI, rotation2, simplexNoise } from "../shader-utils.js";
+const waterFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float u_time;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_effectScale;
+uniform float u_highlights;
+uniform float u_layering;
+uniform float u_edges;
+uniform float u_caustic;
+uniform float u_waves;
+
+${sizingVariablesDeclaration}
+
+out vec4 fragColor;
+
+${declarePI}
+${rotation2}
+${simplexNoise}
+
+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;
+}
+
+mat2 rotate2D(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+float getCausticNoise(vec2 uv, float t, float scale) {
+  vec2 n = vec2(.1);
+  vec2 N = vec2(.1);
+  mat2 m = rotate2D(.5);
+  for (int j = 0; j < 6; j++) {
+    uv *= m;
+    n *= m;
+    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;
+    n += sin(q);
+    N += cos(q) / scale;
+    scale *= 1.1;
+  }
+  return (N.x + N.y + 1.);
+}
+
+void main() {
+  vec2 imageUV = v_imageUV;
+  vec2 patternUV = v_imageUV - .5;
+  patternUV = 10. * u_effectScale * (patternUV * vec2(u_imageAspectRatio, 1.));
+  
+  float t = u_time;
+  
+  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));
+
+  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);
+
+  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);
+  causticNoise = pow(causticNoise, 2.);
+  
+  float edgesDistortion = smoothstep(0., .1, imageUV.x);
+  edgesDistortion *= smoothstep(0., .1, imageUV.y);
+  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));
+  edgesDistortion *= smoothstep(1., .9, imageUV.y);
+  edgesDistortion = mix(edgesDistortion, 1., u_edges);
+  
+  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;
+  
+  float wavesDistortion = .1 * u_waves * wavesNoise;
+  
+  imageUV += vec2(wavesDistortion, -wavesDistortion);
+  imageUV += (u_caustic * causticNoiseDistortion);
+
+  float frame = getUvFrame(imageUV);
+
+  vec4 image = texture(u_image, imageUV);
+  vec4 backColor = u_colorBack;
+  backColor.rgb *= backColor.a;
+  
+  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);
+  float opacity = backColor.a + image.a * frame;
+
+  causticNoise = max(-.2, causticNoise);
+  
+  float hightlight = .025 * u_highlights * causticNoise;
+  hightlight *= u_colorHighlight.a;
+  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);
+  opacity += hightlight;
+  
+  color += hightlight * (.5 + .5 * wavesNoise);
+  opacity += hightlight * (.5 + .5 * wavesNoise);
+  
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  waterFragmentShader
+};
+//# sourceMappingURL=water.js.map

package/dist/shaders/water.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/water.ts"],
+  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount.js';\nimport { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI, rotation2, simplexNoise } from '../shader-utils.js';\n\n/**\n * Mimicking water surface distortion with a combination of noises;\n * Can be applied over the texture or just be used as an animated pattern\n *\n * Uniforms:\n * - u_colorBack, u_colorHighlight (RGBA)\n * - u_effectScale: pattern scale relative to the image\n * - u_caustic: power of caustic distortion\n * - u_layering: the power of 2nd layer of caustic distortion\n * - u_edges: caustic distortion power on the image edges\n * - u_waves: additional distortion based in Simplex noise, independent from caustic\n * - u_highlights: a coloring added over the image/background, following the caustic shape\n *\n */\n\n// language=GLSL\nexport const waterFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_effectScale;\nuniform float u_highlights;\nuniform float u_layering;\nuniform float u_edges;\nuniform float u_caustic;\nuniform float u_waves;\n\n${sizingVariablesDeclaration}\n\nout vec4 fragColor;\n\n${declarePI}\n${rotation2}\n${simplexNoise}\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\nmat2 rotate2D(float r) {\n  return mat2(cos(r), sin(r), -sin(r), cos(r));\n}\n\nfloat getCausticNoise(vec2 uv, float t, float scale) {\n  vec2 n = vec2(.1);\n  vec2 N = vec2(.1);\n  mat2 m = rotate2D(.5);\n  for (int j = 0; j < 6; j++) {\n    uv *= m;\n    n *= m;\n    vec2 q = uv * scale + float(j) + n + (.5 + .5 * float(j)) * (mod(float(j), 2.) - 1.) * t;\n    n += sin(q);\n    N += cos(q) / scale;\n    scale *= 1.1;\n  }\n  return (N.x + N.y + 1.);\n}\n\nvoid main() {\n  vec2 imageUV = v_imageUV;\n  vec2 patternUV = v_imageUV - .5;\n  patternUV = 10. * u_effectScale * (patternUV * vec2(u_imageAspectRatio, 1.));\n  \n  float t = u_time;\n  \n  float wavesNoise = snoise((.3 + .1 * sin(t)) * .1 * patternUV + vec2(0., .4 * t));\n\n  float causticNoise = getCausticNoise(patternUV + u_waves * vec2(1., -1.) * wavesNoise, 2. * t, 1.5);\n\n  causticNoise += u_layering * getCausticNoise(patternUV + 2. * u_waves * vec2(1., -1.) * wavesNoise, 1.5 * t, 2.);\n  causticNoise = pow(causticNoise, 2.);\n  \n  float edgesDistortion = smoothstep(0., .1, imageUV.x);\n  edgesDistortion *= smoothstep(0., .1, imageUV.y);\n  edgesDistortion *= (smoothstep(1., 1.1, imageUV.x) + smoothstep(.95, .8, imageUV.x));\n  edgesDistortion *= smoothstep(1., .9, imageUV.y);\n  edgesDistortion = mix(edgesDistortion, 1., u_edges);\n  \n  float causticNoiseDistortion = .02 * causticNoise * edgesDistortion;\n  \n  float wavesDistortion = .1 * u_waves * wavesNoise;\n  \n  imageUV += vec2(wavesDistortion, -wavesDistortion);\n  imageUV += (u_caustic * causticNoiseDistortion);\n\n  float frame = getUvFrame(imageUV);\n\n  vec4 image = texture(u_image, imageUV);\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  \n  vec3 color = mix(backColor.rgb, image.rgb, image.a * frame);\n  float opacity = backColor.a + image.a * frame;\n\n  causticNoise = max(-.2, causticNoise);\n  \n  float hightlight = .025 * u_highlights * causticNoise;\n  hightlight *= u_colorHighlight.a;\n  color = mix(color, u_colorHighlight.rgb, .05 * u_highlights * causticNoise);\n  opacity += hightlight;\n  \n  color += hightlight * (.5 + .5 * wavesNoise);\n  opacity += hightlight * (.5 + .5 * wavesNoise);\n  \n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WaterUniforms extends ShaderSizingUniforms {\n  u_image: HTMLImageElement | string | undefined;\n  u_colorBack: [number, number, number, number];\n  u_colorHighlight: [number, number, number, number];\n  u_highlights: number;\n  u_layering: number;\n  u_edges: number;\n  u_caustic: number;\n  u_waves: number;\n  u_effectScale: number;\n}\n\nexport interface WaterParams extends ShaderSizingParams, ShaderMotionParams {\n  image?: HTMLImageElement | string | undefined;\n  colorBack?: string;\n  colorHighlight?: string;\n  highlights?: number;\n  layering?: number;\n  edges?: number;\n  caustic?: number;\n  waves?: number;\n  effectScale?: number;\n}\n"],
+  "mappings": ";;;;;AACA,SAAS,kCAAsF;AAC/F,SAAS,WAAW,WAAW,oBAAoB;AAkB5C,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzC,0BAA0B;AAAA;AAAA;AAAA;AAAA,EAI1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/vertex-shader.d.ts

@@ -1,2 +1,2 @@
 /** Vertex shader for the shader mount */
-export declare const vertexShaderSource = "#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize, maxBoxSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_objectHelperBox = uv;\n    v_objectHelperBox *= objectWorldScale;\n    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_responsiveHelperBox = uv;\n    v_responsiveHelperBox *= responsiveBoxScale;\n    v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize, maxBoxSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_patternHelperBox = uv;\n    v_patternHelperBox *= patternBoxScale;\n    v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  v_patternUV *= .01;\n\n  // ===================================================\n\n}";
+export declare const vertexShaderSource = "#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_imageAspectRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\nout vec2 v_imageUV;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_objectHelperBox = uv;\n  v_objectHelperBox *= objectWorldScale;\n  v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_responsiveHelperBox = uv;\n  v_responsiveHelperBox *= responsiveBoxScale;\n  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_patternHelperBox = uv;\n  v_patternHelperBox *= patternBoxScale;\n  v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  v_patternUV *= .01;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for images\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) { // contain\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else if (u_fit == 2.) { // cover\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  #ifdef ADD_HELPERS\n  vec2 imageHelperBox = uv;\n  imageHelperBox *= imageBoxScale;\n  imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n  #endif\n\n  v_imageUV = uv;\n  v_imageUV *= imageBoxScale;\n  v_imageUV += boxOrigin * (imageBoxScale - 1.);\n  v_imageUV += graphicOffset;\n  v_imageUV /= u_scale;\n  v_imageUV.x *= u_imageAspectRatio;\n  v_imageUV = graphicRotation * v_imageUV;\n  v_imageUV.x /= u_imageAspectRatio;\n\n  v_imageUV += .5;\n  v_imageUV.y = 1. - v_imageUV.y;\n\n  // ===================================================\n\n}";

package/dist/vertex-shader.js

@@ -10,6 +10,7 @@ layout(location = 0) in vec4 a_position;
 
 uniform vec2 u_resolution;
 uniform float u_pixelRatio;
+uniform float u_imageAspectRatio;
 
 uniform float u_originX;
 uniform float u_originY;
@@ -37,17 +38,19 @@ out vec2 v_patternUV;
 out vec2 v_patternBoxSize;
 out vec2 v_patternHelperBox;
 
+out vec2 v_imageUV;
+
 // #define ADD_HELPERS
 
-vec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {
+vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {
   vec2 box = vec2(0.);
   // fit = none
   box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);
   float noFitBoxWidth = box.x;
   if (u_fit == 1.) { // fit = contain
-    box.x = boxRatio * min(maxBoxSize[0] / boxRatio, maxBoxSize[1]);
+    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);
   } else if (u_fit == 2.) { // fit = cover
-    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);
+    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
   }
   box.y = box.x / boxRatio;
   return vec3(box, noFitBoxWidth);
@@ -60,7 +63,6 @@ void main() {
   vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
   vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
   givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
-  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));
   float r = u_rotation * 3.14159265358979323846 / 180.;
   mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
   vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
@@ -72,17 +74,17 @@ void main() {
 
   float fixedRatio = 1.;
   vec2 fixedRatioBoxGivenSize = vec2(
-    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
-    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
   );
 
-  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize, maxBoxSize).xy;
+  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;
   vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
 
   #ifdef ADD_HELPERS
-    v_objectHelperBox = uv;
-    v_objectHelperBox *= objectWorldScale;
-    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);
+  v_objectHelperBox = uv;
+  v_objectHelperBox *= objectWorldScale;
+  v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);
   #endif
 
   v_objectUV = uv;
@@ -101,17 +103,17 @@ void main() {
   // Full-screen mode available with u_worldWidth = u_worldHeight = 0
 
   v_responsiveBoxGivenSize = vec2(
-    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
-    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
   );
   float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
-  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;
+  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;
   vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;
 
   #ifdef ADD_HELPERS
-    v_responsiveHelperBox = uv;
-    v_responsiveHelperBox *= responsiveBoxScale;
-    v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);
+  v_responsiveHelperBox = uv;
+  v_responsiveHelperBox *= responsiveBoxScale;
+  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);
   #endif
 
   v_responsiveUV = uv;
@@ -132,20 +134,20 @@ void main() {
 
   float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
   vec2 patternBoxGivenSize = vec2(
-    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
-    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
   );
   patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
 
-  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize, maxBoxSize);
+  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
   v_patternBoxSize = boxSizeData.xy;
   float patternBoxNoFitBoxWidth = boxSizeData.z;
   vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
 
   #ifdef ADD_HELPERS
-    v_patternHelperBox = uv;
-    v_patternHelperBox *= patternBoxScale;
-    v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);
+  v_patternHelperBox = uv;
+  v_patternHelperBox *= patternBoxScale;
+  v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);
   #endif
 
   v_patternUV = uv;
@@ -167,6 +169,41 @@ void main() {
 
   // ===================================================
 
+
+  // ===================================================
+  // Sizing api for images
+
+  vec2 imageBoxSize;
+  if (u_fit == 1.) { // contain
+    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else if (u_fit == 2.) { // cover
+    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+  } else {
+    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
+  }
+  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+  #ifdef ADD_HELPERS
+  vec2 imageHelperBox = uv;
+  imageHelperBox *= imageBoxScale;
+  imageHelperBox += boxOrigin * (imageBoxScale - 1.);
+  #endif
+
+  v_imageUV = uv;
+  v_imageUV *= imageBoxScale;
+  v_imageUV += boxOrigin * (imageBoxScale - 1.);
+  v_imageUV += graphicOffset;
+  v_imageUV /= u_scale;
+  v_imageUV.x *= u_imageAspectRatio;
+  v_imageUV = graphicRotation * v_imageUV;
+  v_imageUV.x /= u_imageAspectRatio;
+
+  v_imageUV += .5;
+  v_imageUV.y = 1. - v_imageUV.y;
+
+  // ===================================================
+
 }`;
 export {
   vertexShaderSource

package/dist/vertex-shader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/vertex-shader.ts"],
-  "sourcesContent": ["/** Vertex shader for the shader mount */\n// language=GLSL\nexport const vertexShaderSource = `#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  vec2 maxBoxSize = vec2(max(u_resolution.x, givenBoxSize.x), max(u_resolution.y, givenBoxSize.y));\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize, maxBoxSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_objectHelperBox = uv;\n    v_objectHelperBox *= objectWorldScale;\n    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_responsiveHelperBox = uv;\n    v_responsiveHelperBox *= responsiveBoxScale;\n    v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize, maxBoxSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n    v_patternHelperBox = uv;\n    v_patternHelperBox *= patternBoxScale;\n    v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  v_patternUV *= .01;\n\n  // ===================================================\n\n}`;\n"],
-  "mappings": ";;;;;AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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": ["/** Vertex shader for the shader mount */\n// language=GLSL\nexport const vertexShaderSource = `#version 300 es\nprecision mediump float;\n\nlayout(location = 0) in vec4 a_position;\n\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_imageAspectRatio;\n\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nuniform float u_pxSize;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_objectHelperBox;\n\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxSize;\nout vec2 v_responsiveHelperBox;\nout vec2 v_responsiveBoxGivenSize;\n\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_patternHelperBox;\n\nout vec2 v_imageUV;\n\n// #define ADD_HELPERS\n\nvec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {\n  vec2 box = vec2(0.);\n  // fit = none\n  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);\n  float noFitBoxWidth = box.x;\n  if (u_fit == 1.) { // fit = contain\n    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);\n  } else if (u_fit == 2.) { // fit = cover\n    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);\n  }\n  box.y = box.x / boxRatio;\n  return vec3(box, noFitBoxWidth);\n}\n\nvoid main() {\n  gl_Position = a_position;\n\n  vec2 uv = gl_Position.xy * .5;\n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n\n  // ===================================================\n  // Sizing api for graphic objects with fixed ratio\n  // (currently supports only ratio = 1)\n\n  float fixedRatio = 1.;\n  vec2 fixedRatioBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n\n  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;\n  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_objectHelperBox = uv;\n  v_objectHelperBox *= objectWorldScale;\n  v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);\n  #endif\n\n  v_objectUV = uv;\n  v_objectUV *= objectWorldScale;\n  v_objectUV += boxOrigin * (objectWorldScale - 1.);\n  v_objectUV += graphicOffset;\n  v_objectUV /= u_scale;\n  v_objectUV = graphicRotation * v_objectUV;\n\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.\n  // Full-screen mode available with u_worldWidth = u_worldHeight = 0\n\n  v_responsiveBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;\n  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / v_responsiveBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_responsiveHelperBox = uv;\n  v_responsiveHelperBox *= responsiveBoxScale;\n  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);\n  #endif\n\n  v_responsiveUV = uv;\n  v_responsiveUV *= responsiveBoxScale;\n  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);\n  v_responsiveUV += graphicOffset;\n  v_responsiveUV /= u_scale;\n  v_responsiveUV.x *= responsiveRatio;\n  v_responsiveUV = graphicRotation * v_responsiveUV;\n  v_responsiveUV.x /= responsiveRatio;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for patterns\n  // (treating graphics as a image u_worldWidth x u_worldHeight size)\n\n  float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n  vec2 patternBoxGivenSize = vec2(\n  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n  );\n  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;\n\n  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);\n  v_patternBoxSize = boxSizeData.xy;\n  float patternBoxNoFitBoxWidth = boxSizeData.z;\n  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;\n\n  #ifdef ADD_HELPERS\n  v_patternHelperBox = uv;\n  v_patternHelperBox *= patternBoxScale;\n  v_patternHelperBox += boxOrigin * (patternBoxScale - 1.);\n  #endif\n\n  v_patternUV = uv;\n  v_patternUV += graphicOffset / patternBoxScale;\n  v_patternUV += boxOrigin;\n  v_patternUV -= boxOrigin / patternBoxScale;\n  v_patternUV *= u_resolution.xy;\n  v_patternUV /= u_pixelRatio;\n  if (u_fit > 0.) {\n    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);\n  }\n  v_patternUV /= u_scale;\n  v_patternUV = graphicRotation * v_patternUV;\n  v_patternUV += boxOrigin / patternBoxScale;\n  v_patternUV -= boxOrigin;\n  // x100 is a default multiplier between vertex and fragmant shaders\n  // we use it to avoid UV presision issues\n  v_patternUV *= .01;\n\n  // ===================================================\n\n\n  // ===================================================\n  // Sizing api for images\n\n  vec2 imageBoxSize;\n  if (u_fit == 1.) { // contain\n    imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else if (u_fit == 2.) { // cover\n    imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n  } else {\n    imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n  }\n  imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n  vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n  #ifdef ADD_HELPERS\n  vec2 imageHelperBox = uv;\n  imageHelperBox *= imageBoxScale;\n  imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n  #endif\n\n  v_imageUV = uv;\n  v_imageUV *= imageBoxScale;\n  v_imageUV += boxOrigin * (imageBoxScale - 1.);\n  v_imageUV += graphicOffset;\n  v_imageUV /= u_scale;\n  v_imageUV.x *= u_imageAspectRatio;\n  v_imageUV = graphicRotation * v_imageUV;\n  v_imageUV.x /= u_imageAspectRatio;\n\n  v_imageUV += .5;\n  v_imageUV.y = 1. - v_imageUV.y;\n\n  // ===================================================\n\n}`;\n"],
+  "mappings": ";;;;;AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.45",
-  "license": "MIT",
+  "version": "0.0.47",
+  "license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {