[WIP] js_webgpu backend prototype

[Vipitis]

Remaining todos:

• implement physical size for canvas context to make both imgui examples work again
• understand and fix the problem in creating a timestamp query set
• implement jswriter.py as a Patcher and add the comment injector
• how do we package the wheel? (strip out unused code, pure python - but only in the browser?)
• try a graphic example without rendercanvas
• docs gallery (copy from rendercanvas)
• can we avoid copying buffers
• run tests on CI?
• cleanup all the commented out debug prints
• Warn users about glsl not being supported (or try wasm compiled naga?)

---

new weekend, new project...

I think there is two options to get wgpu-py into the browser: compile wgpu-native for wasm and package that, or call the js backend directly. I run into compilation errors with the rust code, so gave up there... but:

basically autocompleted my way through errors to see what kind of patterns are needed... everything around moving data requires more effort. While pyodide provides some functions, they feel buggy and unpredictable.
It is likely possible to codegen the vast majority of this and then fix up all the api diff - might get to that over the next few days.
structs have potential to make this easier.

I changed some of the examples to auto layout since I couldn't get .create_bindgroup_layout() to work - and you don't need it with auto layout.

works with pygfx/rendercanvas#115
couldn't get the cube example to work just yet, but triangle does - so the potential is there

more to come

[Vipitis]

there are were many headaches around the type conversion which aren't well documented... but I got to the cube in the end.
Haven't looked at any code gen approach as there is quite a few specialties like when it's okay to use keywords when calling the js function. For exmaple:

self._internal.getMappedRange(offset=js_offset, size=data.nbytes)

vs

self._internal.getMappedRange(0, size)

And the error you get is about not of type unsigned long long because these function parameters are GPUSize64 which lead me down a rabbit hole of using BigInt - and now I am not sure if that is required anymore.
Or when your dict contains the key "type" it accesses dict on the js side, not the value...
For anyone else giving this a try or making their branch from here - the comments will be all over the place and likely contradict themselves.

browser_cube.mp4

I will hopefully find some more time this coming week to continue and maybe get some more interesting examples to run (pygfx?/fastplotlib?).

[Vipitis]

super exciting to get imgui working with a few tweaks

imgui_example.mp4

cc @pthom thanks a lot for your article I read a few weeks ago, that motivated me to give it a try here!

[pthom]

@Vipitis : many thanks for the info, that looks very promising. Please keep me in the loop!

[almarklein]

I was expecting codegen to come a long way here. The codegen knows when the arguments of a function were actually wrapped in a dict in IDL, so we can generate the code to reconstruct the dict before passing it to the JS WebGPU API call.

[Vipitis]

I also think that codegen can do a lot, I just need to give it a try. The to_js method has a few more arguments to make use of, for example dict_converter which sounds like solves some problems. The custom accessor currently has two functions: access the ._internal object and replace dict/struct keys with camelCase. However it overwrites the default dict conversion.
It can likely also do the data conversion and more. So the whole API might look like the following which should be trivial to codegen.

def some_function(self, *args, **kwargs):
    js_args = to_js(args, eager_converter=js_acccessor)
    js_kwrags = to_js(kwargs, eager_converter=js_accessor, dict_converter=Object.from_entries)
    self._internal.someFunction(*js_args, js_kwargs)

[almarklein]

Whatever way this goes, what I care most about, is that when the IDL changes for a certain method, it will place some FIXME comment in the code for the JS backend, so that we won't forget to update that method there.

[Vipitis]

I feel like I have finally moved passt all the headaches and found a "general" approach to most functions. I switched to the pyodide dev branch as the upcoming 0.29 release makes changes to how dictionaries are converted... which has been a ton of pain and the upcoming version seems to work much better. I couldn't find any release timeline so it might still be month until there is a release...
Structs were the key to get all the default values while renaming keys to camel case.

Also got started with a codegen prototype and I am feeling confident this is largely going to work, depends on how much time I find in the coming week.

There was also some weirdness with css scaled canvas for click events and resizing with the imgui example - so the rendercanvas PR likely needs some more fixes, I will see if I can find time for that too.

[Vipitis]

two way too long evenings but I reached a codegen approach that works... but it feels really awkward and I am not happy with it. Still needs more patcher integration etc; but this finally allows autogeneration as well as custom implementations to be imported correctly.

(newest commit should be running the examples again)

[Vipitis]

apart from the imgui_backend example this works again with all the changes of todays rendercanvas and wgpu releases. Still needs the physical size most likely.

I will only find time on Friday the earliest to look into the timestamp query problem and writing a proper patcher. I will try to add the remaining todos at the top when I find time tomorrow.

[almarklein]

Nice!

[Vipitis]

again, @almarklein feel free to take over the branch if you have the capacity. I hope the current state isn't too messy 😬

[almarklein]

again, @almarklein feel free to take over the branch if you have the capacity. I hope the current state isn't too messy 😬

Thanks! For the time being I have other priorities. But this is nevertheless super-interesting so I definitely want to get this in at some point!