JS implementation?

[wcandillon]

Congratulation on this amazing work. I would like to run some of these shaders on React Native where WebGPU is available via a JS binding.
I was looking at lib.rs to get a sense of how much boilerplate would need to be rebuilt to run it in JS.
Do you think it something doable? If I were to tackle this, would be be open to give me some guidelines on what would need to be done to get this working?

[munrocket]

WASM already in JS VM except Hermes facebook/hermes#429

If someone will port compute.toys to JS we probably will switch to JavaScript, because wgpu not support some experimental web-sys features gfx-rs/wgpu#5685

[davidar]

I've started porting the engine to typescript in compute-toys/compute.toys#218. It's not yet complete enough to run every shader on the site, but many of them work already.

(I am getting fed up with the webassembly ecosystem still continuing to randomly break shit after all these years... next year is its 10 year anniversary and apparently stability is still nowhere in sight)

[wcandillon]

@davidar thank you for the update, this is very interesting.

[wcandillon]

@davidar Thank you again for your PR, I this is very useful. I have a very beginner question, what are the benefits of using a computer shader instead of a quad + fragment shader? Are the benefits substantial? Sorry as it might sound as a "silly" question

[davidar]

With fragment shaders the main limitation is that (roughly speaking) each thread is associated with a specific pixel, so your code has to fit into the form of a function which takes a pixel coordinate as the input and outputs the pixel colour. People on shadertoy have done lots of very clever things within this restriction (particularly voronoi tracking and jump flood), but it does limit the kinds of programs you can run.

The main extra feature that compute shaders bring is the ability to write outputs to random-access buffers. This means that, instead of each thread only being able to influence the colour of a single pixel, they can write values into arrays that influence the colour of many pixels across the entire frame. This is useful for a bunch of different things, particularly particle systems (where you want each thread attached to a particular particle which could be anywhere on the screen).

A nice illustration of the difference is rendering the Buddhabrot fractal - with a fragment shader (and an accumulation buffer) it takes many frames to converge, whereas with a compute shader you can render the entire thing every frame.

[wcandillon]

Thank you so much David for taking the time to explain it to me. Really appreciate it and wishing you the best for the upcoming new year :)