WebGPU not working in vite project

Bugs
, ,
1

Hi!

I just wanted to test out webgpu now that it is available in chrome 113.

But I ran into problems straight away.

I created a new babylon vite project via the create-babylon npm library

npm init babylon@latest

Then I went into main.ts and replaced the new Engine with

const canvas = document.getElementById('app') as HTMLCanvasElement
const engine = new WebGPUEngine(canvas, { antialias: true, adaptToDeviceRatio: true, powerPreference: 'high-performance' })
await engine.initAsync()

which is the only thing I should have to do according to the docs.

Since I am trying to tree shake away as much as possible, maybe I’m missing some vital part of the webgpu support?

The error I’m getting is

Uncaught TypeError: Cannot read properties of undefined (reading ‘createBuffer’) in engine.uniformBuffer.ts:61

I’m running babylon 6.2.0

As I cannot get the error in the sandbox I created a github repo instead.

Looking forward to explore webgpu and WGSL more :rocket:

2

I don’t know why, but you need to import the WebGPU extensions:

import '@babylonjs/core/Engines/WebGPU/Extensions/'

If you don’t do it, the extensions attached to the WebGPUEngine prototype are the WebGL ones…

cc @RaananW as it does not feel right.

1 Like
3

Yeah, i agree :blush:
It should have been loaded.
We had a discussion about which extensions should be included without actively importing them. We can gladly revisit this discussion

1 Like
4

Awesome, now it works :slight_smile:

Yeah, there are multiple strange imports that you need to be able to get babylon working when trying to be a good tree shaker.
These where not easy to find, and the errors are very clunky.

If we could make it so we don’t have to do these strange imports to get things working it would make my day :slight_smile:

// shadows
import ‘@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent’

// texture loading
import ‘@babylonjs/core/Materials/Textures/Loaders/envTextureLoader’

// needed for skybox texture
import ‘@babylonjs/core/Misc/dds’

// edges
import ‘@babylonjs/core/Rendering/edgesRenderer’

// gltf loading
import ‘@babylonjs/loaders/glTF/2.0’

// animations
import ‘@babylonjs/core/Animations/animatable’

1 Like