@paper-design/shaders 0.0.0-canary.156ab35

package/dist/shader-color-spaces.js

@@ -0,0 +1,96 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const ShaderColorSpaces = {
+  rgb: 0,
+  oklch: 1
+};
+const declareOklchTransforms = `
+
+// magic numbers (and magic could be better tbh)
+#define OKLCH_CHROMA_THRESHOLD .001
+#define OKLCH_HUE_NEUTRALIZER - 2.
+
+vec3 srgbToLinear(vec3 srgb) {
+  return pow(srgb, vec3(2.2));
+}
+
+vec3 linearToSrgb(vec3 linear) {
+  return pow(linear, vec3(1.0 / 2.2));
+}
+
+vec3 LrgbToOklab(vec3 rgb) {
+  float L = pow(0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b, 1.0 / 3.0);
+  float M = pow(0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b, 1.0 / 3.0);
+  float S = pow(0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b, 1.0 / 3.0);
+  return vec3(
+    0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,
+    1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,
+    0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S
+  );
+}
+
+vec3 OklabToLrgb(vec3 oklab) {
+  float L = oklab.x;
+  float a = oklab.y;
+  float b = oklab.z;
+
+  float l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  float m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  float s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+  float l = l_ * l_ * l_;
+  float m = m_ * m_ * m_;
+  float s = s_ * s_ * s_;
+
+  return vec3(
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  );
+}
+
+vec3 oklabToOklch(vec3 oklab) {
+  float C = length(oklab.yz);
+  float H = atan(oklab.z, oklab.y);
+  if (C < OKLCH_CHROMA_THRESHOLD) {
+    H = OKLCH_HUE_NEUTRALIZER;
+  }
+  return vec3(oklab.x, C, H);
+}
+
+vec3 oklchToOklab(vec3 oklch) {
+  float a = oklch.y * cos(oklch.z);
+  float b = oklch.y * sin(oklch.z);
+  return vec3(oklch.x, a, b);
+}
+
+float mixHue(float h1, float h2, float mixer) {
+  float delta = mod(h2 - h1 + PI, TWO_PI) - PI;
+  return h1 + mixer * delta;
+}
+
+vec3 srgbToOklab(vec3 rgb) {
+  return oklabToOklch(LrgbToOklab(srgbToLinear(rgb)));
+}
+
+vec3 oklabToSrgb(vec3 oklab) {
+  return linearToSrgb(OklabToLrgb(oklchToOklab(oklab)));
+}
+
+vec3 mixOklabVector(vec3 color1, vec3 color2, float mixer) {
+  color1.x = mix(color1.x, color2.x, mixer);
+  color1.y = mix(color1.y, color2.y, mixer);
+  if (color1.y > OKLCH_CHROMA_THRESHOLD && color2.y > OKLCH_CHROMA_THRESHOLD) {
+    color1.z = mixHue(color1.z, color2.z, mixer);
+  }
+  return color1;
+}
+`;
+export {
+  ShaderColorSpaces,
+  declareOklchTransforms
+};
+//# sourceMappingURL=shader-color-spaces.js.map

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

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

package/dist/shader-mount.d.ts

@@ -0,0 +1,130 @@
+export declare class ShaderMount {
+    parentElement: PaperShaderElement;
+    canvasElement: HTMLCanvasElement;
+    private gl;
+    private program;
+    private uniformLocations;
+    /** The fragment shader that we are using */
+    private fragmentShader;
+    /** Stores the RAF for the render loop */
+    private rafId;
+    /** Time of the last rendered frame */
+    private lastRenderTime;
+    /** Total time that we have played any animation, passed as a uniform to the shader for time-based VFX */
+    private currentFrame;
+    /** The 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 */
+    private speed;
+    /** Actual speed used that accounts for document visibility (we pause the shader if the tab is hidden) */
+    private currentSpeed;
+    /** Uniforms that are provided by the user for the specific shader being mounted (not including uniforms that this Mount adds, like time and resolution) */
+    private providedUniforms;
+    /** Just a sanity check to make sure frames don't run after we're disposed */
+    private hasBeenDisposed;
+    /** If the resolution of the canvas has changed since the last render */
+    private resolutionChanged;
+    /** Store textures that are provided by the user */
+    private textures;
+    private minPixelRatio;
+    private maxPixelCount;
+    private isSafari;
+    private uniformCache;
+    private textureUnitMap;
+    constructor(
+    /** The div you'd like to mount the shader to. The shader will match its size. */
+    parentElement: HTMLElement, fragmentShader: string, uniforms: ShaderMountUniforms, webGlContextAttributes?: WebGLContextAttributes, 
+    /** The speed of the animation, or 0 to stop it. Supports negative values to play in reverse. */
+    speed?: number, 
+    /** Pass a frame to offset the starting u_time value and give deterministic results*/
+    frame?: number, 
+    /**
+     * The minimum pixel ratio to render at, defaults to 2.
+     * May be reduced to improve performance or increased together with `maxPixelCount` to improve antialiasing.
+     */
+    minPixelRatio?: number, 
+    /**
+     * The maximum amount of physical device pixels to render for the shader,
+     * by default it's 1920 * 1080 * 2x dpi (per each side) = 8,294,400 pixels of a 4K screen.
+     * Actual DOM size of the canvas can be larger, it will just lose quality after this.
+     *
+     * May be reduced to improve performance or increased to improve quality on high-resolution screens.
+     */
+    maxPixelCount?: number);
+    private initProgram;
+    private setupPositionAttribute;
+    private setupUniforms;
+    /**
+     * 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
+     */
+    private renderScale;
+    private parentWidth;
+    private parentHeight;
+    private parentDevicePixelWidth;
+    private parentDevicePixelHeight;
+    private devicePixelsSupported;
+    private resizeObserver;
+    private setupResizeObserver;
+    private handleVisualViewportChange;
+    /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
+    private handleResize;
+    private render;
+    private requestRender;
+    /** Creates a texture from an image and sets it into a uniform value */
+    private setTextureUniform;
+    /** Utility: recursive equality test for all the uniforms */
+    private areUniformValuesEqual;
+    /** Sets the provided uniform values into the WebGL program, can be a partial list of uniforms that have changed */
+    private setUniformValues;
+    /** Gets the current total animation time from 0ms */
+    getCurrentFrame: () => number;
+    /** Set a frame to get a deterministic result, frames are literally just milliseconds from zero since the animation started */
+    setFrame: (newFrame: number) => void;
+    /** Set an animation speed (or 0 to stop animation) */
+    setSpeed: (newSpeed?: number) => void;
+    private setCurrentSpeed;
+    /** Set the maximum pixel count for the shader, this will limit the number of pixels that will be rendered */
+    setMaxPixelCount: (newMaxPixelCount?: number) => void;
+    /** Set the minimum pixel ratio for the shader */
+    setMinPixelRatio: (newMinPixelRatio?: number) => void;
+    /** Update the uniforms that are provided by the outside shader, can be a partial set with only the uniforms that have changed */
+    setUniforms: (newUniforms: ShaderMountUniforms) => void;
+    private handleDocumentVisibilityChange;
+    /** Dispose of the shader mount, cleaning up all of the WebGL resources */
+    dispose: () => void;
+}
+/** The parent `<div>` element that has a ShaderMount available on it */
+export interface PaperShaderElement extends HTMLElement {
+    paperShaderMount: ShaderMount | undefined;
+}
+/** Check if an element is a Paper shader element */
+export declare function isPaperShaderElement(element: HTMLElement): element is PaperShaderElement;
+/**
+ * Uniform types that we support to be auto-mapped into the fragment shader
+ *
+ * We accept undefined as a convenience for server rendering, when some things may be undefined
+ * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering
+ */
+export interface ShaderMountUniforms {
+    [key: string]: boolean | number | number[] | number[][] | HTMLImageElement | undefined;
+}
+export interface ShaderMotionParams {
+    speed?: number;
+    frame?: number;
+}
+export type ShaderPreset<T> = {
+    name: string;
+    params: Required<T>;
+};
+export type ImageShaderPreset<T> = {
+    name: string;
+    /**
+     * Params for the shader excluding the image.
+     * Image is excluded as it isn't considered a preset,
+     * e.g. when switching between presets it shouldn't switch the image.
+     *
+     * While we exclude images from presets they should still be set with a default prop value so the code-first usage of shaders remains great.
+     */
+    params: Required<Omit<T, 'image'>>;
+};