Wasm-bindgen: Add a WebGL and web-sys example to `examples` and the guide

[fitzgen]

General info on WebGL: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

• [ ] Add an example to examples/ that shows off working with WebGL
• [ ] Add a subsection to "web-sys >> examples" in the guide and include this example

[chinedufn]

@fitzgen if it's a helpful resource at all I've been working on a wasm-bindgen + WebGL visualizer for meshes / rigs that I'm exporting from Blender

https://github.com/chinedufn/blender-exporter/tree/master/mesh-visualizer

https://github.com/chinedufn/blender-exporter#running-the-mesh-visualizer-locally

Would also be happy to work on a more stripped down example if no one else is already on that.

Do we already have an idea for an example in mind?

[fitzgen]

I've been working on a wasm-bindgen + WebGL visualizer for meshes / rigs that I'm exporting from Blender

Neat!

Do we already have an idea for an example in mind?

I don't. I'm hoping for something that is pretty self contained, since examples shouldn't require a lot of unrelated context. Maybe a mandelbrot or julia set visualization? Even just drawing a triangle could work.

[chinedufn]

Gotcha!

I think the goal would be to demonstrate the following in the simplest way possible (open to other goals!):

1. Linking a shader program
2. Getting data to the GPU with minimal/no vector cloning
3. A request animation frame render loop

A triangle would sure be simple and it would hit on 1 and 2, but not 3.

So one step up from that that would also hit on 3 might be rendering a cube with lighting (just so that you can tell that it's a cube).

?

[fitzgen]

We could also just make the triangle spin. Lighting requires a little bit more context and background knowledge, I think.

[blm768]

I've got my own WebGL-based project that would benefit greatly from having proper WebGL bindings instead of the ad-hoc stuff I've cobbled together. I could probably contribute a few tests to get things started.

[chinedufn]

Great idea on just making a triangle spin. Perfect! I'll try to make some time for this this weekend but not 100% certain yet.

One question:

Is it possible to depend on the web-sys crate in an example right now? Would be great to make separate PRs as I go to add the bits of the API that I need instead of hard coding the externs

Sorry if that's a silly question.. still learning!

[fitzgen]

@chinedufn Although web-sys is not published to crates.io yet, you can use a relative dependency in examples/webgl/Cargo.toml:

[dependencies]
web-sys = { path = "../../crates/web-sys" }

Note that we may be putting the cart ahead of the horse by working on an example before we've enabled bindings for the WebGL interfaces, however :)

[blm768]

Note that we may be putting the cart ahead of the horse by working on an example before we've enabled bindings for the WebGL interfaces, however :)

Yeah; I'm concerned about that as well. From the bit of testing I just did, it looks like getting the full bindings supported may be non-trivial; these bindings are an order of magnitude larger than the currently enabled ones, and not everything is showing up in the docs, so it seems likely that we'll have to add some features to the webidl crate.

[fitzgen]

Yep, that's expected. The plan is to drive forward the wasm-bindgen-webidl crate based on what we actually need to generate bindings for these APIs.

[blm768]

I've got an extremely minimal test in my branch; it basically just creates a WebGLRenderingContext and passes it to a function that does nothing with it. It seems like getting code generation working for the constants and the WebGLContext.clear* functions would be a reasonable starting point. I'm not familiar enough with the WebIDL stuff yet to know where to start, but I'll poke around and see if I can figure something out.

[fitzgen]

@blm768 just a note: rather than modifying .webidl files, we should be extending support in the webidl frontend crate.

In general, we are happy to make small incremental progress, enabling .webidl files if they don't break the crate, even if we aren't generating bindings for all the things described therein yet.

[chinedufn]

Ah I was thinking that the demo creation could happen in parallel (add some externs.. hard code the externs that don't exist yet.. rinse and repeat) but sure waiting for WebGL apis to be in place first makes sense thanks for the heads up!!

[blm768]

rather than modifying .webidl files, we should be extending support in the webidl frontend crate.

That makes sense. My modifications were just a quick hack to keep errors in the generated bindings from terminating the test, but now that I've got a better handle on what's going on, I'll look into implementing support for [NoInterfaceObject] before I put these changes into a PR.

[fitzgen]

I think we are ready for a WebGL example if anyone was waiting for web-sys to mature a little more before trying to create an example.

[blm768]

I've got a slightly larger project that I think I could pare down into a working demo.

[alexcrichton]

This has now been done, thanks @blm768!