Tour of WGSL

Overview

There are three key phases in a shader’s lifetime (shown in context below):

flowchart LR sc[Shader creation time] pc[Pipeline creation time] rt[Shader execution time] style sc fill:#fff5ad style pc fill:#fff5ad style rt fill:#fff5ad sc --> pc --> rt

Each phase finalizes the value for expressions in a certain category, as follows:

Evaluation Phase

Shader creation

  • Finalizes values for const-expressions
  • Sub-expressions can be:
    • literals,
    • @const function calls,
    • const-declared values

Pipeline creation

  • Finalizes values for override-expressions
  • Sub-expressions can anything in a const-expression, plus

Shader execution

  • Finalizes values for runtime-expressions
  • Sub-expressions can be anything in a override-expression, plus
    • let-declared values
    • any function call,
    • variable contents
    • reference or pointer to a variable

In Context

The shader phases fit into a WebGPU application as follows:

sequenceDiagram participant A as App participant C as Browser note over A,C: Get a GPUAdapter, GPUDevice A ->>+C: device.createShaderModule(...) activate C Note right of C: Shader-creation time C -->> A: a GPUShaderModule deactivate C A ->>C: device.createComputePipeline(...)
or device.createRenderPipeline(...)
Provides GPUProgrammablestage.constants activate C Note right of C: Pipeline-creation time C -->> A: a GPUComputePipeline deactivate C Note over A,C: Create and bind resources,
Record GPU commands ... %%Note over A,C: Submit commands A ->>C: device.queue.submit(...) C-->>C: Wait to be scheduled activate C Note right of C: Shader execution A ->> C: device.queue.onSubmittedWorkDone() C -->> A: a pending Promise<undefined> C -->> A: fulfill Promise deactivate C