@paper-design/shaders 0.0.31-backbuffer-experiment.0 → 0.0.31-backbuffer-experiment.2

package/dist/shader-mount.js

@@ -0,0 +1,733 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    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();
+  // Framebuffer properties
+  framebuffer = null;
+  framebufferTexture = null;
+  framebufferWidth = 0;
+  framebufferHeight = 0;
+  framebufferSamplingProgram = null;
+  framebufferSamplingUniformLocations = {};
+  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.framebuffer = this.gl.createFramebuffer();
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.framebufferTexture = this.gl.createTexture();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.framebufferTexture);
+    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.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    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;
+    const framebufferVertexShader = `#version 300 es
+      precision mediump float;
+
+      layout(location = 0) in vec4 a_position;
+      out vec2 v_texCoord;
+
+      void main() {
+        gl_Position = a_position;
+        v_texCoord = a_position.xy * 0.5 + 0.5;
+      }
+    `;
+    const framebufferFragmentShader = `#version 300 es
+      precision mediump float;
+      uniform sampler2D u_texture;
+      uniform vec2 u_textureSize;
+      uniform vec2 u_targetSize;
+
+      in vec2 v_texCoord;
+      out vec4 fragColor;
+
+      void main() {
+        // Calculate the scale factor between target size and texture size
+        vec2 scale = u_targetSize / u_textureSize;
+        
+        // Scale UVs to only sample the portion of the texture that contains our render
+        vec2 uv = v_texCoord * scale;
+        
+        fragColor = texture(u_texture, uv);
+      }
+    `;
+    const framebufferProgram = createProgram(this.gl, framebufferVertexShader, framebufferFragmentShader);
+    if (!framebufferProgram) return;
+    this.framebufferSamplingProgram = framebufferProgram;
+    this.framebufferSamplingUniformLocations = {
+      u_texture: this.gl.getUniformLocation(framebufferProgram, "u_texture"),
+      u_textureSize: this.gl.getUniformLocation(framebufferProgram, "u_textureSize"),
+      u_targetSize: this.gl.getUniformLocation(framebufferProgram, "u_targetSize")
+    };
+  };
+  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 { width, height, renderScale } = this.getCanvasSize();
+    if (this.canvasElement.width !== width || this.canvasElement.height !== height || this.renderScale !== renderScale) {
+      this.renderScale = renderScale;
+      this.canvasElement.width = width;
+      this.canvasElement.height = height;
+      this.resolutionChanged = true;
+      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+      this.render(performance.now());
+    }
+  };
+  getCanvasSize = () => {
+    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);
+    return {
+      width: newWidth,
+      height: newHeight,
+      renderScale: newRenderScale
+    };
+  };
+  handleResolutionChange = () => {
+    const { renderScale, width, height } = this.getCanvasSize();
+    if (this.renderScale !== renderScale || this.canvasElement.width !== width || this.canvasElement.height !== height) {
+      this.renderScale = renderScale;
+      this.canvasElement.width = width;
+      this.canvasElement.height = height;
+      this.resolutionChanged = true;
+    }
+  };
+  ensureSceneTarget = (targetFramebufferWidth, targetFramebufferHeight) => {
+    if (targetFramebufferWidth <= this.framebufferWidth && targetFramebufferHeight <= this.framebufferHeight) return;
+    this.framebufferWidth = Math.max(targetFramebufferWidth, this.framebufferWidth);
+    this.framebufferHeight = Math.max(targetFramebufferHeight, this.framebufferHeight);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.framebufferTexture);
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.framebufferWidth,
+      this.framebufferHeight,
+      0,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      null
+    );
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.gl.framebufferTexture2D(
+      this.gl.FRAMEBUFFER,
+      this.gl.COLOR_ATTACHMENT0,
+      this.gl.TEXTURE_2D,
+      this.framebufferTexture,
+      0
+    );
+    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+      console.error("Framebuffer is not complete:", status);
+    }
+  };
+  render = (currentTime) => {
+    if (this.hasBeenDisposed) return;
+    if (this.program === null || this.framebufferSamplingProgram === null) {
+      console.warn("Tried to render before program or framebuffer or gl was initialized");
+      return;
+    }
+    const dt = currentTime - this.lastRenderTime;
+    this.lastRenderTime = currentTime;
+    if (this.speed !== 0) {
+      this.totalFrameTime += dt * this.speed;
+    }
+    const targetFramebufferWidth = Math.round(this.parentWidth * this.renderScale);
+    const targetFramebufferHeight = Math.round(this.parentHeight * this.renderScale);
+    this.ensureSceneTarget(targetFramebufferWidth, targetFramebufferHeight);
+    for (let i = 0; i < this.textures.size; i++) {
+      this.gl.activeTexture(this.gl.TEXTURE0 + i);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+    }
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+    this.gl.viewport(0, 0, targetFramebufferWidth, targetFramebufferHeight);
+    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, targetFramebufferWidth, targetFramebufferHeight);
+      this.gl.uniform1f(this.uniformLocations.u_pixelRatio, this.renderScale);
+      this.resolutionChanged = false;
+    }
+    let textureUnit = 0;
+    this.textures.forEach((texture, uniformName) => {
+      const location = this.uniformLocations[uniformName];
+      if (location) {
+        this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.uniform1i(location, textureUnit);
+        textureUnit++;
+      }
+    });
+    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    this.gl.useProgram(this.framebufferSamplingProgram);
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.framebufferTexture);
+    this.gl.uniform1i(this.framebufferSamplingUniformLocations.u_texture, 0);
+    this.gl.uniform2f(
+      this.framebufferSamplingUniformLocations.u_textureSize,
+      this.framebufferWidth,
+      this.framebufferHeight
+    );
+    this.gl.uniform2f(
+      this.framebufferSamplingUniformLocations.u_targetSize,
+      targetFramebufferWidth,
+      targetFramebufferHeight
+    );
+    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.handleResolutionChange();
+  };
+  /** Set the minimum pixel ratio for the shader */
+  setMinPixelRatio = (newMinPixelRatio = 2) => {
+    this.minPixelRatio = newMinPixelRatio;
+    this.handleResolutionChange();
+  };
+  /** 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.textures.forEach((texture) => {
+        this.gl.deleteTexture(texture);
+      });
+      this.textures.clear();
+      if (this.framebuffer) {
+        this.gl.deleteFramebuffer(this.framebuffer);
+        this.framebuffer = null;
+      }
+      if (this.framebufferTexture) {
+        this.gl.deleteTexture(this.framebufferTexture);
+        this.framebufferTexture = null;
+      }
+      if (this.framebufferSamplingProgram) {
+        this.gl.deleteProgram(this.framebufferSamplingProgram);
+        this.framebufferSamplingProgram = null;
+      }
+      if (this.program) {
+        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.framebufferSamplingUniformLocations = {};
+    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