Support webassembly target for hosting designs on websites?

[jasikpark]

I'm sure this is far in the future roadmap, but I think it'd be really cool to be able to compile a sketch to webassembly to be then executed as a page on a website.

I haven't really looked at this project yet 😅 so y'all might already support wasm? But there's definitely nothing in the guide, and I'm sure there's some particular kinks to work out with publishing on wasm, so I'll be interested to see how that plays out!!

Might be a helpful place: https://rustwasm.github.io/2019/02/13/this-week-in-rust-and-wasm-010.html

This looks awesome btw!

[mitchmindtree]

For sure, we have been thinking a lot on this! This was one of the major motivations for #452. There is work underway in both the audio and graphics backends to make it possible. RustAudio/cpal#372 and gfx-rs/wgpu-rs#101 are the two to watch. Then it's a matter of tracking WebGPU adoption in browsers and waiting for them to announce support in their stable releases.

[Type1J]

Duplicate of #7?

[Type1J]

With gfx-rs/wgpu-rs#101 closed, what's left?

[mitchmindtree]

The next steps for getting nannou running in the browser will be:

• Update to wgpu 0.5.
• Follow the steps outlined in the recent wgpu-rs blogpost - specifically, the "Getting started with wgpu-rs on the web" section. This will likely unvail a few other small web-target-incompatible corners of nannou (e.g. things like file saving / loading) however it should be easy enough to feature-gate these so that they are only available on non-web targets, or to change them to be web-target-friendly.

For nannou_audio, RustAudio/cpal#372 will still be necessary. As for graphics however, it seems we're getting closer!

[Type1J]

How close are we to web, now?

[AJTJ]

Indeed, how close are we? I would love to use Nannou to make interactive designs with WASM. Is there some way this process can be supported?

[Type1J]

I'm hoping that it will be, soon. D3 is nice, but mixing in some 3D is easier with Nannou. This may depend on the WebGPU standard (or draft) being supported in browsers due to web

[Woyten]

I tried hard to port microwave to the browser until I came to the conclusion that it is not possible at the moment and probably for a longer period of time.

Steps that can be done right now:

• Fix dependency setup
  • Activate the appropriate features (web_sys, bindgen) on winit and cpal
  • Use a versions of web_sys that is compatible with (or the same as) the version used in wgpu
  • Use more platform abstraction crates, e.g. instance
• Make Nannou async since blocking Futures cannot work in browsers. The transition seems pretty straight-forward and might result in replacing &App with Box<App>. The ModelFn could become something like pub type ModelFn<Model> = fn(&App) -> Box<dyn Future<Output = Model>>.
• Restrict texture formats to those that are accepted by browsers (e.g. https://hg.mozilla.org/mozilla-central/file/tip/dom/webgpu/CanvasContext.cpp#l74)

Blockers:

• wgpu's WASM support is very incomplete. Important functions required for GPU buffer initialization are unimplemented!(). On the master branch, however, the unimplemented!() parts have vanished, so there seems to be some progress at least.
• The browsers' support for WebGPU is far too experimental. Firefox Nightly seems to crash on a regular basis and Chromium's WebGPU feature isn't available on Linux. The limited browser support is a major blocker for Nannou on the web and I do not believe we will see stable browser support arriving this year.

The most promising shortcut to WASM IMHO:

• Build on WebGL before experimenting with WebGPU. WebGL is supported by every notable browser right now and support in wgpu-rs is planned.

[mitchmindtree]

Thanks for diving into this @Woyten and reporting back on your efforts!

It's a pity how slowly the browsers seems to be in adopting WebGPU. The fact that wgpu-rs are hacking on a WebGL backend is great to hear though.

This list of actionable steps is a big help! In my mind, the trickier of the three will be async-ifying nannou in a nice manner, purely due to how delicate the event loop is and how many strange edge cases there are on each of the platforms. I wonder if we'd do well to start by getting a simple async winit proof-of-concept going first, and then maybe extending it into a basic wgpu triangle example or something along these lines. I imagine from there the rest of how to asyncify nannou would fall into place nicely.