@paper-design/shaders 0.0.0-canary.0d8316e

package/dist/shaders/waves.d.ts

@@ -0,0 +1,53 @@
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+/**
+ * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.
+ *
+ * Fragment shader uniforms:
+ * - u_colorFront (vec4): Foreground color in RGBA
+ * - u_colorBack (vec4): Background color in RGBA
+ * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)
+ * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)
+ * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)
+ * - u_spacing (float): Space between every two wavy lines (0 to 2)
+ * - u_proportion (float): Blend point between front and back colors, 0.5 = equal distribution (0 to 1)
+ * - u_softness (float): Color transition sharpness, 0 = hard edge, 1 = smooth gradient (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
+ *
+ * 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 wavesFragmentShader: string;
+export interface WavesUniforms extends ShaderSizingUniforms {
+    u_colorFront: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
+    u_shape: number;
+    u_frequency: number;
+    u_amplitude: number;
+    u_spacing: number;
+    u_proportion: number;
+    u_softness: number;
+}
+export interface WavesParams extends ShaderSizingParams {
+    colorFront?: string;
+    colorBack?: string;
+    rotation?: number;
+    shape?: number;
+    frequency?: number;
+    amplitude?: number;
+    spacing?: number;
+    proportion?: number;
+    softness?: number;
+}

package/dist/shaders/waves.js

@@ -0,0 +1,66 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import {} from "../shader-sizing.js";
+import { declarePI } from "../shader-utils.js";
+const wavesFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_shape;
+uniform float u_frequency;
+uniform float u_amplitude;
+uniform float u_spacing;
+uniform float u_proportion;
+uniform float u_softness;
+
+in vec2 v_patternUV;
+
+out vec4 fragColor;
+
+${declarePI}
+
+void main() {
+  vec2 shape_uv = v_patternUV;
+  shape_uv *= 4.;
+
+  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);
+  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);
+  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);
+  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));
+
+  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));
+  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));
+  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));
+  offset *= 2. * u_amplitude;
+
+  float spacing = (.001 + u_spacing);
+  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);
+
+  float aa = .0001 + fwidth(shape);
+  float dc = 1. - clamp(u_proportion, 0., 1.);
+  float e0 = dc - u_softness - aa;
+  float e1 = dc + u_softness + aa;
+  float res = smoothstep(min(e0, e1), max(e0, e1), shape);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+export {
+  wavesFragmentShader
+};
+//# sourceMappingURL=waves.js.map

package/dist/shaders/waves.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/waves.ts"],
+  "sourcesContent": ["import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';\nimport { declarePI } from '../shader-utils.js';\n\n/**\n * Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.\n *\n * Fragment shader uniforms:\n * - u_colorFront (vec4): Foreground color in RGBA\n * - u_colorBack (vec4): Background color in RGBA\n * - u_shape (float): Line shape, 0 = zigzag, 1 = sine, 2-3 = irregular waves, fractional values morph between shapes, needs amplitude > 0, frequency > 0 (0 to 3)\n * - u_amplitude (float): Wave amplitude, at frequency = 0 it only shifts the lines (0 to 1)\n * - u_frequency (float): Wave frequency, needs amplitude > 0 (0 to 2)\n * - u_spacing (float): Space between every two wavy lines (0 to 2)\n * - u_proportion (float): Blend point between front and back 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 *\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 wavesFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_shape;\nuniform float u_frequency;\nuniform float u_amplitude;\nuniform float u_spacing;\nuniform float u_proportion;\nuniform float u_softness;\n\nin vec2 v_patternUV;\n\nout vec4 fragColor;\n\n${ declarePI }\n\nvoid main() {\n  vec2 shape_uv = v_patternUV;\n  shape_uv *= 4.;\n\n  float wave = .5 * cos(shape_uv.x * u_frequency * TWO_PI);\n  float zigzag = 2. * abs(fract(shape_uv.x * u_frequency) - .5);\n  float irregular = sin(shape_uv.x * .25 * u_frequency * TWO_PI) * cos(shape_uv.x * u_frequency * TWO_PI);\n  float irregular2 = .75 * (sin(shape_uv.x * u_frequency * TWO_PI) + .5 * cos(shape_uv.x * .5 * u_frequency * TWO_PI));\n\n  float offset = mix(zigzag, wave, smoothstep(0., 1., u_shape));\n  offset = mix(offset, irregular, smoothstep(1., 2., u_shape));\n  offset = mix(offset, irregular2, smoothstep(2., 3., u_shape));\n  offset *= 2. * u_amplitude;\n\n  float spacing = (.001 + u_spacing);\n  float shape = .5 + .5 * sin((shape_uv.y + offset) * PI / spacing);\n\n  float aa = .0001 + fwidth(shape);\n  float dc = 1. - clamp(u_proportion, 0., 1.);\n  float e0 = dc - u_softness - aa;\n  float e1 = dc + u_softness + aa;\n  float res = smoothstep(min(e0, e1), max(e0, e1), shape);\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  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface WavesUniforms extends ShaderSizingUniforms {\n  u_colorFront: [number, number, number, number];\n  u_colorBack: [number, number, number, number];\n  u_shape: number;\n  u_frequency: number;\n  u_amplitude: number;\n  u_spacing: number;\n  u_proportion: number;\n  u_softness: number;\n}\n\nexport interface WavesParams extends ShaderSizingParams {\n  colorFront?: string;\n  colorBack?: string;\n  rotation?: number;\n  shape?: number;\n  frequency?: number;\n  amplitude?: number;\n  spacing?: number;\n  proportion?: number;\n  softness?: number;\n}\n"],
+  "mappings": ";;;;;AAAA,eAAmE;AACnE,SAAS,iBAAiB;AAkCnB,MAAM,sBAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBxC,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;",
+  "names": []
+}

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type vec4 = [number, number, number, number];
+export type vec3 = [number, number, number];
+export type vec2 = [number, number];

package/dist/types.js

@@ -0,0 +1,6 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/vertex-shader.d.ts

@@ -0,0 +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;\nuniform float u_imageAspectRatio;\nuniform float u_imageIsHtml;\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxGivenSize;\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_imageUV;\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\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  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  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  vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / 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  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  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  v_imageUV = uv;\n  if (u_imageIsHtml == 0.) {\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    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\n  v_imageUV += .5;\n  v_imageUV.y = 1. - v_imageUV.y;\n}";

package/dist/vertex-shader.js

@@ -0,0 +1,163 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const vertexShaderSource = `#version 300 es
+precision mediump float;
+
+layout(location = 0) in vec4 a_position;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_imageAspectRatio;
+uniform float u_imageIsHtml;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+out vec2 v_objectUV;
+out vec2 v_objectBoxSize;
+out vec2 v_responsiveUV;
+out vec2 v_responsiveBoxGivenSize;
+out vec2 v_patternUV;
+out vec2 v_patternBoxSize;
+out vec2 v_imageUV;
+
+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(u_resolution.x / boxRatio, u_resolution.y);
+  } else if (u_fit == 2.) { // fit = cover
+    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
+  }
+  box.y = box.x / boxRatio;
+  return vec3(box, noFitBoxWidth);
+}
+
+void main() {
+  gl_Position = a_position;
+
+  vec2 uv = gl_Position.xy * .5;
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  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);
+
+
+  // ===================================================
+
+  float fixedRatio = 1.;
+  vec2 fixedRatioBoxGivenSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+
+  v_objectBoxSize = getBoxSize(fixedRatio, fixedRatioBoxGivenSize).xy;
+  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
+
+  v_objectUV = uv;
+  v_objectUV *= objectWorldScale;
+  v_objectUV += boxOrigin * (objectWorldScale - 1.);
+  v_objectUV += graphicOffset;
+  v_objectUV /= u_scale;
+  v_objectUV = graphicRotation * v_objectUV;
+
+  // ===================================================
+
+  v_responsiveBoxGivenSize = vec2(
+  (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+  (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
+  vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;
+  vec2 responsiveBoxScale = u_resolution.xy / responsiveBoxSize;
+
+  #ifdef ADD_HELPERS
+  v_responsiveHelperBox = uv;
+  v_responsiveHelperBox *= responsiveBoxScale;
+  v_responsiveHelperBox += boxOrigin * (responsiveBoxScale - 1.);
+  #endif
+
+  v_responsiveUV = uv;
+  v_responsiveUV *= responsiveBoxScale;
+  v_responsiveUV += boxOrigin * (responsiveBoxScale - 1.);
+  v_responsiveUV += graphicOffset;
+  v_responsiveUV /= u_scale;
+  v_responsiveUV.x *= responsiveRatio;
+  v_responsiveUV = graphicRotation * v_responsiveUV;
+  v_responsiveUV.x /= responsiveRatio;
+
+  // ===================================================
+
+  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
+  );
+  patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+
+  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
+  v_patternBoxSize = boxSizeData.xy;
+  float patternBoxNoFitBoxWidth = boxSizeData.z;
+  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+
+  v_patternUV = uv;
+  v_patternUV += graphicOffset / patternBoxScale;
+  v_patternUV += boxOrigin;
+  v_patternUV -= boxOrigin / patternBoxScale;
+  v_patternUV *= u_resolution.xy;
+  v_patternUV /= u_pixelRatio;
+  if (u_fit > 0.) {
+    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+  }
+  v_patternUV /= u_scale;
+  v_patternUV = graphicRotation * v_patternUV;
+  v_patternUV += boxOrigin / patternBoxScale;
+  v_patternUV -= boxOrigin;
+  // x100 is a default multiplier between vertex and fragmant shaders
+  // we use it to avoid UV presision issues
+  v_patternUV *= .01;
+
+  // ===================================================
+
+  v_imageUV = uv;
+  if (u_imageIsHtml == 0.) {
+    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;
+
+    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
+};
+//# sourceMappingURL=vertex-shader.js.map

package/dist/vertex-shader.js.map

@@ -0,0 +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;\nuniform float u_imageAspectRatio;\nuniform float u_imageIsHtml;\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;\n\nout vec2 v_objectUV;\nout vec2 v_objectBoxSize;\nout vec2 v_responsiveUV;\nout vec2 v_responsiveBoxGivenSize;\nout vec2 v_patternUV;\nout vec2 v_patternBoxSize;\nout vec2 v_imageUV;\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\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  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  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  vec2 responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize).xy;\n  vec2 responsiveBoxScale = u_resolution.xy / 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  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  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  v_imageUV = uv;\n  if (u_imageIsHtml == 0.) {\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    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\n  v_imageUV += .5;\n  v_imageUV.y = 1. - v_imageUV.y;\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;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@paper-design/shaders",
+  "version": "0.0.0-canary.0d8316e",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "scripts": {
+    "type-check": "tsc --project tsconfig.json"
+  },
+  "dependencies": {}
+}