WebGPU Experiments

I started experimenting with WebGPU. My hope is that I'll be able to replace Sigma.js with a custom renderer tailored specifically to Helveg's purposes. However, right now, all I have is a few triangles and cubes.

In any case, I thought it could be helpful to have a place for some of my WebGPU findings... in case I need to find them again:

NDC

API	X range	Y range	Z range	Y Direction Origin	Handedness	Bottom-left corner	Source
WebGL	[-1, 1]	[-1, 1]	[-1, 1]	UP	Left-handed	[-1,-1,-1]	mdn-mvp
OpenGL	[-1, 1]	[-1, 1]	[-1, 1]	UP	Left-handed	[-1,-1,-1]	learnopengl
WebGPU	[-1, 1]	[-1, 1]	[0, 1]	UP	Left-handed	[-1, -1, z]^1	ndc-spec
Vulkan	[-1, 1]	[-1, 1]	[0, 1]	DOWN	Right-handed	[-1, 1, 0]^2	vulkan-spec

• ^1: Since by default the depth-buffer is set up to "less" meaning, for example, that 0.1 is in front of 0.5. The z coordinate can be though of as 0.
• ^2: Not immediately obvious from the spec. But is implied due to how viewport transformation is defined.

Math

• There's already a TypeScript math library acting much like glm for OpenGL: wgpu-matrix.
• Matrices in WebGPU are column-major, just like in WebGL, OpenGL, and Vulkan. Meaning they are transposed compared to how we'd write them on a paper.