紋理融合——用 TypeScript + Babylon.js 打造“可混合紋理序列”

????????我不想搞個一新的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());