Make Nannou run in WASM environment

[Woyten]

I managed to execute my synthesizer microwave in Firefox using WGPU's WebGL2 backend. A running demo can be tested here. The graphics is super fast but the audio (without any parameter tuning) is surprisingly slow and underruns on my Firefox. As a side note, audio has always been a problem during my WASM experiments and seems to be a weak point of CPAL.

The path to WASM via WebGL seems straightforward:

• Adapt the code s.t. it can be compiled to WASM (Use instant crate for WASM compatibility #702 and Make nannou package compile in WASM environment #715)
• Expose some async Nannou functions since blocking is unsupported in browsers (Add async twin functions for WASM support #815)
• Use wgpu's webgl feature (Enable wgpu/webgl when WASM feature is enabled #822)
• Add Backends::GL to the list of default backends (Add GL backend to default backends for better WASM support #812)
• Reduce the device limits to Limits::downlevel_webgl2_defaults() (See https://github.com/Woyten/tune/commits/wasm)
• Attach the created windows to the DOM (this PR)

[mitchmindtree]

@Woyten, this is so ridiculously cool, nice work on all these PRs! The microwave demo appears to work really well in my firefox browser too.

As a side note, audio has always been a problem during my WASM experiments and seems to be a weak point of CPAL.

Yeah totally, I realise that audio support for CPAL is still difficult/lacking, hopefully we can improve upon it in the future and eventually see nannou_audio working on the web too, but I totally understand omitting going down that route for now. This is already a huge step for nannou :)

Reduce the device limits to Limits::downlevel_webgl2_defaults()

I just tried checking for the commit linked for this but looks like it might have moved?

Otherwise I think we should be ready to rebase this PR onto master for that last step of attaching the windows to the DOM and adding the wgpu webgl feature.

Thanks again for all this work, can't wait to have a play at some point! It feels good to know we have the built-in CI for the wasm target too to hopefully keep this relatively stable. After this it could be cool to start something like a examples/wasm or examples/web directory with some basics, and maybe add a tutorial to https://guide.nannou.cc.

[Woyten]

@mitchmindtree Yes it's awesome that so many people made wgpu a really powerful multi-platform crate and that Nannou is always catching up with wgpu's nasty breaking changes! And thanks for making it possible to merge PRs in an uncomplicated manner!

Sorry the given link to my branch was broken. I had three WASM branches two of which I could remove eventually. The link should be working now.

As for the PR: I will rebase the branch as soon as possible s.t. we can see what's still missing.

[AJTJ]

I'm excited by this! Thanks @Woyten!

[AJTJ]

@Woyten can I help with getting this PR complete?

[Woyten]

@AJTJ The last missing pieces for a very basic WASM experience are DOM mounting/unmounting. This PR contains code which mounts a window to the DOM after creation.

What's missing?

• DOM unmounting. You could help by adding a PR which removes a window from the DOM once it gets destructed.
• Multiple windows. For some reason, only a single window can be created. You could help by finding out why creating a second window fails.

@mitchmindtree How do yo want to proceed with this PR? I could make it merge-ready and we address the points mentioned above in separate PRs. This PR will only affect the wasm32 architecture due to the feature toggle.

[AJTJ]

I just started a new job and so I don't have the space for this anymore, but I'll check back in at a later date to see if this still needs work and I have more space.

[that-coder]

Is this in the release branch yet?

[Woyten]

@that-coder Everything needed to make a basic Nannou experience on WASM a reality has been merged into the master branch except for this PR. This PR could be merged right now (it will only have an effect if the wasm-experimental feature is active) but, as mentioned in the previous comments, DOM unmounting and multi-window support aren't working yet.

[that-coder]

Thanks. Is there any docs related to nannou wasm integration that I can refer too?

[mitchmindtree]

Long overdue on my part - great stuff @Woyten ❤️

[Digma]

Hi, am I understanding properly that I should be able to mount the canvas to a specific DOM element?

If so, how is that done? When configuring the app window (e.g. some option of app.new_window()or is there a way to use something like element.set_inner_html("Hello from Rust!"); in web_sys ?

I tried looking into the code and documentation but could not find it