Babylon.js WebGPU Ocean Demo — 完整踩坑记录

换成军舰后的图片源码运行后效果最后代码正常启动Babylon.js WebGPU Ocean Demo 本地运行踩坑全记录环境Chrome 145Babylon.js 6.26.0Windows 10问题一depth24unorm-stencil8类型错误报错TS2322: Type depth24unorm-stencil8 is not assignable to type GPUFeatureName原因该特性已从 WebGPU 规范移除。修复直接删除这一行。问题二requestAdapterInfo is not a function报错TypeError: this._adapter.requestAdapterInfo is not a function原因Chrome 新版将requestAdapterInfo()改为adapter.info属性Babylon.js 6.x 内部还在调用旧 API。修复在index.ts最顶部加 polyfilltypescriptif (typeof navigator ! undefined navigator.gpu) { const origRequestAdapter navigator.gpu.requestAdapter.bind(navigator.gpu); (navigator.gpu as any).requestAdapter async (options?: GPURequestAdapterOptions) { const adapter await origRequestAdapter(options); if (adapter typeof (adapter as any).requestAdapterInfo ! function) { (adapter as any).requestAdapterInfo async () { return (adapter as any).info ?? {}; }; } return adapter; }; } --- ### 问题三onResizeObservable 类型错误 **报错** TS2339: Property onResizeObservable does not exist on type ThinEngine原因onResizeObservable在Engine上不在ThinEngine上。修复RTTDebug.ts两处修改typescript// 1. 私有变量类型改为 any private _engine: any; // 2. 第178行加可选链 (this._engine as any).onResizeObservable?.add(this._resize.bind(this)); --- ### 问题四WebGPUEngine 与 Engine 类型不兼容 **报错** TS2740: Type WebGPUEngine is missing the following properties from type Engine修复index.ts里 engine 类型直接用anytypescriptlet engine: any;最终完整index.tstypescriptimport * as BABYLON from babylonjs/core; import { WebGPUEngine } from babylonjs/core/Engines/webgpuEngine; import { Engine } from babylonjs/core/Engines/engine; import { getSceneModuleWithName } from ./createScene; // 修复 Chrome 新版移除了 requestAdapterInfo if (typeof navigator ! undefined navigator.gpu) { const origRequestAdapter navigator.gpu.requestAdapter.bind(navigator.gpu); (navigator.gpu as any).requestAdapter async (options?: GPURequestAdapterOptions) { const adapter await origRequestAdapter(options); if (adapter typeof (adapter as any).requestAdapterInfo ! function) { (adapter as any).requestAdapterInfo async () { return (adapter as any).info ?? {}; }; } return adapter; }; } const getModuleToLoad (): string | undefined location.search.split(scene)[1]; export const babylonInit async (): Promisevoid { const moduleName getModuleToLoad(); const createSceneModule await getSceneModuleWithName(moduleName); (window as any).BABYLON BABYLON; await Promise.all(createSceneModule.preTasks || []); const canvas document.getElementById(renderCanvas) as HTMLCanvasElement; let engine: any; const webgpuSupported await WebGPUEngine.IsSupportedAsync; if (webgpuSupported) { const webgpuEngine new WebGPUEngine(canvas, { deviceDescriptor: { requiredFeatures: [ depth-clip-control, depth32float-stencil8, texture-compression-bc, texture-compression-etc2, texture-compression-astc, indirect-first-instance, ], }, }); await webgpuEngine.initAsync(); engine webgpuEngine; } else { engine new Engine(canvas, true); } (window as any).engine engine; const scene await createSceneModule.createScene(engine, canvas); (window as any).scene scene; engine.runRenderLoop(function () { scene.render(); }); window.addEventListener(resize, function () { engine.resize(); }); }; babylonInit().then(() {});package.json 依赖版本jsondependencies: { babylonjs/core: 6.26.0, babylonjs/gui: 6.26.0, babylonjs/inspector: 6.26.0, babylonjs/loaders: 6.26.0, babylonjs/materials: 6.26.0, lil-gui: 0.16.0 }注意去掉^防止自动升级到不兼容版本。修正后源码https://download.csdn.net/download/zhanglixin999/92736547