Open code, practice, and notes →
Download source with English comments · for reading
WebGPU · 03 Canvas Configuration and the Current Texture
Series contents · Technology map
Stage: Device and Command Fundamentals · Editable example · Storage ID: webgpu-step-03
Goals and learning outcomes
- Connect the canvas to GPU output.
- Maintain the display-format contract.
Prerequisites
Continue using the output and notes from unit 2. Preserve the previous inputs and reference outputs before the Canvas Configuration and the Current Texture experiment.
Key concepts and explanations
Display Target
The canvas context connects the device to the display format. Obtain the current frame texture each frame and use it as a render attachment.
Matching Formats
The pipeline color target format must match the attachment format. Query the browser's preferred format through the API.
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 canvas.js, call getContext('webgpu') and getPreferredCanvasFormat.
- After configure, create a clear pass with getCurrentTexture().createView().
- Change the background color, obtain a new view each frame, and record the configure values.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Clear color | Black | Dark blue | The entire attachment color is expected to change even without geometry. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Obtain the current texture view for each frame.
- Record the preferred format and pipeline target format as the same value.
Self-check
- Why is retaining a previous frame's texture a problem?
- How does a CSS background color differ from an attachment clear?
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: Negotiating Features and limits · Next: Recording and Submitting Commands