@visactor/vrender-animate 1.0.12 → 1.0.13

package/cjs/custom/disappear/base/CustomEffectBase.d.ts

@@ -0,0 +1,32 @@
+import type { EasingType } from '@visactor/vrender-core';
+import { DisappearAnimateBase } from './DisappearAnimateBase';
+export declare abstract class WebGLEffectBase extends DisappearAnimateBase {
+    constructor(from: null, to: null, duration: number, easing: EasingType, params: any);
+    protected abstract getShaderSources(): {
+        vertex: string;
+        fragment: string;
+    };
+    protected abstract applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;
+    protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;
+}
+export declare abstract class Canvas2DEffectBase extends DisappearAnimateBase {
+    constructor(from: null, to: null, duration: number, easing: EasingType, params: any);
+    protected abstract applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;
+    protected getShaderSources(): {
+        vertex: string;
+        fragment: string;
+    } | null;
+    protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null;
+}
+export declare class HybridEffectBase extends DisappearAnimateBase {
+    constructor(from: null, to: null, duration: number, easing: EasingType, params: any);
+    protected getShaderSources(): {
+        vertex: string;
+        fragment: string;
+    } | null;
+    protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null;
+    protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null;
+    protected supportsWebGL(): boolean;
+    protected supportsCanvas2D(): boolean;
+    protected afterStageRender(stage: any, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false;
+}

package/cjs/custom/disappear/base/CustomEffectBase.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.HybridEffectBase = exports.Canvas2DEffectBase = exports.WebGLEffectBase = void 0;
+
+const DisappearAnimateBase_1 = require("./DisappearAnimateBase");
+
+class WebGLEffectBase extends DisappearAnimateBase_1.DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    applyCanvas2DEffect(canvas) {
+        console.warn(`${this.constructor.name}: WebGL不可用，使用简单透明度回退动画`);
+        const outputCanvas = this.createOutputCanvas(canvas);
+        if (!outputCanvas) return canvas;
+        const {ctx: ctx} = outputCanvas;
+        return ctx.globalAlpha = Math.max(0, 1 - this.currentAnimationRatio), ctx.drawImage(canvas, 0, 0), 
+        outputCanvas.canvas;
+    }
+}
+
+exports.WebGLEffectBase = WebGLEffectBase;
+
+class Canvas2DEffectBase extends DisappearAnimateBase_1.DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+}
+
+exports.Canvas2DEffectBase = Canvas2DEffectBase;
+
+class HybridEffectBase extends DisappearAnimateBase_1.DisappearAnimateBase {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params);
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+    applyCanvas2DEffect(canvas) {
+        return null;
+    }
+    supportsWebGL() {
+        return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && null !== this.getShaderSources();
+    }
+    supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;
+    }
+    afterStageRender(stage, canvas) {
+        var _a, _b;
+        let result = null;
+        if (!1 !== (null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.options) || void 0 === _b ? void 0 : _b.useWebGL)) {
+            if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || console.warn("WebGL初始化失败，尝试Canvas 2D回退"), 
+            this.gl)) {
+                if (result = this.applyWebGLEffect(canvas), result) return result;
+                console.warn("WebGL特效执行失败，尝试Canvas 2D回退");
+            }
+            if (this.supportsCanvas2D()) {
+                if (result = this.applyCanvas2DEffect(canvas), result) return result;
+                console.warn("Canvas 2D特效执行失败");
+            }
+        } else if (this.supportsCanvas2D()) {
+            if (result = this.applyCanvas2DEffect(canvas), result) return result;
+            console.warn("Canvas 2D特效执行失败");
+        } else console.warn(`${this.constructor.name}: useWebGL=false 但未实现Canvas 2D方法`);
+        return this.supportsWebGL() || this.supportsCanvas2D() || console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`), 
+        canvas;
+    }
+}
+
+exports.HybridEffectBase = HybridEffectBase;
+//# sourceMappingURL=CustomEffectBase.js.map

package/cjs/custom/disappear/base/CustomEffectBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom/disappear/base/CustomEffectBase.ts"],"names":[],"mappings":"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","file":"CustomEffectBase.js","sourcesContent":["import type { EasingType } from '@visactor/vrender-core';\nimport { DisappearAnimateBase } from './DisappearAnimateBase';\n\n/**\n * 仅支持WebGL的特效基类\n * 适用于复杂的GPU计算特效，如粒子系统、复杂着色器特效等\n */\nexport abstract class WebGLEffectBase extends DisappearAnimateBase {\n  constructor(from: null, to: null, duration: number, easing: EasingType, params: any) {\n    super(from, to, duration, easing, params);\n  }\n\n  // 必须实现WebGL相关方法\n  protected abstract getShaderSources(): { vertex: string; fragment: string };\n  protected abstract applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;\n\n  // Canvas 2D回退：简单的透明度动画或返回原图\n  protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement {\n    console.warn(`${this.constructor.name}: WebGL不可用，使用简单透明度回退动画`);\n\n    const outputCanvas = this.createOutputCanvas(canvas);\n    if (!outputCanvas) {\n      return canvas;\n    }\n\n    const { ctx } = outputCanvas;\n\n    // 简单的透明度渐变作为回退\n    ctx.globalAlpha = Math.max(0, 1 - this.currentAnimationRatio);\n    ctx.drawImage(canvas, 0, 0);\n\n    return outputCanvas.canvas;\n  }\n}\n\n/**\n * 仅支持Canvas 2D的特效基类\n * 适用于简单的2D图像处理特效，如模糊、颜色调整等\n */\nexport abstract class Canvas2DEffectBase extends DisappearAnimateBase {\n  constructor(from: null, to: null, duration: number, easing: EasingType, params: any) {\n    super(from, to, duration, easing, params);\n  }\n\n  // 必须实现Canvas 2D方法\n  protected abstract applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;\n\n  // 不支持WebGL，返回null\n  protected getShaderSources(): { vertex: string; fragment: string } | null {\n    return null;\n  }\n\n  protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null {\n    return null;\n  }\n}\n\n/**\n * 混合实现特效基类\n * 既支持WebGL也支持Canvas 2D，根据环境自动选择\n */\nexport class HybridEffectBase extends DisappearAnimateBase {\n  constructor(from: null, to: null, duration: number, easing: EasingType, params: any) {\n    super(from, to, duration, easing, params);\n  }\n\n  // 可选实现WebGL方法\n  protected getShaderSources(): { vertex: string; fragment: string } | null {\n    return null; // 子类可以重写\n  }\n\n  protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null {\n    return null; // 子类可以重写\n  }\n\n  // 可选实现Canvas 2D方法\n  protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null {\n    return null; // 子类可以重写\n  }\n\n  // 重写检查方法，使用更准确的检测\n  protected supportsWebGL(): boolean {\n    return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && this.getShaderSources() !== null;\n  }\n\n  protected supportsCanvas2D(): boolean {\n    return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;\n  }\n\n  /**\n   * 重写渲染方法，支持用户配置的 useWebGL 控制\n   */\n  protected afterStageRender(stage: any, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false {\n    let result: HTMLCanvasElement | null = null;\n\n    // 根据用户配置决定渲染策略\n    if (this.params?.options?.useWebGL !== false) {\n      // 用户允许使用WebGL，按照父类的自动判别逻辑\n      // 优先尝试WebGL实现\n      if (this.supportsWebGL()) {\n        if (!this.gl && !this.initWebGL(canvas)) {\n          console.warn('WebGL初始化失败，尝试Canvas 2D回退');\n        }\n\n        if (this.gl) {\n          result = this.applyWebGLEffect(canvas);\n          if (result) {\n            return result;\n          }\n          console.warn('WebGL特效执行失败，尝试Canvas 2D回退');\n        }\n      }\n\n      // WebGL不可用或执行失败，尝试Canvas 2D回退\n      if (this.supportsCanvas2D()) {\n        result = this.applyCanvas2DEffect(canvas);\n        if (result) {\n          return result;\n        }\n        console.warn('Canvas 2D特效执行失败');\n      }\n    } else {\n      // 用户禁用WebGL，直接使用Canvas 2D\n      if (this.supportsCanvas2D()) {\n        result = this.applyCanvas2DEffect(canvas);\n        if (result) {\n          return result;\n        }\n        console.warn('Canvas 2D特效执行失败');\n      } else {\n        console.warn(`${this.constructor.name}: useWebGL=false 但未实现Canvas 2D方法`);\n      }\n    }\n\n    // 如果都不支持或都失败了，给出明确的错误信息\n    if (!this.supportsWebGL() && !this.supportsCanvas2D()) {\n      console.error(\n        `特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`\n      );\n    }\n\n    // 返回原图作为最后的回退\n    return canvas;\n  }\n}\n"]}

package/cjs/custom/disappear/base/DisappearAnimateBase.d.ts

@@ -0,0 +1,34 @@
+import type { EasingType } from '@visactor/vrender-core';
+import { AStageAnimate } from '../../custom-animate';
+export declare abstract class DisappearAnimateBase<T = any> extends AStageAnimate<T> {
+    protected webglCanvas: HTMLCanvasElement | null;
+    protected gl: WebGLRenderingContext | null;
+    protected program: WebGLProgram | null;
+    protected currentAnimationRatio: number;
+    protected animationTime: number;
+    constructor(from: null, to: null, duration: number, easing: EasingType, params: any);
+    onUpdate(end: boolean, ratio: number, out: any): void;
+    protected getAnimationTime(): number;
+    protected getDurationFromParent(): number;
+    protected initWebGL(canvas: HTMLCanvasElement): boolean;
+    protected createShaderProgram(vertexSource: string, fragmentSource: string): WebGLProgram | null;
+    protected createShader(type: number, source: string): WebGLShader | null;
+    protected setupWebGLState(canvas: HTMLCanvasElement): void;
+    protected createFullScreenQuad(): WebGLBuffer | null;
+    protected createTextureFromCanvas(canvas: HTMLCanvasElement): WebGLTexture | null;
+    protected setupVertexAttributes(): void;
+    protected createOutputCanvas(canvas: HTMLCanvasElement): {
+        canvas: HTMLCanvasElement;
+        ctx: CanvasRenderingContext2D;
+    } | null;
+    protected getShaderSources(): {
+        vertex: string;
+        fragment: string;
+    } | null;
+    protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null;
+    protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null;
+    protected supportsWebGL(): boolean;
+    protected supportsCanvas2D(): boolean;
+    release(): void;
+    protected afterStageRender(stage: any, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false;
+}

package/cjs/custom/disappear/base/DisappearAnimateBase.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DisappearAnimateBase = void 0;
+
+const vrender_core_1 = require("@visactor/vrender-core"), custom_animate_1 = require("../../custom-animate");
+
+class DisappearAnimateBase extends custom_animate_1.AStageAnimate {
+    constructor(from, to, duration, easing, params) {
+        super(from, to, duration, easing, params), this.webglCanvas = null, this.gl = null, 
+        this.program = null, this.currentAnimationRatio = 0, this.animationTime = 0;
+    }
+    onUpdate(end, ratio, out) {
+        super.onUpdate(end, ratio, out), this.currentAnimationRatio = ratio, this.animationTime = ratio * Math.PI * 2;
+    }
+    getAnimationTime() {
+        return this.currentAnimationRatio > 0 ? this.animationTime : Date.now() / 1e3;
+    }
+    getDurationFromParent() {
+        return this.duration || 1e3;
+    }
+    initWebGL(canvas) {
+        try {
+            if (this.webglCanvas = vrender_core_1.vglobal.createCanvas({
+                width: canvas.width,
+                height: canvas.height,
+                dpr: vrender_core_1.vglobal.devicePixelRatio
+            }), !this.webglCanvas) return console.warn("WebGL canvas creation failed"), !1;
+            this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`, this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;
+            let glContext = null;
+            try {
+                glContext = this.webglCanvas.getContext("webgl"), glContext || (glContext = this.webglCanvas.getContext("experimental-webgl"));
+            } catch (e) {
+                console.warn("Failed to get WebGL context:", e);
+            }
+            if (this.gl = glContext, !this.gl) return console.warn("WebGL not supported"), !1;
+            const shaders = this.getShaderSources();
+            return this.program = this.createShaderProgram(shaders.vertex, shaders.fragment), 
+            null !== this.program;
+        } catch (error) {
+            return console.warn("Failed to initialize WebGL:", error), !1;
+        }
+    }
+    createShaderProgram(vertexSource, fragmentSource) {
+        if (!this.gl) return null;
+        const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource), fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
+        if (!vertexShader || !fragmentShader) return null;
+        const program = this.gl.createProgram();
+        return program ? (this.gl.attachShader(program, vertexShader), this.gl.attachShader(program, fragmentShader), 
+        this.gl.linkProgram(program), this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ? program : (console.error("Shader program link error:", this.gl.getProgramInfoLog(program)), 
+        null)) : null;
+    }
+    createShader(type, source) {
+        if (!this.gl) return null;
+        const shader = this.gl.createShader(type);
+        return shader ? (this.gl.shaderSource(shader, source), this.gl.compileShader(shader), 
+        this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS) ? shader : (console.error("Shader compile error:", this.gl.getShaderInfoLog(shader)), 
+        this.gl.deleteShader(shader), null)) : null;
+    }
+    setupWebGLState(canvas) {
+        this.gl && this.webglCanvas && (this.webglCanvas.width === canvas.width && this.webglCanvas.height === canvas.height || (this.webglCanvas.width = canvas.width, 
+        this.webglCanvas.height = canvas.height), this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height), 
+        this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT));
+    }
+    createFullScreenQuad() {
+        if (!this.gl) return null;
+        const vertices = new Float32Array([ -1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0 ]), vertexBuffer = this.gl.createBuffer();
+        return this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer), this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW), 
+        vertexBuffer;
+    }
+    createTextureFromCanvas(canvas) {
+        if (!this.gl) return null;
+        const texture = this.gl.createTexture();
+        return this.gl.activeTexture(this.gl.TEXTURE0), this.gl.bindTexture(this.gl.TEXTURE_2D, texture), 
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas), 
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), 
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE), 
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), 
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), 
+        texture;
+    }
+    setupVertexAttributes() {
+        if (!this.gl || !this.program) return;
+        const positionLocation = this.gl.getAttribLocation(this.program, "a_position"), texCoordLocation = this.gl.getAttribLocation(this.program, "a_texCoord");
+        this.gl.enableVertexAttribArray(positionLocation), this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, !1, 16, 0), 
+        this.gl.enableVertexAttribArray(texCoordLocation), this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, !1, 16, 8);
+    }
+    createOutputCanvas(canvas) {
+        const outputCanvas = vrender_core_1.vglobal.createCanvas({
+            width: canvas.width,
+            height: canvas.height,
+            dpr: vrender_core_1.vglobal.devicePixelRatio
+        }), ctx = outputCanvas.getContext("2d");
+        return ctx ? (ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0), 
+        {
+            canvas: outputCanvas,
+            ctx: ctx
+        }) : null;
+    }
+    getShaderSources() {
+        return null;
+    }
+    applyWebGLEffect(canvas) {
+        return null;
+    }
+    applyCanvas2DEffect(canvas) {
+        return null;
+    }
+    supportsWebGL() {
+        return null !== this.getShaderSources();
+    }
+    supportsCanvas2D() {
+        return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;
+    }
+    release() {
+        super.release(), this.gl && (this.program && (this.gl.deleteProgram(this.program), 
+        this.program = null), this.gl = null), this.webglCanvas && (this.webglCanvas = null), 
+        this.currentAnimationRatio = 0, this.animationTime = 0;
+    }
+    afterStageRender(stage, canvas) {
+        let result = null;
+        if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || console.warn("WebGL初始化失败，尝试Canvas 2D回退"), 
+        this.gl)) {
+            if (result = this.applyWebGLEffect(canvas), result) return result;
+            console.warn("WebGL特效执行失败，尝试Canvas 2D回退");
+        }
+        if (this.supportsCanvas2D()) {
+            if (result = this.applyCanvas2DEffect(canvas), result) return result;
+            console.warn("Canvas 2D特效执行失败");
+        }
+        return this.supportsWebGL() || this.supportsCanvas2D() || console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`), 
+        canvas;
+    }
+}
+
+exports.DisappearAnimateBase = DisappearAnimateBase;
+//# sourceMappingURL=DisappearAnimateBase.js.map

package/cjs/custom/disappear/base/DisappearAnimateBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom/disappear/base/DisappearAnimateBase.ts"],"names":[],"mappings":"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","file":"DisappearAnimateBase.js","sourcesContent":["import type { EasingType } from '@visactor/vrender-core';\nimport { vglobal } from '@visactor/vrender-core';\nimport { AStageAnimate } from '../../custom-animate';\n\n/**\n * 特效动画基类，提取公共的WebGL和Canvas 2D操作\n */\nexport abstract class DisappearAnimateBase<T = any> extends AStageAnimate<T> {\n  protected webglCanvas: HTMLCanvasElement | null = null;\n  protected gl: WebGLRenderingContext | null = null;\n  protected program: WebGLProgram | null = null;\n  protected currentAnimationRatio = 0;\n  protected animationTime = 0;\n\n  constructor(from: null, to: null, duration: number, easing: EasingType, params: any) {\n    super(from, to, duration, easing, params);\n  }\n\n  onUpdate(end: boolean, ratio: number, out: any): void {\n    super.onUpdate(end, ratio, out);\n    this.currentAnimationRatio = ratio;\n    this.animationTime = ratio * Math.PI * 2;\n  }\n\n  /**\n   * 获取基于动画进度的时间\n   */\n  protected getAnimationTime(): number {\n    if (this.currentAnimationRatio > 0) {\n      return this.animationTime;\n    }\n    return Date.now() / 1000.0;\n  }\n\n  /**\n   * 获取动画持续时间\n   */\n  protected getDurationFromParent(): number {\n    return this.duration || 1000;\n  }\n\n  /**\n   * 初始化WebGL上下文 - WebGL公共逻辑\n   */\n  protected initWebGL(canvas: HTMLCanvasElement): boolean {\n    try {\n      this.webglCanvas = vglobal.createCanvas({\n        width: canvas.width,\n        height: canvas.height,\n        dpr: vglobal.devicePixelRatio\n      });\n\n      if (!this.webglCanvas) {\n        console.warn('WebGL canvas creation failed');\n        return false;\n      }\n\n      this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`;\n      this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;\n\n      let glContext: WebGLRenderingContext | null = null;\n      try {\n        glContext = this.webglCanvas.getContext('webgl') as WebGLRenderingContext;\n        if (!glContext) {\n          glContext = this.webglCanvas.getContext('experimental-webgl') as WebGLRenderingContext;\n        }\n      } catch (e) {\n        console.warn('Failed to get WebGL context:', e);\n      }\n\n      this.gl = glContext;\n      if (!this.gl) {\n        console.warn('WebGL not supported');\n        return false;\n      }\n\n      const shaders = this.getShaderSources();\n      this.program = this.createShaderProgram(shaders.vertex, shaders.fragment);\n      return this.program !== null;\n    } catch (error) {\n      console.warn('Failed to initialize WebGL:', error);\n      return false;\n    }\n  }\n\n  /**\n   * 创建着色器程序 - WebGL公共逻辑\n   */\n  protected createShaderProgram(vertexSource: string, fragmentSource: string): WebGLProgram | null {\n    if (!this.gl) {\n      return null;\n    }\n\n    const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource);\n    const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);\n\n    if (!vertexShader || !fragmentShader) {\n      return null;\n    }\n\n    const program = this.gl.createProgram();\n    if (!program) {\n      return null;\n    }\n\n    this.gl.attachShader(program, vertexShader);\n    this.gl.attachShader(program, fragmentShader);\n    this.gl.linkProgram(program);\n\n    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {\n      console.error('Shader program link error:', this.gl.getProgramInfoLog(program));\n      return null;\n    }\n\n    return program;\n  }\n\n  /**\n   * 创建着色器 - WebGL公共逻辑\n   */\n  protected createShader(type: number, source: string): WebGLShader | null {\n    if (!this.gl) {\n      return null;\n    }\n\n    const shader = this.gl.createShader(type);\n    if (!shader) {\n      return null;\n    }\n\n    this.gl.shaderSource(shader, source);\n    this.gl.compileShader(shader);\n\n    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {\n      console.error('Shader compile error:', this.gl.getShaderInfoLog(shader));\n      this.gl.deleteShader(shader);\n      return null;\n    }\n\n    return shader;\n  }\n\n  /**\n   * 设置WebGL视口和基本状态 - WebGL公共逻辑\n   */\n  protected setupWebGLState(canvas: HTMLCanvasElement): void {\n    if (!this.gl || !this.webglCanvas) {\n      return;\n    }\n\n    // 确保WebGL canvas尺寸正确\n    if (this.webglCanvas.width !== canvas.width || this.webglCanvas.height !== canvas.height) {\n      this.webglCanvas.width = canvas.width;\n      this.webglCanvas.height = canvas.height;\n    }\n\n    this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height);\n    this.gl.clearColor(0.0, 0.0, 0.0, 0.0);\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\n  }\n\n  /**\n   * 创建标准的全屏四边形顶点缓冲区 - WebGL公共逻辑\n   */\n  protected createFullScreenQuad(): WebGLBuffer | null {\n    if (!this.gl) {\n      return null;\n    }\n\n    const vertices = new Float32Array([\n      // 位置      纹理坐标\n      -1,\n      -1,\n      0,\n      1, // 左下角 -> 左上角纹理\n      1,\n      -1,\n      1,\n      1, // 右下角 -> 右上角纹理\n      -1,\n      1,\n      0,\n      0, // 左上角 -> 左下角纹理\n      1,\n      1,\n      1,\n      0 // 右上角 -> 右下角纹理\n    ]);\n\n    const vertexBuffer = this.gl.createBuffer();\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);\n\n    return vertexBuffer;\n  }\n\n  /**\n   * 创建纹理 - WebGL公共逻辑\n   */\n  protected createTextureFromCanvas(canvas: HTMLCanvasElement): WebGLTexture | null {\n    if (!this.gl) {\n      return null;\n    }\n\n    const texture = this.gl.createTexture();\n    this.gl.activeTexture(this.gl.TEXTURE0); // 激活纹理单元0\n    this.gl.bindTexture(this.gl.TEXTURE_2D, texture);\n    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);\n    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);\n\n    return texture;\n  }\n\n  /**\n   * 设置顶点属性 - WebGL公共逻辑\n   */\n  protected setupVertexAttributes(): void {\n    if (!this.gl || !this.program) {\n      return;\n    }\n\n    const positionLocation = this.gl.getAttribLocation(this.program, 'a_position');\n    const texCoordLocation = this.gl.getAttribLocation(this.program, 'a_texCoord');\n\n    this.gl.enableVertexAttribArray(positionLocation);\n    this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, false, 16, 0);\n\n    this.gl.enableVertexAttribArray(texCoordLocation);\n    this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 16, 8);\n  }\n\n  /**\n   * 创建Canvas 2D输出画布 - Canvas 2D公共逻辑\n   */\n  protected createOutputCanvas(\n    canvas: HTMLCanvasElement\n  ): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } | null {\n    const outputCanvas = vglobal.createCanvas({\n      width: canvas.width,\n      height: canvas.height,\n      dpr: vglobal.devicePixelRatio\n    });\n    const ctx = outputCanvas.getContext('2d');\n    if (!ctx) {\n      return null;\n    }\n\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.drawImage(canvas, 0, 0);\n\n    return { canvas: outputCanvas, ctx };\n  }\n\n  // 可选的抽象方法，由子类选择性实现\n  protected getShaderSources(): { vertex: string; fragment: string } | null {\n    // 默认返回null，表示不支持WebGL实现\n    return null;\n  }\n\n  protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null {\n    // 默认返回null，表示不支持WebGL实现\n    return null;\n  }\n\n  protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement | null {\n    // 默认返回null，表示不支持Canvas 2D实现\n    return null;\n  }\n\n  /**\n   * 检查是否支持WebGL实现\n   */\n  protected supportsWebGL(): boolean {\n    return this.getShaderSources() !== null;\n  }\n\n  /**\n   * 检查是否支持Canvas 2D实现\n   */\n  protected supportsCanvas2D(): boolean {\n    // 通过尝试调用来检查是否有实现\n    // 这里通过检查方法是否被重写来判断\n    return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;\n  }\n\n  /**\n   * 释放WebGL资源\n   */\n  release(): void {\n    super.release();\n\n    // 清理WebGL资源\n    if (this.gl) {\n      // 删除着色器程序\n      if (this.program) {\n        this.gl.deleteProgram(this.program);\n        this.program = null;\n      }\n\n      // WebGL上下文会在canvas被垃圾回收时自动清理\n      this.gl = null;\n    }\n\n    // 清理WebGL canvas\n    if (this.webglCanvas) {\n      this.webglCanvas = null;\n    }\n\n    // 重置动画状态\n    this.currentAnimationRatio = 0;\n    this.animationTime = 0;\n  }\n\n  protected afterStageRender(stage: any, canvas: HTMLCanvasElement): HTMLCanvasElement | void | null | false {\n    let result: HTMLCanvasElement | null = null;\n\n    // 优先尝试WebGL实现\n    if (this.supportsWebGL()) {\n      if (!this.gl && !this.initWebGL(canvas)) {\n        console.warn('WebGL初始化失败，尝试Canvas 2D回退');\n      }\n\n      if (this.gl) {\n        result = this.applyWebGLEffect(canvas);\n        if (result) {\n          return result;\n        }\n        console.warn('WebGL特效执行失败，尝试Canvas 2D回退');\n      }\n    }\n\n    // 尝试Canvas 2D实现\n    if (this.supportsCanvas2D()) {\n      result = this.applyCanvas2DEffect(canvas);\n      if (result) {\n        return result;\n      }\n      console.warn('Canvas 2D特效执行失败');\n    }\n\n    // 如果都不支持或都失败了，给出明确的错误信息\n    if (!this.supportsWebGL() && !this.supportsCanvas2D()) {\n      console.error(\n        `特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`\n      );\n    }\n\n    // 返回原图作为最后的回退\n    return canvas;\n  }\n}\n"]}

package/cjs/custom/disappear/base/ImageProcessUtils.d.ts

@@ -0,0 +1,20 @@
+export declare class ImageProcessUtils {
+    static createTempCanvas(width: number, height: number, dpr?: number): HTMLCanvasElement;
+    static cloneImageData(imageData: ImageData): ImageData;
+    static lerp(start: number, end: number, t: number): number;
+    static smoothstep(edge0: number, edge1: number, x: number): number;
+    static distance(x1: number, y1: number, x2: number, y2: number): number;
+    static normalizeAngle(angle: number): number;
+    static pixelNoise(x: number, y: number, pixelSize: number): number;
+    static generateNoiseTexture(width: number, height: number): Uint8Array;
+    static applyCSSFilter(canvas: HTMLCanvasElement, filter: string): HTMLCanvasElement;
+    static extractChannel(imageData: ImageData, channelIndex: number): ImageData;
+    static blendImageData(imageData1: ImageData, imageData2: ImageData, ratio: number): ImageData;
+    static getLuminance(r: number, g: number, b: number): number;
+    static applySepiaToPixel(r: number, g: number, b: number): [number, number, number];
+    static calculateDynamicStrength(baseStrength: number, animationTime: number): number;
+}
+export declare class ShaderLibrary {
+    static readonly STANDARD_VERTEX_SHADER = "\n    attribute vec2 a_position;\n    attribute vec2 a_texCoord;\n    varying vec2 v_texCoord;\n\n    void main() {\n      gl_Position = vec4(a_position, 0.0, 1.0);\n      v_texCoord = a_texCoord;\n    }\n  ";
+    static readonly SHADER_FUNCTIONS = "\n    // \u4EAE\u5EA6\u8BA1\u7B97\u51FD\u6570\n    float luminance(vec3 color) {\n      return dot(color, vec3(0.299, 0.587, 0.114));\n    }\n\n    // \u8910\u8272\u8C03\u51FD\u6570\n    vec3 sepia(vec3 color) {\n      float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n      float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n      float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n      return vec3(r, g, b);\n    }\n\n    // \u7EBF\u6027\u63D2\u503C\u51FD\u6570\n    float lerp(float a, float b, float t) {\n      return a * (1.0 - t) + b * t;\n    }\n\n\n    // \u7B80\u5355\u566A\u58F0\u51FD\u6570\n    float pixelNoise(vec2 coord, float pixelSize) {\n      vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n      return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n    }\n\n    // \u52A8\u6001\u5F3A\u5EA6\u8BA1\u7B97\n    float calculateDynamicStrength(float baseStrength, float time) {\n      return baseStrength * (time / 6.28318531); // 2\u03C0\n    }\n  ";
+}

package/cjs/custom/disappear/base/ImageProcessUtils.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.ShaderLibrary = exports.ImageProcessUtils = void 0;
+
+const vrender_core_1 = require("@visactor/vrender-core");
+
+class ImageProcessUtils {
+    static createTempCanvas(width, height, dpr) {
+        return vrender_core_1.vglobal.createCanvas({
+            width: width,
+            height: height,
+            dpr: dpr || vrender_core_1.vglobal.devicePixelRatio
+        });
+    }
+    static cloneImageData(imageData) {
+        const clonedData = new Uint8ClampedArray(imageData.data);
+        return new ImageData(clonedData, imageData.width, imageData.height);
+    }
+    static lerp(start, end, t) {
+        return start * (1 - t) + end * t;
+    }
+    static smoothstep(edge0, edge1, x) {
+        const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+        return t * t * (3 - 2 * t);
+    }
+    static distance(x1, y1, x2, y2) {
+        const dx = x2 - x1, dy = y2 - y1;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    static normalizeAngle(angle) {
+        return (angle + Math.PI) / (2 * Math.PI);
+    }
+    static pixelNoise(x, y, pixelSize) {
+        if (pixelSize <= 0) return 0;
+        const gridX = Math.floor(x / pixelSize) * pixelSize, gridY = Math.floor(y / pixelSize) * pixelSize, n = 43758.5453 * Math.sin(12.9898 * gridX + 78.233 * gridY);
+        return n - Math.floor(n);
+    }
+    static generateNoiseTexture(width, height) {
+        const data = new Uint8Array(width * height);
+        for (let i = 0; i < data.length; i++) data[i] = Math.floor(256 * Math.random());
+        return data;
+    }
+    static applyCSSFilter(canvas, filter) {
+        const outputCanvas = this.createTempCanvas(canvas.width, canvas.height), ctx = outputCanvas.getContext("2d");
+        return ctx ? (ctx.filter = filter, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", 
+        outputCanvas) : canvas;
+    }
+    static extractChannel(imageData, channelIndex) {
+        const {data: data, width: width, height: height} = imageData, channelData = new Uint8ClampedArray(data.length);
+        for (let i = 0; i < data.length; i += 4) channelData[i] = 0, channelData[i + 1] = 0, 
+        channelData[i + 2] = 0, channelData[i + 3] = data[i + 3], channelIndex >= 0 && channelIndex <= 2 && (channelData[i + channelIndex] = data[i + channelIndex]);
+        return new ImageData(channelData, width, height);
+    }
+    static blendImageData(imageData1, imageData2, ratio) {
+        const {data: data1, width: width, height: height} = imageData1, {data: data2} = imageData2, result = new Uint8ClampedArray(data1.length);
+        for (let i = 0; i < data1.length; i += 4) result[i] = Math.round(this.lerp(data1[i], data2[i], ratio)), 
+        result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio)), result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio)), 
+        result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio));
+        return new ImageData(result, width, height);
+    }
+    static getLuminance(r, g, b) {
+        return .299 * r + .587 * g + .114 * b;
+    }
+    static applySepiaToPixel(r, g, b) {
+        return [ Math.min(255, .393 * r + .769 * g + .189 * b), Math.min(255, .349 * r + .686 * g + .168 * b), Math.min(255, .272 * r + .534 * g + .131 * b) ];
+    }
+    static calculateDynamicStrength(baseStrength, animationTime) {
+        return baseStrength * (animationTime / (2 * Math.PI));
+    }
+}
+
+exports.ImageProcessUtils = ImageProcessUtils;
+
+class ShaderLibrary {}
+
+exports.ShaderLibrary = ShaderLibrary, ShaderLibrary.STANDARD_VERTEX_SHADER = "\n    attribute vec2 a_position;\n    attribute vec2 a_texCoord;\n    varying vec2 v_texCoord;\n\n    void main() {\n      gl_Position = vec4(a_position, 0.0, 1.0);\n      v_texCoord = a_texCoord;\n    }\n  ", 
+ShaderLibrary.SHADER_FUNCTIONS = "\n    // 亮度计算函数\n    float luminance(vec3 color) {\n      return dot(color, vec3(0.299, 0.587, 0.114));\n    }\n\n    // 褐色调函数\n    vec3 sepia(vec3 color) {\n      float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n      float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n      float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n      return vec3(r, g, b);\n    }\n\n    // 线性插值函数\n    float lerp(float a, float b, float t) {\n      return a * (1.0 - t) + b * t;\n    }\n\n\n    // 简单噪声函数\n    float pixelNoise(vec2 coord, float pixelSize) {\n      vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n      return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n    }\n\n    // 动态强度计算\n    float calculateDynamicStrength(float baseStrength, float time) {\n      return baseStrength * (time / 6.28318531); // 2π\n    }\n  ";
+//# sourceMappingURL=ImageProcessUtils.js.map

package/cjs/custom/disappear/base/ImageProcessUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom/disappear/base/ImageProcessUtils.ts"],"names":[],"mappings":"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","file":"ImageProcessUtils.js","sourcesContent":["import { vglobal } from '@visactor/vrender-core';\n\n/**\n * 图像处理工具类，公共的图像处理逻辑\n */\nexport class ImageProcessUtils {\n  /**\n   * 创建临时Canvas用于图像处理\n   */\n  static createTempCanvas(width: number, height: number, dpr?: number): HTMLCanvasElement {\n    return vglobal.createCanvas({\n      width,\n      height,\n      dpr: dpr || vglobal.devicePixelRatio\n    });\n  }\n\n  /**\n   * 复制图像数据\n   */\n  static cloneImageData(imageData: ImageData): ImageData {\n    const clonedData = new Uint8ClampedArray(imageData.data);\n    return new ImageData(clonedData, imageData.width, imageData.height);\n  }\n\n  /**\n   * 线性插值\n   */\n  static lerp(start: number, end: number, t: number): number {\n    return start * (1 - t) + end * t;\n  }\n\n  /**\n   * 平滑步进函数\n   */\n  static smoothstep(edge0: number, edge1: number, x: number): number {\n    const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));\n    return t * t * (3 - 2 * t);\n  }\n\n  /**\n   * 计算两点之间的距离\n   */\n  static distance(x1: number, y1: number, x2: number, y2: number): number {\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n    return Math.sqrt(dx * dx + dy * dy);\n  }\n\n  /**\n   * 归一化角度到0-1范围\n   */\n  static normalizeAngle(angle: number): number {\n    return (angle + Math.PI) / (2 * Math.PI);\n  }\n\n  /**\n   * 基于像素网格的噪声函数\n   */\n  static pixelNoise(x: number, y: number, pixelSize: number): number {\n    if (pixelSize <= 0) {\n      return 0;\n    }\n\n    const gridX = Math.floor(x / pixelSize) * pixelSize;\n    const gridY = Math.floor(y / pixelSize) * pixelSize;\n\n    const n = Math.sin(gridX * 12.9898 + gridY * 78.233) * 43758.5453;\n    return n - Math.floor(n);\n  }\n\n  /**\n   * 生成噪声纹理数据\n   */\n  static generateNoiseTexture(width: number, height: number): Uint8Array {\n    const data = new Uint8Array(width * height);\n    for (let i = 0; i < data.length; i++) {\n      data[i] = Math.floor(Math.random() * 256);\n    }\n    return data;\n  }\n\n  /**\n   * 应用CSS滤镜（如果支持）\n   */\n  static applyCSSFilter(canvas: HTMLCanvasElement, filter: string): HTMLCanvasElement {\n    const outputCanvas = this.createTempCanvas(canvas.width, canvas.height);\n    const ctx = outputCanvas.getContext('2d');\n    if (!ctx) {\n      return canvas;\n    }\n\n    ctx.filter = filter;\n    ctx.drawImage(canvas, 0, 0);\n    ctx.filter = 'none';\n\n    return outputCanvas;\n  }\n\n  /**\n   * 提取颜色通道\n   */\n  static extractChannel(imageData: ImageData, channelIndex: number): ImageData {\n    const { data, width, height } = imageData;\n    const channelData = new Uint8ClampedArray(data.length);\n\n    for (let i = 0; i < data.length; i += 4) {\n      // 清空所有通道\n      channelData[i] = 0; // R\n      channelData[i + 1] = 0; // G\n      channelData[i + 2] = 0; // B\n      channelData[i + 3] = data[i + 3]; // 保持Alpha通道\n\n      // 只保留指定通道的数据\n      if (channelIndex >= 0 && channelIndex <= 2) {\n        channelData[i + channelIndex] = data[i + channelIndex];\n      }\n    }\n\n    return new ImageData(channelData, width, height);\n  }\n\n  /**\n   * 混合两个图像数据\n   */\n  static blendImageData(imageData1: ImageData, imageData2: ImageData, ratio: number): ImageData {\n    const { data: data1, width, height } = imageData1;\n    const { data: data2 } = imageData2;\n    const result = new Uint8ClampedArray(data1.length);\n\n    for (let i = 0; i < data1.length; i += 4) {\n      result[i] = Math.round(this.lerp(data1[i], data2[i], ratio)); // R\n      result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio)); // G\n      result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio)); // B\n      result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio)); // A\n    }\n\n    return new ImageData(result, width, height);\n  }\n\n  /**\n   * 计算像素亮度\n   */\n  static getLuminance(r: number, g: number, b: number): number {\n    return r * 0.299 + g * 0.587 + b * 0.114;\n  }\n\n  /**\n   * 应用褐色调效果\n   */\n  static applySepiaToPixel(r: number, g: number, b: number): [number, number, number] {\n    const sepiaR = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);\n    const sepiaG = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);\n    const sepiaB = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);\n    return [sepiaR, sepiaG, sepiaB];\n  }\n\n  /**\n   * 动态计算强度（基于动画时间的线性增长）\n   */\n  static calculateDynamicStrength(baseStrength: number, animationTime: number): number {\n    // 时间范围0-2π，标准化到0-1\n    return baseStrength * (animationTime / (Math.PI * 2));\n  }\n}\n\n/**\n * WebGL着色器片段库\n */\nexport class ShaderLibrary {\n  /**\n   * 标准顶点着色器\n   */\n  static readonly STANDARD_VERTEX_SHADER = `\n    attribute vec2 a_position;\n    attribute vec2 a_texCoord;\n    varying vec2 v_texCoord;\n\n    void main() {\n      gl_Position = vec4(a_position, 0.0, 1.0);\n      v_texCoord = a_texCoord;\n    }\n  `;\n\n  /**\n   * 常用的着色器函数库\n   */\n  static readonly SHADER_FUNCTIONS = `\n    // 亮度计算函数\n    float luminance(vec3 color) {\n      return dot(color, vec3(0.299, 0.587, 0.114));\n    }\n\n    // 褐色调函数\n    vec3 sepia(vec3 color) {\n      float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n      float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n      float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n      return vec3(r, g, b);\n    }\n\n    // 线性插值函数\n    float lerp(float a, float b, float t) {\n      return a * (1.0 - t) + b * t;\n    }\n\n\n    // 简单噪声函数\n    float pixelNoise(vec2 coord, float pixelSize) {\n      vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n      return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n    }\n\n    // 动态强度计算\n    float calculateDynamicStrength(float baseStrength, float time) {\n      return baseStrength * (time / 6.28318531); // 2π\n    }\n  `;\n}\n"]}

package/cjs/custom/disappear/dissolve.d.ts

@@ -0,0 +1,27 @@
+import type { EasingType } from '@visactor/vrender-core';
+import { HybridEffectBase } from './base/CustomEffectBase';
+export interface DissolveConfig {
+    dissolveType?: 'outward' | 'inward' | 'radial' | 'leftToRight' | 'rightToLeft' | 'topToBottom' | 'bottomToTop';
+    useWebGL?: boolean;
+    noiseScale?: number;
+    fadeEdge?: boolean;
+}
+export declare class Dissolve extends HybridEffectBase {
+    private dissolveConfig;
+    private noiseData;
+    constructor(from: null, to: null, duration: number, easing: EasingType, params: any);
+    protected getShaderSources(): {
+        vertex: string;
+        fragment: string;
+    };
+    protected applyWebGLEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;
+    private setUniforms;
+    protected applyCanvas2DEffect(canvas: HTMLCanvasElement): HTMLCanvasElement;
+    private applyOutwardDissolve;
+    private applyInwardDissolve;
+    private applyRadialDissolve;
+    private applyLeftToRightDissolve;
+    private applyRightToLeftDissolve;
+    private applyTopToBottomDissolve;
+    private applyBottomToTopDissolve;
+}