notes:webgpu fundamentals

vertex shader: coordinate/position of vertices

• by default, every 3 vertex create a triangle

fragment shader: how to color each pixel while draw

• being called by GPU every time each pixel is drawn

#wgsl

• @vertex annotate this is a vertex shader

• @fragment annotate this is a fragment shader

• TODO something about compute shader

interstage variable: is a variable pass between vertex shader and fragment shader

• connection between vertex shader and fragment shader is location()

• those value will be interpolated between points

webgpu data memory layout

• use typed array to create a memory view

  • this is a binary format

  • new ArrayBuffer(12) will create an array buffer with 12 bytes

    • 1 byte = 8 bits

    • index will be 0-11

  • new Float32Array(3) will create an array buffer with 12 bytes (3*32/8)

    • 32 here means 32 bits 😨 = 4 bytes per slot

    • index here will be 0-2

  • note: 1 byte usually a smallest unit of memory access when referring to all this stuff

• every type in [[webgpu]] have alignment requirement

  • align 8 means the data only start at offset multiple of 8 i.e 0, 8, 16

  • for a given type it must be aligned to a multiple of bytes

  • struct and array have different rules for alignment

  • readmore and library to do this for us:

    • WGSL spec id:: 6492d663-b72f-4371-9e7b-97f841ad4e38

    • visual

    • webgpu-utils

uniforms is a global variable from outside passed into shader

• step to pass uniform into shader

  • create resource aka buffer with device.createBuffer

    • defined with size and usage

  • create values in the host language(in this case js) with typed array

    • be sure that your data layout and alignment is correct

  • create bindGroup to. bind the buffer resource create from step 1

  • copy the value from the host into shader using device.queue.writeBuffer

  • set setBindGroup during renderpass

storage buffers

• syntax:

  • @group(x) @binding(y) var<storage,read>

• different from uniform buffers

  • can both read or write

  • much larger

    • storage buffer: 128mb

    • uniform buffer: 64kb

  • uniform is usually faster (i think because of read only nature)

    • work for use case like passing global, reusable that repeatedly used throughout the app

      • example: orientation, material properties

draw() call have a second parameter is instanceCount

• which define the number of instances to draw

• default to 1

• can be use to draw 100 of triangles with a single draw call

  • storage buffer is big enough to house hundreds of triangle

vertex buffers

• we can draw triangle as much as we like as long as vertex shader return @builtin(position)

• @location() is the input and output of outside world

  • location(0) for input and output is completely related

    • for output: it’s a canvas or view defined in render pass descriptor

    • for input: it’s a location where the vertex data can pulled data from the outside world, defined in render pipeline descriptor

index buffers describe order to draw vertices

• create an index buffer with GPUBufferUsage.INDEX

• set index in render pass with pass.setIndexBuffer

• draw using pass.drawIndexed instead

• micro optimization, save space instead of recompute same vertices