WebGPUEngine cannot be used with SharedArrayBuffer

In order to use the SharedArrayBuffer, the following two headers are required in the https request

Cross-Origin-Opener-Policy: same-origin,
Cross-Origin-Embedder-Policy: require-corp

However, this header makes it impossible to download and run the script from CDN with different domains.

Currently, WebGPUEngine is also using a cdn to fetch glslang in the esm package, which is why you get this error and it won’t run.

To resolve this issue, the glslang dependency must also be included inside the npm package.

You can host the files yourself and pass the path to the files when creating the engine:

https://doc.babylonjs.com/typedoc/interfaces/BABYLON.GlslangOptions

1 Like

Thanks! I looked now and glslang is not available as an npm package? Where can I get the latest js and wasm?

cc @RaananW, I think we discussed about distributing some of our external dependencies in a npm package…

You can also get glslang from our CDN (https://cdn.babylonjs.com/glslang/glslang.js and https://cdn.babylonjs.com/glslang/glslang.wasm).

1 Like

Right! I moved them to the core package. We can do the same with the glslang dependencies. I’ll publish them in the assets directory of the es6 core package.

Are these the only ones needed?

1 Like

WebGPU also needs TWGSL (.js / .wasm), but I think they may already be in the package?

no wasms other than draco and basis are in our pckages, but if it is available in an external dependency somewhere there is no real need of including it. Let me know

This seems to work for me to use it without relying on a CDN.

const engine = new WebGPUEngine(canvas, {
    glslangOptions: {
        jsPath: new URL("./External/glslang.js", import.meta.url).href,
        wasmPath: new URL("./External/glslang.wasm", import.meta.url).href
    },
    twgslOptions: {
        jsPath: new URL("./External/twgsl.js", import.meta.url).href,
        wasmPath: new URL("./External/twgsl.wasm", import.meta.url).href
    }
});

And I added this postinstall to the package.json to automatically get the files from the cdn.

{
    "scripts": {
        "postinstall": "download https://cdn.babylonjs.com/glslang/glslang.js > ./src/Test/External/glslang.js && download https://cdn.babylonjs.com/glslang/glslang.wasm > ./src/Test/External/glslang.wasm && download https://cdn.babylonjs.com/twgsl/twgsl.js > ./src/Test/External/twgsl.js && download https://cdn.babylonjs.com/twgsl/twgsl.wasm > ./src/Test/External/twgsl.wasm",
    },
    "devDependencies": {
        "download-cli": "^1.1.1"
    }
}

I think this is probably the best way for now in an ESM environment with a bundler.

Ok, so I guess there’s no need to add the files in the core package.

Still, it’s a bit odd that the default behavior is to make the application CDN-dependent, since the service depends on the CDN server being operational.

Makes sense to add them to the package. I’ll submit a PR later today

2 Likes

Add GLSLANG and TWGSL to the core es6 package by RaananW · Pull Request #15071 · BabylonJS/Babylon.js (github.com)

1 Like