@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -0,0 +1,32 @@
+import * as THREE from "three/webgpu";
+import { type TSLNode } from "three/tsl";
+import { PassNode } from "./pass-node";
+import type { LayerParameterValues } from "../types/editor";
+type MediaKind = "image" | "video";
+type Node = TSLNode;
+export declare class MediaPass extends PassNode {
+    private readonly canvasAspectUniform;
+    private readonly fitModeUniform;
+    private readonly offsetXUniform;
+    private readonly offsetYUniform;
+    private readonly scaleUniform;
+    private readonly textureAspectUniform;
+    private mediaTextureNode;
+    private readonly placeholder;
+    private currentTexture;
+    private loadedUrl;
+    private videoHandle;
+    private videoTexture;
+    constructor(layerId: string);
+    setMedia(url: string, kind: MediaKind): Promise<void>;
+    clearMedia(): void;
+    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;
+    private releaseCurrentMedia;
+    private setTextureAspect;
+}
+export {};

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

@@ -0,0 +1,130 @@
+import * as THREE from "three/webgpu";
+import { clamp, float, max, mix, select, texture as tslTexture, uniform, uv, vec2, vec4, } from "three/tsl";
+import { loadImageTexture, createVideoTexture } from "./media-texture.js";
+import { PassNode } from "./pass-node.js";
+export class MediaPass extends PassNode {
+    canvasAspectUniform;
+    fitModeUniform;
+    offsetXUniform;
+    offsetYUniform;
+    scaleUniform;
+    textureAspectUniform;
+    mediaTextureNode;
+    placeholder;
+    currentTexture = null;
+    loadedUrl = null;
+    videoHandle = null;
+    videoTexture = null;
+    constructor(layerId) {
+        super(layerId);
+        this.placeholder = new THREE.Texture();
+        this.canvasAspectUniform = uniform(1);
+        this.fitModeUniform = uniform(0);
+        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 setMedia(url, kind) {
+        if (this.loadedUrl === url) {
+            return;
+        }
+        this.releaseCurrentMedia();
+        this.loadedUrl = url;
+        if (kind === "image") {
+            const texture = await loadImageTexture(url);
+            this.currentTexture = texture;
+            this.setTextureAspect(texture);
+            return;
+        }
+        const handle = await createVideoTexture(url);
+        this.currentTexture = handle.texture;
+        this.videoHandle = handle;
+        this.videoTexture = handle.texture;
+        this.setTextureAspect(handle.texture);
+    }
+    clearMedia() {
+        this.releaseCurrentMedia();
+    }
+    updateParams(params) {
+        this.fitModeUniform.value = params.fitMode === "contain" ? 1 : 0;
+        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;
+        }
+        if (this.videoHandle &&
+            typeof params.playbackRate === "number" &&
+            Number.isFinite(params.playbackRate)) {
+            this.videoHandle.video.playbackRate = Math.max(0.1, params.playbackRate);
+        }
+        if (this.videoHandle) {
+            this.videoHandle.video.loop = true;
+        }
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        if (this.videoTexture) {
+            this.videoTexture.needsUpdate = true;
+        }
+        if (this.currentTexture && this.mediaTextureNode) {
+            this.mediaTextureNode.value = this.currentTexture;
+        }
+        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.releaseCurrentMedia();
+        this.placeholder.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.canvasAspectUniform) {
+            return this.inputNode;
+        }
+        const aspectRatio = this.textureAspectUniform.div(this.canvasAspectUniform);
+        const centeredUv = uv().sub(0.5).mul(this.scaleUniform);
+        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);
+    }
+    releaseCurrentMedia() {
+        this.currentTexture?.dispose();
+        this.currentTexture = null;
+        this.videoTexture = null;
+        this.videoHandle?.dispose();
+        this.videoHandle = null;
+        this.loadedUrl = null;
+    }
+    setTextureAspect(texture) {
+        const image = texture.image;
+        const width = image instanceof HTMLVideoElement
+            ? image.videoWidth
+            : image?.naturalWidth ?? 1;
+        const height = image instanceof HTMLVideoElement
+            ? image.videoHeight
+            : image?.naturalHeight ?? 1;
+        this.textureAspectUniform.value = width / Math.max(height, 1);
+    }
+}

package/dist/src/renderer/media-texture.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from "three/webgpu";
+export interface VideoHandle {
+    dispose: () => void;
+    texture: THREE.VideoTexture;
+    video: HTMLVideoElement;
+}
+export declare function loadImageTexture(url: string): Promise<THREE.Texture>;
+export declare function createVideoTexture(url: string): Promise<VideoHandle>;

package/dist/src/renderer/media-texture.js

@@ -0,0 +1,41 @@
+import * as THREE from "three/webgpu";
+export function loadImageTexture(url) {
+    return new Promise((resolve, reject) => {
+        const loader = new THREE.TextureLoader();
+        loader.load(url, (texture) => {
+            texture.colorSpace = THREE.SRGBColorSpace;
+            resolve(texture);
+        }, undefined, () => {
+            reject(new Error(`Failed to load image texture: ${url}`));
+        });
+    });
+}
+export function createVideoTexture(url) {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement("video");
+        video.loop = true;
+        video.muted = true;
+        video.playsInline = true;
+        video.addEventListener("playing", () => {
+            const texture = new THREE.VideoTexture(video);
+            texture.colorSpace = THREE.SRGBColorSpace;
+            resolve({
+                dispose: () => {
+                    texture.dispose();
+                    video.pause();
+                    video.src = "";
+                },
+                texture,
+                video,
+            });
+        }, { once: true });
+        video.addEventListener("loadedmetadata", () => {
+            video.play().catch(reject);
+        }, { once: true });
+        video.onerror = () => {
+            reject(new Error(`Failed to load video texture: ${url}`));
+        };
+        video.src = url;
+        video.load();
+    });
+}

package/dist/src/renderer/particle-grid-pass.d.ts

@@ -0,0 +1,48 @@
+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 ParticleGridPass extends PassNode {
+    private readonly perspScene;
+    private readonly perspCamera;
+    private readonly internalRT;
+    private readonly blitInputNode;
+    private inputSamplerNode;
+    private readonly displacementUniform;
+    private readonly pointSizeUniform;
+    private readonly timeUniform;
+    private readonly noiseAmountUniform;
+    private readonly noiseScaleUniform;
+    private readonly noiseSpeedUniform;
+    private bloomEnabled;
+    private bloomNode;
+    private readonly bloomIntensityUniform;
+    private readonly bloomRadiusUniform;
+    private readonly bloomSoftnessUniform;
+    private readonly bloomThresholdUniform;
+    private mesh;
+    private meshMaterial;
+    private readonly bgColor;
+    private gridResolution;
+    private isAnimated;
+    private needsRebuild;
+    private width;
+    private height;
+    private readonly placeholder;
+    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;
+    resize(width: number, height: number): void;
+    dispose(): void;
+    protected buildEffectNode(): Node;
+    private rebuildGrid;
+    private clearGrid;
+    private normalizeBloomRadius;
+    private normalizeBloomSoftness;
+    private disposeBloomNode;
+    private getBloomTextureNode;
+}
+export {};

package/dist/src/renderer/particle-grid-pass.js

@@ -0,0 +1,269 @@
+import * as THREE from "three/webgpu";
+import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
+import { attribute, clamp, float, positionLocal, smoothstep, texture as tslTexture, uniform, uv, vec2, vec3, vec4, } from "three/tsl";
+import { PassNode } from "./pass-node.js";
+import { simplexNoise3d } from "./shaders/tsl/noise/simplex-noise-3d.js";
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+export class ParticleGridPass extends PassNode {
+    perspScene;
+    perspCamera;
+    internalRT;
+    blitInputNode;
+    inputSamplerNode = null;
+    displacementUniform;
+    pointSizeUniform;
+    timeUniform;
+    noiseAmountUniform;
+    noiseScaleUniform;
+    noiseSpeedUniform;
+    // Bloom
+    bloomEnabled = false;
+    bloomNode = null;
+    bloomIntensityUniform;
+    bloomRadiusUniform;
+    bloomSoftnessUniform;
+    bloomThresholdUniform;
+    mesh = null;
+    meshMaterial = null;
+    bgColor = new THREE.Color(0x000000);
+    gridResolution = 64;
+    isAnimated = false;
+    needsRebuild = true;
+    width = 1;
+    height = 1;
+    placeholder;
+    constructor(layerId) {
+        super(layerId);
+        this.perspScene = new THREE.Scene();
+        this.perspCamera = new THREE.PerspectiveCamera(45, 1, 0.01, 100);
+        this.perspCamera.position.set(0, 0, 1.2);
+        this.perspCamera.lookAt(0, 0, 0);
+        this.placeholder = new THREE.Texture();
+        this.internalRT = new THREE.WebGLRenderTarget(1, 1, {
+            depthBuffer: true,
+            format: THREE.RGBAFormat,
+            generateMipmaps: false,
+            magFilter: THREE.LinearFilter,
+            minFilter: THREE.LinearFilter,
+            stencilBuffer: false,
+            type: THREE.HalfFloatType,
+        });
+        this.displacementUniform = uniform(0.5);
+        this.pointSizeUniform = uniform(3.0);
+        this.timeUniform = uniform(0.0);
+        this.noiseAmountUniform = uniform(0.0);
+        this.noiseScaleUniform = uniform(3.0);
+        this.noiseSpeedUniform = uniform(0.5);
+        this.bloomIntensityUniform = uniform(1.25);
+        this.bloomRadiusUniform = uniform(6);
+        this.bloomSoftnessUniform = uniform(0.35);
+        this.bloomThresholdUniform = uniform(0.6);
+        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) {
+        if (this.needsRebuild) {
+            this.rebuildGrid();
+            this.needsRebuild = false;
+        }
+        if (this.inputSamplerNode) {
+            this.inputSamplerNode.value = inputTexture;
+        }
+        renderer.setClearColor(this.bgColor, 1);
+        renderer.setRenderTarget(this.internalRT);
+        renderer.render(this.perspScene, this.perspCamera);
+        this.blitInputNode.value = this.internalRT.texture;
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    beforeRender(time, _delta) {
+        this.timeUniform.value = time;
+    }
+    needsContinuousRender() {
+        return this.isAnimated;
+    }
+    updateParams(params) {
+        const nextResolution = typeof params.gridResolution === "number"
+            ? Math.max(16, Math.min(512, Math.round(params.gridResolution)))
+            : 64;
+        const nextPointSize = typeof params.pointSize === "number" ? params.pointSize : 3;
+        const nextBloomEnabled = params.bloomEnabled === true;
+        if (nextResolution !== this.gridResolution || nextPointSize !== this.pointSizeUniform.value) {
+            this.gridResolution = nextResolution;
+            this.pointSizeUniform.value = nextPointSize;
+            this.needsRebuild = true;
+        }
+        this.displacementUniform.value =
+            typeof params.displacement === "number" ? params.displacement : 0.5;
+        this.bgColor.set(typeof params.backgroundColor === "string" ? params.backgroundColor : "#000000");
+        const noiseAmount = typeof params.noiseAmount === "number" ? params.noiseAmount : 0;
+        this.noiseAmountUniform.value = noiseAmount;
+        this.noiseScaleUniform.value =
+            typeof params.noiseScale === "number" ? params.noiseScale : 3;
+        this.noiseSpeedUniform.value =
+            typeof params.noiseSpeed === "number" ? params.noiseSpeed : 0.5;
+        this.isAnimated = noiseAmount > 0;
+        this.bloomIntensityUniform.value =
+            typeof params.bloomIntensity === "number" ? Math.max(0, params.bloomIntensity) : 1.25;
+        this.bloomThresholdUniform.value =
+            typeof params.bloomThreshold === "number" ? clamp01(params.bloomThreshold) : 0.6;
+        this.bloomRadiusUniform.value =
+            typeof params.bloomRadius === "number" ? Math.max(0, params.bloomRadius) : 6;
+        this.bloomSoftnessUniform.value =
+            typeof params.bloomSoftness === "number" ? clamp01(params.bloomSoftness) : 0.35;
+        if (nextBloomEnabled !== this.bloomEnabled) {
+            this.bloomEnabled = nextBloomEnabled;
+            this.rebuildEffectNode();
+        }
+        if (this.bloomNode) {
+            this.bloomNode.strength.value = this.bloomIntensityUniform.value;
+            this.bloomNode.radius.value = this.normalizeBloomRadius(this.bloomRadiusUniform.value);
+            this.bloomNode.threshold.value = this.bloomThresholdUniform.value;
+            this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(this.bloomSoftnessUniform.value);
+        }
+    }
+    resize(width, height) {
+        this.width = Math.max(1, width);
+        this.height = Math.max(1, height);
+        this.internalRT.setSize(this.width, this.height);
+        this.perspCamera.aspect = this.width / this.height;
+        this.perspCamera.updateProjectionMatrix();
+        this.needsRebuild = true;
+    }
+    dispose() {
+        this.disposeBloomNode();
+        this.clearGrid();
+        this.placeholder.dispose();
+        this.internalRT.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.blitInputNode) {
+            return this.inputNode;
+        }
+        this.disposeBloomNode();
+        this.bloomNode = null;
+        const baseColor = vec3(this.blitInputNode.r, this.blitInputNode.g, this.blitInputNode.b);
+        if (!this.bloomEnabled) {
+            return vec4(baseColor, float(1));
+        }
+        const bloomInput = vec4(baseColor, float(1));
+        this.bloomNode = bloom(bloomInput, this.bloomIntensityUniform.value, this.normalizeBloomRadius(this.bloomRadiusUniform.value), this.bloomThresholdUniform.value);
+        this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(this.bloomSoftnessUniform.value);
+        return vec4(clamp(baseColor.add(this.getBloomTextureNode().rgb), vec3(float(0), float(0), float(0)), vec3(float(1), float(1), float(1))), float(1));
+    }
+    rebuildGrid() {
+        this.clearGrid();
+        const res = this.gridResolution;
+        const count = res * res;
+        const aspect = this.width / this.height;
+        const pointSize = this.pointSizeUniform.value;
+        // Camera frustum at z=0
+        const halfH = Math.tan((45 * Math.PI) / 360) * 1.2;
+        const halfW = halfH * aspect;
+        // Size of each quad in world units — convert point size from pixels to world
+        // At z=0 with camera at 1.2, 1 world unit = canvas_height / (2 * halfH) pixels
+        const pixelsPerUnit = this.height / (2 * halfH);
+        const quadWorldSize = pointSize / pixelsPerUnit;
+        // Base quad: unit plane centered at origin
+        const baseGeo = new THREE.PlaneGeometry(1, 1);
+        // Instance attributes
+        const offsets = new Float32Array(count * 3);
+        const gridUvs = new Float32Array(count * 2);
+        for (let row = 0; row < res; row++) {
+            for (let col = 0; col < res; col++) {
+                const i = row * res + col;
+                const u = col / (res - 1);
+                const v = row / (res - 1);
+                offsets[i * 3] = (u * 2 - 1) * halfW;
+                offsets[i * 3 + 1] = (v * 2 - 1) * halfH;
+                offsets[i * 3 + 2] = 0;
+                gridUvs[i * 2] = u;
+                gridUvs[i * 2 + 1] = 1 - v;
+            }
+        }
+        const instancedGeo = new THREE.InstancedBufferGeometry();
+        instancedGeo.index = baseGeo.index;
+        instancedGeo.setAttribute("position", baseGeo.getAttribute("position"));
+        instancedGeo.setAttribute("normal", baseGeo.getAttribute("normal"));
+        instancedGeo.setAttribute("uv", baseGeo.getAttribute("uv"));
+        instancedGeo.setAttribute("instanceOffset", new THREE.InstancedBufferAttribute(offsets, 3));
+        instancedGeo.setAttribute("instanceGridUv", new THREE.InstancedBufferAttribute(gridUvs, 2));
+        instancedGeo.instanceCount = count;
+        // GPU material
+        const instanceOffset = attribute("instanceOffset", "vec3");
+        const instanceGridUv = attribute("instanceGridUv", "vec2");
+        // Sample input texture per instance
+        this.inputSamplerNode = tslTexture(this.placeholder, instanceGridUv);
+        const sampledColor = this.inputSamplerNode;
+        // Luma for Z displacement
+        const luma = sampledColor.r
+            .mul(0.2126)
+            .add(sampledColor.g.mul(0.7152))
+            .add(sampledColor.b.mul(0.0722));
+        // Per-particle noise using instance grid UV scaled by resolution
+        const noiseUv = vec2(instanceGridUv.x.mul(float(res)).mul(this.noiseScaleUniform), instanceGridUv.y.mul(float(res)).mul(this.noiseScaleUniform));
+        const noiseInputX = vec3(noiseUv.x, noiseUv.y, this.timeUniform.mul(this.noiseSpeedUniform));
+        const noiseInputY = vec3(noiseUv.x, noiseUv.y, this.timeUniform.mul(this.noiseSpeedUniform).add(float(100)));
+        const noiseOffsetX = simplexNoise3d(noiseInputX).mul(this.noiseAmountUniform).mul(0.01);
+        const noiseOffsetY = simplexNoise3d(noiseInputY).mul(this.noiseAmountUniform).mul(0.01);
+        // Scale quad vertices by world size, then offset to instance position + noise + displacement
+        const scaledPos = positionLocal.mul(float(quadWorldSize));
+        const finalPos = vec3(scaledPos.x.add(instanceOffset.x).add(noiseOffsetX), scaledPos.y.add(instanceOffset.y).add(noiseOffsetY), scaledPos.z.add(instanceOffset.z).add(luma.mul(this.displacementUniform)));
+        // Circle mask using quad UV (0–1 per quad)
+        // Edge width scales with point size so anti-aliasing is always ~1.5px
+        const quadUv = uv();
+        const dist = vec2(quadUv.x.sub(0.5), quadUv.y.sub(0.5)).length();
+        const aaWidth = float(1.5).div(this.pointSizeUniform);
+        const circleMask = smoothstep(float(0.5), float(0.5).sub(aaWidth), dist);
+        const material = new THREE.MeshBasicNodeMaterial();
+        material.positionNode = finalPos;
+        material.colorNode = vec4(sampledColor.r, sampledColor.g, sampledColor.b, circleMask);
+        material.transparent = true;
+        material.alphaTest = 0.01;
+        material.depthWrite = false;
+        material.side = THREE.DoubleSide;
+        this.meshMaterial = material;
+        this.mesh = new THREE.Mesh(instancedGeo, material);
+        this.mesh.frustumCulled = false;
+        this.perspScene.add(this.mesh);
+        baseGeo.dispose();
+    }
+    clearGrid() {
+        if (this.mesh) {
+            this.perspScene.remove(this.mesh);
+            this.mesh.geometry.dispose();
+            this.mesh = null;
+        }
+        if (this.meshMaterial) {
+            this.meshMaterial.dispose();
+            this.meshMaterial = null;
+        }
+        this.inputSamplerNode = null;
+    }
+    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/pass-node.d.ts

@@ -0,0 +1,36 @@
+import * as THREE from "three/webgpu";
+import { type TSLNode } from "three/tsl";
+import type { LayerCompositeMode, LayerParameterValues } from "../types/editor";
+type Node = TSLNode;
+export declare class PassNode {
+    readonly layerId: string;
+    enabled: boolean;
+    protected readonly scene: THREE.Scene;
+    protected readonly camera: THREE.OrthographicCamera;
+    protected readonly material: THREE.MeshBasicNodeMaterial;
+    protected readonly inputNode: Node;
+    protected effectNode: Node;
+    protected readonly hueUniform: Node;
+    protected readonly saturationUniform: Node;
+    private readonly opacityUniform;
+    private blendMode;
+    private compositeMode;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    updateOpacity(opacity: number): void;
+    updateBlendMode(blendMode: string): boolean;
+    updateCompositeMode(compositeMode: LayerCompositeMode): boolean;
+    updateLayerColorAdjustments(hue: number, saturation: number): void;
+    updateParams(_params: LayerParameterValues): void;
+    resize(_width: number, _height: number): void;
+    updateLogicalSize(_width: number, _height: number): void;
+    needsContinuousRender(): boolean;
+    dispose(): void;
+    getMaterialVersion(): number;
+    protected beforeRender(_time: number, _delta: number): void;
+    protected buildEffectNode(): Node;
+    protected rebuildEffectNode(): void;
+    protected rebuildColorNode(): void;
+    private applySharedColorAdjustments;
+}
+export {};