Open code, practice, and notes →
Download source with English comments · for reading
WebGPU · 13 Resize and Sample Count
Series contents · Technology map
Stage: Render Resources and Display Configuration · Editable example · Storage ID: webgpu-step-13
Goals and learning outcomes
- Update resolution safely.
- Maintain the MSAA attachment contract.
Prerequisites
Continue using the output and notes from unit 12. Preserve the previous inputs and reference outputs before the Resize and Sample Count experiment.
Key concepts and explanations
Actual Resolution
CSS size and drawing buffer size may differ. Account for DPR while keeping within the device's texture-size limits.
MSAA
A multisample attachment can pass its display result to a resolve target. The pipeline and attachment sampleCount must match.
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 resize.js, read sizes with ResizeObserver and determine buffer dimensions using DPR and limits.
- Create color and depth textures with sampleCount 4 and use the current canvas view as resolveTarget.
- Replace attachments on resize and save edge images for sampleCount 1 and 4.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| sampleCount | 1 | 4 | Triangle-edge stair stepping is expected to decrease while attachment cost increases. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Attachment dimensions match at three canvas sizes.
- Compare edge images for 1·4 samples at the same point in time.
Self-check
- Does MSAA solve all shader aliasing?
- How should texture creation be handled when the window size becomes 0?
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: Depth Attachments · Next: Buffers and Render Passes