How do I use bevy as wasm in frontend frameworks?

[wangxiaochuTHU]

Hello, lately I'm thinking about use bevy inside a webview and hence considering the wasm of bevy.

I followed the steps in this wasm example and obtained 4 files, e.g. a.wasm, a.js, a.d.ts, a.wasm.d.ts. However, when I was trying to load a.wasm in Next.js, error happened saying

TypeError: WebAssembly.instantiate(): Imports argument must be present and must be an object

It seems that WebAssembly.instantiate() should take a second argument with the type Imports, but I don't know what it is or where it comes from. Is it the a.js file?

However, compiling my custom Rust project into wasm in the same way (i.e. wasm-pack build --target web) and loading itinto Next.js work correctly, without any trouble, even when it exports multiple functions.

I don't have much experience on next.js or typescript, since I'm using Tauri instead to save me from frontend framework. I don't know how to resolve this problem. Can anyone give some example on loading bevy wasm into Next.js? Thanks.

[JonahPlusPlus]

I haven't tried building Bevy for WASM before, but the unofficial cheat book has a page on it that you can check out. They use wasm-bindgen, so maybe you'll have more luck with that?

Edit: Looking more into the actual error, it sounds like the WASM module is importing something, so you have to provide an Imports object. Check the generated JS file for the WebAssembly.instantiate method and copy the second parameter. If it is a variable, also copy any code that initializes it.

[wangxiaochuTHU]

Thanks for your explanation on the relationship between Imports and the generated JS file. I looked into the JS file and saw a function getImports(), which seemed to be what I want. So I tried using var importObject = getImports to obtain the seconde argument of WebAssembly.instantiate. But loading wasm still failed in the line below

\\ TypeError: WebAssembly.instantiate(): Import #0 module="wbg" error: module is not an object or function
const { module, instance } = await WebAssembly.instantiate(bytes, importObject);

[wangxiaochuTHU]

Finally it appears that it is the bevy itself that causes the problem since it doesn't support Web Rendering out-of-the-box. Right? Just as the example said. The example notworking either is due to the reason that it depends on crate bevy_webgl2 which strictly restricts `wasm-bindgen = "0.2.69". However, this version of wasm-bindgen has a bug when generating JS file .

Edit

By switching bevy to >=0.6 and wasm-bindgen to lastest, bevy finally run in the web amazingly and the issue is resolved.

[bjorn3]

Bevy supports rendering on the web using webgl since version 0.6. bevy_webgl2 is now obsolete. The issue you are having is because you are attempting to use the compiled wasm module directly rather than using the javascript wrapper generated by wasm-bindgen. This wrapper is essential for interacting with web api's like webgl and the api to create a <canvas> element to render to. You have to use the wrapper generated by wasm-bindgen. wasm-pack uses wasm-bindgen internally.

[wangxiaochuTHU]

yes, it falls into the 20% part, you are right! Bevy can run inside my web page now by using init function generated by wasm-bindgen and wasm-pack. Thank you!

[afonsolage]

It all depends on what you are trying to do JS wise. Bevy, when built targeting wasm32-unknown-unknown, is just a wasm module which needs some imports. wasm-bindgen generate those imports in the *.js or *.d.ts, depending if you want to use JS or TS.

With that being said, the trick part is on wasm-bindgen, since --target web will generate a self contained JS module, which is intended to be used as follow:

  <script type="module">
    import init from './a.js'
    init()
  </script>

That's it and init will handle all bootstrap needed by wasm module, which includes supplying the needed imports.

If you want to manual compile and instantiate the wasm module, you can tell the *.js file to exports also the getImports() function, which does what you want:

export { initSync }
export default init;
// Add this:
export { getImports }

Then you can just use the getImports like so:

import {init, getImports} from './wabi.js'

Now just instantiate the module, like you always do, but this time, with the given getImprots:

const imports = getImports();
const module = new WebAssembly.Module(bytes);
const instance = new WebAssembly.Instance(module, imports);

[wangxiaochuTHU]

Thank you for this guideline, it helps me know the process from a much clearer view, thanks!