@basementstudio/shader-lab 0.1.0 → 1.0.2

package/dist/src/renderer/custom-shader-pass.js

@@ -0,0 +1,79 @@
+import { clamp, float, uniform, vec3, vec4 } from "three/tsl";
+import { CUSTOM_SHADER_ENTRY_EXPORT } from "../lib/editor/custom-shader/shared.js";
+import { compileCustomShaderModule } from "./custom-shader-runtime.js";
+import { PassNode } from "./pass-node.js";
+export class CustomShaderPass extends PassNode {
+    onRuntimeError;
+    compiledSketch = null;
+    compileRequestId = 0;
+    lastCompileSignature = "";
+    timeUniform;
+    constructor(layerId, onRuntimeError) {
+        super(layerId);
+        this.onRuntimeError = onRuntimeError;
+        this.timeUniform = uniform(0);
+        this.rebuildEffectNode();
+    }
+    needsContinuousRender() {
+        return true;
+    }
+    updateParams(params) {
+        const sourceCode = typeof params.sourceCode === "string" ? params.sourceCode : "";
+        const entryExport = typeof params.entryExport === "string" && params.entryExport.trim()
+            ? params.entryExport.trim()
+            : CUSTOM_SHADER_ENTRY_EXPORT;
+        const sourceFileName = typeof params.sourceFileName === "string" ? params.sourceFileName : "";
+        const sourceRevision = typeof params.sourceRevision === "number" ? params.sourceRevision : 0;
+        const compileSignature = [
+            entryExport,
+            sourceCode,
+            sourceFileName,
+            sourceRevision,
+        ].join("\n");
+        if (compileSignature === this.lastCompileSignature) {
+            return;
+        }
+        this.lastCompileSignature = compileSignature;
+        this.compileRequestId += 1;
+        const requestId = this.compileRequestId;
+        void compileCustomShaderModule({
+            entryExport,
+            extraScope: {
+                time: this.timeUniform,
+            },
+            fileName: sourceFileName || "custom-shader.ts",
+            sourceCode,
+        })
+            .then((compiled) => {
+            if (requestId !== this.compileRequestId) {
+                return;
+            }
+            this.compiledSketch = compiled.buildNode;
+            this.onRuntimeError?.(null);
+            this.rebuildEffectNode();
+        })
+            .catch((error) => {
+            if (requestId !== this.compileRequestId) {
+                return;
+            }
+            this.compiledSketch = null;
+            this.onRuntimeError?.(error instanceof Error ? error.message : "Custom shader compilation failed.");
+            this.rebuildEffectNode();
+        });
+    }
+    beforeRender(time) {
+        this.timeUniform.value = time;
+    }
+    buildEffectNode() {
+        if (!this.compiledSketch) {
+            return vec4(vec3(float(0), float(0), float(0)), float(1));
+        }
+        try {
+            return vec4(clamp(this.compiledSketch(), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+        }
+        catch (error) {
+            this.onRuntimeError?.(error instanceof Error ? error.message : "Custom shader execution failed.");
+            return vec4(vec3(float(0), float(0), float(0)), float(1));
+        }
+    }
+}

package/dist/src/renderer/custom-shader-runtime.d.ts

@@ -0,0 +1,16 @@
+import type { TSLNode } from "three/tsl";
+type CompiledShaderModule = {
+    buildNode: () => TSLNode;
+};
+export declare function formatCustomShaderSource({ fileName, sourceCode, }: {
+    fileName?: string;
+    sourceCode: string;
+}): Promise<string>;
+export declare function compileCustomShaderModule({ entryExport, extraScope, fileName, force, sourceCode, }: {
+    entryExport: string;
+    extraScope?: Record<string, unknown>;
+    fileName?: string;
+    force?: boolean;
+    sourceCode: string;
+}): Promise<CompiledShaderModule>;
+export {};

package/dist/src/renderer/custom-shader-runtime.js

@@ -0,0 +1,169 @@
+import * as tsl from "three/tsl";
+import * as shaderUtils from "./shaders/tsl/utils/index.js";
+const PRELUDE = {
+    ...tsl,
+    ...shaderUtils,
+};
+const TRANSPILED_CACHE = new Map();
+let typescriptPromise = null;
+function isNodeLike(value) {
+    return Boolean(value &&
+        typeof value === "object" &&
+        "mul" in value &&
+        "add" in value &&
+        "sub" in value);
+}
+function formatDiagnostics(compiler, diagnostics) {
+    if (!(diagnostics && diagnostics.length > 0)) {
+        return null;
+    }
+    return diagnostics
+        .map((diagnostic) => compiler.flattenDiagnosticMessageText(diagnostic.messageText, "\n"))
+        .join("\n\n");
+}
+function createSourceFile(compiler, fileName, sourceCode) {
+    return compiler.createSourceFile(fileName, sourceCode, compiler.ScriptTarget.ES2020, true, getScriptKind(compiler, fileName));
+}
+function getSourceFileDiagnostics(sourceFile) {
+    return sourceFile.parseDiagnostics;
+}
+function isDirectiveStatement(compiler, statement) {
+    return (compiler.isExpressionStatement(statement) &&
+        compiler.isStringLiteral(statement.expression) &&
+        (statement.expression.text === "use client" ||
+            statement.expression.text === "use server"));
+}
+function statementContainsJsx(compiler, statement) {
+    let containsJsx = false;
+    const visit = (node) => {
+        if (compiler.isJsxElement(node) ||
+            compiler.isJsxSelfClosingElement(node) ||
+            compiler.isJsxFragment(node)) {
+            containsJsx = true;
+            return;
+        }
+        compiler.forEachChild(node, visit);
+    };
+    compiler.forEachChild(statement, visit);
+    return containsJsx;
+}
+async function sanitizeCustomShaderSource({ fileName, sourceCode, }) {
+    const compiler = await getTypeScript();
+    const sourceFile = createSourceFile(compiler, fileName, sourceCode);
+    const diagnosticsMessage = formatDiagnostics(compiler, getSourceFileDiagnostics(sourceFile));
+    if (diagnosticsMessage) {
+        throw new Error(diagnosticsMessage);
+    }
+    const statements = sourceFile.statements.filter((statement) => {
+        if (isDirectiveStatement(compiler, statement)) {
+            return false;
+        }
+        if (compiler.isImportDeclaration(statement) ||
+            compiler.isImportEqualsDeclaration(statement) ||
+            compiler.isExportAssignment(statement)) {
+            return false;
+        }
+        if (compiler.isExportDeclaration(statement) &&
+            statement.moduleSpecifier !== undefined) {
+            return false;
+        }
+        if (statementContainsJsx(compiler, statement)) {
+            return false;
+        }
+        return true;
+    });
+    const sanitizedFile = compiler.factory.updateSourceFile(sourceFile, statements);
+    const printer = compiler.createPrinter({
+        newLine: compiler.NewLineKind.LineFeed,
+    });
+    return `${printer.printFile(sanitizedFile).trim()}\n`;
+}
+function assertNoExplicitImports(sourceCode) {
+    if (/^\s*import[\s{*]/m.test(sourceCode)) {
+        throw new Error("Custom shader imports are resolved through the injected prelude. Remove the imports or paste the whole sketch file and let the custom shader layer strip them.");
+    }
+}
+async function getTypeScript() {
+    if (!typescriptPromise) {
+        typescriptPromise = import("typescript");
+    }
+    return typescriptPromise;
+}
+function getScriptKind(compiler, fileName) {
+    return fileName.endsWith(".tsx")
+        ? compiler.ScriptKind.TSX
+        : compiler.ScriptKind.TS;
+}
+export async function formatCustomShaderSource({ fileName, sourceCode, }) {
+    const compiler = await getTypeScript();
+    const resolvedFileName = fileName ?? "custom-shader.ts";
+    const sourceFile = createSourceFile(compiler, resolvedFileName, sourceCode);
+    const diagnosticsMessage = formatDiagnostics(compiler, getSourceFileDiagnostics(sourceFile));
+    if (diagnosticsMessage) {
+        throw new Error(diagnosticsMessage);
+    }
+    const printer = compiler.createPrinter({
+        newLine: compiler.NewLineKind.LineFeed,
+    });
+    return `${printer.printFile(sourceFile).trim()}\n`;
+}
+export async function compileCustomShaderModule({ entryExport, extraScope, fileName, force = false, sourceCode, }) {
+    const resolvedFileName = fileName ?? "custom-shader.ts";
+    const sanitizedSourceCode = await sanitizeCustomShaderSource({
+        fileName: resolvedFileName,
+        sourceCode,
+    });
+    assertNoExplicitImports(sanitizedSourceCode);
+    const cacheKey = `${entryExport}\n${resolvedFileName}\n${sanitizedSourceCode}`;
+    let outputText = !force ? (TRANSPILED_CACHE.get(cacheKey) ?? null) : null;
+    const compiler = await getTypeScript();
+    if (!outputText) {
+        const transpiled = compiler.transpileModule(sanitizedSourceCode, {
+            compilerOptions: {
+                esModuleInterop: true,
+                jsx: compiler.JsxEmit.ReactJSX,
+                module: compiler.ModuleKind.CommonJS,
+                target: compiler.ScriptTarget.ES2020,
+            },
+            fileName: resolvedFileName,
+            reportDiagnostics: true,
+        });
+        const diagnosticsMessage = formatDiagnostics(compiler, transpiled.diagnostics);
+        if (diagnosticsMessage) {
+            throw new Error(diagnosticsMessage);
+        }
+        outputText = transpiled.outputText;
+        TRANSPILED_CACHE.set(cacheKey, outputText);
+    }
+    const runtimeScope = {
+        ...PRELUDE,
+        ...(extraScope ?? {}),
+    };
+    const scopeNames = Object.keys(runtimeScope);
+    const scopeValues = scopeNames.map((key) => runtimeScope[key]);
+    const module = { exports: {} };
+    const exportsObject = module.exports;
+    const evaluator = new Function("exports", "module", ...scopeNames, `${outputText}\nreturn module.exports;`);
+    let resolvedExports;
+    try {
+        resolvedExports = evaluator(exportsObject, module, ...scopeValues);
+    }
+    catch (error) {
+        throw new Error(error instanceof Error
+            ? error.message
+            : "Custom shader evaluation failed.");
+    }
+    const exported = resolvedExports[entryExport] ?? module.exports[entryExport];
+    if (typeof exported !== "function") {
+        throw new Error(`Expected a named export \`${entryExport}\` that resolves to a TSL sketch function.`);
+    }
+    return {
+        buildNode: () => {
+            const result = exported();
+            if (!isNodeLike(result)) {
+                throw new Error(`The export \`${entryExport}\` did not return a valid TSL node.`);
+            }
+            return result;
+        },
+    };
+}

package/dist/src/renderer/dither-textures.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from "three/webgpu";
+export interface DitherTextures {
+    bayer2: THREE.DataTexture;
+    bayer4: THREE.DataTexture;
+    bayer8: THREE.DataTexture;
+    noise: THREE.DataTexture;
+}
+export declare function buildDitherTextures(): DitherTextures;

package/dist/src/renderer/dither-textures.js

@@ -0,0 +1,66 @@
+import * as THREE from "three/webgpu";
+const BAYER_2X2 = [0, 2, 3, 1];
+const BAYER_4X4 = [
+    0, 8, 2, 10,
+    12, 4, 14, 6,
+    3, 11, 1, 9,
+    15, 7, 13, 5,
+];
+const BAYER_8X8 = [
+    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,
+];
+function buildBayerTexture(values, size) {
+    const normalizer = size * size;
+    const data = new Uint8Array(size * size * 4);
+    for (let index = 0; index < size * size; index += 1) {
+        const channel = Math.round(((values[index] ?? 0) / normalizer) * 255);
+        const offset = index * 4;
+        data[offset] = channel;
+        data[offset + 1] = channel;
+        data[offset + 2] = channel;
+        data[offset + 3] = 255;
+    }
+    const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.UnsignedByteType);
+    texture.magFilter = THREE.NearestFilter;
+    texture.minFilter = THREE.NearestFilter;
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    texture.needsUpdate = true;
+    return texture;
+}
+function buildBlueNoiseTexture(size = 64) {
+    const data = new Uint8Array(size * size * 4);
+    const fract = (value) => value - Math.floor(value);
+    for (let y = 0; y < size; y += 1) {
+        for (let x = 0; x < size; x += 1) {
+            const noise = Math.round(fract(52.9829189 * fract(0.06711056 * x + 0.00583715 * y)) * 255);
+            const offset = (y * size + x) * 4;
+            data[offset] = noise;
+            data[offset + 1] = noise;
+            data[offset + 2] = noise;
+            data[offset + 3] = 255;
+        }
+    }
+    const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.UnsignedByteType);
+    texture.magFilter = THREE.NearestFilter;
+    texture.minFilter = THREE.NearestFilter;
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    texture.needsUpdate = true;
+    return texture;
+}
+export function buildDitherTextures() {
+    return {
+        bayer2: buildBayerTexture(BAYER_2X2, 2),
+        bayer4: buildBayerTexture(BAYER_4X4, 4),
+        bayer8: buildBayerTexture(BAYER_8X8, 8),
+        noise: buildBlueNoiseTexture(),
+    };
+}

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

@@ -0,0 +1,45 @@
+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 DitheringPass extends PassNode {
+    private colorMode;
+    private isAnimated;
+    private readonly colorBlueUniform;
+    private readonly colorGreenUniform;
+    private readonly colorRedUniform;
+    private readonly highlightBlueUniform;
+    private readonly highlightGreenUniform;
+    private readonly highlightRedUniform;
+    private readonly levelsUniform;
+    private readonly logicalHeightUniform;
+    private readonly logicalWidthUniform;
+    private readonly matrixSizeUniform;
+    private readonly pixelSizeUniform;
+    private readonly shadowBlueUniform;
+    private readonly shadowGreenUniform;
+    private readonly shadowRedUniform;
+    private readonly spreadUniform;
+    private readonly textures;
+    private readonly dotScaleUniform;
+    private readonly animateDitherUniform;
+    private readonly ditherSpeedUniform;
+    private readonly timeUniform;
+    private readonly chromaticSplitUniform;
+    private currentTexture;
+    private ditherNode;
+    private ditherNodeG;
+    private ditherNodeB;
+    private readonly placeholder;
+    private sourceTextureNode;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    protected beforeRender(time: number, _delta: number): void;
+    needsContinuousRender(): boolean;
+    updateParams(params: LayerParameterValues): void;
+    dispose(): void;
+    updateLogicalSize(width: number, height: number): void;
+    protected buildEffectNode(): Node;
+}
+export {};

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

@@ -0,0 +1,229 @@
+import * as THREE from "three/webgpu";
+import { abs, clamp, float, floor, fract, max, mix, smoothstep, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import { buildDitherTextures } from "./dither-textures.js";
+import { PassNode } from "./pass-node.js";
+function hexToRgb(hex) {
+    const normalized = hex.trim().replace("#", "");
+    const value = normalized.length === 3
+        ? normalized
+            .split("")
+            .map((entry) => `${entry}${entry}`)
+            .join("")
+        : normalized.padEnd(6, "0").slice(0, 6);
+    return [
+        Number.parseInt(value.slice(0, 2), 16) / 255,
+        Number.parseInt(value.slice(2, 4), 16) / 255,
+        Number.parseInt(value.slice(4, 6), 16) / 255,
+    ];
+}
+export class DitheringPass extends PassNode {
+    colorMode = "source";
+    isAnimated = false;
+    colorBlueUniform;
+    colorGreenUniform;
+    colorRedUniform;
+    highlightBlueUniform;
+    highlightGreenUniform;
+    highlightRedUniform;
+    levelsUniform;
+    logicalHeightUniform;
+    logicalWidthUniform;
+    matrixSizeUniform;
+    pixelSizeUniform;
+    shadowBlueUniform;
+    shadowGreenUniform;
+    shadowRedUniform;
+    spreadUniform;
+    textures;
+    // Effects uniforms
+    dotScaleUniform;
+    animateDitherUniform;
+    ditherSpeedUniform;
+    timeUniform;
+    chromaticSplitUniform;
+    currentTexture;
+    ditherNode = null;
+    ditherNodeG = null;
+    ditherNodeB = null;
+    placeholder;
+    sourceTextureNode = null;
+    constructor(layerId) {
+        super(layerId);
+        this.textures = buildDitherTextures();
+        this.placeholder = new THREE.Texture();
+        this.currentTexture = this.textures.bayer4;
+        this.levelsUniform = uniform(4);
+        this.logicalWidthUniform = uniform(1);
+        this.logicalHeightUniform = uniform(1);
+        this.matrixSizeUniform = uniform(4);
+        this.pixelSizeUniform = uniform(1);
+        this.spreadUniform = uniform(0.5);
+        this.colorRedUniform = uniform(0.96);
+        this.colorGreenUniform = uniform(0.96);
+        this.colorBlueUniform = uniform(0.94);
+        this.shadowRedUniform = uniform(0.06);
+        this.shadowGreenUniform = uniform(0.06);
+        this.shadowBlueUniform = uniform(0.06);
+        this.highlightRedUniform = uniform(0.96);
+        this.highlightGreenUniform = uniform(0.95);
+        this.highlightBlueUniform = uniform(0.91);
+        // Effects uniforms
+        this.dotScaleUniform = uniform(1.0);
+        this.animateDitherUniform = uniform(0.0);
+        this.ditherSpeedUniform = uniform(1.0);
+        this.timeUniform = uniform(0.0);
+        this.chromaticSplitUniform = uniform(0.0);
+        this.rebuildEffectNode();
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        if (this.sourceTextureNode) {
+            this.sourceTextureNode.value = inputTexture;
+        }
+        if (this.ditherNode) {
+            this.ditherNode.value = this.currentTexture;
+        }
+        if (this.ditherNodeG) {
+            this.ditherNodeG.value = this.currentTexture;
+        }
+        if (this.ditherNodeB) {
+            this.ditherNodeB.value = this.currentTexture;
+        }
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    beforeRender(time, _delta) {
+        this.timeUniform.value = time;
+    }
+    needsContinuousRender() {
+        return this.isAnimated;
+    }
+    updateParams(params) {
+        const nextColorMode = params.colorMode === "monochrome" ||
+            params.colorMode === "duo-tone"
+            ? params.colorMode
+            : "source";
+        const [red, green, blue] = hexToRgb(typeof params.monoColor === "string" ? params.monoColor : "#f5f5f0");
+        const [shadowRed, shadowGreen, shadowBlue] = hexToRgb(typeof params.shadowColor === "string" ? params.shadowColor : "#101010");
+        const [highlightRed, highlightGreen, highlightBlue] = hexToRgb(typeof params.highlightColor === "string" ? params.highlightColor : "#f5f2e8");
+        this.colorRedUniform.value = red;
+        this.colorGreenUniform.value = green;
+        this.colorBlueUniform.value = blue;
+        this.shadowRedUniform.value = shadowRed;
+        this.shadowGreenUniform.value = shadowGreen;
+        this.shadowBlueUniform.value = shadowBlue;
+        this.highlightRedUniform.value = highlightRed;
+        this.highlightGreenUniform.value = highlightGreen;
+        this.highlightBlueUniform.value = highlightBlue;
+        this.levelsUniform.value =
+            typeof params.levels === "number" ? Math.max(2, params.levels) : 4;
+        this.pixelSizeUniform.value =
+            typeof params.pixelSize === "number" ? Math.max(1, Math.round(params.pixelSize)) : 1;
+        this.spreadUniform.value =
+            typeof params.spread === "number"
+                ? Math.max(0, Math.min(1, params.spread))
+                : 0.5;
+        switch (params.algorithm) {
+            case "bayer-2x2":
+                this.currentTexture = this.textures.bayer2;
+                this.matrixSizeUniform.value = 2;
+                break;
+            case "bayer-8x8":
+                this.currentTexture = this.textures.bayer8;
+                this.matrixSizeUniform.value = 8;
+                break;
+            case "noise":
+                this.currentTexture = this.textures.noise;
+                this.matrixSizeUniform.value = 64;
+                break;
+            default:
+                this.currentTexture = this.textures.bayer4;
+                this.matrixSizeUniform.value = 4;
+                break;
+        }
+        // Effects params
+        this.dotScaleUniform.value =
+            typeof params.dotScale === "number" ? params.dotScale : 1.0;
+        this.isAnimated = params.animateDither === true;
+        this.animateDitherUniform.value = this.isAnimated ? 1.0 : 0.0;
+        this.ditherSpeedUniform.value =
+            typeof params.ditherSpeed === "number" ? params.ditherSpeed : 1.0;
+        this.chromaticSplitUniform.value = params.chromaticSplit === true ? 1.0 : 0.0;
+        if (nextColorMode !== this.colorMode) {
+            this.colorMode = nextColorMode;
+            this.rebuildEffectNode();
+        }
+    }
+    dispose() {
+        this.placeholder.dispose();
+        this.textures.bayer2.dispose();
+        this.textures.bayer4.dispose();
+        this.textures.bayer8.dispose();
+        this.textures.noise.dispose();
+        super.dispose();
+    }
+    updateLogicalSize(width, height) {
+        this.logicalWidthUniform.value = Math.max(1, width);
+        this.logicalHeightUniform.value = Math.max(1, height);
+    }
+    buildEffectNode() {
+        if (!(this.levelsUniform && this.matrixSizeUniform)) {
+            return this.inputNode;
+        }
+        const pixelSize = max(this.pixelSizeUniform, float(1));
+        const renderTargetUv = vec2(uv().x, float(1).sub(uv().y));
+        const logicalWidth = max(this.logicalWidthUniform.div(pixelSize), float(1));
+        const logicalHeight = max(this.logicalHeightUniform.div(pixelSize), float(1));
+        const logicalDims = vec2(logicalWidth, logicalHeight);
+        // Cell grid
+        const cellCoordinates = vec2(floor(renderTargetUv.x.mul(logicalWidth)), floor(renderTargetUv.y.mul(logicalHeight)));
+        const snappedUv = vec2(cellCoordinates.x.add(0.5).div(logicalWidth), cellCoordinates.y.add(0.5).div(logicalHeight));
+        // Animated Dither: shift ditherUv by time * speed when animate is on
+        const timeOffset = this.timeUniform.mul(this.ditherSpeedUniform).mul(this.animateDitherUniform);
+        const ditherUv = cellCoordinates.div(this.matrixSizeUniform).add(timeOffset);
+        // Chromatic Split: sample dither at 3 offset UVs when enabled
+        const splitOffset = this.chromaticSplitUniform.div(this.matrixSizeUniform);
+        const ditherUvR = ditherUv;
+        const ditherUvG = ditherUv.add(vec2(splitOffset, float(0)));
+        const ditherUvB = ditherUv.add(vec2(float(0), splitOffset));
+        this.sourceTextureNode = tslTexture(this.placeholder, snappedUv);
+        this.ditherNode = tslTexture(this.currentTexture, ditherUvR);
+        this.ditherNodeG = tslTexture(this.currentTexture, ditherUvG);
+        this.ditherNodeB = tslTexture(this.currentTexture, ditherUvB);
+        const src = this.sourceTextureNode;
+        const thresholdR = float(this.ditherNode.r).sub(float(0.5));
+        const thresholdG = float(this.ditherNodeG.r).sub(float(0.5));
+        const thresholdB = float(this.ditherNodeB.r).sub(float(0.5));
+        const levelsMinusOne = max(this.levelsUniform.sub(float(1)), float(1));
+        // Per-channel quantization with independent thresholds
+        const adjustedR = float(src.r).add(thresholdR.mul(this.spreadUniform));
+        const adjustedG = float(src.g).add(thresholdG.mul(this.spreadUniform));
+        const adjustedB = float(src.b).add(thresholdB.mul(this.spreadUniform));
+        const quantizedColor = clamp(vec3(floor(adjustedR.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne), floor(adjustedG.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne), floor(adjustedB.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne)), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1)));
+        // Color mode
+        const quantizedLuma = float(quantizedColor.x)
+            .mul(float(0.2126))
+            .add(float(quantizedColor.y).mul(float(0.7152)))
+            .add(float(quantizedColor.z).mul(float(0.0722)));
+        const monoTint = vec3(this.colorRedUniform, this.colorGreenUniform, this.colorBlueUniform);
+        const shadowTint = vec3(this.shadowRedUniform, this.shadowGreenUniform, this.shadowBlueUniform);
+        const highlightTint = vec3(this.highlightRedUniform, this.highlightGreenUniform, this.highlightBlueUniform);
+        let colorResult;
+        switch (this.colorMode) {
+            case "monochrome":
+                colorResult = vec3(quantizedLuma, quantizedLuma, quantizedLuma).mul(monoTint);
+                break;
+            case "duo-tone":
+                colorResult = mix(shadowTint, highlightTint, quantizedLuma);
+                break;
+            default:
+                colorResult = quantizedColor;
+                break;
+        }
+        // Dot Scale: mask within each cell (square shape only)
+        const cellFrac = fract(renderTargetUv.mul(logicalDims));
+        const centered = cellFrac.sub(vec2(0.5, 0.5));
+        const dist = max(abs(centered.x), abs(centered.y));
+        const halfSize = float(0.5).mul(this.dotScaleUniform);
+        const mask = smoothstep(halfSize, halfSize.sub(float(0.01)), dist);
+        return vec4(vec3(colorResult).mul(mask), float(1));
+    }
+}

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

@@ -0,0 +1,39 @@
+import { type TSLNode } from "three/tsl";
+import type { LayerParameterValues } from "../types/editor";
+import { PassNode } from "./pass-node";
+type Node = TSLNode;
+export declare class GradientPass extends PassNode {
+    private readonly activePointsUniform;
+    private readonly animateUniform;
+    private readonly aspectUniform;
+    private readonly falloffUniform;
+    private readonly glowStrengthUniform;
+    private readonly glowThresholdUniform;
+    private readonly grainAmountUniform;
+    private readonly motionAmountUniform;
+    private readonly motionSpeedUniform;
+    private readonly pointColorUniforms;
+    private readonly pointPositionUniforms;
+    private readonly pointWeightUniforms;
+    private readonly timeUniform;
+    private readonly vignetteRadiusUniform;
+    private readonly vignetteSoftnessUniform;
+    private readonly vignetteStrengthUniform;
+    private noiseSeed;
+    private readonly vortexAmountUniform;
+    private readonly warpAmountUniform;
+    private readonly warpBiasUniform;
+    private readonly warpDecayUniform;
+    private readonly warpScaleUniform;
+    private isAnimated;
+    private noiseMode;
+    private tonemapMode;
+    private warpIterations;
+    constructor(layerId: string);
+    updateParams(params: LayerParameterValues): void;
+    resize(width: number, height: number): void;
+    needsContinuousRender(): boolean;
+    protected beforeRender(time: number): void;
+    protected buildEffectNode(): Node;
+}
+export {};