@basementstudio/shader-lab 0.1.0 → 1.0.2

package/dist/src/easings.d.ts

@@ -0,0 +1,3 @@
+export declare const easings: {
+    easeInOutCubic: (x: number) => number;
+};

package/dist/src/easings.js

@@ -0,0 +1,3 @@
+export const easings = {
+    easeInOutCubic: (x) => x < 0.5 ? 4 * x * x * x : 1 - ((-2 * x + 2) ** 3) / 2,
+};

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export { ShaderLabComposition, type ShaderLabCompositionProps, } from "./shader-lab-composition";
+export { advanceRuntimeClock, createRuntimeClock, type ShaderLabRuntimeClock, } from "./runtime-clock";
+export { buildRuntimeFrame, type ShaderLabRuntimeFrame } from "./runtime-frame";
+export { evaluateTimelineForLayers, resolveEvaluatedLayers, type EvaluatedLayerState, } from "./timeline";
+export type { ShaderLabBlendMode, ShaderLabAnimatedPropertyBinding, ShaderLabAssetSource, ShaderLabCompositeMode, ShaderLabConfig, ShaderLabEffectLayerType, ShaderLabInlineSketchSource, ShaderLabLayerKind, ShaderLabLayerConfig, ShaderLabLayerType, ShaderLabModuleSketchSource, ShaderLabParameterValue, ShaderLabSketchSource, ShaderLabSourceLayerType, ShaderLabTimelineConfig, ShaderLabTimelineInterpolation, ShaderLabTimelineKeyframe, ShaderLabTimelineTrack, } from "./types";

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export { ShaderLabComposition, } from "./shader-lab-composition.js";
+export { advanceRuntimeClock, createRuntimeClock, } from "./runtime-clock.js";
+export { buildRuntimeFrame } from "./runtime-frame.js";
+export { evaluateTimelineForLayers, resolveEvaluatedLayers, } from "./timeline.js";

package/dist/src/lib/editor/custom-shader/shared.d.ts

@@ -0,0 +1 @@
+export declare const CUSTOM_SHADER_ENTRY_EXPORT = "sketch";

package/dist/src/lib/editor/custom-shader/shared.js

@@ -0,0 +1 @@
+export const CUSTOM_SHADER_ENTRY_EXPORT = "sketch";

package/dist/src/renderer/ascii-atlas.d.ts

@@ -0,0 +1,5 @@
+import * as THREE from "three/webgpu";
+export declare const ASCII_CHARSETS: Record<string, string>;
+export type AsciiFontWeight = "thin" | "regular" | "bold";
+export declare const DEFAULT_ASCII_CHARS = " .:-=+*#%@";
+export declare function buildAsciiAtlas(chars: string, fontWeight?: AsciiFontWeight, cellPx?: number): THREE.CanvasTexture;

package/dist/src/renderer/ascii-atlas.js

@@ -0,0 +1,61 @@
+import * as THREE from "three/webgpu";
+export const ASCII_CHARSETS = {
+    binary: "01",
+    blocks: " ░▒▓█",
+    dense: " .',:;!|({#@",
+    hatching: " ╱╲╳░▒",
+    light: " .:-=+*#%@",
+};
+export const DEFAULT_ASCII_CHARS = " .:-=+*#%@";
+function normalizeChars(chars) {
+    return chars.length > 0 ? chars : " ";
+}
+export function buildAsciiAtlas(chars, fontWeight = "regular", cellPx = 16) {
+    const normalizedChars = normalizeChars(chars);
+    const cellSize = Math.max(4, Math.round(cellPx));
+    const fontSize = Math.max(4, Math.floor(cellSize * 0.9));
+    const canvas = document.createElement("canvas");
+    canvas.width = normalizedChars.length * cellSize;
+    canvas.height = cellSize;
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Unable to create 2D context for ASCII atlas");
+    }
+    context.imageSmoothingEnabled = false;
+    context.fillStyle = "#000";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    const weightMap = {
+        bold: "700",
+        regular: "400",
+        thin: "100",
+    };
+    context.fillStyle = "#fff";
+    context.font = `${weightMap[fontWeight]} ${fontSize}px "Geist Mono", monospace`;
+    context.textAlign = "center";
+    context.textBaseline = "alphabetic";
+    for (const [index, char] of [...normalizedChars].entries()) {
+        const metrics = context.measureText(char);
+        const x = Math.round((index + 0.5) * cellSize);
+        const y = Math.round((cellSize + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) * 0.5);
+        context.fillText(char, x, y);
+    }
+    const image = context.getImageData(0, 0, canvas.width, canvas.height);
+    const { data } = image;
+    for (let index = 0; index < data.length; index += 4) {
+        const mask = (data[index] ?? 0) > 96 ? 255 : 0;
+        data[index] = mask;
+        data[index + 1] = mask;
+        data[index + 2] = mask;
+        data[index + 3] = 255;
+    }
+    context.putImageData(image, 0, 0);
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.flipY = false;
+    texture.generateMipmaps = false;
+    texture.magFilter = THREE.NearestFilter;
+    texture.minFilter = THREE.NearestFilter;
+    texture.wrapS = THREE.ClampToEdgeWrapping;
+    texture.wrapT = THREE.ClampToEdgeWrapping;
+    texture.needsUpdate = true;
+    return texture;
+}

package/dist/src/renderer/ascii-pass.d.ts

@@ -0,0 +1,50 @@
+import * as THREE from "three/webgpu";
+import { type TSLNode } from "three/tsl";
+import { PassNode } from "./pass-node";
+import type { LayerParameterValues } from "../types/editor";
+type Node = TSLNode;
+export declare class AsciiPass extends PassNode {
+    private atlasTexture;
+    private atlasTextureNodes;
+    private bloomEnabled;
+    private bloomNode;
+    private readonly bloomIntensityUniform;
+    private readonly bloomRadiusUniform;
+    private readonly bloomSoftnessUniform;
+    private readonly bloomThresholdUniform;
+    private readonly cellSizeUniform;
+    private readonly bgOpacityUniform;
+    private readonly colorModeUniform;
+    private readonly invertUniform;
+    private readonly monoBlueUniform;
+    private readonly monoGreenUniform;
+    private readonly logicalHeightUniform;
+    private readonly logicalWidthUniform;
+    private readonly monoRedUniform;
+    private readonly numCharsUniform;
+    private readonly placeholder;
+    private sourceTextureNodes;
+    private currentCellSize;
+    private currentCharset;
+    private currentCustomChars;
+    private currentFontWeight;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    updateParams(params: LayerParameterValues): void;
+    dispose(): void;
+    updateLogicalSize(width: number, height: number): void;
+    protected buildEffectNode(): Node;
+    private getActiveChars;
+    private getColorModeValue;
+    private rebuildAtlas;
+    private resolveCharset;
+    private resolveColorMode;
+    private resolveFontWeight;
+    private normalizeBloomRadius;
+    private normalizeBloomSoftness;
+    private disposeBloomNode;
+    private getBloomTextureNode;
+    private trackAtlasTextureNode;
+    private trackSourceTextureNode;
+}
+export {};

package/dist/src/renderer/ascii-pass.js

@@ -0,0 +1,271 @@
+import * as THREE from "three/webgpu";
+import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
+import { clamp, float, floor, mix, mod, select, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import { ASCII_CHARSETS, buildAsciiAtlas, DEFAULT_ASCII_CHARS, } from "./ascii-atlas.js";
+import { PassNode } from "./pass-node.js";
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function parseCssColorRgb(value) {
+    const rgba = value.match(/rgba?\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)/i);
+    if (rgba) {
+        return [
+            clamp01(Number.parseFloat(rgba[1] ?? "0") / 255),
+            clamp01(Number.parseFloat(rgba[2] ?? "0") / 255),
+            clamp01(Number.parseFloat(rgba[3] ?? "0") / 255),
+        ];
+    }
+    const hex = value.trim().replace("#", "");
+    if (hex.length === 6) {
+        return [
+            Number.parseInt(hex.slice(0, 2), 16) / 255,
+            Number.parseInt(hex.slice(2, 4), 16) / 255,
+            Number.parseInt(hex.slice(4, 6), 16) / 255,
+        ];
+    }
+    if (hex.length === 3) {
+        return [
+            Number.parseInt(`${hex[0] ?? "0"}${hex[0] ?? "0"}`, 16) / 255,
+            Number.parseInt(`${hex[1] ?? "0"}${hex[1] ?? "0"}`, 16) / 255,
+            Number.parseInt(`${hex[2] ?? "0"}${hex[2] ?? "0"}`, 16) / 255,
+        ];
+    }
+    return [1, 1, 1];
+}
+export class AsciiPass extends PassNode {
+    atlasTexture = null;
+    atlasTextureNodes = [];
+    bloomEnabled = false;
+    bloomNode = null;
+    bloomIntensityUniform;
+    bloomRadiusUniform;
+    bloomSoftnessUniform;
+    bloomThresholdUniform;
+    cellSizeUniform;
+    bgOpacityUniform;
+    colorModeUniform;
+    invertUniform;
+    monoBlueUniform;
+    monoGreenUniform;
+    logicalHeightUniform;
+    logicalWidthUniform;
+    monoRedUniform;
+    numCharsUniform;
+    placeholder;
+    sourceTextureNodes = [];
+    currentCellSize = 12;
+    currentCharset = "light";
+    currentCustomChars = DEFAULT_ASCII_CHARS;
+    currentFontWeight = "regular";
+    constructor(layerId) {
+        super(layerId);
+        this.placeholder = new THREE.Texture();
+        this.bloomIntensityUniform = uniform(1.25);
+        this.bloomRadiusUniform = uniform(6);
+        this.bloomSoftnessUniform = uniform(0.35);
+        this.bloomThresholdUniform = uniform(0.6);
+        this.cellSizeUniform = uniform(12);
+        this.logicalWidthUniform = uniform(1);
+        this.logicalHeightUniform = uniform(1);
+        this.numCharsUniform = uniform(DEFAULT_ASCII_CHARS.length);
+        this.colorModeUniform = uniform(1);
+        this.monoRedUniform = uniform(0.96);
+        this.monoGreenUniform = uniform(0.96);
+        this.monoBlueUniform = uniform(0.94);
+        this.bgOpacityUniform = uniform(0);
+        this.invertUniform = uniform(0);
+        this.atlasTexture = buildAsciiAtlas(DEFAULT_ASCII_CHARS, "regular", this.currentCellSize);
+        this.rebuildEffectNode();
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        for (const sourceTextureNode of this.sourceTextureNodes) {
+            sourceTextureNode.value = inputTexture;
+        }
+        if (this.atlasTexture) {
+            for (const atlasTextureNode of this.atlasTextureNodes) {
+                atlasTextureNode.value = this.atlasTexture;
+            }
+        }
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    updateParams(params) {
+        const nextCellSize = typeof params.cellSize === "number" ? Math.max(4, Math.round(params.cellSize)) : 12;
+        const nextCharset = this.resolveCharset(params.charset);
+        const nextCustomChars = typeof params.customChars === "string" ? params.customChars : DEFAULT_ASCII_CHARS;
+        const nextFontWeight = this.resolveFontWeight(params.fontWeight);
+        const nextColorMode = this.resolveColorMode(params.colorMode);
+        const nextBgOpacity = typeof params.bgOpacity === "number" ? clamp01(params.bgOpacity) : 0;
+        const nextBloomEnabled = params.bloomEnabled === true;
+        const nextBloomIntensity = typeof params.bloomIntensity === "number" ? Math.max(0, params.bloomIntensity) : 1.25;
+        const nextBloomThreshold = typeof params.bloomThreshold === "number" ? clamp01(params.bloomThreshold) : 0.6;
+        const nextBloomRadius = typeof params.bloomRadius === "number" ? Math.max(0, params.bloomRadius) : 6;
+        const nextBloomSoftness = typeof params.bloomSoftness === "number" ? clamp01(params.bloomSoftness) : 0.35;
+        const [red, green, blue] = parseCssColorRgb(typeof params.monoColor === "string" ? params.monoColor : "#f5f5f0");
+        this.cellSizeUniform.value = nextCellSize;
+        this.bgOpacityUniform.value = nextBgOpacity;
+        this.bloomIntensityUniform.value = nextBloomIntensity;
+        this.bloomRadiusUniform.value = nextBloomRadius;
+        this.bloomSoftnessUniform.value = nextBloomSoftness;
+        this.bloomThresholdUniform.value = nextBloomThreshold;
+        this.invertUniform.value = params.invert === true ? 1 : 0;
+        this.monoRedUniform.value = red;
+        this.monoGreenUniform.value = green;
+        this.monoBlueUniform.value = blue;
+        this.colorModeUniform.value = this.getColorModeValue(nextColorMode);
+        const needsAtlasRebuild = nextCellSize !== this.currentCellSize ||
+            nextCharset !== this.currentCharset ||
+            nextFontWeight !== this.currentFontWeight ||
+            (nextCharset === "custom" && nextCustomChars !== this.currentCustomChars);
+        this.currentCellSize = nextCellSize;
+        this.currentCharset = nextCharset;
+        this.currentCustomChars = nextCustomChars;
+        this.currentFontWeight = nextFontWeight;
+        if (nextBloomEnabled !== this.bloomEnabled) {
+            this.bloomEnabled = nextBloomEnabled;
+            this.rebuildEffectNode();
+            return;
+        }
+        if (this.bloomNode) {
+            this.bloomNode.strength.value = nextBloomIntensity;
+            this.bloomNode.radius.value = this.normalizeBloomRadius(nextBloomRadius);
+            this.bloomNode.threshold.value = nextBloomThreshold;
+            this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(nextBloomSoftness);
+        }
+        if (needsAtlasRebuild) {
+            this.rebuildAtlas();
+        }
+    }
+    dispose() {
+        this.disposeBloomNode();
+        this.placeholder.dispose();
+        this.atlasTexture?.dispose();
+        super.dispose();
+    }
+    updateLogicalSize(width, height) {
+        this.logicalWidthUniform.value = Math.max(1, width);
+        this.logicalHeightUniform.value = Math.max(1, height);
+    }
+    buildEffectNode() {
+        if (!(this.cellSizeUniform && this.numCharsUniform && this.placeholder)) {
+            return this.inputNode;
+        }
+        this.disposeBloomNode();
+        this.bloomNode = null;
+        this.sourceTextureNodes = [];
+        this.atlasTextureNodes = [];
+        const renderTargetUv = vec2(uv().x, float(1).sub(uv().y));
+        const logicalScreenSize = vec2(this.logicalWidthUniform, this.logicalHeightUniform);
+        const normalizedCellSize = vec2(this.cellSizeUniform, this.cellSizeUniform).div(logicalScreenSize);
+        const sampleAscii = (sampleUv) => {
+            const safeUv = clamp(sampleUv, vec2(float(0), float(0)), vec2(float(1), float(1)));
+            const screenPixel = floor(safeUv.mul(logicalScreenSize));
+            const cellCenterUv = floor(safeUv.div(normalizedCellSize))
+                .add(vec2(0.5, 0.5))
+                .mul(normalizedCellSize);
+            const localCellPixel = vec2(mod(screenPixel.x, this.cellSizeUniform), mod(screenPixel.y, this.cellSizeUniform));
+            const sampledColor = this.trackSourceTextureNode(cellCenterUv);
+            const luma = float(sampledColor.r)
+                .mul(float(0.2126))
+                .add(float(sampledColor.g).mul(float(0.7152)))
+                .add(float(sampledColor.b).mul(float(0.0722)));
+            const adjustedLuma = select(this.invertUniform.greaterThan(float(0.5)), float(1).sub(luma), luma);
+            const charIndex = floor(clamp(adjustedLuma.mul(this.numCharsUniform.sub(float(1))), float(0), this.numCharsUniform.sub(float(1))));
+            const atlasUv = vec2(charIndex
+                .mul(this.cellSizeUniform)
+                .add(localCellPixel.x)
+                .add(float(0.5))
+                .div(this.numCharsUniform.mul(this.cellSizeUniform)), localCellPixel.y.add(float(0.5)).div(this.cellSizeUniform));
+            const characterMask = float(this.trackAtlasTextureNode(atlasUv).r);
+            const sourceColor = vec3(float(sampledColor.r), float(sampledColor.g), float(sampledColor.b));
+            const monoTint = vec3(this.monoRedUniform, this.monoGreenUniform, this.monoBlueUniform);
+            const monochromeColor = monoTint.mul(adjustedLuma);
+            const greenTerminalColor = vec3(float(0), adjustedLuma, float(0));
+            const glyphColor = select(this.colorModeUniform.lessThan(float(0.5)), sourceColor, select(this.colorModeUniform.lessThan(float(1.5)), monochromeColor, greenTerminalColor));
+            const sourceBackground = sourceColor.mul(this.bgOpacityUniform);
+            const backgroundColor = select(this.colorModeUniform.lessThan(float(0.5)), sourceBackground, vec3(float(0), float(0), float(0)));
+            return {
+                baseColor: mix(backgroundColor, glyphColor, characterMask),
+                emissiveColor: glyphColor.mul(characterMask),
+            };
+        };
+        const baseSample = sampleAscii(renderTargetUv);
+        if (!this.bloomEnabled) {
+            return vec4(baseSample.baseColor, float(1));
+        }
+        const bloomInput = vec4(baseSample.emissiveColor, float(1));
+        this.bloomNode = bloom(bloomInput, this.bloomIntensityUniform.value, this.normalizeBloomRadius(this.bloomRadiusUniform.value), this.bloomThresholdUniform.value);
+        this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(this.bloomSoftnessUniform.value);
+        return vec4(clamp(baseSample.baseColor.add(this.getBloomTextureNode().rgb), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+    }
+    getActiveChars() {
+        return this.currentCharset === "custom"
+            ? this.currentCustomChars || " "
+            : ASCII_CHARSETS[this.currentCharset] ?? DEFAULT_ASCII_CHARS;
+    }
+    getColorModeValue(colorMode) {
+        switch (colorMode) {
+            case "source":
+                return 0;
+            case "green-terminal":
+                return 2;
+            default:
+                return 1;
+        }
+    }
+    rebuildAtlas() {
+        const chars = this.getActiveChars();
+        this.atlasTexture?.dispose();
+        this.atlasTexture = buildAsciiAtlas(chars, this.currentFontWeight, this.currentCellSize);
+        this.numCharsUniform.value = chars.length;
+        this.rebuildEffectNode();
+    }
+    resolveCharset(value) {
+        return value === "binary" ||
+            value === "blocks" ||
+            value === "custom" ||
+            value === "dense" ||
+            value === "hatching" ||
+            value === "light"
+            ? value
+            : "light";
+    }
+    resolveColorMode(value) {
+        return value === "green-terminal" || value === "source" ? value : "monochrome";
+    }
+    resolveFontWeight(value) {
+        return value === "bold" || value === "thin" ? value : "regular";
+    }
+    normalizeBloomRadius(value) {
+        return clamp01(value / 24);
+    }
+    normalizeBloomSoftness(value) {
+        return Math.max(0.001, value * 0.25);
+    }
+    disposeBloomNode() {
+        ;
+        this.bloomNode?.dispose?.();
+    }
+    getBloomTextureNode() {
+        const bloomNode = this.bloomNode;
+        if (!bloomNode) {
+            throw new Error("Bloom node is not initialized");
+        }
+        if ("getTextureNode" in bloomNode && typeof bloomNode.getTextureNode === "function") {
+            return bloomNode.getTextureNode();
+        }
+        if ("getTexture" in bloomNode && typeof bloomNode.getTexture === "function") {
+            return bloomNode.getTexture();
+        }
+        throw new Error("Bloom node does not expose a texture getter");
+    }
+    trackAtlasTextureNode(uvNode) {
+        const atlasTextureNode = tslTexture(this.atlasTexture ?? new THREE.Texture(), uvNode);
+        this.atlasTextureNodes.push(atlasTextureNode);
+        return atlasTextureNode;
+    }
+    trackSourceTextureNode(uvNode) {
+        const sourceTextureNode = tslTexture(this.placeholder, uvNode);
+        this.sourceTextureNodes.push(sourceTextureNode);
+        return sourceTextureNode;
+    }
+}

package/dist/src/renderer/asset-url.d.ts

@@ -0,0 +1 @@
+export declare function resolvePackageAssetUrl(relativePath: string): string;

package/dist/src/renderer/asset-url.js

@@ -0,0 +1,3 @@
+export function resolvePackageAssetUrl(relativePath) {
+    return new URL(`../../../assets/${relativePath}`, import.meta.url).toString();
+}

package/dist/src/renderer/blend-modes.d.ts

@@ -0,0 +1,4 @@
+import { type TSLNode } from "three/tsl";
+type Node = TSLNode;
+export declare function buildBlendNode(mode: string, base: Node, blend: Node, opacity: Node, compositeMode?: "filter" | "mask"): Node;
+export {};

package/dist/src/renderer/blend-modes.js

@@ -0,0 +1,157 @@
+import { abs, clamp, dot, float, max, min, mix, select, sqrt, vec3, vec4, } from "three/tsl";
+function normal(_base, blend) {
+    return blend;
+}
+function multiply(base, blend) {
+    return base.mul(blend);
+}
+function screen(base, blend) {
+    return float(1).sub(float(1).sub(base).mul(float(1).sub(blend)));
+}
+function overlay(base, blend) {
+    const dark = float(2).mul(base).mul(blend);
+    const light = float(1).sub(float(2).mul(float(1).sub(base)).mul(float(1).sub(blend)));
+    return select(base.lessThan(float(0.5)), dark, light);
+}
+function darken(base, blend) {
+    return min(base, blend);
+}
+function lighten(base, blend) {
+    return max(base, blend);
+}
+function colorDodge(base, blend) {
+    return clamp(base.div(max(float(1).sub(blend), float(1e-6))), vec3(0), vec3(1));
+}
+function colorBurn(base, blend) {
+    return clamp(float(1).sub(float(1).sub(base).div(max(blend, float(1e-6)))), vec3(0), vec3(1));
+}
+function hardLight(base, blend) {
+    return overlay(blend, base);
+}
+function softLight(base, blend) {
+    const darkResult = base.sub(float(1).sub(float(2).mul(blend)).mul(base).mul(float(1).sub(base)));
+    const twoBlendMinusOne = float(2).mul(blend).sub(float(1));
+    const dLow = float(16).mul(base).sub(float(12)).mul(base).add(float(4)).mul(base);
+    const dHigh = sqrt(base);
+    const d = select(base.lessThanEqual(float(0.25)), dLow, dHigh);
+    const lightResult = base.add(twoBlendMinusOne.mul(d.sub(base)));
+    return select(blend.lessThanEqual(float(0.5)), darkResult, lightResult);
+}
+function difference(base, blend) {
+    return abs(base.sub(blend));
+}
+function exclusion(base, blend) {
+    return base.add(blend).sub(float(2).mul(base).mul(blend));
+}
+function lum(color) {
+    return dot(color, vec3(0.2126, 0.7152, 0.0722));
+}
+function clipColor(color) {
+    const luma = lum(color);
+    const colorMin = min(color.x, min(color.y, color.z));
+    const lowClipped = color
+        .sub(luma)
+        .mul(luma.div(max(luma.sub(colorMin), float(1e-6))))
+        .add(luma);
+    const lowAdjusted = select(colorMin.lessThan(float(0)), lowClipped, color);
+    const maxAfterLow = max(lowAdjusted.x, max(lowAdjusted.y, lowAdjusted.z));
+    const excess = maxAfterLow.sub(float(1));
+    const highClipped = lowAdjusted
+        .sub(luma)
+        .mul(float(1).sub(luma).div(max(excess, float(1e-6))))
+        .add(luma);
+    return select(maxAfterLow.greaterThan(float(1)), highClipped, lowAdjusted);
+}
+function setLum(color, nextLum) {
+    return clipColor(color.add(nextLum.sub(lum(color))));
+}
+function sat(color) {
+    return max(color.x, max(color.y, color.z)).sub(min(color.x, min(color.y, color.z)));
+}
+function setSat(color, nextSat) {
+    const red = color.x;
+    const green = color.y;
+    const blue = color.z;
+    const colorMin = min(red, min(green, blue));
+    const colorMax = max(red, max(green, blue));
+    const delta = colorMax.sub(colorMin);
+    const scale = select(delta.greaterThan(float(0)), nextSat.div(delta), float(0));
+    const redOut = select(red.lessThanEqual(colorMin), float(0), select(red.greaterThanEqual(colorMax), nextSat, red.sub(colorMin).mul(scale)));
+    const greenOut = select(green.lessThanEqual(colorMin), float(0), select(green.greaterThanEqual(colorMax), nextSat, green.sub(colorMin).mul(scale)));
+    const blueOut = select(blue.lessThanEqual(colorMin), float(0), select(blue.greaterThanEqual(colorMax), nextSat, blue.sub(colorMin).mul(scale)));
+    return vec3(redOut, greenOut, blueOut);
+}
+function hue(base, blend) {
+    return setLum(setSat(blend, sat(base)), lum(base));
+}
+function saturation(base, blend) {
+    return setLum(setSat(base, sat(blend)), lum(base));
+}
+function color(base, blend) {
+    return setLum(blend, lum(base));
+}
+function luminosity(base, blend) {
+    return setLum(base, lum(blend));
+}
+export function buildBlendNode(mode, base, blend, opacity, compositeMode = "filter") {
+    const baseRgb = base.rgb;
+    const blendRgb = blend.rgb;
+    const normalizedOpacity = float(clamp(opacity, float(0), float(1)));
+    let composited;
+    switch (mode) {
+        case "multiply":
+            composited = multiply(baseRgb, blendRgb);
+            break;
+        case "screen":
+            composited = screen(baseRgb, blendRgb);
+            break;
+        case "overlay":
+            composited = overlay(baseRgb, blendRgb);
+            break;
+        case "darken":
+            composited = darken(baseRgb, blendRgb);
+            break;
+        case "lighten":
+            composited = lighten(baseRgb, blendRgb);
+            break;
+        case "color-dodge":
+            composited = colorDodge(baseRgb, blendRgb);
+            break;
+        case "color-burn":
+            composited = colorBurn(baseRgb, blendRgb);
+            break;
+        case "hard-light":
+            composited = hardLight(baseRgb, blendRgb);
+            break;
+        case "soft-light":
+            composited = softLight(baseRgb, blendRgb);
+            break;
+        case "difference":
+            composited = difference(baseRgb, blendRgb);
+            break;
+        case "exclusion":
+            composited = exclusion(baseRgb, blendRgb);
+            break;
+        case "hue":
+            composited = hue(baseRgb, blendRgb);
+            break;
+        case "saturation":
+            composited = saturation(baseRgb, blendRgb);
+            break;
+        case "color":
+            composited = color(baseRgb, blendRgb);
+            break;
+        case "luminosity":
+            composited = luminosity(baseRgb, blendRgb);
+            break;
+        default:
+            composited = normal(baseRgb, blendRgb);
+            break;
+    }
+    if (compositeMode === "filter") {
+        return vec4(mix(baseRgb, composited, normalizedOpacity), float(1));
+    }
+    const maskLuma = float(dot(blendRgb, vec3(0.2126, 0.7152, 0.0722)));
+    const maskStrength = mix(float(1), clamp(maskLuma, float(0), float(1)), normalizedOpacity);
+    return vec4(baseRgb.mul(maskStrength), float(1));
+}

package/dist/src/renderer/contracts.d.ts

@@ -0,0 +1,26 @@
+import type { ShaderLabConfig, ShaderLabLayerConfig } from "../types";
+export interface RendererSize {
+    height: number;
+    width: number;
+}
+export interface ProjectClock {
+    delta: number;
+    duration: number;
+    loop: boolean;
+    time: number;
+}
+export interface RendererFrame {
+    clock: ProjectClock;
+    layers: ShaderLabLayerConfig[];
+    logicalSize: ShaderLabConfig["composition"];
+    outputSize: RendererSize;
+    pixelRatio: number;
+    viewportSize: RendererSize;
+}
+export interface RuntimeRenderer {
+    dispose(): void;
+    initialize(): Promise<void>;
+    render(frame: RendererFrame): boolean;
+    resize(size: RendererSize, pixelRatio: number): void;
+}
+export declare function buildRendererFrame(config: ShaderLabConfig, time: number, delta: number, pixelRatio: number, viewportSize: RendererSize): RendererFrame;

package/dist/src/renderer/contracts.js

@@ -0,0 +1,13 @@
+import { createRuntimeClock } from "../runtime-clock.js";
+import { resolveEvaluatedLayers } from "../timeline.js";
+export function buildRendererFrame(config, time, delta, pixelRatio, viewportSize) {
+    const layers = resolveEvaluatedLayers(config.layers, config.timeline.tracks, time).filter((layer) => layer.visible);
+    return {
+        clock: createRuntimeClock(config.timeline, time, delta),
+        layers,
+        logicalSize: viewportSize,
+        outputSize: viewportSize,
+        pixelRatio,
+        viewportSize,
+    };
+}

package/dist/src/renderer/create-webgpu-renderer.d.ts

@@ -0,0 +1,3 @@
+import type { RuntimeRenderer } from "./contracts";
+export declare function browserSupportsWebGPU(): boolean;
+export declare function createWebGPURenderer(canvas: HTMLCanvasElement, onRuntimeError?: (message: string | null) => void): Promise<RuntimeRenderer>;

package/dist/src/renderer/create-webgpu-renderer.js

@@ -0,0 +1,37 @@
+import * as THREE from "three/webgpu";
+import { PipelineManager } from "./pipeline-manager.js";
+export function browserSupportsWebGPU() {
+    return typeof navigator !== "undefined" && "gpu" in navigator;
+}
+export async function createWebGPURenderer(canvas, onRuntimeError) {
+    const renderer = new THREE.WebGPURenderer({
+        alpha: false,
+        antialias: true,
+        canvas,
+    });
+    let pipeline = null;
+    return {
+        async initialize() {
+            await renderer.init();
+            renderer.setClearColor("#0a0d10", 1);
+        },
+        resize(size, pixelRatio) {
+            renderer.setPixelRatio(pixelRatio);
+            renderer.setSize(size.width, size.height, false);
+            pipeline?.resize(size);
+        },
+        render(frame) {
+            if (!pipeline) {
+                pipeline = new PipelineManager(renderer, frame.viewportSize, onRuntimeError);
+            }
+            pipeline.updateLogicalSize(frame.logicalSize);
+            pipeline.syncLayers([...frame.layers].reverse());
+            return pipeline.render(frame.clock.time, frame.clock.delta);
+        },
+        dispose() {
+            renderer.setAnimationLoop(null);
+            pipeline?.dispose();
+            renderer.dispose();
+        },
+    };
+}