Deploy examples on website in wasm

[mockersf]

Build examples in wasm and deploy them under https://bevyengine.org/examples

It adds:

• a gallery page of the examples built in wasm:
  
• a page per example
  

Notes

• I have done minimal styling. The gallery page is pretty much the same as the assets page
• It currently uses a fork of Bevy, https://github.com/mockersf/bevy/tree/my-webgl2-2. It's just main with [Merged by Bors] - Shader Processor: process imported shader bevy#3290 and [Merged by Bors] - enable Webgl2 optimisation in pbr under feature bevy#3291 merged in
• The gallery could use some screenshots, but those would need to be taken and saved on bevy repo side.
• The page is not linked anywhere in the site yet

[Weasy666]

This is a really nice idea, i like it!
Also +1 for screenshots and a link in the topbar.

[cart]

Great work as always! Some random thoughts:

• It would be cool if we dumped each example's source in a code block below the canvas (not something id block this on, just an idea)
• I think we should hold off on adding an "examples" link in high-visibility place like the navbar until we get feedback from people / see how these run generally on the various platforms we support. That should probably come in a separate pr.
• I'm also a bit worried about adding another navbar category because space is limited, especially on mobile. Another category would almost certainly start collapsing the categories into a hamburger menu by default on mobile. But it does seem like the examples should be easily discoverable. I'm open to any and all suggestions!

[Weasy666]

Hm...you're right, it will be a problem on mobile. I guess a good compromise would be to put a link on the Learn page, besides (or instead of) the already existing link to the example folder on GitHub.
Code blocks would definitely be nice, and additionally a link to the example's source code file on GitHub would also be nice, so that devs can directly jump to the source file.

[mockersf]

• It would be cool if we dumped each example's source in a code block below the canvas (not something id block this on, just an idea)

Added! The example page is very lacking in styling, but that's not my strong suit...

• I think we should hold off on adding an "examples" link in high-visibility place like the navbar until we get feedback from people / see how these run generally on the various platforms we support. That should probably come in a separate pr.

Yup, I wanted to have something deployed as soon as possible to check deploy is working, and to be able to point lots of people/os/browsers at it to check compatibility. But it doesn't need to be linked somewhere for that, plus an "official" link would be better with the 0.6 release post

[cart]

Added! The example page is very lacking in styling, but that's not my strong suit...

Happy to give that a go once we merge this :)

Yup, I wanted to have something deployed as soon as possible to check deploy is working, and to be able to point lots of people/os/browsers at it to check compatibility. But it doesn't need to be linked somewhere for that, plus an "official" link would be better with the 0.6 release post

Makes sense!

[Nilirad]

The generate-wasm-examples script seems hardcoded in a way that doesn't work unless you cd into the script directory. Not sure if this could be a problem or not. It was quite annoying before I figured out that it was compiling the examples outside the workspace.

[mockersf]

Not sure if this could be a problem or not.

It's how the two existing scripts, generate-assets and generate-errors, work. It would be best if the scripts worked no matter your current path, but they are meant to be run by the CI, and you can look into the action for how to run them.

Suggestions are welcome though, you can see from the number of commits to get the syntax right that I'm not really a fan of shell scripts 👍

[cart]

Looks like a good baseline to me. Lets get this merged!

[Weasy666]

Looks really nice, great work 😀

The 3D examples do not work for me. They throw the following error

panicked at 'wgpu error: Validation Error

Caused by:
    In Device::create_render_pipeline
      note: label = `pbr_opaque_mesh_pipeline`
    Internal error in VERTEX | FRAGMENT | VERTEX_FRAGMENT shader: Ambiguous field 'webgl_80162f7b6c86f28b' in blocks 'webgl_b0642670a5062d75' (VERTEX shader) and 'webgl_9e44ea47afb977a9' (FRAGMENT shader) which don't have instance names.


', /home/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/wgpu-0.12.0/src/backend/direct.rs:2273:5

I am on Firefox 95.0.2 (64-Bit) on Windows 10 with AMD Radeon RX570. All other examples, 2D, UI, Audio, Bevymark and the 2D game Breakout work fine. The link of the rect example does not work, but i guess that is because the example is from main branch and not available in latest, which will change with the release of 0.6.

[mockersf]

The 3D examples do not work for me. They throw the following error

That's due to gfx-rs/naga#1616 which makes it crash on everything except firefox on macOS...

The link of the rect example does not work, but i guess that is because the example is from main branch and not available in latest, which will change with the release of 0.6.

Yup!