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

一、为什么重复造轮子？

GPU 插值受限
material.diffuseTexture = texture1 后再 texture2 只能做“硬切换”，Babylon.js 的 DynamicTexture 每帧都画又会爆 CPU。
预生成 VS 实时生成
预生成 16 张图占用一点内存，却换来零运行时开销——适合进度条、角色换装、天气过渡等长期存在的动画需求。
Web-Worker 是免费午餐
浏览器空闲核不用白不用，把 16 张图丢给子线程并行渲染，主线程只负责收 dataURL，用户体验瞬间丝滑。

二、设计要点速览

表格

复制

特性	实现方式
零回调地狱	提供 `onLoad()` / `whenLoaded()` 事件 & Promise 双风格
容错友好	Worker 创建失败自动回退主线程，并触发 `onError`
内存可控	内置 16 张上限，可 `dispose()` 一键释放纹理与 Worker
只读安全	外部通过 `textures` 访问器拿到 `ReadonlyArray<Texture>`，无法意外修改数组

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

依赖：仅 @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 并发送给 Workerconst 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());