# WebGPUEngine cannot be used with SharedArrayBuffer

**URL:** <https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335>\
**Category:** Bugs\
**Tags:** webgpu\
**Created:** [May 7, 2024, 1:24am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335 "2024-05-07T01:24:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [May 7, 2024, 1:24am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/1 "2024-05-07T01:24:41Z")

</div>

In order to use the [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer), the following two headers are required in the https request

```auto
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.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/6/66ff66400be03be45eb0713fe329d644fc91da06.png)

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 7, 2024, 9:24am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/2 "2024-05-07T09:24:04Z")

</div>

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](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.GlslangOptions)

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [May 7, 2024, 10:09am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/3 "2024-05-07T10:09:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 7, 2024, 10:55am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/4 "2024-05-07T10:55:38Z")

</div>

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](https://cdn.babylonjs.com/glslang/glslang.js) and [https://cdn.babylonjs.com/glslang/glslang.wasm](https://cdn.babylonjs.com/glslang/glslang.wasm)).

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 7, 2024, 10:57am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/5 "2024-05-07T10:57:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 7, 2024, 11:06am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/6 "2024-05-07T11:06:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 7, 2024, 11:07am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/7 "2024-05-07T11:07:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [May 7, 2024, 11:41am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/8 "2024-05-07T11:41:38Z")

</div>

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

```typescript
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.

```json
{
    "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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 7, 2024, 11:43am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/9 "2024-05-07T11:43:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [May 7, 2024, 11:46am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/10 "2024-05-07T11:46:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 7, 2024, 11:53am UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/11 "2024-05-07T11:53:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 7, 2024, 1:22pm UTC](https://forum.babylonjs.com/t/webgpuengine-cannot-be-used-with-sharedarraybuffer/50335/12 "2024-05-07T13:22:54Z")

</div>

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