Timeline
Roadmap
I tried to come up with a roadmap for my research, but for now I was able only to have very rough timeline:

I think of my features more of like happy accidents during research, but I will plan them more precisely this week for sure. Meanwhile, I also went back to the very beginning of WebGPU Fundamentals.
WebGPU Fundamentals
The first thing that caught my eye was that WebGPU is an asynchronous API and is used inside of an async function. Another thing was requesting an adaper:
async function main() {
const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();
if (!device) {
fail('need a browser that supports WebGPU');
return;
}
}
main();
The adapter represents a specific GPU. Some devices have multiple GPUs.
Okay, now an important takeaway:
“Shaders are written in a language called WebGPU Shading Language (WGSL) which is often pronounced wig-sil.” I need to train it more: WIG-SIL
By the time I got to a red triangle on canvas, I had this conspect in Figma:

Now it makes more sense, so we can move further to running computations on the GPU.