Notes on graphics programming in WebGPU

Coordinate systems

• https://learnopengl.com/Getting-started/Coordinate-Systems
• https://stackoverflow.com/questions/58702023/what-is-the-coordinate-system-used-in-metal
• https://www.sciencedirect.com/topics/computer-science/device-coordinate

Matrix transformations

• https://math.stackexchange.com/questions/363652/understanding-rotation-matrices

Textures

queue.WriteTexture is a much easier API than encoder.CopyBufferToTexture et al and doesn’t have the TEXTURE_BYTES_PER_ROW_ALIGNMENT limitations of DX12, according to Dawn team memeber Corentin

Instanced geometry and voxels

Tweet by Andre Weissflog:

Instancing is usually done with two vertex buffers, one with the static geometry, and a second buffer with per-instance data. Then the vertex layout is setup so that the vertex data from the second buffer is only stepped forward per instance (WGPUInputStepMode)

This method can go to a few hundred-thousand instances even on WebGL: https://floooh.github.io/sokol-html5/instancing-sapp.html (check the ‘src’ link for the commented source code, the sokol-gfx is similar to WebGPU).

However, instancing really only pays off when the instanced geometry isn’t that simple. For voxel rendering it’s most likely better to build mesh chunks on the CPU (for instance this older sample uses stb_voxel_render.h to convert the voxels to meshes: https://floooh.github.io/oryol-samples/wasm/StbVoxelDemo.html

WebGPU relative to other GPU APIs

• WebGPU for Metal Developers, Part One

Examples

• Capturing output into textures

Specs

• WebGPU
• WGSL — WebGPU Shading Language