Render, dude

Previous post | Photo-editor

In the last post I built the UX component, but so far it doesn't do anything other than being highly entertaining for cats.

In this one I'm gonna write a render pipeline and by the end it still won't makes sense how to connect the \cough\ Dots.

How old is this browser?

In a past life I worked on an extremely cool photo editor that had a ton of features and 100k MAUs. It was built using WebGL, and it works on most browsers and most phones. So naturally I wanted to build this one on WebGPU which is available on less than 50% of the browsers that matter.

I use Firefox, so to build this thing I downloaded Firefox Nightly. Safari works too, but I had to enable the WebGPU feature flag.

Render..er

As I'm quite an overachiever I decideed that the API had to be right from the beginning, and I couldn't just throw everything inside a useEffect.

So I wrote a class that takes care of initialization, tear down, and rendering. WebGPU initialization is async, and Javascript doesn't have async constructors so I did the right thing and routed the initialization through a static function. Do the right thing.

Loading an image

Vertex Shader

It's easier to render a triangle, but that's unrelated to photo editors so I just skipped that part. The simplest vertex shader I could write for the editor is one that loads an image.

Fragment Shader

This is even simpler as all I did here was to return the color sampled from the texture, using the texture coordinates.