The UX of Bevy's Web Story

[colepoirier]

With the closing of #88, @alice-i-cecile recommended we create a discussion that deals with the robustness of Bevy's UX in the web browser, now that Bevy's web support MVP has been accomplished.

Some issues that come to mind immediately are:

• Using the browser WebAudio AudioWorklet API to do background multithreaded audio using WebAssembly
• Contribute the functionality needed to to do background multithreaded audio using WebAssembly via the web platform's AudioWorklet API to the upstream dependencies of bevy_audio, cpal and rodio. Make necessary changes to bevy_audio to make use of this added upstream functionality.
• First party browser features like automatically resizing the Bevy app with the size of the window (I believe there was a 3rd party crate for this created by @frewsxcv during the Bevy Game Jam a few weeks ago) @mockersf resolved this below: "This is more of a winit responsibility, and will be fixed by Use ResizeObserver to control the size of the canvas rust-windowing/winit#2074"
• Discuss the current issues and limitations with bevy_render on the web
• Discuss the issues related to migrating from our current rendering implementation and backend on the web to WebGPU so we have a concrete plan and some experiments to build on when WebGPU is released in the stable versions of Chrome and Firefox (as mentioned by @mockersf below
• Discuss what features are the highest priority when we start to work on WebGPU support, @superdump mentioned a good number of things in the discord discussion here

There are myriad other issues with the current state of Bevy's UX story in the browser, I plan to mine the issues, PRs, and discussions that mention web/wasm to fill in the many things I've missed adding to this so far. I will continue to work on filling out this conversation description the rest of this week. Help and ideas would be greatly appreciated!

One of the first things I plan to do is to review all the comments on #88 and migrate the insights from the still relevant comments on that issue to this new discussion so that we do not lose them.

[mockersf]

Resizing Bevy with the size of the window

This is more of a winit responsibility, and will be fixed by rust-windowing/winit#2074

[colepoirier]

Great, I've now crossed that out with a reference to this comment and the fix for this issue.

[mockersf]

WebGPU support

I think Bevy should wait for WebGPU to be available at least in stable Firefox and Chrome before tackling support

[colepoirier]

This is intended to be a discussion of what we would like to explore before that happens so that we are ready to go and perhaps have some experiments to work off when the stable launch of WebGPU occurs.

[colepoirier]

I've updated the top-level comment of this discussion to better outline my proposal for the web rendering and WebGPU discussions.

[simbleau]

I think you should be looking into WebGPU before it becomes stable, to determine if it will be sufficient for Bevy's needs.

[mockersf]

WebAudio API

This feels too low level to have in Bevy directly. Could you check with rodio or kira if they intend to support it?

[mockersf]

from reading rodio & cpal, it seems it's already using WebAudio in https://github.com/RustAudio/cpal/blob/master/src/host/webaudio/mod.rs

[colepoirier]

IIUC that code is single-threaded, I've revised that point on the discussion description to reflect that I am referring to background multithreaded audio using the browser AudioWorklet API.

[colepoirier]

Would your preferred solution be to add support for this multithreaded wasm API to cpal and use it in Bevy that way?

[colepoirier]

Thanks to your insight and cart's input on this on discord here I now agree that a better approach is to contribute this functionality to bevy_audio's upstream dependencies - cpal and rodio - and to then make whatever changes are needed in bevy_audio to make use of this new functionality. I have updated the top-level comment to reflect this.

[frewsxcv]

First party browser features like automatically resizing the Bevy app with the size of the window (I believe there was a 3rd party crate for this created by @frewsxcv during the Bevy Game Jam a few weeks ago)

This is the crate, for the record: https://github.com/frewsxcv/bevy-web-resizer

[alice-i-cecile]

Web multithreading

This is generally useful for performance, but is particularly critical for the creation of async tasks.

[colepoirier]

The plan is to first get the regular (as opposed to the single-threaded) AsyncTaskPool working multithreaded on wasm using the approach used here https://github.com/GoogleChromeLabs/wasm-bindgen-rayon/tree/main/src. Subsequently I'd like to get bevy_ecs and bevy_render, i.e. the rest of bevy running multithreaded on wasm using the same approach. I think I'll need the help of the ecs-dev team to do the latter part, so if you can help me by getting them to look at this I would really appreciate it. More detail in #4078 which I am updating and reorganizing now.