Adding FullscreenUI to WebGPU engine causes fatal error on render

This error does not happen on the playground, but does for my dev environment (React+Webpack).

Here is a link to a barebones copy of my project, which will throw the error: gpu-ui-bug-demo.zip (via Google Drive)
Simply call npm install to load dependencies, and npm start to run the dev server.

Relevant code:

import * as GUI from '@babylonjs/gui';
...
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
...
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.0, 0.0, 0.0);

const camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.lowerRadiusLimit = 5
camera.attachControl(canvas, true);

//var fullscreenUi = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
const box = BABYLON.MeshBuilder.CreateBox("box", {
  size: 1
}, scene);

Uncommenting the FullscreenUI line causes this error to occur:

webgpuCacheRenderPipeline.ts:1027 Uncaught TypeError: Failed to execute 'createRenderPipeline' on 'GPUDevice': Failed to read the 'vertex' property from 'GPURenderPipelineDescriptor': Failed to read the 'buffers' property from 'GPUVertexState': Failed to read the 'arrayStride' property from 'GPUVertexBufferLayout': Required member is undefined.
    at e._createRenderPipeline (webgpuCacheRenderPipeline.ts:1027:1)
    at e.getRenderPipeline (webgpuCacheRenderPipeline.ts:225:1)
    at t._draw (webgpuEngine.ts:3611:1)
    at t.drawElementsType (webgpuEngine.ts:3684:1)
    at Layer.render (layer.ts:354:1)
    at LayerSceneComponent._draw (layerSceneComponent.ts:87:1)
    at LayerSceneComponent._drawCameraForegroundWithPostProcessing (layerSceneComponent.ts:110:1)
    at e._renderForCamera (scene.ts:4567:1)
    at e._processSubCameras (scene.ts:4590:1)
    at e.render (scene.ts:4989:1)
e._createRenderPipeline @ webgpuCacheRenderPipeline.ts:1027
e.getRenderPipeline @ webgpuCacheRenderPipeline.ts:225
t._draw @ webgpuEngine.ts:3611
t.drawElementsType @ webgpuEngine.ts:3684
render @ layer.ts:354
_draw @ layerSceneComponent.ts:87
_drawCameraForegroundWithPostProcessing @ layerSceneComponent.ts:110
e._renderForCamera @ scene.ts:4567
e._processSubCameras @ scene.ts:4590
e.render @ scene.ts:4989
(anonymous) @ App.js:33
e._renderFrame @ abstractEngine.ts:925
e._renderLoop @ abstractEngine.ts:895
_boundRenderFunction @ abstractEngine.ts:887
requestAnimationFrame
b @ abstractEngine.ts:86
e._queueNewFrame @ abstractEngine.ts:942
e._renderLoop @ abstractEngine.ts:918
_boundRenderFunction @ abstractEngine.ts:887
requestAnimationFrame
b @ abstractEngine.ts:86
e._queueNewFrame @ abstractEngine.ts:942
e._renderLoop @ abstractEngine.ts:918
_boundRenderFunction @ abstractEngine.ts:887
requestAnimationFrame
b @ abstractEngine.ts:86
e._queueNewFrame @ abstractEngine.ts:942
e.runRenderLoop @ abstractEngine.ts:949
initAsync @ App.js:32
await in initAsync
(anonymous) @ App.js:45
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
(anonymous) @ react-dom.development.js:26808
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

I’m really not sure what to make of this. I’m not familiar enough with the internals of the package to facilitate a proper investigation.

cc @Evgeni_Popov , our WebGPU guru (…GPUru?) :slight_smile:

1 Like

You are mixing different packaging of Babylon.js by doing:

    "@babylonjs/gui": "^7.35.0",
    "babylonjs": "^7.35.0",

You should use ES6 in both cases:

    "@babylonjs/gui": "^7.35.0",
    "@babylonjs/core": "^7.35.0",

and in App.js, do import * as BABYLON from '@babylonjs/core';.

3 Likes

Besides @Evgeni_Popov advice, I would recommend to use more modern environment, for example Vite+React+TS. Otherwise there are too much deprecated dependencies.

Thanks for the advice! It hadn’t occurred to me that there would be a support difference, but that definitely makes sense.