@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -0,0 +1,120 @@
+import * as THREE from "three/webgpu";
+import { clamp, cos, float, mix, sin, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import { buildBlendNode } from "./blend-modes.js";
+export class PassNode {
+    layerId;
+    enabled = true;
+    scene;
+    camera;
+    material;
+    inputNode;
+    effectNode;
+    hueUniform;
+    saturationUniform;
+    opacityUniform;
+    blendMode = "normal";
+    compositeMode = "filter";
+    constructor(layerId) {
+        this.layerId = layerId;
+        this.scene = new THREE.Scene();
+        this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        this.material = new THREE.MeshBasicNodeMaterial();
+        this.opacityUniform = uniform(1);
+        this.hueUniform = uniform(0);
+        this.saturationUniform = uniform(1);
+        const placeholder = new THREE.Texture();
+        const renderTargetUv = vec2(uv().x, float(1).sub(uv().y));
+        this.inputNode = tslTexture(placeholder, renderTargetUv);
+        this.effectNode = this.buildEffectNode();
+        this.rebuildColorNode();
+        const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.material);
+        mesh.frustumCulled = false;
+        this.scene.add(mesh);
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        this.inputNode.value = inputTexture;
+        this.beforeRender(time, delta);
+        renderer.setRenderTarget(outputTarget);
+        renderer.render(this.scene, this.camera);
+    }
+    updateOpacity(opacity) {
+        this.opacityUniform.value = opacity;
+    }
+    updateBlendMode(blendMode) {
+        if (blendMode === this.blendMode) {
+            return false;
+        }
+        this.blendMode = blendMode;
+        this.rebuildColorNode();
+        this.material.needsUpdate = true;
+        return true;
+    }
+    updateCompositeMode(compositeMode) {
+        if (compositeMode === this.compositeMode) {
+            return false;
+        }
+        this.compositeMode = compositeMode;
+        this.rebuildColorNode();
+        this.material.needsUpdate = true;
+        return true;
+    }
+    updateLayerColorAdjustments(hue, saturation) {
+        this.hueUniform.value = (hue * Math.PI) / 180;
+        this.saturationUniform.value = Math.max(0, saturation);
+    }
+    updateParams(_params) {
+        // Default pass has no per-layer parameter handling.
+    }
+    resize(_width, _height) {
+        // Default pass has no resize-dependent uniforms.
+    }
+    updateLogicalSize(_width, _height) {
+        // Default pass has no logical-size-dependent uniforms.
+    }
+    needsContinuousRender() {
+        return false;
+    }
+    dispose() {
+        this.scene.clear();
+        this.material.dispose();
+    }
+    getMaterialVersion() {
+        return this.material.version;
+    }
+    beforeRender(_time, _delta) {
+        // Default pass has no per-frame work.
+    }
+    buildEffectNode() {
+        return this.inputNode;
+    }
+    rebuildEffectNode() {
+        this.effectNode = this.buildEffectNode();
+        this.rebuildColorNode();
+        this.material.needsUpdate = true;
+    }
+    rebuildColorNode() {
+        const adjustedEffectNode = this.applySharedColorAdjustments(this.effectNode);
+        this.material.colorNode = buildBlendNode(this.blendMode, this.inputNode, adjustedEffectNode, this.opacityUniform, this.compositeMode);
+    }
+    applySharedColorAdjustments(sourceNode) {
+        const sourceColor = vec3(float(sourceNode.r), float(sourceNode.g), float(sourceNode.b));
+        const luma = float(sourceColor.x)
+            .mul(float(0.2126))
+            .add(float(sourceColor.y).mul(float(0.7152)))
+            .add(float(sourceColor.z).mul(float(0.0722)));
+        const saturated = mix(vec3(luma, luma, luma), sourceColor, this.saturationUniform);
+        const hueCos = float(cos(this.hueUniform));
+        const hueSin = float(sin(this.hueUniform));
+        const rotated = vec3(float(saturated.x)
+            .mul(float(0.213).add(hueCos.mul(float(0.787))).sub(hueSin.mul(float(0.213))))
+            .add(float(saturated.y).mul(float(0.715).sub(hueCos.mul(float(0.715))).sub(hueSin.mul(float(0.715)))))
+            .add(float(saturated.z).mul(float(0.072).sub(hueCos.mul(float(0.072))).add(hueSin.mul(float(0.928))))), float(saturated.x)
+            .mul(float(0.213).sub(hueCos.mul(float(0.213))).add(hueSin.mul(float(0.143))))
+            .add(float(saturated.y).mul(float(0.715).add(hueCos.mul(float(0.285))).add(hueSin.mul(float(0.14)))))
+            .add(float(saturated.z).mul(float(0.072).sub(hueCos.mul(float(0.072))).sub(hueSin.mul(float(0.283))))), float(saturated.x)
+            .mul(float(0.213).sub(hueCos.mul(float(0.213))).sub(hueSin.mul(float(0.787))))
+            .add(float(saturated.y).mul(float(0.715).sub(hueCos.mul(float(0.715))).add(hueSin.mul(float(0.715)))))
+            .add(float(saturated.z).mul(float(0.072).add(hueCos.mul(float(0.928))).add(hueSin.mul(float(0.072))))));
+        return vec4(clamp(rotated, vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+    }
+}

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

@@ -0,0 +1,8 @@
+import * as THREE from "three/webgpu";
+export declare const PATTERN_PRESET_SOURCES: {
+    readonly bars: readonly [string, string, string, string, string, string];
+    readonly candles: readonly [string, string, string, string];
+    readonly shapes: readonly [string, string, string, string, string, string];
+};
+export type PatternPreset = keyof typeof PATTERN_PRESET_SOURCES;
+export declare function buildPatternAtlas(preset: PatternPreset, cellPx?: number): Promise<THREE.CanvasTexture>;

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

@@ -0,0 +1,79 @@
+import * as THREE from "three/webgpu";
+export const PATTERN_PRESET_SOURCES = {
+    bars: [
+        new URL("../../../assets/patterns/bars/1.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/bars/2.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/bars/3.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/bars/4.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/bars/5.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/bars/6.svg", import.meta.url).toString(),
+    ],
+    candles: [
+        new URL("../../../assets/patterns/candles/1.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/candles/2.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/candles/3.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/candles/4.svg", import.meta.url).toString(),
+    ],
+    shapes: [
+        new URL("../../../assets/patterns/shapes/1.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/shapes/2.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/shapes/3.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/shapes/4.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/shapes/5.svg", import.meta.url).toString(),
+        new URL("../../../assets/patterns/shapes/6.svg", import.meta.url).toString(),
+    ],
+};
+function loadSvg(url) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.decoding = "async";
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error(`Unable to load SVG pattern: ${url}`));
+        image.src = url;
+    });
+}
+export async function buildPatternAtlas(preset, cellPx = 16) {
+    const urls = PATTERN_PRESET_SOURCES[preset];
+    const cellSize = Math.max(4, Math.round(cellPx));
+    const images = await Promise.all(urls.map((url) => loadSvg(url)));
+    const canvas = document.createElement("canvas");
+    canvas.width = urls.length * cellSize;
+    canvas.height = cellSize;
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Unable to create 2D context for pattern atlas");
+    }
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.fillStyle = "#000";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.imageSmoothingEnabled = true;
+    for (const [index, image] of images.entries()) {
+        const aspect = image.naturalWidth / Math.max(image.naturalHeight, 1);
+        const drawWidth = aspect >= 1 ? cellSize : cellSize * aspect;
+        const drawHeight = aspect >= 1 ? cellSize / Math.max(aspect, 0.0001) : cellSize;
+        const x = index * cellSize + (cellSize - drawWidth) * 0.5;
+        const y = (cellSize - drawHeight) * 0.5;
+        context.drawImage(image, x, y, drawWidth, drawHeight);
+    }
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    const { data } = imageData;
+    for (let index = 0; index < data.length; index += 4) {
+        const alpha = data[index + 3] ?? 0;
+        const luminance = Math.max(data[index] ?? 0, data[index + 1] ?? 0, data[index + 2] ?? 0);
+        const mask = alpha > 0 && luminance > 32 ? 255 : 0;
+        data[index] = mask;
+        data[index + 1] = mask;
+        data[index + 2] = mask;
+        data[index + 3] = 255;
+    }
+    context.putImageData(imageData, 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/pattern-pass.d.ts

@@ -0,0 +1,58 @@
+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 PatternPass extends PassNode {
+    private atlasTexture;
+    private atlasTextureNodes;
+    private bloomEnabled;
+    private bloomNode;
+    private readonly bloomIntensityUniform;
+    private readonly bloomRadiusUniform;
+    private readonly bloomSoftnessUniform;
+    private readonly bloomThresholdUniform;
+    private sourceTextureNodes;
+    private readonly bgOpacityUniform;
+    private readonly cellSizeUniform;
+    private readonly colorModeUniform;
+    private readonly customBgColorUniform;
+    private readonly customColor1Uniform;
+    private readonly customColor2Uniform;
+    private readonly customColor3Uniform;
+    private readonly customColor4Uniform;
+    private readonly customColorCountUniform;
+    private readonly customLuminanceBiasUniform;
+    private readonly invertUniform;
+    private readonly logicalHeightUniform;
+    private readonly logicalWidthUniform;
+    private readonly monoBlueUniform;
+    private readonly monoGreenUniform;
+    private readonly monoRedUniform;
+    private readonly numPatternsUniform;
+    private readonly placeholder;
+    private atlasBuildRequestId;
+    private atlasPending;
+    private currentCellSize;
+    private currentPreset;
+    private needsRefresh;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    updateParams(params: LayerParameterValues): void;
+    updateLogicalSize(width: number, height: number): void;
+    needsContinuousRender(): boolean;
+    dispose(): void;
+    protected buildEffectNode(): Node;
+    private getColorModeValue;
+    private rebuildAtlas;
+    private resolveColorMode;
+    private resolvePreset;
+    private normalizeBloomRadius;
+    private normalizeBloomSoftness;
+    private disposeBloomNode;
+    private getBloomTextureNode;
+    private trackAtlasTextureNode;
+    private trackSourceTextureNode;
+    private setCustomColorUniform;
+}
+export {};

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

@@ -0,0 +1,316 @@
+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 { buildPatternAtlas, } from "./pattern-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 PatternPass extends PassNode {
+    atlasTexture = null;
+    atlasTextureNodes = [];
+    bloomEnabled = false;
+    bloomNode = null;
+    bloomIntensityUniform;
+    bloomRadiusUniform;
+    bloomSoftnessUniform;
+    bloomThresholdUniform;
+    sourceTextureNodes = [];
+    bgOpacityUniform;
+    cellSizeUniform;
+    colorModeUniform;
+    customBgColorUniform;
+    customColor1Uniform;
+    customColor2Uniform;
+    customColor3Uniform;
+    customColor4Uniform;
+    customColorCountUniform;
+    customLuminanceBiasUniform;
+    invertUniform;
+    logicalHeightUniform;
+    logicalWidthUniform;
+    monoBlueUniform;
+    monoGreenUniform;
+    monoRedUniform;
+    numPatternsUniform;
+    placeholder;
+    atlasBuildRequestId = 0;
+    atlasPending = false;
+    currentCellSize = 12;
+    currentPreset = "bars";
+    needsRefresh = false;
+    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.bgOpacityUniform = uniform(0);
+        this.cellSizeUniform = uniform(12);
+        this.colorModeUniform = uniform(0);
+        this.customColorCountUniform = uniform(4);
+        this.customLuminanceBiasUniform = uniform(0);
+        this.customBgColorUniform = uniform(new THREE.Vector3(0.96, 0.96, 0.94));
+        this.customColor1Uniform = uniform(new THREE.Vector3(0.05, 0.063, 0.078));
+        this.customColor2Uniform = uniform(new THREE.Vector3(0.302, 0.314, 0.341));
+        this.customColor3Uniform = uniform(new THREE.Vector3(0.588, 0.604, 0.635));
+        this.customColor4Uniform = uniform(new THREE.Vector3(0.882, 0.886, 0.871));
+        this.invertUniform = uniform(0);
+        this.logicalWidthUniform = uniform(1);
+        this.logicalHeightUniform = uniform(1);
+        this.monoRedUniform = uniform(0.96);
+        this.monoGreenUniform = uniform(0.96);
+        this.monoBlueUniform = uniform(0.94);
+        this.numPatternsUniform = uniform(1);
+        this.rebuildAtlas();
+        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);
+        this.needsRefresh = false;
+    }
+    updateParams(params) {
+        const nextCellSize = typeof params.cellSize === "number" ? Math.max(4, Math.round(params.cellSize)) : 12;
+        const nextPreset = this.resolvePreset(params.preset);
+        const nextColorMode = this.resolveColorMode(params.colorMode);
+        const nextBgOpacity = typeof params.bgOpacity === "number" ? clamp01(params.bgOpacity) : 0;
+        const nextCustomColorCount = typeof params.customColorCount === "number"
+            ? Math.min(4, Math.max(2, Math.round(params.customColorCount)))
+            : 4;
+        const nextCustomLuminanceBias = typeof params.customLuminanceBias === "number"
+            ? Math.min(1, Math.max(-1, params.customLuminanceBias))
+            : 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.bgOpacityUniform.value = nextBgOpacity;
+        this.bloomIntensityUniform.value = nextBloomIntensity;
+        this.bloomRadiusUniform.value = nextBloomRadius;
+        this.bloomSoftnessUniform.value = nextBloomSoftness;
+        this.bloomThresholdUniform.value = nextBloomThreshold;
+        this.cellSizeUniform.value = nextCellSize;
+        this.colorModeUniform.value = this.getColorModeValue(nextColorMode);
+        this.customColorCountUniform.value = nextCustomColorCount;
+        this.customLuminanceBiasUniform.value = nextCustomLuminanceBias;
+        this.invertUniform.value = params.invert === true ? 1 : 0;
+        this.monoRedUniform.value = red;
+        this.monoGreenUniform.value = green;
+        this.monoBlueUniform.value = blue;
+        this.setCustomColorUniform(this.customBgColorUniform, typeof params.customBgColor === "string" ? params.customBgColor : "#F5F5F0");
+        this.setCustomColorUniform(this.customColor1Uniform, typeof params.customColor1 === "string" ? params.customColor1 : "#0d1014");
+        this.setCustomColorUniform(this.customColor2Uniform, typeof params.customColor2 === "string" ? params.customColor2 : "#4d5057");
+        this.setCustomColorUniform(this.customColor3Uniform, typeof params.customColor3 === "string" ? params.customColor3 : "#969aa2");
+        this.setCustomColorUniform(this.customColor4Uniform, typeof params.customColor4 === "string" ? params.customColor4 : "#e1e2de");
+        const needsAtlasRebuild = nextCellSize !== this.currentCellSize || nextPreset !== this.currentPreset;
+        this.currentCellSize = nextCellSize;
+        this.currentPreset = nextPreset;
+        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();
+        }
+    }
+    updateLogicalSize(width, height) {
+        this.logicalWidthUniform.value = Math.max(1, width);
+        this.logicalHeightUniform.value = Math.max(1, height);
+    }
+    needsContinuousRender() {
+        return this.atlasPending || this.needsRefresh;
+    }
+    dispose() {
+        this.disposeBloomNode();
+        this.placeholder.dispose();
+        this.atlasTexture?.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!(this.cellSizeUniform && this.numPatternsUniform && 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 quantizeLevels = vec3(float(7), float(7), float(3));
+        const inverseQuantizeLevels = vec3(float(1 / 7), float(1 / 7), float(1 / 3));
+        const customBgVec = vec3(float(this.customBgColorUniform.x), float(this.customBgColorUniform.y), float(this.customBgColorUniform.z));
+        const customColor1Vec = vec3(float(this.customColor1Uniform.x), float(this.customColor1Uniform.y), float(this.customColor1Uniform.z));
+        const customColor2Vec = vec3(float(this.customColor2Uniform.x), float(this.customColor2Uniform.y), float(this.customColor2Uniform.z));
+        const customColor3Vec = vec3(float(this.customColor3Uniform.x), float(this.customColor3Uniform.y), float(this.customColor3Uniform.z));
+        const customColor4Vec = vec3(float(this.customColor4Uniform.x), float(this.customColor4Uniform.y), float(this.customColor4Uniform.z));
+        const customColorCount = clamp(float(this.customColorCountUniform), float(2), float(4));
+        const samplePattern = (sampleUv) => {
+            const safeUv = clamp(sampleUv, vec2(float(0), float(0)), vec2(float(1), float(1)));
+            const screenPixel = floor(safeUv.mul(logicalScreenSize));
+            const tileCenterUv = 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(tileCenterUv);
+            const sourceColor = vec3(float(sampledColor.r), float(sampledColor.g), float(sampledColor.b));
+            const luma = float(sampledColor.r)
+                .mul(float(0.299))
+                .add(float(sampledColor.g).mul(float(0.45)))
+                .add(float(sampledColor.b).mul(float(0.114)));
+            const adjustedLuma = select(this.invertUniform.greaterThan(float(0.5)), float(1).sub(luma), luma);
+            const patternIndex = floor(clamp(adjustedLuma.mul(this.numPatternsUniform.sub(float(1))), float(0), this.numPatternsUniform.sub(float(1))));
+            const atlasUv = vec2(patternIndex
+                .mul(this.cellSizeUniform)
+                .add(localCellPixel.x)
+                .add(float(0.5))
+                .div(this.numPatternsUniform.mul(this.cellSizeUniform)), localCellPixel.y.add(float(0.5)).div(this.cellSizeUniform));
+            const patternMask = float(this.trackAtlasTextureNode(atlasUv).r);
+            const quantized = floor(sourceColor.mul(quantizeLevels).add(vec3(0.5, 0.5, 0.5))).mul(inverseQuantizeLevels);
+            const quantizedLuma = float(quantized.x)
+                .mul(float(0.299))
+                .add(float(quantized.y).mul(float(0.45)))
+                .add(float(quantized.z).mul(float(0.114)));
+            const quantizedColor = clamp(mix(vec3(quantizedLuma, quantizedLuma, quantizedLuma), quantized, float(1.2)), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1)));
+            const monochromeColor = vec3(this.monoRedUniform, this.monoGreenUniform, this.monoBlueUniform).mul(adjustedLuma);
+            const customLuminance = clamp(adjustedLuma.add(float(this.customLuminanceBiasUniform).mul(float(0.35))), float(0), float(1));
+            const customColor = select(customColorCount.lessThan(float(2.5)), select(customLuminance.lessThan(float(0.5)), customColor1Vec, customColor2Vec), select(customColorCount.lessThan(float(3.5)), select(customLuminance.lessThan(float(1 / 3)), customColor1Vec, select(customLuminance.lessThan(float(2 / 3)), customColor2Vec, customColor3Vec)), select(customLuminance.lessThan(float(0.25)), customColor1Vec, select(customLuminance.lessThan(float(0.5)), customColor2Vec, select(customLuminance.lessThan(float(0.75)), customColor3Vec, customColor4Vec)))));
+            const patternColor = select(this.colorModeUniform.lessThan(float(0.5)), sourceColor, select(this.colorModeUniform.lessThan(float(1.5)), quantizedColor, select(this.colorModeUniform.lessThan(float(2.5)), monochromeColor, customColor)));
+            const sourceBackground = sourceColor.mul(this.bgOpacityUniform);
+            const backgroundColor = select(this.colorModeUniform.lessThan(float(0.5)), sourceBackground, select(this.colorModeUniform.lessThan(float(2.5)), vec3(float(0), float(0), float(0)), customBgVec));
+            return vec4(mix(backgroundColor, patternColor, patternMask), float(1));
+        };
+        const baseSample = samplePattern(renderTargetUv);
+        if (!this.bloomEnabled) {
+            return baseSample;
+        }
+        this.bloomNode = bloom(vec4(baseSample.rgb, float(1)), this.bloomIntensityUniform.value, this.normalizeBloomRadius(this.bloomRadiusUniform.value), this.bloomThresholdUniform.value);
+        this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(this.bloomSoftnessUniform.value);
+        return vec4(clamp(baseSample.rgb.add(this.getBloomTextureNode().rgb), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+    }
+    getColorModeValue(colorMode) {
+        switch (colorMode) {
+            case "quantized":
+                return 1;
+            case "monochrome":
+                return 2;
+            case "custom":
+                return 3;
+            default:
+                return 0;
+        }
+    }
+    rebuildAtlas() {
+        const requestId = ++this.atlasBuildRequestId;
+        this.atlasPending = true;
+        void buildPatternAtlas(this.currentPreset, this.currentCellSize)
+            .then((atlasTexture) => {
+            if (requestId !== this.atlasBuildRequestId) {
+                atlasTexture.dispose();
+                return;
+            }
+            this.atlasTexture?.dispose();
+            this.atlasTexture = atlasTexture;
+            this.numPatternsUniform.value = atlasTexture.image.width / this.currentCellSize;
+            this.atlasPending = false;
+            this.needsRefresh = true;
+            this.rebuildEffectNode();
+        })
+            .catch(() => {
+            if (requestId !== this.atlasBuildRequestId) {
+                return;
+            }
+            this.atlasPending = false;
+            this.needsRefresh = true;
+        });
+    }
+    resolveColorMode(value) {
+        return value === "quantized" || value === "monochrome" || value === "custom"
+            ? value
+            : "source";
+    }
+    resolvePreset(value) {
+        return value === "candles" || value === "shapes" ? value : "bars";
+    }
+    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;
+    }
+    setCustomColorUniform(target, value) {
+        const [r, g, b] = parseCssColorRgb(value);
+        target.value.set(r, g, b);
+    }
+}

package/dist/src/renderer/pipeline-manager.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three/webgpu";
+import type { ShaderLabLayerConfig } from "../types";
+export declare class PipelineManager {
+    private readonly renderer;
+    private readonly baseScene;
+    private readonly baseCamera;
+    private readonly blitScene;
+    private readonly blitCamera;
+    private readonly blitInputNode;
+    private readonly blitMaterial;
+    private readonly onRuntimeError;
+    private passMap;
+    private passes;
+    private layerSignatures;
+    private dirty;
+    private width;
+    private height;
+    private logicalWidth;
+    private logicalHeight;
+    private rtA;
+    private rtB;
+    constructor(renderer: THREE.WebGPURenderer, size: {
+        height: number;
+        width: number;
+    }, onRuntimeError?: (message: string | null) => void);
+    syncLayers(layers: ShaderLabLayerConfig[]): void;
+    render(time: number, delta: number): boolean;
+    resize(size: {
+        height: number;
+        width: number;
+    }): void;
+    updateLogicalSize(size: {
+        height: number;
+        width: number;
+    }): void;
+    dispose(): void;
+    private applyLayerState;
+    private createPass;
+}