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

package/dist/shader-mount.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/shader-mount.ts"],
-  "sourcesContent": ["const DEFAULT_MAX_PIXEL_COUNT: number = 1920 * 1080 * 4;\n\nexport class ShaderMount {\n  public parentElement: PaperShaderElement;\n  public canvasElement: HTMLCanvasElement;\n  private gl: WebGLRenderingContext;\n  private program: WebGLProgram | null = null;\n  private uniformLocations: Record<string, WebGLUniformLocation | null> = {};\n  /** The fragment shader that we are using */\n  private fragmentShader: string;\n  /** Stores the RAF for the render loop */\n  private rafId: number | null = null;\n  /** Time of the last rendered frame */\n  private lastRenderTime = 0;\n  /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */\n  private totalFrameTime = 0;\n  /** 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 */\n  private speed = 0;\n  /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */\n  private providedUniforms: ShaderMountUniforms;\n  /** Just a sanity check to make sure frames don't run after we're disposed */\n  private hasBeenDisposed = false;\n  /** If the resolution of the canvas has changed since the last render */\n  private resolutionChanged = true;\n  /** Store textures that are provided by the user */\n  private textures: Map<string, WebGLTexture> = new Map();\n  private minPixelRatio;\n  private maxPixelCount;\n  private isSafari = isSafari();\n\n  constructor(\n    /** The div you'd like to mount the shader to. The shader will match its size. */\n    parentElement: HTMLElement,\n    fragmentShader: string,\n    uniforms: ShaderMountUniforms,\n    webGlContextAttributes?: WebGLContextAttributes,\n    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */\n    speed = 0,\n    /** Pass a frame to offset the starting u_time value and give deterministic results*/\n    frame = 0,\n    /**\n     * The minimum pixel ratio to render at, defaults to 2.\n     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.\n     */\n    minPixelRatio = 2,\n    /**\n     * The maximum amount of physical device pixels to render for the shader,\n     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.\n     * Actual DOM size of the canvas can be larger, it will just lose quality after this.\n     *\n     * May be reduced to improve performance or increased to improve quality on high-resolution screens.\n     */\n    maxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT\n  ) {\n    if (parentElement instanceof HTMLElement) {\n      this.parentElement = parentElement as PaperShaderElement;\n    } else {\n      throw new Error('Paper Shaders: parent element must be an HTMLElement');\n    }\n\n    if (!document.querySelector('style[data-paper-shaders]')) {\n      const styleElement = document.createElement('style');\n      styleElement.innerHTML = defaultStyle;\n      styleElement.setAttribute('data-paper-shaders', '');\n      document.head.prepend(styleElement);\n    }\n\n    // Create the canvas element and mount it into the provided element\n    const canvasElement = document.createElement('canvas');\n    this.canvasElement = canvasElement;\n    this.parentElement.prepend(canvasElement);\n    this.fragmentShader = fragmentShader;\n    this.providedUniforms = uniforms;\n    // Base our starting animation time on the provided frame value\n    this.totalFrameTime = frame;\n    this.minPixelRatio = minPixelRatio;\n    this.maxPixelCount = maxPixelCount;\n\n    const gl = canvasElement.getContext('webgl2', webGlContextAttributes);\n    if (!gl) {\n      throw new Error('Paper Shaders: WebGL is not supported in this browser');\n    }\n    this.gl = gl;\n\n    this.initProgram();\n    this.setupPositionAttribute();\n    // Grab the locations of the uniforms in the fragment shader\n    this.setupUniforms();\n    // Put the user provided values into the uniforms\n    this.setUniformValues(this.providedUniforms);\n    // Set up the resize observer to handle window resizing and set u_resolution\n    this.setupResizeObserver();\n\n    // Set the animation speed after everything is ready to go\n    this.setSpeed(speed);\n\n    // Mark parent element as paper shader mount\n    this.parentElement.setAttribute('data-paper-shaders', '');\n\n    // Add the shaderMount instance to the div mount element to make it easily accessible\n    this.parentElement.paperShaderMount = this;\n  }\n\n  private initProgram = () => {\n    const program = createProgram(this.gl, vertexShaderSource, this.fragmentShader);\n    if (!program) return;\n    this.program = program;\n  };\n\n  private setupPositionAttribute = () => {\n    const positionAttributeLocation = this.gl.getAttribLocation(this.program!, 'a_position');\n    const positionBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);\n    const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);\n    this.gl.enableVertexAttribArray(positionAttributeLocation);\n    this.gl.vertexAttribPointer(positionAttributeLocation, 2, this.gl.FLOAT, false, 0, 0);\n  };\n\n  private setupUniforms = () => {\n    // Create a map to store all uniform locations\n    const uniformLocations: Record<string, WebGLUniformLocation | null> = {\n      u_time: this.gl.getUniformLocation(this.program!, 'u_time'),\n      u_pixelRatio: this.gl.getUniformLocation(this.program!, 'u_pixelRatio'),\n      u_resolution: this.gl.getUniformLocation(this.program!, 'u_resolution'),\n    };\n\n    // Add locations for all provided uniforms\n    Object.entries(this.providedUniforms).forEach(([key, value]) => {\n      uniformLocations[key] = this.gl.getUniformLocation(this.program!, key);\n\n      // For texture uniforms, also look for the aspect ratio uniform\n      if (value instanceof HTMLImageElement) {\n        const aspectRatioUniformName = `${key}_aspect_ratio`;\n        uniformLocations[aspectRatioUniformName] = this.gl.getUniformLocation(this.program!, aspectRatioUniformName);\n      }\n    });\n\n    this.uniformLocations = uniformLocations;\n  };\n\n  /**\n   * The scale that we should render at.\n   * - Used to target 2x rendering even on 1x screens for better antialiasing\n   * - Prevents the virtual resolution from going beyond the maximum resolution\n   * - Accounts for the page zoom level so we render in physical device pixels rather than CSS pixels\n   */\n  private renderScale = 1;\n  private parentWidth = 0;\n  private parentHeight = 0;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private setupResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(([entry]) => {\n      if (entry?.borderBoxSize[0]) {\n        this.parentWidth = entry.borderBoxSize[0].inlineSize;\n        this.parentHeight = entry.borderBoxSize[0].blockSize;\n      }\n\n      this.handleResize();\n    });\n\n    this.resizeObserver.observe(this.parentElement);\n    visualViewport?.addEventListener('resize', this.handleVisualViewportChange);\n\n    const rect = this.parentElement.getBoundingClientRect();\n    this.parentWidth = rect.width;\n    this.parentHeight = rect.height;\n    this.handleResize();\n  };\n\n  // Visual viewport resize handler, mainly used to react to browser zoom changes.\n  // Wait 2 frames to align with when the resize observer callback is done (in case it might follow):\n  // - Frame 1: a paint after the visual viewport resize\n  // - Frame 2: a paint after the resize observer has been handled, if it was ever triggered\n  //\n  // Both resize observer and visual viewport will react to classic browser zoom changes,\n  // so we dedupe the callbacks, but pinch zoom only triggers the visual viewport handler.\n  private resizeRafId: number | null = null;\n  private handleVisualViewportChange = () => {\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    this.resizeRafId = requestAnimationFrame(() => {\n      this.resizeRafId = requestAnimationFrame(() => {\n        this.handleResize();\n      });\n    });\n  };\n\n  /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */\n  private handleResize = () => {\n    // Cancel any scheduled resize handlers\n    if (this.resizeRafId !== null) {\n      cancelAnimationFrame(this.resizeRafId);\n    }\n\n    const pinchZoom = visualViewport?.scale ?? 1;\n\n    // Zoom level can be calculated comparing the browser's outerWidth and the viewport width.\n    // Note: avoid innerWidth, use visualViewport.width instead.\n    // - innerWidth is affected by pinch zoom in Safari, but not other browsers.\n    //   visualViewport.width works consistently in all browsers.\n    // - innerWidth is rounded to integer, but not visualViewport.width.\n    const innerWidth = visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth;\n\n    // Slight rounding here helps the <canvas> maintain a consistent computed size as the zoom level changes\n    const classicZoom = Math.round((10000 * window.outerWidth) / innerWidth) / 10000;\n\n    // As of 2025, Safari reports physical devicePixelRatio, but other browsers add the current zoom level\n    // https://bugs.webkit.org/show_bug.cgi?id=124862\n    const realPixelRatio = this.isSafari ? devicePixelRatio : devicePixelRatio / classicZoom;\n    const targetPixelRatio = Math.max(realPixelRatio, this.minPixelRatio);\n    const targetRenderScale = targetPixelRatio * classicZoom * pinchZoom;\n    const targetPixelWidth = this.parentWidth * targetRenderScale;\n    const targetPixelHeight = this.parentHeight * targetRenderScale;\n\n    // Prevent the total rendered pixel count from exceeding maxPixelCount\n    const maxPixelCountHeadroom = Math.sqrt(this.maxPixelCount) / Math.sqrt(targetPixelWidth * targetPixelHeight);\n\n    const newRenderScale = targetRenderScale * Math.min(1, maxPixelCountHeadroom);\n    const newWidth = Math.round(this.parentWidth * newRenderScale);\n    const newHeight = Math.round(this.parentHeight * newRenderScale);\n\n    if (\n      this.canvasElement.width !== newWidth ||\n      this.canvasElement.height !== newHeight ||\n      this.renderScale !== newRenderScale // Usually, only render scale change when the user zooms in/out\n    ) {\n      this.renderScale = newRenderScale;\n      this.canvasElement.width = newWidth;\n      this.canvasElement.height = newHeight;\n      this.resolutionChanged = true;\n      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);\n\n      // this is necessary to avoid flashes while resizing (the next scheduled render will set uniforms)\n      this.render(performance.now());\n    }\n  };\n\n  private render = (currentTime: number) => {\n    if (this.hasBeenDisposed) return;\n\n    if (this.program === null) {\n      console.warn('Tried to render before program or gl was initialized');\n      return;\n    }\n\n    // Calculate the delta time\n    const dt = currentTime - this.lastRenderTime;\n    this.lastRenderTime = currentTime;\n    // Increase the total animation time by dt * animationSpeed\n    if (this.speed !== 0) {\n      this.totalFrameTime += dt * this.speed;\n    }\n\n    // Clear the canvas\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n\n    // Update uniforms\n    this.gl.useProgram(this.program);\n\n    // Update the time uniform\n    this.gl.uniform1f(this.uniformLocations.u_time!, this.totalFrameTime * 0.001);\n\n    // If the resolution has changed, we need to update the uniform\n    if (this.resolutionChanged) {\n      this.gl.uniform2f(this.uniformLocations.u_resolution!, this.gl.canvas.width, this.gl.canvas.height);\n      this.gl.uniform1f(this.uniformLocations.u_pixelRatio!, this.renderScale);\n      this.resolutionChanged = false;\n    }\n\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\n\n    // Loop if we're animating\n    if (this.speed !== 0) {\n      this.requestRender();\n    } else {\n      this.rafId = null;\n    }\n  };\n\n  private requestRender = () => {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n    }\n    this.rafId = requestAnimationFrame(this.render);\n  };\n\n  /** Creates a texture from an image and sets it into a uniform value */\n  private setTextureUniform = (uniformName: string, image: HTMLImageElement): void => {\n    if (!image.complete || image.naturalWidth === 0) {\n      throw new Error(`Paper Shaders: image for uniform ${uniformName} must be fully loaded`);\n    }\n\n    // Clean up existing texture if present\n    const existingTexture = this.textures.get(uniformName);\n    if (existingTexture) {\n      this.gl.deleteTexture(existingTexture);\n    }\n\n    // Create and set up the new texture\n    const texture = this.gl.createTexture();\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n\n    // Set texture parameters\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    // Upload image to texture\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);\n    const error = this.gl.getError();\n    if (error !== this.gl.NO_ERROR || texture === null) {\n      console.error('Paper Shaders: WebGL error when uploading texture:', error);\n      return;\n    }\n\n    // Store the texture\n    this.textures.set(uniformName, texture);\n\n    // Set up texture unit and uniform\n    const location = this.uniformLocations[uniformName];\n    if (location) {\n      // Use texture unit based on the order textures were added\n      const textureUnit = this.textures.size - 1;\n      this.gl.useProgram(this.program);\n      this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);\n      this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n      this.gl.uniform1i(location, textureUnit);\n\n      // Calculate and set the aspect ratio uniform\n      const aspectRatioUniformName = `${uniformName}_aspect_ratio`;\n      const aspectRatioLocation = this.uniformLocations[aspectRatioUniformName];\n      if (aspectRatioLocation) {\n        const aspectRatio = image.naturalWidth / image.naturalHeight;\n        this.gl.uniform1f(aspectRatioLocation, aspectRatio);\n      }\n    }\n  };\n\n  /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */\n  private setUniformValues = (updatedUniforms: ShaderMountUniforms) => {\n    this.gl.useProgram(this.program);\n    Object.entries(updatedUniforms).forEach(([key, value]) => {\n      const location = this.uniformLocations[key];\n      if (!location) {\n        console.warn(`Uniform location for ${key} not found`);\n        return;\n      }\n\n      if (value instanceof HTMLImageElement) {\n        // Texture case, requires a good amount of code so it gets its own function:\n        this.setTextureUniform(key, value);\n      } else if (Array.isArray(value)) {\n        // Array case\n        let flatArray: number[] | null = null;\n        let valueLength: number | null = null;\n\n        // If it's an array of same-sized arrays, flatten it down so we can set the uniform\n        if (value[0] !== undefined && Array.isArray(value[0])) {\n          const firstChildLength = value[0].length;\n          if (value.every((arr) => (arr as number[]).length === firstChildLength)) {\n            // Array of same-sized arrays case, flattens the array sets it\n            flatArray = value.flat();\n            valueLength = firstChildLength;\n          } else {\n            console.warn(`All child arrays must be the same length for ${key}`);\n            return;\n          }\n        } else {\n          // Array of primitive values case, supports 2, 3, 4, 9, 16 length arrays\n          flatArray = value as number[];\n          valueLength = flatArray.length;\n        }\n\n        // Set the uniform based on array length... supports 2, 3, 4, 9, 16 length arrays of primitive values\n        // or arbitrary length arrays of arrays\n        switch (valueLength) {\n          case 2:\n            this.gl.uniform2fv(location, flatArray);\n            break;\n          case 3:\n            this.gl.uniform3fv(location, flatArray);\n            break;\n          case 4:\n            this.gl.uniform4fv(location, flatArray);\n            break;\n          case 9:\n            this.gl.uniformMatrix3fv(location, false, flatArray);\n            break;\n          case 16:\n            this.gl.uniformMatrix4fv(location, false, flatArray);\n            break;\n          default:\n            console.warn(`Unsupported uniform array length: ${valueLength}`);\n        }\n      } else if (typeof value === 'number') {\n        // Number case, supports floats and ints\n        this.gl.uniform1f(location, value);\n      } else if (typeof value === 'boolean') {\n        // Boolean case, supports true and false\n        this.gl.uniform1i(location, value ? 1 : 0);\n      } else {\n        console.warn(`Unsupported uniform type for ${key}: ${typeof value}`);\n      }\n    });\n  };\n\n  /** Gets the current total animation time from 0ms */\n  public getCurrentFrameTime = (): number => {\n    return this.totalFrameTime;\n  };\n\n  /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */\n  public setFrame = (newFrame: number): void => {\n    this.totalFrameTime = newFrame;\n    this.lastRenderTime = performance.now();\n    this.render(performance.now());\n  };\n\n  /** Set an animation speed (or 0 to stop animation) */\n  public setSpeed = (newSpeed: number = 1): void => {\n    // Set the new animation speed\n    this.speed = newSpeed;\n\n    if (this.rafId === null && newSpeed !== 0) {\n      // Moving from 0 to animating, kick off a new rAF loop\n      this.lastRenderTime = performance.now();\n      this.rafId = requestAnimationFrame(this.render);\n    }\n\n    if (this.rafId !== null && newSpeed === 0) {\n      // Moving from animating to not animating, cancel the rAF loop\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  };\n\n  /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */\n  public setMaxPixelCount = (newMaxPixelCount: number = DEFAULT_MAX_PIXEL_COUNT): void => {\n    this.maxPixelCount = newMaxPixelCount;\n\n    this.handleResize();\n  };\n\n  /** Set the minimum pixel ratio for the shader */\n  public setMinPixelRatio = (newMinPixelRatio: number = 2): void => {\n    this.minPixelRatio = newMinPixelRatio;\n\n    this.handleResize();\n  };\n\n  /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */\n  public setUniforms = (newUniforms: ShaderMountUniforms): void => {\n    this.providedUniforms = { ...this.providedUniforms, ...newUniforms };\n\n    // If we need to allow users to add uniforms after the shader has been created, we can do that here\n    // But right now we're expecting the uniform list to be predictable and static\n    // this.setupUniforms();\n\n    this.setUniformValues(newUniforms);\n    this.render(performance.now());\n  };\n\n  /** Dispose of the shader mount, cleaning up all of the WebGL resources */\n  public dispose = (): void => {\n    // Immediately mark as disposed to prevent future renders from leaking in\n    this.hasBeenDisposed = true;\n\n    // Cancel the rAF loop\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.gl && this.program) {\n      // Clean up all textures\n      this.textures.forEach((texture) => {\n        this.gl.deleteTexture(texture);\n      });\n      this.textures.clear();\n\n      this.gl.deleteProgram(this.program);\n      this.program = null;\n\n      // Reset the WebGL context\n      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n      this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);\n      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);\n      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);\n\n      // Clear any errors\n      this.gl.getError();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    visualViewport?.removeEventListener('resize', this.handleVisualViewportChange);\n\n    this.uniformLocations = {};\n\n    // Remove the shader mount from the div wrapper element to avoid any GC issues\n    this.parentElement.paperShaderMount = undefined;\n  };\n}\n\n/** Vertex shader for the shader mount */\nconst 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  v_patternUV += .5;\n\n  // ===================================================\n\n}`;\n\nfunction createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction createProgram(\n  gl: WebGLRenderingContext,\n  vertexShaderSource: string,\n  fragmentShaderSource: string\n): WebGLProgram | null {\n  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\n  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\n  if (!vertexShader || !fragmentShader) return null;\n\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));\n    gl.deleteProgram(program);\n    gl.deleteShader(vertexShader);\n    gl.deleteShader(fragmentShader);\n    return null;\n  }\n\n  // Clean up shaders after successful linking\n  gl.detachShader(program, vertexShader);\n  gl.detachShader(program, fragmentShader);\n  gl.deleteShader(vertexShader);\n  gl.deleteShader(fragmentShader);\n\n  return program;\n}\n\nconst defaultStyle = `@layer paper-shaders {\n  :where([data-paper-shaders]) {\n    isolation: isolate;\n    position: relative;\n\n    & canvas {\n      contain: strict;\n      display: block;\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n    }\n  }\n}`;\n\n/** A canvas element that has a ShaderMount available on it */\nexport interface PaperShaderElement extends HTMLElement {\n  paperShaderMount: ShaderMount | undefined;\n}\n\n/** Check if a canvas element is a ShaderCanvas */\nexport function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement {\n  return 'paperShaderMount' in element;\n}\n\n/** Uniform types that we support to be auto-mapped into the fragment shader */\nexport interface ShaderMountUniforms {\n  [key: string]: boolean | number | number[] | number[][] | HTMLImageElement;\n}\n\nexport interface ShaderMotionParams {\n  speed?: number;\n  frame?: number;\n}\n\nexport type ShaderPreset<T> = {\n  name: string;\n  params: Required<T>;\n};\n\nfunction isSafari() {\n  const ua = navigator.userAgent.toLowerCase();\n  return ua.includes('safari') && !ua.includes('chrome') && !ua.includes('android');\n}\n"],
-  "mappings": "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",
-  "names": ["vertexShaderSource"]
-}

package/dist/shader-sizing.js

@@ -1,193 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-const sizingVariablesDeclaration = `
-in vec2 v_objectUV;
-in vec2 v_responsiveUV;
-in vec2 v_responsiveBoxGivenSize;
-in vec2 v_patternUV;`;
-const sizingDebugVariablesDeclaration = `
-in vec2 v_objectBoxSize;
-in vec2 v_objectHelperBox;
-in vec2 v_responsiveBoxSize;
-in vec2 v_responsiveHelperBox;
-in vec2 v_patternBoxSize;
-in vec2 v_patternHelperBox;`;
-const sizingUniformsDeclaration = `
-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;`;
-const sizingUV = `
-
-  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-  #ifdef USE_PIXELIZATION
-    float pxSize = u_pxSize * u_pixelRatio;
-    vec2 pxSizeUv = gl_FragCoord.xy;
-    pxSizeUv -= .5 * u_resolution;
-    pxSizeUv /= pxSize;
-    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    
-    uv += .5;
-  #endif
-  uv -= .5;
-
-  
-  // ===================================================
-  // sizing params shared between objects and patterns
-  
-  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 objects (graphics with fixed ratio)
-
-  #ifdef USE_OBJECT_SIZING
-    float fixedRatio = 1.;
-    vec2 fixedRatioBoxGivenSize = vec2(
-      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
-      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
-    );
-    vec2 objectBoxSize = vec2(0.);
-    // fit = none
-    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);
-    if (u_fit == 1.) { // fit = contain
-      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);
-    } else if (u_fit == 2.) {  // fit = cover
-      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);
-    }
-    objectBoxSize.y = objectBoxSize.x / fixedRatio;
-    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
-  
-    #ifdef ADD_HELPERS
-      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;
-      objectHelperBox -= .5;
-      objectHelperBox *= objectWorldScale;
-      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  
-    #endif
-  
-    vec2 objectUV = uv;
-    objectUV *= objectWorldScale;
-    objectUV += boxOrigin * (objectWorldScale - 1.);
-    objectUV += vec2(-u_offsetX, u_offsetY);
-    objectUV /= u_scale;
-    objectUV = graphicRotation * objectUV;
-  #endif
-  
-  // ===================================================
- 
-  // ===================================================
-  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)
-  
-  #ifdef USE_PATTERN_SIZING
-    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
-    );
-    vec2 patternBoxSize = vec2(0.);
-    // fit = none
-    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
-    float patternWorldNoFitBoxWidth = patternBoxSize.x;
-    if (u_fit == 1.) {  // fit = contain
-      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
-    } else if (u_fit == 2.) {  // fit = cover
-      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);
-    }
-    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
-    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
-  
-    #ifdef ADD_HELPERS  
-      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;
-      patternHelperBox -= .5;
-      patternHelperBox *= patternWorldScale;
-      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  
-    #endif
-  
-    vec2 patternUV = uv;
-    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
-    patternUV += boxOrigin;
-    patternUV -= boxOrigin / patternWorldScale;
-    patternUV *= u_resolution.xy;
-    patternUV /= u_pixelRatio;
-    if (u_fit > 0.) {
-      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
-    }
-    patternUV /= u_scale;
-    patternUV = graphicRotation * patternUV;
-    patternUV += boxOrigin / patternWorldScale;
-    patternUV -= boxOrigin;
-    patternUV += .5;
-  #endif
-`;
-const drawSizingHelpers = `
-  vec2 worldBoxDist = abs(helperBox);
-  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));
-  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);
-  opacity += boxStroke;
-
-  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);
-  vec2 boxOriginDist = helperBox + boxOriginCopy;
-  boxOriginDist.x *= (boxSize.x / boxSize.y);
-  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));
-  
-  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);
-  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);
-  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));
-  
-  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);
-  opacity += boxOriginPoint;
-  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);
-  opacity += graphicOriginPoint;
-`;
-const defaultObjectSizing = {
-  fit: "contain",
-  scale: 1,
-  rotation: 0,
-  offsetX: 0,
-  offsetY: 0,
-  originX: 0.5,
-  originY: 0.5,
-  worldWidth: 0,
-  worldHeight: 0
-};
-const defaultPatternSizing = {
-  fit: "none",
-  scale: 1,
-  rotation: 0,
-  offsetX: 0,
-  offsetY: 0,
-  originX: 0.5,
-  originY: 0.5,
-  worldWidth: 0,
-  worldHeight: 0
-};
-const ShaderFitOptions = {
-  none: 0,
-  contain: 1,
-  cover: 2
-};
-export {
-  ShaderFitOptions,
-  defaultObjectSizing,
-  defaultPatternSizing,
-  drawSizingHelpers,
-  sizingDebugVariablesDeclaration,
-  sizingUV,
-  sizingUniformsDeclaration,
-  sizingVariablesDeclaration
-};
-//# sourceMappingURL=shader-sizing.js.map

package/dist/shader-sizing.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/shader-sizing.ts"],
-  "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n  - dithering pixelization where all the sizing happens in fragment\n  - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\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\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n Currently, only `objectUV` and `patternUV` are supported.\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part.\n*/\nexport const sizingUV = `\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    uv += .5;\n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \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 objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\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    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(maxBoxSize.x / fixedRatio, maxBoxSize.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\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    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(maxBoxSize.x / patternBoxRatio, maxBoxSize.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n  u_fit: (typeof ShaderFitOptions)[ShaderFit];\n  u_scale: number;\n  u_rotation: number;\n  u_originX: number;\n  u_originY: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_worldWidth: number;\n  u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n  fit?: 'none' | 'contain' | 'cover';\n  scale?: number;\n  rotation?: number;\n  originX?: number;\n  originY?: number;\n  offsetX?: number;\n  offsetY?: number;\n  worldWidth?: number;\n  worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n  fit: 'contain',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n  fit: 'none',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n  none: 0,\n  contain: 1,\n  cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
-  "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmHjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
-  "names": []
-}

package/dist/shader-utils.js

@@ -1,59 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-const declarePI = `
-#define TWO_PI 6.28318530718
-#define PI 3.14159265358979323846
-`;
-const declareRotate = `
-vec2 rotate(vec2 uv, float th) {
-  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
-}
-`;
-const declareRandom = `
-float random(vec2 st) {
-  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
-}
-`;
-const colorBandingFix = `
-  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
-`;
-const declareSimplexNoise = `
-vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
-float snoise(vec2 v) {
-  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-    -0.577350269189626, 0.024390243902439);
-  vec2 i = floor(v + dot(v, C.yy));
-  vec2 x0 = v - i + dot(i, C.xx);
-  vec2 i1;
-  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-  vec4 x12 = x0.xyxy + C.xxzz;
-  x12.xy -= i1;
-  i = mod(i, 289.0);
-  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
-    + i.x + vec3(0.0, i1.x, 1.0));
-  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
-      dot(x12.zw, x12.zw)), 0.0);
-  m = m * m;
-  m = m * m;
-  vec3 x = 2.0 * fract(p * C.www) - 1.0;
-  vec3 h = abs(x) - 0.5;
-  vec3 ox = floor(x + 0.5);
-  vec3 a0 = x - ox;
-  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
-  vec3 g;
-  g.x = a0.x * x0.x + h.x * x0.y;
-  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-  return 130.0 * dot(m, g);
-}
-`;
-export {
-  colorBandingFix,
-  declarePI,
-  declareRandom,
-  declareRotate,
-  declareSimplexNoise
-};
-//# sourceMappingURL=shader-utils.js.map

package/dist/shader-utils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/shader-utils.ts"],
-  "sourcesContent": ["export const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\nexport const declareRotate = `\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\nexport const declareRandom = `\nfloat random(vec2 st) {\n  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n`;\n\n// It does use the standard random function but we don't call it to keep\n// colorBandingFix insertion independent from declareRandom\nexport const colorBandingFix = `\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\nexport const declareSimplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n`;\n"],
-  "mappings": ";;;;;AAAO,MAAM,YAAY;AAAA;AAAA;AAAA;AAKlB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMtB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAQtB,MAAM,kBAAkB;AAAA;AAAA;AAIxB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;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/dithering.js

@@ -1,213 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-import {
-  sizingUniformsDeclaration,
-  sizingUV,
-  drawSizingHelpers
-} from "../shader-sizing";
-import { declareSimplexNoise, declarePI, declareRandom } from "../shader-utils";
-const ditheringFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform float u_time;
-uniform vec2 u_resolution;
-uniform float u_pixelRatio;
-
-${sizingUniformsDeclaration}
-
-uniform vec4 u_color1;
-uniform vec4 u_color2;
-uniform float u_shape;
-uniform float u_type;
-uniform float u_pxSize;
-
-out vec4 fragColor;
-
-${declareSimplexNoise}
-${declarePI}
-${declareRandom}
-
-float getSimplexNoise(vec2 uv, float t) {
-  float noise = .5 * snoise(uv - vec2(0., .3 * t));
-  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));
-
-  return noise;
-}
-
-const int bayer2x2[4] = int[4](0, 2, 3, 1);
-const int bayer4x4[16] = int[16](
-  0,  8,  2, 10,
- 12,  4, 14,  6,
-  3, 11,  1,  9,
- 15,  7, 13,  5
-);
-
-const int bayer8x8[64] = int[64](
-   0, 32,  8, 40,  2, 34, 10, 42,
-  48, 16, 56, 24, 50, 18, 58, 26,
-  12, 44,  4, 36, 14, 46,  6, 38,
-  60, 28, 52, 20, 62, 30, 54, 22,
-   3, 35, 11, 43,  1, 33,  9, 41,
-  51, 19, 59, 27, 49, 17, 57, 25,
-  15, 47,  7, 39, 13, 45,  5, 37,
-  63, 31, 55, 23, 61, 29, 53, 21
-);
-
-float getBayerValue(vec2 uv, int size) {
-  ivec2 pos = ivec2(mod(uv, float(size)));
-  int index = pos.y * size + pos.x;
-
-  if (size == 2) {
-    return float(bayer2x2[index]) / 4.0;
-  } else if (size == 4) {
-    return float(bayer4x4[index]) / 16.0;
-  } else if (size == 8) {
-    return float(bayer8x8[index]) / 64.0;
-  }
-  return 0.0;
-}
-
-
-void main() {
-  float t = .5 * u_time;
-
-  #define USE_PATTERN_SIZING
-  #define USE_OBJECT_SIZING
-  #define USE_PIXELIZATION
-  // #define ADD_HELPERS
-
-  ${sizingUV}
-
-  vec2 dithering_uv = pxSizeUv;
-  vec2 ditheringNoise_uv = uv;
-  vec2 shape_uv = objectUV;
-  if (u_shape < 3.5) {
-    shape_uv = patternUV;
-  }
-
-  float shape = 0.;
-  if (u_shape < 1.5) {
-    // Simplex noise
-    shape_uv *= .001;
-
-    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);
-    shape = smoothstep(0.3, 0.9, shape);
-
-  } else if (u_shape < 2.5) {
-    // Warp
-    shape_uv *= .003;
-
-    for (float i = 1.0; i < 6.0; i++) {
-      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);
-      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);
-    }
-
-    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));
-    shape = smoothstep(0.02, 1., shape);
-
-  } else if (u_shape < 3.5) {
-    // Dots
-    shape_uv *= .05;
-
-    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);
-    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);
-
-    float speed = sign(rand - .5) * ceil(2. + rand);
-    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);
-    shape = pow(shape, 6.);
-
-  } else if (u_shape < 4.5) {
-    // Sine wave
-    shape_uv *= 4.;
-
-    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));
-    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);
-
-  } else if (u_shape < 5.5) {
-    // Ripple
-
-    float dist = length(shape_uv);
-    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
-    shape = waves;
-
-  } else if (u_shape < 6.5) {
-    // Swirl
-
-    float l = length(shape_uv);
-    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;
-    float twist = 1.2;
-    float offset = pow(l, -twist) + angle / TWO_PI;
-    float mid = smoothstep(0., 1., pow(l, twist));
-    shape = mix(0., fract(offset), mid);
-
-  } else {
-    // Sphere
-    shape_uv *= 2.;
-
-    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));
-    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
-    shape = .5 + .5 * dot(lightPos, pos);
-  }
-
-
-  int type = int(floor(u_type));
-  float dithering = 0.0;
-
-  switch (type) {
-    case 1: {
-      dithering = step(random(ditheringNoise_uv), shape);
-    } break;
-    case 2:
-      dithering = getBayerValue(dithering_uv, 2);
-      break;
-    case 3:
-      dithering = getBayerValue(dithering_uv, 4);
-      break;
-    default:
-      dithering = getBayerValue(dithering_uv, 8);
-      break;
-  }
-
-  dithering -= .5;
-  float res = step(.5, shape + dithering);
-
-  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);
-  float opacity = mix(u_color1.a, u_color2.a, res);
-
-  #ifdef ADD_HELPERS
-    vec2 helperBox = objectHelperBox;
-    vec2 boxSize = objectBoxSize;
-    if (u_shape < 3.5) {
-      helperBox = patternHelperBox;
-      boxSize = patternBoxSize;
-    }
-    ${drawSizingHelpers}
-  #endif
-
-  fragColor = vec4(color, opacity);
-}
-`;
-const DitheringShapes = {
-  simplex: 1,
-  warp: 2,
-  dots: 3,
-  wave: 4,
-  ripple: 5,
-  swirl: 6,
-  sphere: 7
-};
-const DitheringTypes = {
-  random: 1,
-  "2x2": 2,
-  "4x4": 3,
-  "8x8": 4
-};
-export {
-  DitheringShapes,
-  DitheringTypes,
-  ditheringFragmentShader
-};
-//# sourceMappingURL=dithering.js.map

package/dist/shaders/dithering.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/shaders/dithering.ts"],
-  "sourcesContent": ["import type { ShaderMotionParams } from '../shader-mount';\nimport {\n  sizingUniformsDeclaration,\n  type ShaderSizingParams,\n  type ShaderSizingUniforms,\n  sizingUV,\n  drawSizingHelpers,\n} from '../shader-sizing';\nimport { declareSimplexNoise, declarePI, declareRandom } from '../shader-utils';\n\n/**\n * Dithering Fragment Shader by Ksenia Kondrashova\n * Applies dithering (4 dithering types available) over the\n * abstract shapes animation (7 animated shapes available)\n *\n * Uniforms include:\n * - u_color1: background color, RGBA\n * - u_color2: pixels color, RGBA\n *\n * - u_shape (float, used as int, 1 to 7):\n *  --- shape = 1: Simplex noise pattern\n *  --- shape = 2: Warp noise pattern\n *  --- shape = 3: Columns if dots moving vertically\n *  --- shape = 4: Sine wave\n *  --- shape = 5: Ripple effect\n *  --- shape = 6: Swirl animation\n *  --- shape = 7: Rotating sphere\n *\n *  - u_type (float, used as int, 1 to 4):\n *  --- type = 1: Random dithering\n *  --- type = 2: 2x2 Bayer matrix\n *  --- type = 3: 4x4 Bayer matrix\n *  --- type = 4: 8x8 Bayer matrix\n *\n * - pxSize (float), relative to canvas resolution\n *\n */\nexport const ditheringFragmentShader: string = `#version 300 es\nprecision mediump float;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\n\n${sizingUniformsDeclaration}\n\nuniform vec4 u_color1;\nuniform vec4 u_color2;\nuniform float u_shape;\nuniform float u_type;\nuniform float u_pxSize;\n\nout vec4 fragColor;\n\n${declareSimplexNoise}\n${declarePI}\n${declareRandom}\n\nfloat getSimplexNoise(vec2 uv, float t) {\n  float noise = .5 * snoise(uv - vec2(0., .3 * t));\n  noise += .5 * snoise(2. * uv + vec2(0., .32 * t));\n\n  return noise;\n}\n\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0,  8,  2, 10,\n 12,  4, 14,  6,\n  3, 11,  1,  9,\n 15,  7, 13,  5\n);\n\nconst int bayer8x8[64] = int[64](\n   0, 32,  8, 40,  2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44,  4, 36, 14, 46,  6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n   3, 35, 11, 43,  1, 33,  9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47,  7, 39, 13, 45,  5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(mod(uv, float(size)));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n\n\nvoid main() {\n  float t = .5 * u_time;\n\n  #define USE_PATTERN_SIZING\n  #define USE_OBJECT_SIZING\n  #define USE_PIXELIZATION\n  // #define ADD_HELPERS\n\n  ${sizingUV}\n\n  vec2 dithering_uv = pxSizeUv;\n  vec2 ditheringNoise_uv = uv;\n  vec2 shape_uv = objectUV;\n  if (u_shape < 3.5) {\n    shape_uv = patternUV;\n  }\n\n  float shape = 0.;\n  if (u_shape < 1.5) {\n    // Simplex noise\n    shape_uv *= .001;\n\n    shape = 0.5 + 0.5 * getSimplexNoise(shape_uv, t);\n    shape = smoothstep(0.3, 0.9, shape);\n\n  } else if (u_shape < 2.5) {\n    // Warp\n    shape_uv *= .003;\n\n    for (float i = 1.0; i < 6.0; i++) {\n      shape_uv.x += 0.6 / i * cos(i * 2.5 * shape_uv.y + t);\n      shape_uv.y += 0.6 / i * cos(i * 1.5 * shape_uv.x + t);\n    }\n\n    shape = .15 / abs(sin(t - shape_uv.y - shape_uv.x));\n    shape = smoothstep(0.02, 1., shape);\n\n  } else if (u_shape < 3.5) {\n    // Dots\n    shape_uv *= .05;\n\n    float stripeIdx = floor(2. * shape_uv.x / TWO_PI);\n    float rand = fract(sin(stripeIdx * 12.9898) * 43758.5453);\n\n    float speed = sign(rand - .5) * ceil(2. + rand);\n    shape = sin(shape_uv.x) * cos(shape_uv.y + speed * t);\n    shape = pow(shape, 6.);\n\n  } else if (u_shape < 4.5) {\n    // Sine wave\n    shape_uv *= 4.;\n\n    float wave = cos(.5 * shape_uv.x - 2. * t) * sin(1.5 * shape_uv.x + t) * (.75 + .25 * cos(3. * t));\n    shape = 1. - smoothstep(-1., 1., shape_uv.y + wave);\n\n  } else if (u_shape < 5.5) {\n    // Ripple\n\n    float dist = length(shape_uv);\n    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;\n    shape = waves;\n\n  } else if (u_shape < 6.5) {\n    // Swirl\n\n    float l = length(shape_uv);\n    float angle = 6. * atan(shape_uv.y, shape_uv.x) + 4. * t;\n    float twist = 1.2;\n    float offset = pow(l, -twist) + angle / TWO_PI;\n    float mid = smoothstep(0., 1., pow(l, twist));\n    shape = mix(0., fract(offset), mid);\n\n  } else {\n    // Sphere\n    shape_uv *= 2.;\n\n    vec3 pos = vec3(shape_uv, sqrt(1. - pow(length(shape_uv), 2.)));\n    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));\n    shape = .5 + .5 * dot(lightPos, pos);\n  }\n\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  switch (type) {\n    case 1: {\n      dithering = step(random(ditheringNoise_uv), shape);\n    } break;\n    case 2:\n      dithering = getBayerValue(dithering_uv, 2);\n      break;\n    case 3:\n      dithering = getBayerValue(dithering_uv, 4);\n      break;\n    default:\n      dithering = getBayerValue(dithering_uv, 8);\n      break;\n  }\n\n  dithering -= .5;\n  float res = step(.5, shape + dithering);\n\n  vec3 color = mix(u_color1.rgb, u_color2.rgb, res);\n  float opacity = mix(u_color1.a, u_color2.a, res);\n\n  #ifdef ADD_HELPERS\n    vec2 helperBox = objectHelperBox;\n    vec2 boxSize = objectBoxSize;\n    if (u_shape < 3.5) {\n      helperBox = patternHelperBox;\n      boxSize = patternBoxSize;\n    }\n    ${drawSizingHelpers}\n  #endif\n\n  fragColor = vec4(color, opacity);\n}\n`;\n\nexport interface DitheringUniforms extends ShaderSizingUniforms {\n  u_color1: [number, number, number, number];\n  u_color2: [number, number, number, number];\n  u_shape: (typeof DitheringShapes)[DitheringShape];\n  u_type: (typeof DitheringTypes)[DitheringType];\n  u_pxSize: number;\n}\n\nexport interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {\n  color1?: string;\n  color2?: string;\n  shape?: DitheringShape;\n  type?: DitheringType;\n  pxSize?: number;\n}\n\nexport const DitheringShapes = {\n  simplex: 1,\n  warp: 2,\n  dots: 3,\n  wave: 4,\n  ripple: 5,\n  swirl: 6,\n  sphere: 7,\n} as const;\n\nexport type DitheringShape = keyof typeof DitheringShapes;\n\nexport const DitheringTypes = {\n  random: 1,\n  '2x2': 2,\n  '4x4': 3,\n  '8x8': 4,\n} as const;\n\nexport type DitheringType = keyof typeof DitheringTypes;\n"],
-  "mappings": ";;;;;AACA;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB,WAAW,qBAAqB;AA6BvD,MAAM,0BAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7C,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzB,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmDX,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyGN,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBhB,MAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAIO,MAAM,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;",
-  "names": []
-}