WebGPU

學海無涯，思境無維；數乃六藝，理之始也。
或有一得足矣 愚千慮

$$$$

https://medium.com/@AlainGalvan/raw-webgpu-58522e638b17

• Spec: https://gpuweb.github.io/gpuweb/
• WGSL: https://gpuweb.github.io/gpuweb/wgsl.html (Rust based)
• SPIR: https://www.khronos.org/spir/ (Satndard Portable Intermediate Representation)
• Samples: https://austineng.github.io/webgpu-samples/
• Chrome: Get Started with GPU Compute on the Web
  • chrome://flags/#enable-unsafe-webgpu
  • Safari > Develop > Experimental Features > WebGPU

Model

GPU

• requestAdapter()

request different adapter for different preference(ex: low-power)

Adapter

• requestDevice()

Swap Chain

https://en.wikipedia.org/wiki/Swap_chain

A swap chain is a series of virtual framebuffers utilized by the graphics card and graphics API for frame rate stabilization and several other functions.

• screen buffer
• back buffer(s)

The swap chain usually exists in graphics memory, but it can exist in system memory as well. The non-utilization of a swap chain may result in stuttering rendering, but its existence and utilization are required by many graphics APIs.

A swap chain with two buffers is a double buffer.

• Different present modes to prevent tearing on different devices.
• frame buffer pixel formats
• frame buffer size may change if window resizing.

Buffers

Create GPU Buffer

• device.createBuffer()
• buffer.getMappedRange() : get array buffer for CPU(js) from GPU.
• buffer.unmap() : return the control back to GPU.

// Get a GPU buffer in a mapped state and an arrayBuffer for writing.
const gpuBuffer = device.createBuffer({
  mappedAtCreation: true,
  size: 4,
  usage: GPUBufferUsage.MAP_WRITE
});
const arrayBuffer = gpuBuffer.getMappedRange();

// Write bytes to buffer.
new Uint8Array(arrayBuffer).set([0, 1, 2, 3]);

// unmap the buffer from CPU, so GPU can use it now.
gpuBuffer.unmap();

Buffer Mapping

Get the mapping of the exist GPU buffer via buffer.mapAsyc(mode, offset, size).

An application can request to map a GPUBuffer so that they can access its content via ArrayBuffers that represent part of the GPUBuffer's allocations. Mapping a GPUBuffer is requested asynchronously with mapAsync() so that the user agent can ensure the GPU finished using the GPUBuffer before the application can access its content. Once the GPUBuffer is mapped the application can synchronously ask for access to ranges of its content with getMappedRange. A mapped GPUBuffer cannot be used by the GPU and must be unmapped using unmap before work using it can be submitted to the Queue timeline.

Babylon.js

babylon.js WebGPU

tags: WebGPU