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.
