[SOLVED] Error on WebGPU creation

Questions
1

Hi,
tried to make small example on WebGPU but got error on engine creation even without any other data.
Code:

import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";

async function init() {

    const webGPUSupported = await WebGPUEngine.IsSupportedAsync;
    if (webGPUSupported) {
        const canvas = document.createElement("canvas");
        canvas.width = 1024;
        canvas.height = 768;
        document.body.appendChild(canvas);
        const webGpuEngine = new WebGPUEngine(canvas, {
            powerPreference: "high-performance",
        });
        await webGpuEngine.initAsync();
    }
}

init();

Error:

Screenshot 2023-06-29 at 09.30.50
Screenshot 2023-06-29 at 09.30.501242×1498 161 KB

Babylon version: 6.9.0
OS: macOS 13.4.1 (22F82)
Chrome: 114.0.5735.198
Package.json:

{
  "name": "webgpu-hello-world",
  "version": "1.0.0",
  "description": "Hello World WebGPU",
  "private": true,
  "scripts": {
    "start": "webpack serve"
  },
  "devDependencies": {
    "html-webpack-plugin": "5.5.3",
    "ts-loader": "9.4.4",
    "typescript": "5.1.6",
    "webpack": "5.88.1",
    "webpack-cli": "5.1.4",
    "webpack-dev-server": "4.15.1"
  },
  "dependencies": {
    "@babylonjs/core": "^6.9.0",
    "@babylonjs/gui": "^6.9.0",
    "@babylonjs/gui-editor": "^6.9.0",
    "@babylonjs/inspector": "^6.9.0",
    "@babylonjs/loaders": "^6.9.0",
    "@babylonjs/materials": "^6.9.0",
    "@babylonjs/serializers": "^6.9.0",
  }
}

Tsconfig.json:

{
    "compilerOptions": {
      "baseUrl": ".",
      "outDir": "./bin/",
      "moduleResolution": "node",
      "noImplicitAny": false,
      "module": "es6",
      "target": "es6",
      "jsx": "react",
      "allowJs": true,
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "typeRoots": ["./node_modules/@types"]
    },
    "include": [
      "src/**/*.ts"
    ]
  }

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    mode: 'development',
    devtool: 'source-map',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'bin'),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './bin/index.html'
      })
    ],
    devServer: {
        compress: true,
        port: 4444,
        hot: true,
    }
  }

After digging around, found that gl is missing in some places in the engine.
Also noticed that packages/dev/core/src/Materials/uniformBuffer.ts imports webgl extension all the time is it by design ?

Anyone have ides where to dig further, as BJS demo of WebGPU works fine, maybe some race conditions with extension imports due to webpack builds ?
Thank you for any information

2

Maybe you should import the full Babylon.js package:

import * as BABYLON from "@babylonjs/core"
import '@babylonjs/loaders' // import model file you need to import
import '@babylonjs/inspector' // use inspector you need to import
1 Like
3

Hi @zhangyahan thank you for idea looks like

import { WebGPUEngine} from "@babylonjs/core"

works, could be that there are side effects that breaks if you dont import whole packgage.

thank you

4

yup definitely this @Hersir you could try adding all webgpu side effects :

import "@babylonjs/core/Engines/WebGPU/Extensions";

2 Likes
5

Thank you @sebavan looks like it works now

1 Like