@basementstudio/shader-lab 0.1.0 → 1.0.2

package/dist/src/renderer/pipeline-manager.js

@@ -0,0 +1,287 @@
+import { float, texture as tslTexture, uv, vec2 } from "three/tsl";
+import * as THREE from "three/webgpu";
+import { AsciiPass } from "./ascii-pass.js";
+import { CrtPass } from "./crt-pass.js";
+import { CustomShaderPass } from "./custom-shader-pass.js";
+import { DitheringPass } from "./dithering-pass.js";
+import { GradientPass } from "./gradient-pass.js";
+import { HalftonePass } from "./halftone-pass.js";
+import { InkPass } from "./ink-pass.js";
+import { LivePass } from "./live-pass.js";
+import { MediaPass } from "./media-pass.js";
+import { ParticleGridPass } from "./particle-grid-pass.js";
+import { PatternPass } from "./pattern-pass.js";
+import { PixelSortingPass } from "./pixel-sorting-pass.js";
+import { TextPass } from "./text-pass.js";
+const RENDER_TARGET_OPTIONS = {
+    depthBuffer: false,
+    format: THREE.RGBAFormat,
+    generateMipmaps: false,
+    magFilter: THREE.NearestFilter,
+    minFilter: THREE.NearestFilter,
+    stencilBuffer: false,
+    type: THREE.HalfFloatType,
+};
+function clampUnit(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function parameterValuesSignature(params) {
+    return JSON.stringify(Object.entries(params)
+        .sort(([left], [right]) => left.localeCompare(right))
+        .map(([key, value]) => [key, value]));
+}
+function createLayerSignature(layer) {
+    if (layer.type === "custom-shader") {
+        return [
+            layer.id,
+            layer.kind,
+            layer.type,
+            layer.visible ? "1" : "0",
+            layer.opacity.toFixed(4),
+            layer.hue.toFixed(4),
+            layer.saturation.toFixed(4),
+            layer.blendMode,
+            layer.compositeMode,
+            typeof layer.params.sourceRevision === "number"
+                ? String(layer.params.sourceRevision)
+                : "0",
+            typeof layer.params.sourceMode === "string" ? layer.params.sourceMode : "paste",
+            typeof layer.params.entryExport === "string" ? layer.params.entryExport : "sketch",
+            typeof layer.params.sourceFileName === "string" ? layer.params.sourceFileName : "",
+        ].join("|");
+    }
+    return [
+        layer.id,
+        layer.kind,
+        layer.type,
+        layer.asset?.kind ?? "no-asset",
+        layer.asset?.src ?? "no-src",
+        layer.visible ? "1" : "0",
+        layer.opacity.toFixed(4),
+        layer.hue.toFixed(4),
+        layer.saturation.toFixed(4),
+        layer.blendMode,
+        layer.compositeMode,
+        parameterValuesSignature(layer.params),
+    ].join("|");
+}
+export class PipelineManager {
+    renderer;
+    baseScene;
+    baseCamera;
+    blitScene;
+    blitCamera;
+    blitInputNode;
+    blitMaterial;
+    onRuntimeError;
+    passMap = new Map();
+    passes = [];
+    layerSignatures = new Map();
+    dirty = true;
+    width;
+    height;
+    logicalWidth;
+    logicalHeight;
+    rtA;
+    rtB;
+    constructor(renderer, size, onRuntimeError) {
+        this.renderer = renderer;
+        this.onRuntimeError = onRuntimeError;
+        this.width = Math.max(1, size.width);
+        this.height = Math.max(1, size.height);
+        this.logicalWidth = this.width;
+        this.logicalHeight = this.height;
+        this.baseScene = new THREE.Scene();
+        this.baseCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const baseMaterial = new THREE.MeshBasicMaterial({ color: "#080808" });
+        const baseMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), baseMaterial);
+        baseMesh.frustumCulled = false;
+        this.baseScene.add(baseMesh);
+        this.rtA = new THREE.WebGLRenderTarget(this.width, this.height, RENDER_TARGET_OPTIONS);
+        this.rtB = new THREE.WebGLRenderTarget(this.width, this.height, RENDER_TARGET_OPTIONS);
+        this.blitScene = new THREE.Scene();
+        this.blitCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const blitUv = vec2(uv().x, float(1).sub(uv().y));
+        this.blitInputNode = tslTexture(new THREE.Texture(), blitUv);
+        this.blitMaterial = new THREE.MeshBasicNodeMaterial();
+        this.blitMaterial.colorNode = this.blitInputNode;
+        const blitMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.blitMaterial);
+        blitMesh.frustumCulled = false;
+        this.blitScene.add(blitMesh);
+    }
+    syncLayers(layers) {
+        const incomingIds = new Set(layers.map((layer) => layer.id));
+        for (const [layerId, pass] of this.passMap) {
+            if (incomingIds.has(layerId)) {
+                continue;
+            }
+            pass.dispose();
+            this.passMap.delete(layerId);
+            this.layerSignatures.delete(layerId);
+            this.dirty = true;
+        }
+        const orderedPasses = [];
+        for (const layer of layers) {
+            const signature = createLayerSignature(layer);
+            let pass = this.passMap.get(layer.id);
+            if (!pass) {
+                pass = this.createPass(layer);
+                pass.resize(this.width, this.height);
+                pass.updateLogicalSize(this.logicalWidth, this.logicalHeight);
+                this.passMap.set(layer.id, pass);
+                this.dirty = true;
+            }
+            if (this.layerSignatures.get(layer.id) !== signature) {
+                this.layerSignatures.set(layer.id, signature);
+                this.applyLayerState(pass, layer);
+                this.dirty = true;
+            }
+            orderedPasses.push(pass);
+        }
+        if (orderedPasses.length !== this.passes.length ||
+            orderedPasses.some((pass, index) => this.passes[index] !== pass)) {
+            this.passes = orderedPasses;
+            this.dirty = true;
+        }
+    }
+    render(time, delta) {
+        const activePasses = this.passes.filter((pass) => pass.enabled);
+        const needsContinuousRender = activePasses.some((pass) => pass.needsContinuousRender());
+        if (!(this.dirty || needsContinuousRender)) {
+            return false;
+        }
+        if (activePasses.length === 0) {
+            this.renderer.setRenderTarget(null);
+            this.renderer.render(this.baseScene, this.baseCamera);
+            this.dirty = false;
+            return true;
+        }
+        this.renderer.setRenderTarget(this.rtA);
+        this.renderer.render(this.baseScene, this.baseCamera);
+        let readTarget = this.rtA;
+        let writeTarget = this.rtB;
+        for (const pass of activePasses) {
+            pass.render(this.renderer, readTarget.texture, writeTarget, time, delta);
+            const previousRead = readTarget;
+            readTarget = writeTarget;
+            writeTarget = previousRead;
+        }
+        this.blitInputNode.value = readTarget.texture;
+        this.renderer.setRenderTarget(null);
+        this.renderer.render(this.blitScene, this.blitCamera);
+        this.dirty = false;
+        return true;
+    }
+    resize(size) {
+        this.width = Math.max(1, size.width);
+        this.height = Math.max(1, size.height);
+        this.rtA.setSize(this.width, this.height);
+        this.rtB.setSize(this.width, this.height);
+        for (const pass of this.passMap.values()) {
+            pass.resize(this.width, this.height);
+        }
+        this.dirty = true;
+    }
+    updateLogicalSize(size) {
+        const nextWidth = Math.max(1, size.width);
+        const nextHeight = Math.max(1, size.height);
+        if (nextWidth === this.logicalWidth && nextHeight === this.logicalHeight) {
+            return;
+        }
+        this.logicalWidth = nextWidth;
+        this.logicalHeight = nextHeight;
+        for (const pass of this.passMap.values()) {
+            pass.updateLogicalSize(this.logicalWidth, this.logicalHeight);
+        }
+        this.dirty = true;
+    }
+    dispose() {
+        this.rtA.dispose();
+        this.rtB.dispose();
+        this.blitMaterial.dispose();
+        for (const pass of this.passMap.values()) {
+            pass.dispose();
+        }
+        this.passMap.clear();
+        this.passes = [];
+        this.layerSignatures.clear();
+    }
+    applyLayerState(pass, layer) {
+        pass.enabled = layer.visible;
+        pass.updateOpacity(clampUnit(layer.opacity));
+        pass.updateBlendMode(layer.blendMode);
+        const compositeMode = layer.compositeMode === "mask" ? "mask" : "filter";
+        pass.updateCompositeMode(compositeMode);
+        pass.updateLayerColorAdjustments(layer.hue, layer.saturation);
+        pass.updateParams(layer.params);
+        if (pass instanceof MediaPass) {
+            const asset = layer.asset;
+            if (asset?.kind === "image" || asset?.kind === "video") {
+                void pass
+                    .setMedia(asset.src, asset.kind)
+                    .then(() => {
+                    this.dirty = true;
+                })
+                    .catch((error) => {
+                    this.onRuntimeError?.(error instanceof Error ? error.message : "Failed to load media asset.");
+                    this.dirty = true;
+                });
+            }
+            else {
+                pass.clearMedia();
+            }
+        }
+        if (pass instanceof LivePass) {
+            const facingMode = typeof layer.params.facingMode === "string" ? layer.params.facingMode : "user";
+            if (facingMode !== pass.getFacingMode() || !pass.needsContinuousRender()) {
+                void pass
+                    .startCamera(facingMode)
+                    .then(() => {
+                    this.dirty = true;
+                })
+                    .catch((error) => {
+                    this.onRuntimeError?.(error instanceof Error ? error.message : "Failed to start live camera input.");
+                    this.dirty = true;
+                });
+            }
+        }
+    }
+    createPass(layer) {
+        if (layer.kind === "effect") {
+            switch (layer.type) {
+                case "ascii":
+                    return new AsciiPass(layer.id);
+                case "crt":
+                    return new CrtPass(layer.id);
+                case "dithering":
+                    return new DitheringPass(layer.id);
+                case "halftone":
+                    return new HalftonePass(layer.id);
+                case "ink":
+                    return new InkPass(layer.id);
+                case "particle-grid":
+                    return new ParticleGridPass(layer.id);
+                case "pattern":
+                    return new PatternPass(layer.id);
+                case "pixel-sorting":
+                    return new PixelSortingPass(layer.id);
+            }
+        }
+        if (layer.kind === "source" && (layer.type === "image" || layer.type === "video")) {
+            return new MediaPass(layer.id);
+        }
+        if (layer.kind === "source" && layer.type === "gradient") {
+            return new GradientPass(layer.id);
+        }
+        if (layer.kind === "source" && layer.type === "text") {
+            return new TextPass(layer.id);
+        }
+        if (layer.kind === "source" && layer.type === "custom-shader") {
+            return new CustomShaderPass(layer.id, this.onRuntimeError);
+        }
+        if (layer.kind === "source" && layer.type === "live") {
+            return new LivePass(layer.id);
+        }
+        throw new Error(`Layer "${layer.name}" of type "${layer.type}" is not supported by the package runtime yet.`);
+    }
+}

package/dist/src/renderer/pixel-sorting-pass.d.ts

@@ -0,0 +1,33 @@
+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 PixelSortingPass extends PassNode {
+    private readonly sortScene;
+    private readonly sortCamera;
+    private readonly sortMaterial;
+    private sortRtA;
+    private sortRtB;
+    private readonly blitInputNode;
+    private readonly sortTexNodeA;
+    private readonly sortTexNodeB;
+    private readonly passOffsetUniform;
+    private readonly widthUniform;
+    private readonly heightUniform;
+    private readonly thresholdUniform;
+    private readonly upperThresholdUniform;
+    private readonly directionUniform;
+    private readonly modeUniform;
+    private readonly reverseUniform;
+    private passCount;
+    private width;
+    private height;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    updateParams(params: LayerParameterValues): void;
+    resize(width: number, height: number): void;
+    dispose(): void;
+    protected buildEffectNode(): Node;
+}
+export {};

package/dist/src/renderer/pixel-sorting-pass.js

@@ -0,0 +1,179 @@
+import * as THREE from "three/webgpu";
+import { dot, float, floor, max, min, mod, select, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import { PassNode } from "./pass-node.js";
+export class PixelSortingPass extends PassNode {
+    sortScene;
+    sortCamera;
+    sortMaterial;
+    sortRtA;
+    sortRtB;
+    blitInputNode;
+    sortTexNodeA;
+    sortTexNodeB;
+    passOffsetUniform;
+    widthUniform;
+    heightUniform;
+    thresholdUniform;
+    upperThresholdUniform;
+    directionUniform;
+    modeUniform;
+    reverseUniform;
+    passCount = 150;
+    width = 1;
+    height = 1;
+    constructor(layerId) {
+        super(layerId);
+        this.sortScene = new THREE.Scene();
+        this.sortCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        this.passOffsetUniform = uniform(0);
+        this.widthUniform = uniform(1);
+        this.heightUniform = uniform(1);
+        this.thresholdUniform = uniform(0.25);
+        this.upperThresholdUniform = uniform(1);
+        this.directionUniform = uniform(0);
+        this.modeUniform = uniform(0);
+        this.reverseUniform = uniform(0);
+        const placeholder = new THREE.Texture();
+        // Compute pixel coordinates from flipped UVs
+        const texUv = vec2(uv().x, float(1).sub(uv().y));
+        const dims = vec2(this.widthUniform, this.heightUniform);
+        const pixelCoord = floor(texUv.mul(dims));
+        // Sort axis: horizontal (x) or vertical (y)
+        const isHorizontal = this.directionUniform.lessThan(float(0.5));
+        const sortIdx = select(isHorizontal, pixelCoord.x, pixelCoord.y);
+        const maxIdx = select(isHorizontal, this.widthUniform, this.heightUniform);
+        // Odd-even transposition: alternate pair groupings each pass
+        const pairMod = mod(sortIdx.add(this.passOffsetUniform), float(2));
+        const isLeft = pairMod.lessThan(float(1));
+        // Neighbor pixel coordinate
+        const neighborDir = select(isLeft, float(1), float(-1));
+        const neighborCoord = vec2(select(isHorizontal, pixelCoord.x.add(neighborDir), pixelCoord.x), select(isHorizontal, pixelCoord.y, pixelCoord.y.add(neighborDir)));
+        // Bounds check
+        const neighborIdx = select(isHorizontal, neighborCoord.x, neighborCoord.y);
+        const inBounds = neighborIdx
+            .greaterThanEqual(float(0))
+            .and(neighborIdx.lessThan(maxIdx));
+        // Sample both pixels (snapped to texel centers)
+        const mySnapUv = pixelCoord.add(0.5).div(dims);
+        const neighborSnapUv = neighborCoord.add(0.5).div(dims);
+        this.sortTexNodeA = tslTexture(placeholder, mySnapUv);
+        this.sortTexNodeB = tslTexture(placeholder, neighborSnapUv);
+        const myColor = this.sortTexNodeA;
+        const neighborColor = this.sortTexNodeB;
+        // Sort value: luminance
+        const lumaW = vec3(0.2126, 0.7152, 0.0722);
+        const myLuma = dot(vec3(myColor.r, myColor.g, myColor.b), lumaW);
+        const neighborLuma = dot(vec3(neighborColor.r, neighborColor.g, neighborColor.b), lumaW);
+        // Sort value: warmth (R-B, approximates hue/temperature)
+        const myWarmth = myColor.r.sub(myColor.b);
+        const neighborWarmth = neighborColor.r.sub(neighborColor.b);
+        // Sort value: saturation (HSV)
+        const myMax = max(max(myColor.r, myColor.g), myColor.b);
+        const myMin = min(min(myColor.r, myColor.g), myColor.b);
+        const mySat = select(myMax.greaterThan(float(0.001)), myMax.sub(myMin).div(myMax), float(0));
+        const nMax = max(max(neighborColor.r, neighborColor.g), neighborColor.b);
+        const nMin = min(min(neighborColor.r, neighborColor.g), neighborColor.b);
+        const nSat = select(nMax.greaterThan(float(0.001)), nMax.sub(nMin).div(nMax), float(0));
+        // Select sort value based on mode (0=luma, 1=hue/warmth, 2=saturation)
+        const isSatMode = this.modeUniform.greaterThan(float(1.5));
+        const isHueMode = this.modeUniform.greaterThan(float(0.5));
+        const myValue = select(isSatMode, mySat, select(isHueMode, myWarmth, myLuma));
+        const neighborValue = select(isSatMode, nSat, select(isHueMode, neighborWarmth, neighborLuma));
+        // Validation: both pixels must be within threshold band (luma-based)
+        const myInBand = myLuma
+            .greaterThan(this.thresholdUniform)
+            .and(myLuma.lessThan(this.upperThresholdUniform));
+        const neighborInBand = neighborLuma
+            .greaterThan(this.thresholdUniform)
+            .and(neighborLuma.lessThan(this.upperThresholdUniform));
+        const valid = myInBand.or(neighborInBand);
+        // Sort: swap if left > right (ascending) or left < right (descending/reverse)
+        const leftValue = select(isLeft, myValue, neighborValue);
+        const rightValue = select(isLeft, neighborValue, myValue);
+        const isReverse = this.reverseUniform.greaterThan(float(0.5));
+        const shouldSwap = select(isReverse, rightValue.greaterThan(leftValue), leftValue.greaterThan(rightValue));
+        const doSwap = inBounds.and(valid).and(shouldSwap);
+        const result = vec4(select(doSwap, neighborColor.r, myColor.r), select(doSwap, neighborColor.g, myColor.g), select(doSwap, neighborColor.b, myColor.b), float(1));
+        this.sortMaterial = new THREE.MeshBasicNodeMaterial();
+        this.sortMaterial.colorNode = result;
+        const sortMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.sortMaterial);
+        sortMesh.frustumCulled = false;
+        this.sortScene.add(sortMesh);
+        // Internal ping-pong render targets
+        const rtOptions = {
+            depthBuffer: false,
+            format: THREE.RGBAFormat,
+            generateMipmaps: false,
+            magFilter: THREE.NearestFilter,
+            minFilter: THREE.NearestFilter,
+            stencilBuffer: false,
+            type: THREE.HalfFloatType,
+        };
+        this.sortRtA = new THREE.WebGLRenderTarget(1, 1, rtOptions);
+        this.sortRtB = new THREE.WebGLRenderTarget(1, 1, rtOptions);
+        // Blit node for PassNode pipeline
+        const blitUv = vec2(uv().x, float(1).sub(uv().y));
+        this.blitInputNode = tslTexture(new THREE.Texture(), blitUv);
+        this.rebuildEffectNode();
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        let readTexture = inputTexture;
+        let writeTarget = this.sortRtA;
+        for (let i = 0; i < this.passCount; i++) {
+            this.passOffsetUniform.value = i % 2;
+            this.sortTexNodeA.value = readTexture;
+            this.sortTexNodeB.value = readTexture;
+            renderer.setRenderTarget(writeTarget);
+            renderer.render(this.sortScene, this.sortCamera);
+            if (writeTarget === this.sortRtA) {
+                readTexture = this.sortRtA.texture;
+                writeTarget = this.sortRtB;
+            }
+            else {
+                readTexture = this.sortRtB.texture;
+                writeTarget = this.sortRtA;
+            }
+        }
+        this.blitInputNode.value = readTexture;
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    updateParams(params) {
+        this.thresholdUniform.value =
+            typeof params.threshold === "number" ? params.threshold : 0.25;
+        this.upperThresholdUniform.value =
+            typeof params.upperThreshold === "number" ? params.upperThreshold : 1;
+        this.directionUniform.value = params.direction === "vertical" ? 1 : 0;
+        this.reverseUniform.value = params.reverse === true ? 1 : 0;
+        if (params.mode === "hue") {
+            this.modeUniform.value = 1;
+        }
+        else if (params.mode === "saturation") {
+            this.modeUniform.value = 2;
+        }
+        else {
+            this.modeUniform.value = 0;
+        }
+        const range = typeof params.range === "number" ? params.range : 0.3;
+        this.passCount = Math.max(1, Math.round(range * 300));
+    }
+    resize(width, height) {
+        this.width = Math.max(1, width);
+        this.height = Math.max(1, height);
+        this.widthUniform.value = this.width;
+        this.heightUniform.value = this.height;
+        this.sortRtA.setSize(this.width, this.height);
+        this.sortRtB.setSize(this.width, this.height);
+    }
+    dispose() {
+        this.sortRtA.dispose();
+        this.sortRtB.dispose();
+        this.sortMaterial.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.blitInputNode) {
+            return this.inputNode;
+        }
+        return vec4(this.blitInputNode.r, this.blitInputNode.g, this.blitInputNode.b, float(1));
+    }
+}

package/dist/src/renderer/shaders/tsl/color/tonemapping.d.ts

@@ -0,0 +1,9 @@
+export declare const reinhardTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const totosTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const acesTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const crossProcessTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const bleachBypassTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const technicolorTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const cinematicTonemap: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const tanh: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const uncharted2Tonemap: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/color/tonemapping.js

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import { Fn, dot, exp, mix, pow, smoothstep, vec3 } from "three/tsl";
+export const reinhardTonemap = Fn(([color]) => {
+    return color.div(color.add(1.0));
+});
+export const totosTonemap = Fn(([color]) => {
+    const compressed = color
+        .mul(vec3(1.18, 1.04, 0.94))
+        .div(color.mul(vec3(0.82, 0.9, 0.98)).add(vec3(0.78, 0.68, 0.6)));
+    const lum = dot(compressed, vec3(0.2126, 0.7152, 0.0722));
+    const shadowLift = smoothstep(0.0, 0.38, lum);
+    const highlightRoll = smoothstep(0.42, 1.0, lum);
+    const toneMix = smoothstep(0.16, 0.82, lum);
+    const cool = vec3(compressed.x.mul(0.82), compressed.y.mul(0.98).add(shadowLift.mul(0.04)), compressed.z.mul(1.24).add(shadowLift.mul(0.08)));
+    const warm = vec3(compressed.x.mul(1.14).add(highlightRoll.mul(0.08)), compressed.y.mul(1.03).add(highlightRoll.mul(0.03)), compressed.z.mul(0.84));
+    const splitToned = mix(cool, warm, toneMix);
+    const curved = vec3(pow(splitToned.x, 0.86), pow(splitToned.y, 0.95), pow(splitToned.z, 1.12));
+    const bleach = mix(curved, vec3(lum), highlightRoll.mul(0.06));
+    return bleach.clamp(0.0, 1.0);
+});
+export const acesTonemap = Fn(([color]) => {
+    const a = 2.51;
+    const b = 0.03;
+    const c = 2.43;
+    const d = 0.59;
+    const e = 0.14;
+    return color
+        .mul(color.mul(a).add(b))
+        .div(color.mul(color.mul(c).add(d)).add(e))
+        .clamp(0.0, 1.0);
+});
+export const crossProcessTonemap = Fn(([color]) => {
+    const r = pow(color.x, 0.8);
+    const g = pow(color.y, 1.2);
+    const b = pow(color.z, 1.5);
+    return vec3(r, g, b).clamp(0.0, 1.0);
+});
+export const bleachBypassTonemap = Fn(([color]) => {
+    const lum = dot(color, vec3(0.2126, 0.7152, 0.0722));
+    const mixAmount = 0.7;
+    return mix(vec3(lum), color, mixAmount).mul(1.2).clamp(0.0, 1.0);
+});
+export const technicolorTonemap = Fn(([color]) => {
+    const r = color.x.mul(1.5);
+    const g = color.y.mul(1.2);
+    const b = color.z.mul(0.8).add(color.x.mul(0.2));
+    return vec3(r, g, b).clamp(0.0, 1.0);
+});
+export const cinematicTonemap = Fn(([color]) => {
+    const r = smoothstep(0.05, 0.95, color.x.mul(0.95).add(0.02));
+    const g = smoothstep(0.05, 0.95, color.y.mul(1.05));
+    const b = smoothstep(0.05, 0.95, color.z.mul(1.1));
+    return vec3(r, g, b).clamp(0.0, 1.0);
+});
+export const tanh = Fn(([x]) => {
+    const e2x = exp(x.mul(2.0));
+    return e2x.sub(1.0).div(e2x.add(1.0));
+});
+export const uncharted2Tonemap = totosTonemap;

package/dist/src/renderer/shaders/tsl/cosine-palette.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates a palette of colors using a cosine-based function.
+ */
+export declare const cosinePalette: (...args: unknown[]) => import("three/tsl").TSLNode;

package/{packages/shader-lab-react/src/renderer/shaders/tsl/cosine-palette.ts → dist/src/renderer/shaders/tsl/cosine-palette.js}

@@ -1,9 +1,8 @@
 // @ts-nocheck
-import { Fn, cos, float } from "three/tsl"
-
+import { Fn, cos, float } from "three/tsl";
 /**
  * Generates a palette of colors using a cosine-based function.
  */
 export const cosinePalette = Fn(([t, a, b, c, d, e = float(6.28318)]) => {
-  return a.add(b.mul(cos(e.mul(c.mul(t).add(d)))))
-})
+    return a.add(b.mul(cos(e.mul(c.mul(t).add(d)))));
+});

package/dist/src/renderer/shaders/tsl/noise/common.d.ts

@@ -0,0 +1,5 @@
+export declare const permute: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const taylorInvSqrt: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const mod289: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const fade: (...args: unknown[]) => import("three/tsl").TSLNode;
+export declare const grad4: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/noise/common.js

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { Fn, abs, add, dot, floor, fract, mod, mul, step, sub, vec3, vec4 } from "three/tsl";
+export const permute = Fn(([x]) => {
+    return mod(mul(add(mul(x, 34.0), 10.0), x), 289.0);
+});
+export const taylorInvSqrt = Fn(([r]) => {
+    return sub(1.79284291400159, mul(0.85373472095314, r));
+});
+export const mod289 = Fn(([x]) => {
+    return mod(mul(add(mul(x, 34.0), 10.0), x), 289.0);
+});
+export const fade = Fn(([t]) => {
+    return t.mul(t).mul(t).mul(t.mul(t).mul(6.0).sub(t.mul(15.0)).add(10.0));
+});
+export const grad4 = Fn(([j, ip]) => {
+    const ones = vec4(1.0, 1.0, 1.0, -1.0);
+    const p = vec4().toVar();
+    const s = vec4().toVar();
+    p.xyz.assign(floor(fract(vec3(j).mul(ip.xyz)).mul(7.0)).mul(ip.z).sub(1.0));
+    p.w.assign(sub(1.5, dot(abs(p.xyz), ones.xyz)));
+    s.assign(step(p, vec4(0.0)));
+    p.xyz.assign(p.xyz.add(s.xyz.mul(2.0).sub(1.0).mul(s.www)));
+    return p;
+});

package/dist/src/renderer/shaders/tsl/noise/curl-noise-3d.d.ts

@@ -0,0 +1 @@
+export declare const curlNoise3d: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/noise/curl-noise-3d.js

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import { EPSILON, Fn, cross, vec3 } from "three/tsl";
+import { simplexNoise3d } from "./simplex-noise-3d.js";
+export const curlNoise3d = Fn(([inputA]) => {
+    const aXPos = simplexNoise3d(inputA.add(vec3(EPSILON, 0, 0)));
+    const aXNeg = simplexNoise3d(inputA.sub(vec3(EPSILON, 0, 0)));
+    const aXAverage = aXPos.sub(aXNeg).div(EPSILON.mul(2));
+    const aYPos = simplexNoise3d(inputA.add(vec3(0, EPSILON, 0)));
+    const aYNeg = simplexNoise3d(inputA.sub(vec3(0, EPSILON, 0)));
+    const aYAverage = aYPos.sub(aYNeg).div(EPSILON.mul(2));
+    const aZPos = simplexNoise3d(inputA.add(vec3(0, 0, EPSILON)));
+    const aZNeg = simplexNoise3d(inputA.sub(vec3(0, 0, EPSILON)));
+    const aZAverage = aZPos.sub(aZNeg).div(EPSILON.mul(2));
+    const aGrabNoise = vec3(aXAverage, aYAverage, aZAverage).normalize();
+    const inputB = inputA.add(3.5);
+    const bXPos = simplexNoise3d(inputB.add(vec3(EPSILON, 0, 0)));
+    const bXNeg = simplexNoise3d(inputB.sub(vec3(EPSILON, 0, 0)));
+    const bXAverage = bXPos.sub(bXNeg).div(EPSILON.mul(2));
+    const bYPos = simplexNoise3d(inputB.add(vec3(0, EPSILON, 0)));
+    const bYNeg = simplexNoise3d(inputB.sub(vec3(0, EPSILON, 0)));
+    const bYAverage = bYPos.sub(bYNeg).div(EPSILON.mul(2));
+    const bZPos = simplexNoise3d(inputB.add(vec3(0, 0, EPSILON)));
+    const bZNeg = simplexNoise3d(inputB.sub(vec3(0, 0, EPSILON)));
+    const bZAverage = bZPos.sub(bZNeg).div(EPSILON.mul(2));
+    const bGrabNoise = vec3(bXAverage, bYAverage, bZAverage).normalize();
+    return cross(aGrabNoise, bGrabNoise).normalize();
+});

package/dist/src/renderer/shaders/tsl/noise/curl-noise-4d.d.ts

@@ -0,0 +1 @@
+export declare const curlNoise4d: (...args: unknown[]) => import("three/tsl").TSLNode;