Welcome to the Shadeup learning module! This set of tutorials will guide you in your graphics programming journey through the lens of Shadeup.
Graphics programming is the art of painting pixels on a computer screen (but not just pixels, we can do more). You probably already know how to do this with your favorite programming language via things like game engines, canvases, css, or UI frameworks. However, in our case, we’re going to dive deeper than these abstractions and approach the very bottom of how actual pixels get painted using GPUs.
Programming GPUs at the lowest level can be hard though, and as mentioned users will employ higher-level libraries like Three.js to do this. You’re better off using these libraries for most of the problem cases you might come across, but sometimes you need more power and this is where Shadeup and WebGPU come in.
First, let’s define what Shadeup is and how it can help you.
Shadeup is a DSL (Domain Specific Language) for graphics programming and other GPU applications. Graphics code consists of traditional CPU code (think C, C++, Python, etc.) and GPU code called shaders. Shadeup is designed to help you write GPU code in an easier and more readable way.
Shadeup abstracts away boilerplate and condenses down code into something easier to understand and maintain. By building a custom language, Shadeup is designed to be more expressive and focused on graphics tasks than traditional methods of writing shaders.
Shadeup generates Javascript code and WebGPU shader code from your Shadeup files. This generated code can then be embedded in your web application to render graphics on the GPU.