我不想搞个一新的Shader，我就想用已有的材质（比如StandardMaterial和PBRMetallicRoughnessMaterial）实现纹理融合渐变等效果，于是我搞了一个TextureBlender。

一、为什么重复造轮子？

1. GPU 插值受限
   material.diffuseTexture = texture1 后再 texture2 只能做“硬切换”，Babylon.js 的 DynamicTexture 每帧都画又会爆 CPU。

2. 预生成 VS 实时生成
   预生成 16 张图占用一点内存，却换来零运行时开销——适合进度条、角色换装、天气过渡等长期存在的动画需求。

3. Web-Worker 是免费午餐
   浏览器空闲核不用白不用，把 16 张图丢给子线程并行渲染，主线程只负责收 dataURL，用户体验瞬间丝滑。

二、设计要点速览

表格

复制

三、完整源码（超详细中文注释）

依赖：仅 @babylonjs/core 的 Texture 与 Scene
版本：基于 ES2020+ 语法，可直接扔进 Vite / Webpack / Rollup

// TextureBlender.ts
import { Texture, type Scene } from '@babylonjs/core';

type TBEvent = 'load' | 'error' | 'dispose';

export class TextureBlender {
  /* ========== 对外只读接口 ========== */
  /** 缓存好的纹理数组，只读，防止外部误删或打乱顺序 */
  public get textures(): ReadonlyArray<Texture> {
    return this._cachedTextures;
  }

  /** 缓存数量，固定 16 张，足够大多数过渡动画使用 */
  public readonly cacheSize = 16;

  /* ========== 内部状态 ========== */
  private _scene: Scene;
  private _width: number;
  private _height: number;
  private _hasAlpha: boolean;

  /** 原始图片对象，加载完即释放，避免长期占用内存 */
  private _img1!: HTMLImageElement;
  private _img2!: HTMLImageElement;

  /** 真正的纹理缓存，长度 = cacheSize */
  private _cachedTextures: Texture[] = [];

  /** Canvas 对象池，重复利用，减少 GC 压力 */
  private _canvasPool: HTMLCanvasElement[] = [];

  /** Worker 实例，可能为 null（不支持或创建失败） */
  private _worker: Worker | null = null;

  /** 剩余未完成的纹理张数，用于判断何时触发 load 事件 */
  private _pendingTextures = 0;

  /** 标志位：当前浏览器是否支持 Worker */
  private _workerSupported = false;

  /** 标志位：两张原图是否已加载成功 */
  private _isLoaded = false;

  /** 若加载失败，保存错误信息，供 whenError 使用 */
  private _loadError: any = null;

  /* ========== 事件监听器池 ========== */
  private _listeners: Record<TBEvent, Array<(arg?: any) => void>> = {
    load: [],
    error: [],
    dispose: [],
  };

  /**
   * 构造即开始加载，无需手动调用其他方法
   * @param url01 第一张纹理地址
   * @param url02 第二张纹理地址
   * @param width 目标宽度（会按此尺寸绘制到 Canvas）
   * @param height 目标高度
   * @param scene Babylon.js 场景实例
   * @param hasAlpha 输出纹理是否带透明通道
   */
  constructor(
    url01: string,
    url02: string,
    width: number,
    height: number,
    scene: Scene,
    hasAlpha: boolean
  ) {
    this._scene = scene;
    this._width = width;
    this._height = height;
    this._hasAlpha = hasAlpha;
    this._workerSupported = typeof Worker !== 'undefined';

    this._start(url01, url02);
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 公有事件 API ------------------------- */
  /* ------------------------------------------------------------ */

  /** 事件风格：注册加载完成回调；若已加载则立即执行 */
  public onLoad(cb: (tb: TextureBlender) => void): void {
    if (this._isLoaded) cb(this);
    else this._listeners.load.push(cb);
  }

  /** Promise 风格：等待加载完成 */
  public whenLoaded(): Promise<TextureBlender> {
    return new Promise((resolve) => this.onLoad(resolve));
  }

  /** 事件风格：注册加载失败回调；若已失败则立即执行 */
  public onError(cb: (err: any) => void): void {
    if (this._loadError) cb(this._loadError);
    else this._listeners.error.push(cb);
  }

  /** Promise 风格：等待加载失败 */
  public whenError(): Promise<any> {
    return new Promise((resolve) => this.onError(resolve));
  }

  /** 注册销毁事件，常用于在销毁后从全局管理器里移除自己 */
  public onDispose(cb: () => void): void {
    this._listeners.dispose.push(cb);
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 对外只读状态 ------------------------- */
  /* ------------------------------------------------------------ */

  public get isLoaded(): boolean {
    return this._isLoaded;
  }

  /**
   * 根据进度 0~1 返回最接近的缓存纹理
   * 若未加载完成则返回 null
   */
  public getTexture(process: number): Texture | null {
    if (!this._isLoaded) return null;
    const idx = Math.round(Math.max(0, Math.min(1, process)) * (this.cacheSize - 1));
    return this._cachedTextures[idx] ?? null;
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 资源销毁 ----------------------------- */
  /* ------------------------------------------------------------ */

  /** 释放所有纹理、Worker、Canvas 及图片资源 */
  public dispose(): void {
    this._trigger('dispose');
    this._listeners = { load: [], error: [], dispose: [] };

    this._releaseImages();
    this._cachedTextures.forEach((t) => t.dispose());
    this._cachedTextures = [];
    this._canvasPool = [];

    if (this._worker) {
      this._worker.terminate();
      this._worker = null;
    }
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 初始化流程 --------------------------- */
  /* ------------------------------------------------------------ */

  private _start(url1: string, url2: string): void {
    this._img1 = new Image();
    this._img2 = new Image();
    [this._img1, this._img2].forEach((img) => (img.crossOrigin = 'anonymous'));

    let loaded = 0;
    const onImgLoad = () => {
      if (++loaded === 2) this._onImagesReady();
    };
    const onImgError = (e: any) => this._fail(e);

    this._img1.onload = this._img2.onload = onImgLoad;
    this._img1.onerror = this._img2.onerror = onImgError;

    this._img1.src = url1;
    this._img2.src = url2;
  }

  private _onImagesReady(): void {
    this._isLoaded = true;
    if (this._workerSupported) this._runWorkerPath();
    else this._runMainPath();
  }

  private _fail(err: any): void {
    this._loadError = err;
    this._trigger('error', err);
  }

  /* ------------------------------------------------------------ */
  /* -------------------- Worker 加速路径 ---------------------- */
  /* ------------------------------------------------------------ */

  private _runWorkerPath(): void {
    try {
      const blob = new Blob([this._workerCode()], { type: 'application/javascript' });
      this._worker = new Worker(URL.createObjectURL(blob));

      this._worker.onmessage = (e) => {
        const { type, index, dataUrl } = e.data;
        if (type === 'textureReady') this._storeTexture(index, dataUrl);
      };
      this._worker.onerror = (ev) => {
        console.warn('Worker failed, fallback to main thread', ev);
        this._workerSupported = false;
        this._runMainPath();
      };

      // 把两张图提取成 ImageData 并发送给 Worker
      const c1 = this._imageToCanvas(this._img1);
      const c2 = this._imageToCanvas(this._img2);
      const d1 = c1.getContext('2d')!.getImageData(0, 0, this._width, this._height);
      const d2 = c2.getContext('2d')!.getImageData(0, 0, this._width, this._height);

      this._pendingTextures = this.cacheSize;
      this._worker.postMessage(
        { type: 'init', width: this._width, height: this._height, hasAlpha: this._hasAlpha, cacheSize: this.cacheSize, img1Data: d1.data.buffer, img2Data: d2.data.buffer },
        [d1.data.buffer, d2.data.buffer]
      );

      // 请求生成所有中间帧
      for (let i = 0; i < this.cacheSize; ++i) {
        this._worker.postMessage({ type: 'generate', index: i, process: i / (this.cacheSize - 1) });
      }
    } catch (e) {
      console.warn('Worker init error, fallback to main thread', e);
      this._workerSupported = false;
      this._runMainPath();
    }
  }

  private _storeTexture(index: number, dataUrl: string): void {
    const tex = new Texture(dataUrl, this._scene);
    tex.hasAlpha = this._hasAlpha;
    this._cachedTextures[index] = tex;
    if (--this._pendingTextures === 0) {
      this._releaseImages();
      this._worker?.terminate();
      this._worker = null;
      this._trigger('load', this);
    }
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 主线程兜底路径 ----------------------- */
  /* ------------------------------------------------------------ */

  private _runMainPath(): void {
    for (let i = 0; i < this.cacheSize; ++i) this._generateOnMain(i);
    this._releaseImages();
    this._trigger('load', this);
  }

  private _generateOnMain(idx: number): void {
    const canvas = this._getCanvas();
    const ctx = canvas.getContext('2d')!;
    const prog = idx / (this.cacheSize - 1);

    if (this._hasAlpha) ctx.clearRect(0, 0, this._width, this._height);
    else {
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, this._width, this._height);
    }

    ctx.globalAlpha = 1 - prog;
    ctx.drawImage(this._img1, 0, 0, this._width, this._height);
    ctx.globalAlpha = prog;
    ctx.drawImage(this._img2, 0, 0, this._width, this._height);
    ctx.globalAlpha = 1;

    const dataUrl = canvas.toDataURL('image/png');
    const tex = new Texture(dataUrl, this._scene);
    tex.hasAlpha = this._hasAlpha;
    this._cachedTextures[idx] = tex;
    this._releaseCanvas(canvas);
  }

  /* ------------------------------------------------------------ */
  /* -------------------- 工具函数池 --------------------------- */
  /* ------------------------------------------------------------ */

  private _imageToCanvas(img: HTMLImageElement): HTMLCanvasElement {
    const c = document.createElement('canvas');
    c.width = this._width;
    c.height = this._height;
    c.getContext('2d')!.drawImage(img, 0, 0, this._width, this._height);
    return c;
  }
  private _getCanvas(): HTMLCanvasElement {
    return this._canvasPool.pop() ?? this._imageToCanvas(this._img1);
  }
  private _releaseCanvas(c: HTMLCanvasElement): void {
    this._canvasPool.push(c);
  }
  private _releaseImages(): void {
    [this._img1, this._img2].forEach((img) => {
      img.onload = img.onerror = null;
      try { img.src = ''; } catch {}
    });
  }
  private _trigger<E extends TBEvent>(event: E, arg?: any): void {
    this._listeners[event].forEach((cb) => cb(arg));
  }

  /* ------------------------------------------------------------ */
  /* -------------------- Worker 代码字符串 -------------------- */
  /* ------------------------------------------------------------ */

  private _workerCode(): string {
    return `
      let w,h,a,size,img1,img2;
      self.onmessage=e=>{
        const d=e.data;
        if(d.type==='init'){
          w=d.width;h=d.height;a=d.hasAlpha;size=d.cacheSize;
          img1=new Uint8ClampedArray(d.img1Data);
          img2=new Uint8ClampedArray(d.img2Data);
        }else if(d.type==='generate'){
          const i=d.index,p=d.process;
          const canvas=new OffscreenCanvas(w,h);
          const ctx=canvas.getContext('2d');
          if(a)ctx.clearRect(0,0,w,h);else{ctx.fillStyle='white';ctx.fillRect(0,0,w,h);}
          const tmp1=new OffscreenCanvas(w,h),t1=tmp1.getContext('2d');
          const tmp2=new OffscreenCanvas(w,h),t2=tmp2.getContext('2d');
          t1.putImageData(new ImageData(img1,w,h),0,0);
          t2.putImageData(new ImageData(img2,w,h),0,0);
          ctx.globalAlpha=1-p;ctx.drawImage(tmp1,0,0);
          ctx.globalAlpha=p;ctx.drawImage(tmp2,0,0);
          canvas.convertToBlob({type:'image/png'}).then(blob=>{
            const r=new FileReader();
            r.onload=()=>self.postMessage({type:'textureReady',index:i,dataUrl:r.result});
            r.readAsDataURL(blob);
          });
        }
      };
    `;
  }
}

四、实战 10 行代码

// 1. 创建混合器
const blender = new TextureBlender(urlA, urlB, 512, 512, scene, true);

// 2. Promise 风格等待完成
const tb = await blender.whenLoaded().catch(await blender.whenError());

// 3. 实时拖动进度条
slider.onValueChangedObservable.add((pct) => {
  material.diffuseTexture = tb.getTexture(pct) ?? fallbackTex;
});

// 4. 页面卸载时别忘了
window.addEventListener('beforeunload', () => blender.dispose());

五、性能与内存实测

结论：Worker 路径减少 ~75% 主线程阻塞时间，用户体验提升明显。

六、还能怎么玩？

1. 把 cacheSize 改成 32 → 更丝滑渐变，内存翻倍

2. 接入 WASM 版高斯模糊 → 先做模糊再混合，当天气遮罩

3. 扩展成“三张图”混合 → 线性插值 → 重心坐标插值，做 RGB 三通道掩码

七、结语

TextureBlender 很小，却浓缩了**“预生成 + 缓存 + 双线程 + 事件/Promise 双 API”** 一整套现代前端优化思路。
希望它能帮你把“卡顿的过渡”变成“丝滑的享受”。