@paper-design/shaders 0.0.31 → 0.0.32

package/dist/shader-color-spaces.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/shader-color-spaces.ts"],
-  "sourcesContent": ["export const ShaderColorSpaces = {\n  rgb: 0,\n  oklch: 1,\n} as const;\n\nexport type ShaderColorSpace = keyof typeof ShaderColorSpaces;\n\nexport const declareOklchTransforms = `\n\n// magic numbers (and magic could be better tbh)\n#define OKLCH_CHROMA_THRESHOLD .001\n#define OKLCH_HUE_NEUTRALIZER - 2.\n\nvec3 srgbToLinear(vec3 srgb) {\n  return pow(srgb, vec3(2.2));\n}\n\nvec3 linearToSrgb(vec3 linear) {\n  return pow(linear, vec3(1.0 / 2.2));\n}\n\nvec3 LrgbToOklab(vec3 rgb) {\n  float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);\n  float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);\n  float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);\n  return vec3(\n    0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,\n    1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,\n    0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S\n  );\n}\n\nvec3 OklabToLrgb(vec3 oklab) {\n  float L = oklab.x;\n  float a = oklab.y;\n  float b = oklab.z;\n\n  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;\n  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;\n  float s_ = L - 0.0894841775 * a - 1.291485548 * b;\n\n  float l = l_ * l_ * l_;\n  float m = m_ * m_ * m_;\n  float s = s_ * s_ * s_;\n\n  return vec3(\n    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s\n  );\n}\n\nvec3 oklabToOklch(vec3 oklab) {\n  float C = length(oklab.yz);\n  float H = atan(oklab.z, oklab.y);\n  if (C < OKLCH_CHROMA_THRESHOLD) {\n    H = OKLCH_HUE_NEUTRALIZER;\n  }\n  return vec3(oklab.x, C, H);\n}\n\nvec3 oklchToOklab(vec3 oklch) {\n  float a = oklch.y * cos(oklch.z);\n  float b = oklch.y * sin(oklch.z);\n  return vec3(oklch.x, a, b);\n}\n\nfloat mixHue(float h1, float h2, float mixer) {\n  float delta = mod(h2 - h1 + PI, TWO_PI) - PI;\n  return h1 + mixer * delta;\n}\n\nvec3 srgbToOklab(vec3 rgb) {\n  return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));\n}\n\nvec3 oklabToSrgb(vec3 oklab) {\n  return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));\n}\n\nvec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {\n  color1.x = mix(color1.x, color2.x, mixer);\n  color1.y = mix(color1.y, color2.y, mixer);\n  if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {\n    color1.z = mixHue(color1.z, color2.z, mixer);\n  }\n  return color1;\n}\n`;\n"],
-  "mappings": ";;;;;AAAO,MAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EACL,OAAO;AACT;AAIO,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/shader-mount.js

@@ -1,582 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-const DEFAULT_MAX_PIXEL_COUNT = 1920 * 1080 * 4;
-class ShaderMount {
-  parentElement;
-  canvasElement;
-  gl;
-  program = null;
-  uniformLocations = {};
-  /** The fragment shader that we are using */
-  fragmentShader;
-  /** Stores the RAF for the render loop */
-  rafId = null;
-  /** Time of the last rendered frame */
-  lastRenderTime = 0;
-  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
-  totalFrameTime = 0;
-  /** The current speed that we progress through animation time (multiplies by delta time every update). Allows negatives to play in reverse. If set to 0, rAF will stop entirely so static shaders have no recurring performance costs */
-  speed = 0;
-  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
-  providedUniforms;
-  /** Just a sanity check to make sure frames don't run after we're disposed */
-  hasBeenDisposed = false;
-  /** If the resolution of the canvas has changed since the last render */
-  resolutionChanged = true;
-  /** Store textures that are provided by the user */
-  textures = /* @__PURE__ */ new Map();
-  minPixelRatio;
-  maxPixelCount;
-  isSafari = isSafari();
-  constructor(parentElement, fragmentShader, uniforms, webGlContextAttributes, speed = 0, frame = 0, minPixelRatio = 2, maxPixelCount = DEFAULT_MAX_PIXEL_COUNT) {
-    if (parentElement instanceof HTMLElement) {
-      this.parentElement = parentElement;
-    } else {
-      throw new Error("Paper Shaders: parent element must be an HTMLElement");
-    }
-    if (!document.querySelector("style[data-paper-shaders]")) {
-      const styleElement = document.createElement("style");
-      styleElement.innerHTML = defaultStyle;
-      styleElement.setAttribute("data-paper-shaders", "");
-      document.head.prepend(styleElement);
-    }
-    const canvasElement = document.createElement("canvas");
-    this.canvasElement = canvasElement;
-    this.parentElement.prepend(canvasElement);
-    this.fragmentShader = fragmentShader;
-    this.providedUniforms = uniforms;
-    this.totalFrameTime = frame;
-    this.minPixelRatio = minPixelRatio;
-    this.maxPixelCount = maxPixelCount;
-    const gl = canvasElement.getContext("webgl2", webGlContextAttributes);
-    if (!gl) {
-      throw new Error("Paper Shaders: WebGL is not supported in this browser");
-    }
-    this.gl = gl;
-    this.initProgram();
-    this.setupPositionAttribute();
-    this.setupUniforms();
-    this.setUniformValues(this.providedUniforms);
-    this.setupResizeObserver();
-    this.setSpeed(speed);
-    this.parentElement.setAttribute("data-paper-shaders", "");
-    this.parentElement.paperShaderMount = this;
-  }
-  initProgram = () => {
-    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);
-    if (!program) return;
-    this.program = program;
-  };
-  setupPositionAttribute = () => {
-    const positionAttributeLocation = this.gl.getAttribLocation(this.program, "a_position");
-    const positionBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
-    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
-    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
-    this.gl.enableVertexAttribArray(positionAttributeLocation);
-    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);
-  };
-  setupUniforms = () => {
-    const uniformLocations = {
-      u_time: this.gl.getUniformLocation(this.program, "u_time"),
-      u_pixelRatio: this.gl.getUniformLocation(this.program, "u_pixelRatio"),
-      u_resolution: this.gl.getUniformLocation(this.program, "u_resolution")
-    };
-    Object.entries(this.providedUniforms).forEach(([key, value]) => {
-      uniformLocations[key] = this.gl.getUniformLocation(this.program, key);
-      if (value instanceof HTMLImageElement) {
-        const aspectRatioUniformName = `${key}_aspect_ratio`;
-        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program, aspectRatioUniformName);
-      }
-    });
-    this.uniformLocations = uniformLocations;
-  };
-  /**
-   * The scale that we should render at.
-   * - Used to target 2x rendering even on 1x screens for better antialiasing
-   * - Prevents the virtual resolution from going beyond the maximum resolution
-   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels
-   */
-  renderScale = 1;
-  parentWidth = 0;
-  parentHeight = 0;
-  resizeObserver = null;
-  setupResizeObserver = () => {
-    this.resizeObserver = new ResizeObserver(([entry]) => {
-      if (entry?.borderBoxSize[0]) {
-        this.parentWidth = entry.borderBoxSize[0].inlineSize;
-        this.parentHeight = entry.borderBoxSize[0].blockSize;
-      }
-      this.handleResize();
-    });
-    this.resizeObserver.observe(this.parentElement);
-    visualViewport?.addEventListener("resize", this.handleVisualViewportChange);
-    const rect = this.parentElement.getBoundingClientRect();
-    this.parentWidth = rect.width;
-    this.parentHeight = rect.height;
-    this.handleResize();
-  };
-  // Visual viewport resize handler, mainly used to react to browser zoom changes.
-  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):
-  // - Frame 1: a paint after the visual viewport resize
-  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered
-  //
-  // Both resize observer and visual viewport will react to classic browser zoom changes,
-  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.
-  resizeRafId = null;
-  handleVisualViewportChange = () => {
-    if (this.resizeRafId !== null) {
-      cancelAnimationFrame(this.resizeRafId);
-    }
-    this.resizeRafId = requestAnimationFrame(() => {
-      this.resizeRafId = requestAnimationFrame(() => {
-        this.handleResize();
-      });
-    });
-  };
-  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
-  handleResize = () => {
-    if (this.resizeRafId !== null) {
-      cancelAnimationFrame(this.resizeRafId);
-    }
-    const pinchZoom = visualViewport?.scale ?? 1;
-    const innerWidth = visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth;
-    const classicZoom = Math.round(1e4 * window.outerWidth / innerWidth) / 1e4;
-    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;
-    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);
-    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;
-    const targetPixelWidth = this.parentWidth * targetRenderScale;
-    const targetPixelHeight = this.parentHeight * targetRenderScale;
-    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);
-    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);
-    const newWidth = Math.round(this.parentWidth * newRenderScale);
-    const newHeight = Math.round(this.parentHeight * newRenderScale);
-    if (this.canvasElement.width !== newWidth || this.canvasElement.height !== newHeight || this.renderScale !== newRenderScale) {
-      this.renderScale = newRenderScale;
-      this.canvasElement.width = newWidth;
-      this.canvasElement.height = newHeight;
-      this.resolutionChanged = true;
-      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-      this.render(performance.now());
-    }
-  };
-  render = (currentTime) => {
-    if (this.hasBeenDisposed) return;
-    if (this.program === null) {
-      console.warn("Tried to render before program or gl was initialized");
-      return;
-    }
-    const dt = currentTime - this.lastRenderTime;
-    this.lastRenderTime = currentTime;
-    if (this.speed !== 0) {
-      this.totalFrameTime += dt * this.speed;
-    }
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-    this.gl.useProgram(this.program);
-    this.gl.uniform1f(this.uniformLocations.u_time, this.totalFrameTime * 1e-3);
-    if (this.resolutionChanged) {
-      this.gl.uniform2f(this.uniformLocations.u_resolution, this.gl.canvas.width, this.gl.canvas.height);
-      this.gl.uniform1f(this.uniformLocations.u_pixelRatio, this.renderScale);
-      this.resolutionChanged = false;
-    }
-    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
-    if (this.speed !== 0) {
-      this.requestRender();
-    } else {
-      this.rafId = null;
-    }
-  };
-  requestRender = () => {
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-    }
-    this.rafId = requestAnimationFrame(this.render);
-  };
-  /** Creates a texture from an image and sets it into a uniform value */
-  setTextureUniform = (uniformName, image) => {
-    if (!image.complete || image.naturalWidth === 0) {
-      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);
-    }
-    const existingTexture = this.textures.get(uniformName);
-    if (existingTexture) {
-      this.gl.deleteTexture(existingTexture);
-    }
-    const texture = this.gl.createTexture();
-    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);
-    const error = this.gl.getError();
-    if (error !== this.gl.NO_ERROR || texture === null) {
-      console.error("Paper Shaders: WebGL error when uploading texture:", error);
-      return;
-    }
-    this.textures.set(uniformName, texture);
-    const location = this.uniformLocations[uniformName];
-    if (location) {
-      const textureUnit = this.textures.size - 1;
-      this.gl.useProgram(this.program);
-      this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
-      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
-      this.gl.uniform1i(location, textureUnit);
-      const aspectRatioUniformName = `${uniformName}_aspect_ratio`;
-      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];
-      if (aspectRatioLocation) {
-        const aspectRatio = image.naturalWidth / image.naturalHeight;
-        this.gl.uniform1f(aspectRatioLocation, aspectRatio);
-      }
-    }
-  };
-  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
-  setUniformValues = (updatedUniforms) => {
-    this.gl.useProgram(this.program);
-    Object.entries(updatedUniforms).forEach(([key, value]) => {
-      const location = this.uniformLocations[key];
-      if (!location) {
-        console.warn(`Uniform location for ${key} not found`);
-        return;
-      }
-      if (value instanceof HTMLImageElement) {
-        this.setTextureUniform(key, value);
-      } else if (Array.isArray(value)) {
-        let flatArray = null;
-        let valueLength = null;
-        if (value[0] !== void 0 && Array.isArray(value[0])) {
-          const firstChildLength = value[0].length;
-          if (value.every((arr) => arr.length === firstChildLength)) {
-            flatArray = value.flat();
-            valueLength = firstChildLength;
-          } else {
-            console.warn(`All child arrays must be the same length for ${key}`);
-            return;
-          }
-        } else {
-          flatArray = value;
-          valueLength = flatArray.length;
-        }
-        switch (valueLength) {
-          case 2:
-            this.gl.uniform2fv(location, flatArray);
-            break;
-          case 3:
-            this.gl.uniform3fv(location, flatArray);
-            break;
-          case 4:
-            this.gl.uniform4fv(location, flatArray);
-            break;
-          case 9:
-            this.gl.uniformMatrix3fv(location, false, flatArray);
-            break;
-          case 16:
-            this.gl.uniformMatrix4fv(location, false, flatArray);
-            break;
-          default:
-            console.warn(`Unsupported uniform array length: ${valueLength}`);
-        }
-      } else if (typeof value === "number") {
-        this.gl.uniform1f(location, value);
-      } else if (typeof value === "boolean") {
-        this.gl.uniform1i(location, value ? 1 : 0);
-      } else {
-        console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);
-      }
-    });
-  };
-  /** Gets the current total animation time from 0ms */
-  getCurrentFrameTime = () => {
-    return this.totalFrameTime;
-  };
-  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */
-  setFrame = (newFrame) => {
-    this.totalFrameTime = newFrame;
-    this.lastRenderTime = performance.now();
-    this.render(performance.now());
-  };
-  /** Set an animation speed (or 0 to stop animation) */
-  setSpeed = (newSpeed = 1) => {
-    this.speed = newSpeed;
-    if (this.rafId === null && newSpeed !== 0) {
-      this.lastRenderTime = performance.now();
-      this.rafId = requestAnimationFrame(this.render);
-    }
-    if (this.rafId !== null && newSpeed === 0) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  };
-  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
-  setMaxPixelCount = (newMaxPixelCount = DEFAULT_MAX_PIXEL_COUNT) => {
-    this.maxPixelCount = newMaxPixelCount;
-    this.handleResize();
-  };
-  /** Set the minimum pixel ratio for the shader */
-  setMinPixelRatio = (newMinPixelRatio = 2) => {
-    this.minPixelRatio = newMinPixelRatio;
-    this.handleResize();
-  };
-  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
-  setUniforms = (newUniforms) => {
-    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };
-    this.setUniformValues(newUniforms);
-    this.render(performance.now());
-  };
-  /** Dispose of the shader mount, cleaning up all of the WebGL resources */
-  dispose = () => {
-    this.hasBeenDisposed = true;
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-    if (this.gl && this.program) {
-      this.textures.forEach((texture) => {
-        this.gl.deleteTexture(texture);
-      });
-      this.textures.clear();
-      this.gl.deleteProgram(this.program);
-      this.program = null;
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
-      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
-      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
-      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
-      this.gl.getError();
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    visualViewport?.removeEventListener("resize", this.handleVisualViewportChange);
-    this.uniformLocations = {};
-    this.parentElement.paperShaderMount = void 0;
-  };
-}
-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_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;
-
-uniform float u_pxSize;
-
-out vec2 v_objectUV;
-out vec2 v_objectBoxSize;
-out vec2 v_objectHelperBox;
-
-out vec2 v_responsiveUV;
-out vec2 v_responsiveBoxSize;
-out vec2 v_responsiveHelperBox;
-out vec2 v_responsiveBoxGivenSize;
-
-out vec2 v_patternUV;
-out vec2 v_patternBoxSize;
-out vec2 v_patternHelperBox;
-
-// #define ADD_HELPERS
-
-vec3 getBoxSize(float boxRatio, vec2 givenBoxSize, vec2 maxBoxSize) {
-  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]);
-  } else if (u_fit == 2.) { // fit = cover
-    box.x = boxRatio * max(maxBoxSize[0] / boxRatio, maxBoxSize[1]);
-  }
-  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;
-  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);
-
-
-  // ===================================================
-  // Sizing api for graphic objects with fixed ratio
-  // (currently supports only ratio = 1)
-
-  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, maxBoxSize).xy;
-  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
-
-  #ifdef ADD_HELPERS
-    v_objectHelperBox = uv;
-    v_objectHelperBox *= objectWorldScale;
-    v_objectHelperBox += boxOrigin * (objectWorldScale - 1.);
-  #endif
-
-  v_objectUV = uv;
-  v_objectUV *= objectWorldScale;
-  v_objectUV += boxOrigin * (objectWorldScale - 1.);
-  v_objectUV += graphicOffset;
-  v_objectUV /= u_scale;
-  v_objectUV = graphicRotation * v_objectUV;
-
-
-  // ===================================================
-
-
-  // ===================================================
-  // Sizing api for graphic objects with either givenBoxSize ratio or canvas ratio.
-  // 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
-  );
-  float responsiveRatio = v_responsiveBoxGivenSize.x / v_responsiveBoxGivenSize.y;
-  v_responsiveBoxSize = getBoxSize(responsiveRatio, v_responsiveBoxGivenSize, maxBoxSize).xy;
-  vec2 responsiveBoxScale = u_resolution.xy / v_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;
-
-  // ===================================================
-
-
-  // ===================================================
-  // Sizing api for patterns
-  // (treating graphics as a image u_worldWidth x u_worldHeight size)
-
-  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, maxBoxSize);
-  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.);
-  #endif
-
-  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;
-  v_patternUV += .5;
-
-  // ===================================================
-
-}`;
-function createShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  if (!shader) return null;
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
-  }
-  return shader;
-}
-function createProgram(gl, vertexShaderSource2, fragmentShaderSource) {
-  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource2);
-  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
-  if (!vertexShader || !fragmentShader) return null;
-  const program = gl.createProgram();
-  if (!program) return null;
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(program));
-    gl.deleteProgram(program);
-    gl.deleteShader(vertexShader);
-    gl.deleteShader(fragmentShader);
-    return null;
-  }
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  return program;
-}
-const defaultStyle = `@layer paper-shaders {
-  :where([data-paper-shaders]) {
-    isolation: isolate;
-    position: relative;
-
-    & canvas {
-      contain: strict;
-      display: block;
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-    }
-  }
-}`;
-function isPaperShaderElement(element) {
-  return "paperShaderMount" in element;
-}
-function isSafari() {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.includes("safari") && !ua.includes("chrome") && !ua.includes("android");
-}
-export {
-  ShaderMount,
-  isPaperShaderElement
-};
-//# sourceMappingURL=shader-mount.js.map