[WIP] js_webgpu backend prototype

[Vipitis]

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]

I did some experimenting into the new promise api and came up with a solution like this. Does this match the indented way?

[almarklein]

I think you can do:

promise = js_adapter_promise.then(adapter_constructor, title="request adapter") 
return promise

[Vipitis]

the async js functions return a PyodideFuture which isn't quite the same as GPUPromise. I tried inheriting both for the GPUPromise subclass in the js backend - but that is likely making it more complex than it needs to be. I am sure there is a way you can have the constructor take the pyodide future object (maybe classmethod as a constructor) to automatically have this chain internally.
But to have the user facing API be the same between native and browser - some wrapper will be there. For instance there is a call to .sync_wait() during the cube example.

I will see if I can get away with using the webloop and no poller, tho.

[almarklein]

Ah, of course. In that case your code should indeed to the trick.

I would indeed not try to inherit from pyodideFuture or anything like that. Since its internal code its fine, imo. We also don't make an attempt to interface with e.g. an asyncio.Future ...

We cannot mimic sync_wait in Pyodide; code that must run in Pyodide must either use await or then.

[Vipitis]

pyodide has run_sync() as a function and that seems to do something really similar to .sync_wait() - as this "implementation" works so far:

wgpu-py/wgpu/backends/js_webgpu/__init__.py

Line 128 in 078cdc3

def sync_wait(self):

I linked a blogpost there, which I don't fully understand but I believe the goals are the same.