@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -0,0 +1,526 @@
+import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
+import { clamp, float, max, mix, pow, select, sin, smoothstep, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import * as THREE from "three/webgpu";
+import { loadImageTexture } from "./media-texture.js";
+import { PassNode } from "./pass-node.js";
+import { grainTexturePattern } from "./shaders/tsl/patterns/grain-texture-pattern.js";
+const BLUE_NOISE_TEXTURE_URL = new URL("../../../assets/textures/blue-noise.png", import.meta.url).toString();
+const INTERNAL_TARGET_OPTIONS = {
+    depthBuffer: false,
+    format: THREE.RGBAFormat,
+    generateMipmaps: false,
+    magFilter: THREE.LinearFilter,
+    minFilter: THREE.LinearFilter,
+    stencilBuffer: false,
+    type: THREE.HalfFloatType,
+};
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+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 InkPass extends PassNode {
+    blurScene;
+    compositeScene;
+    copyScene;
+    orthoCamera;
+    blurMaterial;
+    compositeMaterial;
+    copyMaterial;
+    blurInputNode;
+    crispInputNode;
+    finalInputNode;
+    copyInputNode;
+    noiseInputNode;
+    blurSampleNodes = [];
+    compositeBlurNodes = [];
+    noiseSampleNodes = [];
+    bloomEnabled = false;
+    bloomNode = null;
+    bloomIntensityUniform;
+    bloomRadiusUniform;
+    bloomSoftnessUniform;
+    bloomThresholdUniform;
+    backgroundColorUniform;
+    coreColorUniform;
+    edgeColorUniform;
+    midColorUniform;
+    blurStrengthUniform;
+    crispBlendUniform;
+    directionXUniform;
+    directionYUniform;
+    dripLengthUniform;
+    dripWeightUniform;
+    fluidNoiseUniform;
+    grainEnabledUniform;
+    grainIntensityUniform;
+    grainScaleUniform;
+    blurSpreadUniform;
+    noiseScaleUniform;
+    passIndexUniform;
+    resolutionWidthUniform;
+    resolutionHeightUniform;
+    smokeSpeedUniform;
+    smokeTurbulenceUniform;
+    timeUniform;
+    blurPassCount = 12;
+    crispPassCount = 3;
+    compositeTarget;
+    crispTarget;
+    readTarget;
+    writeTarget;
+    placeholder;
+    noiseTexture = null;
+    noiseLoadStarted = false;
+    needsRefresh = true;
+    width = 1;
+    height = 1;
+    isAnimated = true;
+    constructor(layerId) {
+        super(layerId);
+        this.orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        this.blurScene = new THREE.Scene();
+        this.compositeScene = new THREE.Scene();
+        this.copyScene = new THREE.Scene();
+        this.placeholder = new THREE.Texture();
+        const flippedUv = vec2(uv().x, float(1).sub(uv().y));
+        this.blurInputNode = tslTexture(this.placeholder, flippedUv);
+        this.crispInputNode = tslTexture(this.placeholder, flippedUv);
+        this.finalInputNode = tslTexture(this.placeholder, flippedUv);
+        this.copyInputNode = tslTexture(this.placeholder, flippedUv);
+        this.noiseInputNode = tslTexture(this.placeholder, flippedUv);
+        this.bloomIntensityUniform = uniform(1.25);
+        this.bloomRadiusUniform = uniform(6);
+        this.bloomSoftnessUniform = uniform(0.35);
+        this.bloomThresholdUniform = uniform(0.6);
+        this.backgroundColorUniform = uniform(new THREE.Vector3(0.039, 0.043, 0.051));
+        this.coreColorUniform = uniform(new THREE.Vector3(1.0, 0.992, 0.91));
+        this.midColorUniform = uniform(new THREE.Vector3(0.784, 0.961, 0.259));
+        this.edgeColorUniform = uniform(new THREE.Vector3(0.0, 0.788, 0.655));
+        this.blurStrengthUniform = uniform(0.02);
+        this.crispBlendUniform = uniform(0.75);
+        this.directionXUniform = uniform(0.3746);
+        this.directionYUniform = uniform(0.9271);
+        this.dripLengthUniform = uniform(7.1);
+        this.dripWeightUniform = uniform(1.2);
+        this.fluidNoiseUniform = uniform(0.2);
+        this.grainEnabledUniform = uniform(1);
+        this.grainIntensityUniform = uniform(0.3);
+        this.grainScaleUniform = uniform(1.5);
+        this.blurSpreadUniform = uniform(1.7);
+        this.noiseScaleUniform = uniform(1);
+        this.passIndexUniform = uniform(0);
+        this.resolutionWidthUniform = uniform(1);
+        this.resolutionHeightUniform = uniform(1);
+        this.smokeSpeedUniform = uniform(0.2);
+        this.smokeTurbulenceUniform = uniform(0.25);
+        this.timeUniform = uniform(0);
+        this.readTarget = new THREE.WebGLRenderTarget(1, 1, INTERNAL_TARGET_OPTIONS);
+        this.writeTarget = new THREE.WebGLRenderTarget(1, 1, INTERNAL_TARGET_OPTIONS);
+        this.crispTarget = new THREE.WebGLRenderTarget(1, 1, INTERNAL_TARGET_OPTIONS);
+        this.compositeTarget = new THREE.WebGLRenderTarget(1, 1, INTERNAL_TARGET_OPTIONS);
+        this.blurMaterial = new THREE.MeshBasicNodeMaterial();
+        this.blurMaterial.colorNode = this.buildBlurNode();
+        const blurMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.blurMaterial);
+        blurMesh.frustumCulled = false;
+        this.blurScene.add(blurMesh);
+        this.copyMaterial = new THREE.MeshBasicNodeMaterial();
+        this.copyMaterial.colorNode = vec4(this.copyInputNode.rgb, float(1));
+        const copyMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.copyMaterial);
+        copyMesh.frustumCulled = false;
+        this.copyScene.add(copyMesh);
+        this.compositeMaterial = new THREE.MeshBasicNodeMaterial();
+        this.compositeMaterial.colorNode = this.buildCompositeNode();
+        const compositeMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.compositeMaterial);
+        compositeMesh.frustumCulled = false;
+        this.compositeScene.add(compositeMesh);
+        this.rebuildEffectNode();
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        this.ensureNoiseTexture();
+        this.blurInputNode.value = inputTexture;
+        this.noiseInputNode.value = this.noiseTexture ?? this.placeholder;
+        for (const node of this.blurSampleNodes) {
+            node.value = inputTexture;
+        }
+        for (const node of this.noiseSampleNodes) {
+            node.value = this.noiseTexture ?? this.placeholder;
+        }
+        this.passIndexUniform.value = 0;
+        renderer.setRenderTarget(this.readTarget);
+        renderer.render(this.blurScene, this.orthoCamera);
+        if (this.crispPassCount <= 1) {
+            this.copyInputNode.value = this.readTarget.texture;
+            renderer.setRenderTarget(this.crispTarget);
+            renderer.render(this.copyScene, this.orthoCamera);
+        }
+        const totalPasses = Math.max(this.blurPassCount, this.crispPassCount);
+        let readTarget = this.readTarget;
+        let writeTarget = this.writeTarget;
+        for (let passIndex = 1; passIndex < totalPasses; passIndex += 1) {
+            this.blurInputNode.value = readTarget.texture;
+            for (const node of this.blurSampleNodes) {
+                node.value = readTarget.texture;
+            }
+            this.passIndexUniform.value = passIndex;
+            renderer.setRenderTarget(writeTarget);
+            renderer.render(this.blurScene, this.orthoCamera);
+            if (passIndex === this.crispPassCount - 1) {
+                this.copyInputNode.value = writeTarget.texture;
+                renderer.setRenderTarget(this.crispTarget);
+                renderer.render(this.copyScene, this.orthoCamera);
+            }
+            const temp = readTarget;
+            readTarget = writeTarget;
+            writeTarget = temp;
+        }
+        this.finalInputNode.value = readTarget.texture;
+        this.crispInputNode.value = this.crispTarget.texture;
+        for (const node of this.compositeBlurNodes) {
+            node.value = readTarget.texture;
+        }
+        renderer.setRenderTarget(this.compositeTarget);
+        renderer.render(this.compositeScene, this.orthoCamera);
+        this.finalInputNode.value = this.compositeTarget.texture;
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+        this.needsRefresh = false;
+    }
+    beforeRender(time) {
+        this.timeUniform.value = time;
+    }
+    needsContinuousRender() {
+        return this.isAnimated || this.needsRefresh;
+    }
+    updateParams(params) {
+        const angle = ((typeof params.blurDirection === "number" ? params.blurDirection : 68) *
+            Math.PI) /
+            180;
+        this.directionXUniform.value = Math.cos(angle);
+        this.directionYUniform.value = Math.sin(angle);
+        this.blurPassCount =
+            typeof params.blurPasses === "number"
+                ? Math.max(1, Math.round(params.blurPasses))
+                : 12;
+        this.crispPassCount =
+            typeof params.crispPasses === "number"
+                ? Math.max(1, Math.round(params.crispPasses))
+                : 3;
+        this.blurStrengthUniform.value =
+            typeof params.blurStrength === "number"
+                ? Math.max(0.001, params.blurStrength)
+                : 0.02;
+        this.crispBlendUniform.value =
+            typeof params.crispBlend === "number" ? clamp01(params.crispBlend) : 0.75;
+        this.dripLengthUniform.value =
+            typeof params.dripLength === "number"
+                ? Math.max(1, params.dripLength)
+                : 7.1;
+        this.dripWeightUniform.value =
+            typeof params.dripWeight === "number"
+                ? Math.max(0.2, params.dripWeight)
+                : 1.2;
+        this.fluidNoiseUniform.value =
+            typeof params.fluidNoise === "number"
+                ? Math.max(0, params.fluidNoise)
+                : 0.2;
+        this.noiseScaleUniform.value =
+            typeof params.noiseScale === "number"
+                ? Math.max(0.5, params.noiseScale)
+                : 1;
+        this.smokeSpeedUniform.value =
+            typeof params.smokeSpeed === "number"
+                ? Math.max(0, params.smokeSpeed)
+                : 0.2;
+        this.smokeTurbulenceUniform.value =
+            typeof params.smokeTurbulence === "number"
+                ? Math.max(0, params.smokeTurbulence)
+                : 0.25;
+        this.blurSpreadUniform.value =
+            typeof params.blurSpread === "number"
+                ? Math.max(0.5, params.blurSpread)
+                : 1.7;
+        this.grainEnabledUniform.value = params.grainEnabled === false ? 0 : 1;
+        this.grainIntensityUniform.value =
+            typeof params.grainIntensity === "number"
+                ? clamp01(params.grainIntensity)
+                : 0.3;
+        this.grainScaleUniform.value =
+            typeof params.grainScale === "number"
+                ? Math.max(0.5, params.grainScale)
+                : 1.5;
+        this.setColorUniform(this.backgroundColorUniform, typeof params.backgroundColor === "string"
+            ? params.backgroundColor
+            : "#0a0b0d");
+        this.setColorUniform(this.coreColorUniform, typeof params.coreColor === "string" ? params.coreColor : "#fffde8");
+        this.setColorUniform(this.midColorUniform, typeof params.midColor === "string" ? params.midColor : "#c8f542");
+        this.setColorUniform(this.edgeColorUniform, typeof params.edgeColor === "string" ? params.edgeColor : "#00c9a7");
+        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;
+        this.bloomIntensityUniform.value = nextBloomIntensity;
+        this.bloomRadiusUniform.value = nextBloomRadius;
+        this.bloomSoftnessUniform.value = nextBloomSoftness;
+        this.bloomThresholdUniform.value = nextBloomThreshold;
+        if (nextBloomEnabled !== this.bloomEnabled) {
+            this.bloomEnabled = nextBloomEnabled;
+            this.rebuildEffectNode();
+        }
+        else 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);
+        }
+        this.isAnimated = this.smokeSpeedUniform.value > 0;
+        this.needsRefresh = true;
+    }
+    resize(width, height) {
+        this.width = Math.max(1, width);
+        this.height = Math.max(1, height);
+        this.resolutionWidthUniform.value = this.width;
+        this.resolutionHeightUniform.value = this.height;
+        this.readTarget.setSize(this.width, this.height);
+        this.writeTarget.setSize(this.width, this.height);
+        this.crispTarget.setSize(this.width, this.height);
+        this.compositeTarget.setSize(this.width, this.height);
+        this.needsRefresh = true;
+    }
+    dispose() {
+        this.disposeBloomNode();
+        this.noiseTexture?.dispose();
+        this.readTarget?.dispose();
+        this.writeTarget?.dispose();
+        this.crispTarget?.dispose();
+        this.compositeTarget?.dispose();
+        this.blurMaterial?.dispose();
+        this.copyMaterial?.dispose();
+        this.compositeMaterial?.dispose();
+        this.placeholder.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.finalInputNode) {
+            return vec4(float(0), float(0), float(0), float(1));
+        }
+        this.disposeBloomNode();
+        this.bloomNode = null;
+        const baseColor = vec3(this.finalInputNode.r, this.finalInputNode.g, this.finalInputNode.b);
+        if (!this.bloomEnabled) {
+            return vec4(baseColor, float(1));
+        }
+        this.bloomNode = bloom(vec4(baseColor, 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(baseColor.add(this.getBloomTextureNode().rgb), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+    }
+    buildBlurNode() {
+        this.blurSampleNodes = [];
+        this.noiseSampleNodes = [];
+        const texUv = vec2(uv().x, float(1).sub(uv().y));
+        const texelSize = vec2(float(1).div(this.resolutionWidthUniform), float(1).div(this.resolutionHeightUniform));
+        const original = this.blurInputNode;
+        const originalIntensity = max(max(original.r, original.g), original.b);
+        const rotatedUv = vec2(texUv.x
+            .mul(float(Math.cos(0.7854)))
+            .sub(texUv.y.mul(float(Math.sin(0.7854)))), texUv.x
+            .mul(float(Math.sin(0.7854)))
+            .add(texUv.y.mul(float(Math.cos(0.7854)))));
+        const timeOffset1 = vec2(this.timeUniform.mul(this.smokeSpeedUniform).mul(0.3), this.timeUniform.mul(this.smokeSpeedUniform).mul(0.15));
+        const timeOffset2 = vec2(sin(this.timeUniform.mul(this.smokeSpeedUniform).mul(0.7)).mul(0.1), sin(this.timeUniform
+            .mul(this.smokeSpeedUniform)
+            .mul(0.5)
+            .add(float(1.5707963))).mul(0.08));
+        const noiseUv1 = texUv
+            .mul(this.noiseScaleUniform)
+            .add(vec2(this.passIndexUniform.mul(0.1), this.passIndexUniform.mul(0.1)))
+            .add(timeOffset1);
+        const noiseUv2 = rotatedUv
+            .mul(this.noiseScaleUniform)
+            .mul(0.8)
+            .add(vec2(this.passIndexUniform.mul(0.15), this.passIndexUniform.mul(0.15)))
+            .add(timeOffset1.mul(1.2));
+        const turbulenceUv = rotatedUv
+            .mul(this.noiseScaleUniform)
+            .mul(0.6)
+            .add(timeOffset2.mul(2));
+        const noiseSample1 = this.trackNoiseSampleNode(noiseUv1);
+        const noiseSample2 = this.trackNoiseSampleNode(noiseUv2);
+        const turbulenceSample = this.trackNoiseSampleNode(turbulenceUv);
+        const noiseSample = mix(noiseSample1.rgb, noiseSample2.rgb, float(0.5));
+        const noiseX = noiseSample.r
+            .sub(0.5)
+            .mul(2)
+            .mul(this.fluidNoiseUniform)
+            .add(turbulenceSample.r.sub(0.5).mul(this.smokeTurbulenceUniform));
+        const noiseY = noiseSample.g
+            .sub(0.5)
+            .mul(2)
+            .mul(this.fluidNoiseUniform)
+            .mul(0.4)
+            .add(turbulenceSample.g.sub(0.5).mul(this.smokeTurbulenceUniform).mul(0.5));
+        const flowDir = vec2(this.directionXUniform.add(noiseX), this.directionYUniform.add(noiseY)).normalize();
+        const baseNoise = noiseSample.b
+            .sub(0.5)
+            .mul(0.03)
+            .mul(this.fluidNoiseUniform);
+        let result = vec4(float(0), float(0), float(0), float(0));
+        let totalWeight = float(0);
+        for (let sampleIndex = 0; sampleIndex < 10; sampleIndex += 1) {
+            const t = float(sampleIndex / 9);
+            const asymmetry = smoothstep(float(0), float(1), t).mul(t).add(t.mul(0.5));
+            const sampleDist = asymmetry
+                .mul(this.dripLengthUniform)
+                .mul(this.blurStrengthUniform)
+                .mul(float(1).add(this.passIndexUniform.mul(this.blurSpreadUniform).mul(0.15)));
+            const sampleNoise = baseNoise.mul(float(1 + sampleIndex * 0.1));
+            const disperseTurbulence = sampleNoise
+                .mul(t)
+                .mul(this.smokeTurbulenceUniform);
+            const samplePos = texUv
+                .add(flowDir.mul(sampleDist).mul(texelSize).mul(100))
+                .add(vec2(sampleNoise.add(disperseTurbulence), sampleNoise.add(disperseTurbulence).mul(0.3)));
+            const weight = mix(float(1).sub(t), float(1), smoothstep(float(0.35), float(0), t));
+            const sample = this.trackBlurSampleNode(samplePos);
+            result = result.add(sample.mul(weight));
+            totalWeight = totalWeight.add(weight);
+        }
+        for (let sampleIndex = 1; sampleIndex <= 2; sampleIndex += 1) {
+            const t = float(sampleIndex / 3);
+            const sampleDist = t
+                .mul(this.dripLengthUniform)
+                .mul(this.blurStrengthUniform)
+                .mul(0.2);
+            const samplePos = texUv.sub(flowDir.mul(sampleDist).mul(texelSize).mul(100));
+            const weight = float(1).sub(t).mul(0.4);
+            const sample = this.trackBlurSampleNode(samplePos);
+            result = result.add(sample.mul(weight));
+            totalWeight = totalWeight.add(weight);
+        }
+        const blurred = result.div(max(totalWeight, float(0.0001)));
+        const lifted = max(blurred, original);
+        return vec4(mix(blurred.rgb, lifted.rgb, originalIntensity.mul(0.5)), float(1));
+    }
+    buildCompositeNode() {
+        this.compositeBlurNodes = [];
+        const texUv = vec2(uv().x, float(1).sub(uv().y));
+        const blurSample = this.finalInputNode;
+        const crispSample = this.crispInputNode;
+        const blurIntensity = max(max(blurSample.r, blurSample.g), blurSample.b);
+        const crispIntensity = max(max(crispSample.r, crispSample.g), crispSample.b);
+        const texelSize = vec2(float(1).div(this.resolutionWidthUniform), float(1).div(this.resolutionHeightUniform));
+        const blurR = this.trackCompositeBlurNode(texUv.add(vec2(texelSize.x.mul(2), texelSize.y))).r;
+        const blurB = this.trackCompositeBlurNode(texUv.sub(vec2(texelSize.x.mul(2), texelSize.y))).b;
+        const backgroundColor = vec3(float(this.backgroundColorUniform.x), float(this.backgroundColorUniform.y), float(this.backgroundColorUniform.z));
+        const edgeColor = vec3(float(this.edgeColorUniform.x), float(this.edgeColorUniform.y), float(this.edgeColorUniform.z));
+        const midColor = vec3(float(this.midColorUniform.x), float(this.midColorUniform.y), float(this.midColorUniform.z));
+        const coreColor = vec3(float(this.coreColorUniform.x), float(this.coreColorUniform.y), float(this.coreColorUniform.z));
+        const fluidColor = this.applyColorGradient(blurIntensity, backgroundColor, edgeColor, midColor, coreColor);
+        const crispColor = this.applyColorGradient(crispIntensity, backgroundColor, edgeColor, midColor, coreColor);
+        const fluidColorChroma = vec3(mix(fluidColor.x, fluidColor.x.mul(1.1), blurR.mul(0.3)), fluidColor.y, mix(fluidColor.z, fluidColor.z.mul(1.15), blurB.mul(0.3)));
+        const fluidMask = pow(clamp(blurIntensity, float(0), float(1)), float(1.2));
+        const crispMask = pow(clamp(crispIntensity, float(0), float(1)), float(0.96));
+        const fluidGlow = fluidColorChroma.mul(fluidMask).mul(1.8);
+        const crispGlow = crispColor.mul(crispMask).mul(1.95);
+        const crispWeight = crispMask.mul(this.crispBlendUniform);
+        let combined = mix(fluidGlow, crispGlow, crispWeight).add(fluidGlow.mul(0.15));
+        const grain = grainTexturePattern(texUv.mul(vec2(this.grainScaleUniform, this.grainScaleUniform)))
+            .sub(0.5)
+            .mul(this.grainIntensityUniform);
+        combined = select(this.grainEnabledUniform.greaterThan(float(0.5)), combined.add(vec3(grain, grain, grain)), combined);
+        const alpha = max(fluidMask, crispMask);
+        let finalColor = mix(backgroundColor, combined, smoothstep(float(0.01), float(0.85), alpha));
+        const vignetteUv = texUv.mul(2).sub(vec2(1, 1));
+        finalColor = finalColor.mul(float(1).sub(vignetteUv.dot(vignetteUv).mul(0.15)));
+        return vec4(clamp(finalColor, vec3(0, 0, 0), vec3(1, 1, 1)), float(1));
+    }
+    applyColorGradient(intensity, bgColor, edgeColor, midColor, coreColor) {
+        const t1 = smoothstep(float(0.6), float(0.95), intensity);
+        const t2 = smoothstep(float(0.2), float(0.65), intensity);
+        const t3 = smoothstep(float(0), float(0.25), intensity);
+        const edgeMixed = mix(bgColor, edgeColor, t3);
+        const midMixed = mix(edgeMixed, midColor, t2);
+        return mix(midMixed, coreColor, t1);
+    }
+    ensureNoiseTexture() {
+        if (this.noiseTexture || this.noiseLoadStarted) {
+            return;
+        }
+        this.noiseLoadStarted = true;
+        void loadImageTexture(BLUE_NOISE_TEXTURE_URL)
+            .then((texture) => {
+            texture.wrapS = THREE.RepeatWrapping;
+            texture.wrapT = THREE.RepeatWrapping;
+            this.noiseTexture = texture;
+            this.needsRefresh = true;
+        })
+            .catch(() => {
+            this.needsRefresh = true;
+        });
+    }
+    trackBlurSampleNode(sampleUv) {
+        const sampleNode = tslTexture(this.placeholder, sampleUv);
+        this.blurSampleNodes.push(sampleNode);
+        return sampleNode;
+    }
+    trackCompositeBlurNode(sampleUv) {
+        const sampleNode = tslTexture(this.placeholder, sampleUv);
+        this.compositeBlurNodes.push(sampleNode);
+        return sampleNode;
+    }
+    trackNoiseSampleNode(sampleUv) {
+        const sampleNode = tslTexture(this.placeholder, sampleUv);
+        this.noiseSampleNodes.push(sampleNode);
+        return sampleNode;
+    }
+    setColorUniform(target, value) {
+        const [r, g, b] = hexToRgb(value);
+        target.value.set(r, g, b);
+    }
+    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");
+    }
+}

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

@@ -0,0 +1,31 @@
+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 LivePass extends PassNode {
+    private readonly canvasAspectUniform;
+    private readonly fitModeUniform;
+    private readonly mirrorUniform;
+    private readonly offsetXUniform;
+    private readonly offsetYUniform;
+    private readonly scaleUniform;
+    private readonly textureAspectUniform;
+    private mediaTextureNode;
+    private readonly placeholder;
+    private videoElement;
+    private videoTexture;
+    private stream;
+    private activeFacingMode;
+    constructor(layerId: string);
+    startCamera(facingMode: string): Promise<void>;
+    getFacingMode(): string;
+    private stopCamera;
+    updateParams(params: LayerParameterValues): void;
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    resize(width: number, height: number): void;
+    needsContinuousRender(): boolean;
+    dispose(): void;
+    protected buildEffectNode(): Node;
+}
+export {};

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

@@ -0,0 +1,136 @@
+import * as THREE from "three/webgpu";
+import { clamp, float, max, mix, select, texture as tslTexture, uniform, uv, vec2, vec4, } from "three/tsl";
+import { PassNode } from "./pass-node.js";
+export class LivePass extends PassNode {
+    canvasAspectUniform;
+    fitModeUniform;
+    mirrorUniform;
+    offsetXUniform;
+    offsetYUniform;
+    scaleUniform;
+    textureAspectUniform;
+    mediaTextureNode;
+    placeholder;
+    videoElement = null;
+    videoTexture = null;
+    stream = null;
+    activeFacingMode = null;
+    constructor(layerId) {
+        super(layerId);
+        this.placeholder = new THREE.Texture();
+        this.canvasAspectUniform = uniform(1);
+        this.fitModeUniform = uniform(0);
+        this.mirrorUniform = uniform(1);
+        this.offsetXUniform = uniform(0);
+        this.offsetYUniform = uniform(0);
+        this.scaleUniform = uniform(1);
+        this.textureAspectUniform = uniform(1);
+        this.mediaTextureNode = tslTexture(this.placeholder, uv());
+        this.rebuildEffectNode();
+    }
+    async startCamera(facingMode) {
+        if (this.activeFacingMode === facingMode && this.videoTexture) {
+            return;
+        }
+        this.stopCamera();
+        this.activeFacingMode = facingMode;
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+                facingMode,
+                width: { ideal: 1920 },
+                height: { ideal: 1080 },
+            },
+            audio: false,
+        });
+        this.stream = stream;
+        const video = document.createElement("video");
+        video.srcObject = stream;
+        video.muted = true;
+        video.playsInline = true;
+        await new Promise((resolve, reject) => {
+            video.addEventListener("playing", () => resolve(), { once: true });
+            video.addEventListener("error", () => reject(new Error("Failed to start camera")), { once: true });
+            video.play().catch(reject);
+        });
+        this.videoElement = video;
+        const texture = new THREE.VideoTexture(video);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        this.videoTexture = texture;
+        const width = video.videoWidth || 1;
+        const height = video.videoHeight || 1;
+        this.textureAspectUniform.value = width / Math.max(height, 1);
+    }
+    getFacingMode() {
+        return this.activeFacingMode ?? "user";
+    }
+    stopCamera() {
+        this.videoTexture?.dispose();
+        this.videoTexture = null;
+        if (this.videoElement) {
+            this.videoElement.pause();
+            this.videoElement.srcObject = null;
+            this.videoElement = null;
+        }
+        if (this.stream) {
+            for (const track of this.stream.getTracks()) {
+                track.stop();
+            }
+            this.stream = null;
+        }
+        this.activeFacingMode = null;
+    }
+    updateParams(params) {
+        this.fitModeUniform.value = params.fitMode === "contain" ? 1 : 0;
+        this.mirrorUniform.value = params.mirror === false ? 0 : 1;
+        this.scaleUniform.value =
+            typeof params.scale === "number" ? 1 / Math.max(params.scale, 0.01) : 1;
+        if (Array.isArray(params.offset) && params.offset.length === 2) {
+            this.offsetXUniform.value = params.offset[0] ?? 0;
+            this.offsetYUniform.value = params.offset[1] ?? 0;
+        }
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        if (this.videoTexture) {
+            this.videoTexture.needsUpdate = true;
+            this.mediaTextureNode.value = this.videoTexture;
+        }
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    resize(width, height) {
+        this.canvasAspectUniform.value = width / Math.max(height, 1);
+    }
+    needsContinuousRender() {
+        return this.videoTexture !== null;
+    }
+    dispose() {
+        this.stopCamera();
+        this.placeholder.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.canvasAspectUniform) {
+            return this.inputNode;
+        }
+        const aspectRatio = this.textureAspectUniform.div(this.canvasAspectUniform);
+        const rawUv = uv().sub(0.5).mul(this.scaleUniform);
+        const mirroredX = mix(rawUv.x, rawUv.x.negate(), this.mirrorUniform);
+        const centeredUv = vec2(mirroredX, rawUv.y);
+        const coverScaleX = max(aspectRatio, float(1));
+        const coverScaleY = max(float(1).div(aspectRatio), float(1));
+        const containScaleX = float(1).div(coverScaleX);
+        const containScaleY = float(1).div(coverScaleY);
+        const useContain = this.fitModeUniform;
+        const scaleX = mix(coverScaleX, containScaleX, useContain);
+        const scaleY = mix(coverScaleY, containScaleY, useContain);
+        const sampledUv = vec2(centeredUv.x.div(scaleX).add(this.offsetXUniform).add(0.5), centeredUv.y.div(scaleY).add(this.offsetYUniform).add(0.5));
+        const safeUv = clamp(sampledUv, vec2(0, 0), vec2(1, 1));
+        this.mediaTextureNode = tslTexture(this.placeholder, safeUv);
+        const inBounds = sampledUv.x
+            .greaterThanEqual(0)
+            .and(sampledUv.x.lessThanEqual(1))
+            .and(sampledUv.y.greaterThanEqual(0))
+            .and(sampledUv.y.lessThanEqual(1));
+        const contained = select(inBounds, this.mediaTextureNode, vec4(0, 0, 0, 1));
+        return mix(this.mediaTextureNode, contained, useContain);
+    }
+}