This is really cool. As far as boilerplate goes WebGPU is really not that bad (one just needs to look at Vulkan to see how fun it can get) but really anything to lower the barrier to entry is nice.
I am curious about the API overhead here. For example if I run two separate passes using bare WebGPU I could use a single command encoder. Would two function calls here result in two command encoders?
Another question - from the example code this doesnt look asynchronous, does it wait for everything to finish before returning? I could also be misreading the code I dont know typescript very well.
Shadeup will try to fit it all into one command encoder but may need to split if the coder:
1. Manually flushes
2. Reads/downloads a buffer on the CPU
Most calls are lazily evaluated, and a small dep graph is built as you reference/draw things.
That being said, shadeup does make some perf sacrifices in the name of simplicity. I'd say it's well suited to prototyping and learning. Of course, once you have a working prototype of something porting it to native wgsl should be easy
Have you thought about having an "eject" command? For example, Create React App had an eject command to go from the self-contained version to a full customisable Webpack app.
Users can already kinda do this by showing the compiled output, but the js engine itself is still tucked away. At some point, I would probably have a tree shaken full output for each shadeup.
WebGPU main pain point is forcing everyone to rewrite their shaders, no wonder most Web native game engines are going the shading language abstraction route, when only Chrome does WebGPU on desktop, and it isn't even an option on mobile years to come.
Thus cross API WebGL / WebGPU shading middleware is needed.
Safari Technology Preview finally turned it on again. Of course when Apple will ship it on Mac and/or iOS is unknown but at least they showed some progress after hiding for 6 or more months
Don’t be fooled by “web” in the name. Just like WebAssembly is/will be a better JVM, WebGPU is already posed to be a better OpenGL/Vulkan. It is a full graphics API unconstrained by browser implementations, and available without a browser runtime.
I am curious, in what ways is WebGPU better than Vulkan or Metal? From my point of view, WebGPU going back to an interpreted shading language like OpenGL makes it conceptually closer to JavaScript than WebAssembly.
the elegant lightgl.js, which is an abstraction layer on top of WebGL that makes it much nicer to work with. Unlike THREE.js, it doesn’t make any assumptions about you wanting any concept of a camera or lighting or that you’re working in 3D at all.
Key highlight for anyone unfamiliar with web graphics technologies reading this comment and interested in trying one out themselves: as mentioned above, lightgl only abstracts WebGL and this is different than the more flexible WebGPU Shadeup abstracts. One example of the difference is the fluid sim example in lightgl/WebGL has to be written as pixel based shaders (meant to do operations on pixels in textures) while Shadeup/WebGPU let you do this as a pure general purpose compute shader (more like a generic bit of code that happens to run on a GPU). This is both much more flexible in terms of what you can do as well as much more efficient/scalable in execution.
The particles effect on this page is a great example of "old web" feel in a page with "new web" looks in that it's just so fun and impractical solely because it can be.
The "browse" button towards the bottom has a few editable examples as well, including one for the effect seen on the main page https://shadeup.dev/zv5twftezv2y
This is interesting, I'm working on something similar but I'm starting from an existing gpu language and working my way backwards to add more support and allow for efficient cpu side execution. It's more geared as a game engine language to support both the game script (allowing easy parallelization) and the rendering side of things (as it's already a gpu language). Mine is currently more geared towards vulkan though.
Looking through the examples on your website does give me some ideas though, I might try and adopt some of them myself.
Your project sounds interesting as well. Do you have a social channel or GitHub for this project? Or is there something I can follow to be updated when you release it?
I'd love to learn more about what you're working on as I've been wanting to integrate shadeup with existing game engines like unreal/unity but realizing it would be a massive undertaking.
I will warn that it's mostly been rewritten at this point, but most changes haven't made it to the repo due to being held up by my current employer's legal team. Most of the code is also poorly written due to it mostly being written during half asleep/burned out state. With all the "don't judge me to hard"'s out of the way, https://gitlab.com/Cieric/gellang
I don't currently have plans to integrate with an existing game engine, just my own. I have however considered in the past integrating with Godot, so that would be my first target if I do ever attempt it.
I also was assuming no one would use my project professionally so the idea was to be a superset of glsl so any glsl code could be pasted into a script and be compiled without any modifications. That would aid in debugging gpu code in an actual debugger without needing to rewrite it.
Once all the paper work is finished additional updates should start rolling out again since it would just be reviewing the new changes not everything again. Hope your expectations are in line, I'm not trying to under or over sell my project. I was just wanted to fix my own gripes with the projects of the time.
My startup has been working on WebGPU support for Unreal Engine 5 for the past several years, and we've already achieved multiple demos that will be going live relatively soon.
I learned WebGL three years ago but before I dove into the underlying concepts I used GPU.js [1] to quickly prototype my project. Eventually, the abstraction prevented necessary performance optimizations so I switched to vanilla GLSL and these vanilla GLSL "shaders" were initially ejected from GPU.js.
Writing JS code then looking at the generated WebGPU output is a great way to get familiar with WebGPU. Thanks for this.
webgpu hype is pretty cringe,even if you want to run in a browser (and most customers don’t) most game engines can still bake WebAssembly/WebGPU packages.
I think the main feature that's exciting for me is the gpgpu potential.
Even just looking at the ability to accelerate llms in the browser on any device without an installation is awesome
For example: fleetwood.dev has a really cool project that does audio transcription in browser on the GPU: https://whisper-turbo.com/#
Hah that was me ~12 years ago trying to get WebCL (OpenCL) through the same gate keepers. Meanwhile, in Python, we are doing multi-node multi-GPU. Maybe OpenAI's and soon Apple's success with LLMs will change the economics for them.
This is why I don't like Khronos APIs, even when actually those are the ones I know relatively well, the way they work end up being a much worse experience than writting backend specific plugins ourselves with much better tooling, also the extension spaghetti ultimately doesn't save us from multiple code paths anyway, given the differences between some of those extensions.
To pick your example, something like PyTorch ends up being a much better developer experience, similar to game engines, than relying on Khronos APIs.
I am curious about the API overhead here. For example if I run two separate passes using bare WebGPU I could use a single command encoder. Would two function calls here result in two command encoders?
Another question - from the example code this doesnt look asynchronous, does it wait for everything to finish before returning? I could also be misreading the code I dont know typescript very well.