WebGPU error on engine init - Cannot read properties of null (reading ‘getCurrentTexture’)

Hey everyone,

I am having a problem when trying to enable webGPU in our platform.

I am doing this to initiate the engine.

   const engine = !useWebGPU
        ? undefined
        : await Common.triAsync(async () => {
              const eng = new WebGPUEngine(canvas, {
                  doNotHandleContextLost: true,
                  doNotHandleTouchAction: true,
                  deterministicLockstep: true,
                  lockstepMaxSteps: 4,
                  powerPreference: 'high-performance',
              });
              await eng.initAsync();
              return eng;
          }).getOrElseValue(undefined);

I get this error when running the code-

Cannot read properties of null (reading ‘getCurrentTexture’)
TypeError: Cannot read properties of null (reading ‘getCurrentTexture’)
at WebGPUEngine._startMainRenderPass (webpack-internal:///./node_modules/@babylonjs/core/Engines/webgpuEngine.js:2157:48)
at WebGPUEngine.clear (webpack-internal:///./node_modules/@babylonjs/core/Engines/webgpuEngine.js:996:22)
at Scene._clear (webpack-internal:///./node_modules/@babylonjs/core/scene.js:3670:26)
at Scene._clearFrameBuffer (webpack-internal:///./node_modules/@babylonjs/core/scene.js:3428:22)
at Scene.render (webpack-internal:///./node_modules/@babylonjs/core/scene.js:3802:14)
at eval (webpack-internal:///./src/Client.ts:590:25)
at WebGPUEngine._renderFrame (webpack-internal:///./node_modules/@babylonjs/core/Engines/engine.js:811:13)
at WebGPUEngine._renderLoop (webpack-internal:///./node_modules/@babylonjs/core/Engines/engine.js:838:26)
at _boundRenderFunction (webpack-internal:///./node_modules/@babylonjs/core/Engines/thinEngine.js:1251:52)

The error seems to happen when the render loop begins to run.

Any insights into what the issue could be would be very helpful.

Thanks!

You should make sure that canvas is really a canvas.

Also, can you just console.log(eng._context) after the await eng.initAsync(); line? Your error means that this._context is null, which should not happen (and in this case, you should have received an error before reaching this line…).

Okay, you are right, I missed some errors the first time.

These show up first.

Client.ts:308 BJS - [17:11:42]: Can not create WebGPU Device and/or context.
Client.ts:308 BJS - [17:11:42]: TypeError: Cannot read properties of null (reading ‘configure’)

I checked, and the canvas is there but eng._context is null after eng.initAsync() is executed.

WebGPU works in chrome on my machine, confirmed with this playground - https://playground.babylonjs.com/?webgpu#1F17BQ#113

I think the canvas you pass to the engine is not ok. Try to console.log it and see if it’s ok. You could also try to do canvas.getContext("webgpu") for testing purpose, just to see if you get an error or not.

2 Likes

The same canvas works for a normal WebGL engine, but I will log it soon and post the results. Thank you for your help.