Open code, practice, and notes →
Download source with English comments · for reading
WebGPU · 08 Uniforms and Bind Groups
Series contents · Technology map
Stage: Render Resources and Display Configuration · Editable example · Storage ID: webgpu-step-08
Goals and learning outcomes
- Connect resources to bindings.
- Update small inputs without recreating resources.
Prerequisites
Continue using the output and notes from unit 7. Preserve the previous inputs and reference outputs before the Uniforms and Bind Groups experiment.
Key concepts and explanations
Binding Contract
A bind group connects resources to the shader's group and binding locations. Resource types and shader visibility are also part of the layout.
Small Updates
Uniforms suit small inputs shared by many invocations. Buffer values can be updated without creating a pipeline each time.
Practice setup
First read the execution-scope guidance on the example screen. The following preparation is for extending the assignment in a separate project. This is a document-guided exercise to implement yourself in a separate localhost or HTTPS project. Check the secure context, navigator.gpu, and adapter request result, and provide an unsupported-environment message. Preserve device.lost handling and resource release.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In uniform.wgsl, declare a vec4f color uniform at binding 0.
- In uniforms.js, create a 16-byte UNIFORM|COPY_DST buffer and a bind group.
- Connect color sliders to queue.writeBuffer and record the number of pipelines created.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Color input | [1,0,0,1] | [0,1,0,1] | Only the triangle color is expected to change, without recreating the pipeline. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Both color inputs are reflected correctly.
- Changing the color ten times does not increase the pipeline creation count.
Self-check
- Is a binding number an offset inside a buffer?
- Can a uniform buffer be used in place of a vertex buffer?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Runs real WebGPU/WGSL. Requires HTTPS/localhost and a supported adapter; unsupported environments display a reason, and CPU results are not substituted for GPU results.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Indices and Primitives · Next: Uniform Struct Alignment