feat: common.attachAutoResizer#2534
Open
iwoplaza wants to merge 8 commits into
Open
Conversation
|
pkg.pr.new packages benchmark commit |
📊 Bundle Size Comparison
👀 Notable resultsStatic test results:No major changes. Dynamic test results:
📋 All resultsClick to reveal the results table (355 entries).
If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu. |
Resolution Time Benchmark---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Random Branching (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.95, 1.98, 4.64, 6.12, 7.33, 11.94, 22.38, 25.66]
line [0.86, 1.99, 4.01, 6.85, 7.47, 11.62, 21.36, 23.20]
line [0.93, 1.92, 4.07, 6.89, 8.19, 10.62, 22.78, 24.29]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Linear Recursion (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.30, 0.55, 0.69, 0.89, 1.17, 1.28, 1.53, 1.69]
line [0.35, 0.55, 0.71, 0.85, 1.10, 1.13, 1.42, 1.55]
line [0.34, 0.55, 0.73, 0.88, 1.23, 1.29, 1.54, 1.62]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Full Tree (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [1.00, 2.24, 4.38, 7.05, 13.22, 25.95, 56.37, 117.19]
line [0.88, 2.06, 4.22, 6.35, 12.60, 26.00, 55.71, 111.86]
line [0.87, 1.96, 4.06, 6.27, 12.69, 25.91, 58.87, 119.54]
|
deluksic
reviewed
May 22, 2026
| observer.observe(canvas, { box: 'content-box' }); | ||
| } | ||
|
|
||
| return () => { |
Contributor
There was a problem hiding this comment.
What do you think about returning a { detach: () => {} } so its self-documenting?
Contributor
There was a problem hiding this comment.
then the rest of the code will read autoResizer.detach()
Collaborator
Author
There was a problem hiding this comment.
Great idea, changed it 🫡
deluksic
reviewed
May 22, 2026
iwoplaza
force-pushed
the
feat/resize-common
branch
from
64f3189 to
4567fed
Compare
iwoplaza
force-pushed
the
feat/resize-common
branch
8 times, most recently
from
df4e541 to
11345a6
Compare
Collaborator
Author
|
@pullfrog Review this one please 🙏 |
iwoplaza
force-pushed
the
feat/resize-common
branch
from
b7bbb8b to
11fccf5
Compare
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Reviewed changes — adds common.attachAutoResizer, a web helper that adapts the canvas' internal resolution to match its physical pixel size using ResizeObserver, then migrates all docs examples and CLI templates to use it.
- Add
attachAutoResizerhelper — newcommon/attachAutoResizer.tsexportsattachAutoResizer()withAttachAutoResizerOptions(root,canvas, optionalonResizecallback) and returns anAutoResizerwith adetach()cleanup method. Internally usesResizeObserverwith adevice-pixel-content-boxfallback and clamps dimensions to the GPU'smaxTextureDimension2D. - Migrate ~45 docs examples — each example's
index.tsnow importscommonfromtypegpu, callscommon.attachAutoResizer(), and callsautoResizer.detach()inonCleanup(). StandalonefullScreenTriangleimports are consolidated tocommon.fullScreenTriangle. Example canvases inindex.htmlgainclass="w-full h-full"for CSS-driven sizing. - Remove
useResizableCanvas— the example-view React hook and its ~80 lines of canvas DOM manipulation are deleted, simplifying the docs app. - Trim
stackBlitzIndex.ts— the embedded canvas-resize script (~50 lines ofResizeObserver+ DOM wrapping) is removed since examples now self-resize. - Update CLI templates — both
template-vite-simpleandtemplate-vite-complexreplace manualResizeObserversetup withcommon.attachAutoResizer().
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
iwoplaza
force-pushed
the
feat/resize-common
branch
from
11fccf5 to
c59c2a7
Compare
Contributor
There was a problem hiding this comment.
ℹ️ No critical issues — one minor suggestion inline.
Reviewed changes — adds common.attachAutoResizer, a ResizeObserver-based helper that adapts a canvas' internal resolution to its physical pixel size, with device-pixel-content-box / content-box fallback and maxTextureDimension2D clamping. Replaces duplicate resize logic across all examples, templates, the docs ExampleView component, and the StackBlitz wrapper.
- New
attachAutoResizerhelper atpackages/typegpu/src/common/attachAutoResizer.ts— observes a canvas, setscanvas.width/canvas.heightwith DPR awareness and device-limit clamping, returns a{ detach }handle. Exported viapackages/typegpu/src/common/index.tsunder thecommonnamespace. - Docs
ExampleView.tsxcleanup — removes theuseResizableCanvashook and its DOM-scaffolding logic (~80 lines). Example canvases are now sized via inline Tailwind classes (w-full h-full) and each example manages its ownattachAutoResizerlifecycle. - StackBlitz wrapper cleanup — removes the inline canvas resize loop (~50 lines) from
stackBlitzIndex.ts. Examples in StackBlitz now resize via their ownattachAutoResizercalls. - Example updates — every example
index.htmlreplaces bare<canvas>/data-fit-to-containerwith<canvas class="w-full h-full" />(andobject-containwhere appropriate). Every exampleindex.tsimportscommonfromtypegpu, switchesfullScreenTriangle→common.fullScreenTriangle, and callsattachAutoResizerwithonResize(for animated examples) or without (for requestAnimationFrame loops). Cleanup hooks callautoResizer.detach()beforeroot.destroy(). - CLI template updates —
template-vite-simpleandtemplate-vite-complexreplace inlineResizeObservercode withcommon.attachAutoResizer, demonstrating the intended usage.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
| export interface AttachAutoResizerOptions { | ||
| root: TgpuRoot; | ||
| canvas: HTMLCanvasElement; | ||
| onResize?: (() => void) | undefined; |
Contributor
There was a problem hiding this comment.
The onResize parameter is declared as onResize?: (() => void) | undefined. The ? already makes the type (() => void) | undefined, so the explicit | undefined is redundant.
Technical details
# Redundant `| undefined` on optional property
## Affected sites
- `packages/typegpu/src/common/attachAutoResizer.ts:6` — type annotation includes explicit `| undefined` union
## Required outcome
- Use either `onResize?: () => void` or `onResize: (() => void) | undefined`. Both produce the same runtime and structural type.
## Suggested approach
Drop the `| undefined` — the `?` already handles it.
Contributor
There was a problem hiding this comment.
This is not true. In codebases with exactOptionalPropertyTypes, having | undefined has meaning. If you omit undefined you are explicitly saying { onResize: undefined } can't be sent in.
There was a problem hiding this comment.
Pull request overview
This PR introduces a new common.attachAutoResizer helper in typegpu to keep a canvas’s internal pixel resolution in sync with its displayed size (including DPR handling), and migrates the CLI templates + docs examples to use it so resizing no longer depends on the docs/StackBlitz “environment” code.
Changes:
- Added
packages/typegpu/src/common/attachAutoResizer.tsand exported it fromcommon. - Updated templates and a large set of docs examples to use
common.attachAutoResizer()and detach it during cleanup. - Simplified docs/StackBlitz canvas-environment resizing logic by removing the previous “wrap/replace canvas + ResizeObserver” approach.
Reviewed changes
Copilot reviewed 147 out of 147 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/typegpu/src/common/index.ts | Exports the new auto-resizer helper from common. |
| packages/typegpu/src/common/attachAutoResizer.ts | Implements attachAutoResizer using ResizeObserver. |
| packages/typegpu-cli/templates/template-vite-simple/src/main.ts | Replaces inline ResizeObserver resizing with common.attachAutoResizer. |
| packages/typegpu-cli/templates/template-vite-complex/src/main.ts | Uses common.attachAutoResizer and renames render loop function to frame. |
| apps/typegpu-docs/src/examples/threejs/varyings/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/test-mismatched-types/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/simple/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/compute-particles/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/threejs/attractors/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/tests/uniformity/index.ts | Uses attachAutoResizer and detaches on cleanup; redraws on resize. |
| apps/typegpu-docs/src/examples/tests/uniformity/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/tests/texture-test/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/tests/texture-test/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/tests/rc-docs-examples/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/tests/rc-docs-examples/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/tests/log-test/index.ts | Imports common, adds attachAutoResizer, detaches on cleanup. |
| apps/typegpu-docs/src/examples/tests/log-test/index.html | Updates canvas tag formatting. |
| apps/typegpu-docs/src/examples/simulation/wind-map/index.ts | Uses attachAutoResizer with square aspect enforcement and redraw. |
| apps/typegpu-docs/src/examples/simulation/wind-map/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts | Adds attachAutoResizer, refactors render loop, updates pointer mapping for square canvas. |
| apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/slime-mold/index.ts | Adds attachAutoResizer and refactors render call; detaches on cleanup. |
| apps/typegpu-docs/src/examples/simulation/slime-mold/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts | Adds attachAutoResizer, refactors render call; detaches on cleanup. |
| apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/gravity/index.ts | Replaces ResizeObserver with attachAutoResizer for depth texture recreation. |
| apps/typegpu-docs/src/examples/simulation/gravity/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/game-of-life/input.ts | Adjusts input coordinate mapping for square aspect and uses std.saturate. |
| apps/typegpu-docs/src/examples/simulation/game-of-life/index.ts | Adds attachAutoResizer and refactors display draw into render(). |
| apps/typegpu-docs/src/examples/simulation/game-of-life/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts | Adds attachAutoResizer with square resizing and redraw. |
| apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.ts | Adds attachAutoResizer with square resizing and redraw. |
| apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/confetti/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/simulation/confetti/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simulation/boids/index.ts | Refactors to render() + uses attachAutoResizer for square resizing and redraw. |
| apps/typegpu-docs/src/examples/simulation/boids/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/vaporrave/index.ts | Refactors draw to render() and uses attachAutoResizer. |
| apps/typegpu-docs/src/examples/simple/vaporrave/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/triangle/index.ts | Imports common, uses attachAutoResizer, refactors constants; detaches on cleanup. |
| apps/typegpu-docs/src/examples/simple/triangle/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/stencil/index.ts | Replaces ResizeObserver with attachAutoResizer (square + texture recreation). |
| apps/typegpu-docs/src/examples/simple/stencil/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/square/index.ts | Uses attachAutoResizer to drive initial render + rerender on resize. |
| apps/typegpu-docs/src/examples/simple/square/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts | Refactors post-processing to support resizing and exposes a user storage binding group. |
| apps/typegpu-docs/src/examples/simple/ripple-cube/index.ts | Integrates resizable post-processing and uses attachAutoResizer to resize pipelines. |
| apps/typegpu-docs/src/examples/simple/ripple-cube/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/oklab/index.ts | Adjusts pointer mapping + uses attachAutoResizer; detaches on cleanup. |
| apps/typegpu-docs/src/examples/simple/oklab/index.html | Wraps canvas/probe markup; updates canvas classes. |
| apps/typegpu-docs/src/examples/simple/mesh-skinning/index.ts | Replaces ResizeObserver with attachAutoResizer to recreate depth/MSAA textures. |
| apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts | Splits render/frame loop and uses attachAutoResizer for square resizing. |
| apps/typegpu-docs/src/examples/simple/liquid-glass/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/simple/gradient-tiles/index.ts | Uses attachAutoResizer for square resizing and redraw. |
| apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts | Imports common, uses attachAutoResizer, detaches on cleanup. |
| apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.ts | Imports common, uses attachAutoResizer, detaches on cleanup. |
| apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts | Replaces ResizeObserver with attachAutoResizer (square + texture recreation). |
| apps/typegpu-docs/src/examples/rendering/two-boxes/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/suika-sdf/index.ts | Replaces ResizeObserver with attachAutoResizer; refactors into render(). |
| apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.ts | Refactors draw to render() and uses attachAutoResizer for square resizing. |
| apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/simple-shadow/index.ts | Replaces ResizeObserver with attachAutoResizer, refactors into render() + frame(). |
| apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/render-bundles/index.ts | Refactors to render() and uses attachAutoResizer to redraw on resize. |
| apps/typegpu-docs/src/examples/rendering/render-bundles/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.ts | Refactors to render() and uses attachAutoResizer to redraw on resize. |
| apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/ray-marching/index.ts | Uses attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/rendering/ray-marching/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts | Replaces ResizeObserver with attachAutoResizer + debounce; enforces square. |
| apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts | Uses attachAutoResizer and switches scene resolution to fixed 1024². |
| apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/drawInteraction.ts | Updates pointer mapping for square aspect ratio. |
| apps/typegpu-docs/src/examples/rendering/pom/index.ts | Replaces ResizeObserver with attachAutoResizer (depth recreate + redraw). |
| apps/typegpu-docs/src/examples/rendering/pom/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.ts | Refactors render/frame loops and uses attachAutoResizer (square + texture recreate). |
| apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts | Refactors to render() and uses attachAutoResizer (depth recreate + redraw). |
| apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts | Refactors draw to render() and uses attachAutoResizer for square resizing. |
| apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/os-awards/index.ts | Replaces ResizeObserver with attachAutoResizer (depth recreate + redraw). |
| apps/typegpu-docs/src/examples/rendering/os-awards/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/jelly-switch/index.ts | Refactors render loop and uses attachAutoResizer to drive handleResize(). |
| apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts | Refactors render loop and uses attachAutoResizer to drive handleResize(). |
| apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts | Replaces ResizeObserver with attachAutoResizer to recreate MSAA texture. |
| apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/disco/index.ts | Splits render/frame and uses attachAutoResizer to redraw on resize. |
| apps/typegpu-docs/src/examples/rendering/disco/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts | Replaces ResizeObserver with attachAutoResizer and redraws on resize. |
| apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/clouds/types.ts | Adds aspectRatio to params struct. |
| apps/typegpu-docs/src/examples/rendering/clouds/index.ts | Uses attachAutoResizer, adds aspect-ratio uniform and low-res rendering behavior. |
| apps/typegpu-docs/src/examples/rendering/clouds/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/caustics/index.ts | Refactors draw to render() and uses attachAutoResizer for square resizing. |
| apps/typegpu-docs/src/examples/rendering/caustics/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/box-raytracing/index.ts | Refactors draw to render() and uses attachAutoResizer for square resizing. |
| apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts | Refactors to render() and uses attachAutoResizer (projection + depth recreation + redraw). |
| apps/typegpu-docs/src/examples/rendering/3d-fish/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/react/spinning-triangle/index.tsx | Adjusts canvas sizing classes in React example. |
| apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx | Adjusts canvas sizing classes in React example. |
| apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts | Uses attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html | Converts hidden-video styling to Tailwind classes and updates canvas markup. |
| apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts | Uses attachAutoResizer to render on resize; detaches on cleanup. |
| apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts | Adds attachAutoResizer and refactors resize behavior via handleResize(). |
| apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts | Adds attachAutoResizer and refactors resize behavior via handleResize(). |
| apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/image-processing/blur/index.ts | Uses attachAutoResizer for square resizing and redraw. |
| apps/typegpu-docs/src/examples/image-processing/blur/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts | Refactors to handleResize() and uses attachAutoResizer; detaches on cleanup. |
| apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts | Refactors to handleResize() and uses attachAutoResizer; detaches on cleanup. |
| apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts | Replaces ResizeObserver with attachAutoResizer (square + texture recreate + redraw). |
| apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/geometry/circles/index.ts | Replaces ResizeObserver with attachAutoResizer (square + texture recreate + render). |
| apps/typegpu-docs/src/examples/geometry/circles/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html | Adjusts layout to flex and updates canvas markup/classes. |
| apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts | Replaces ResizeObserver with attachAutoResizer. |
| apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts | Replaces ResizeObserver with attachAutoResizer. |
| apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts | Adds attachAutoResizer and detaches on cleanup. |
| apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/examples/algorithms/bitonic-sort/index.ts | Switches to common.fullScreenTriangle, adds attachAutoResizer, and detaches on cleanup. |
| apps/typegpu-docs/src/examples/algorithms/bitonic-sort/index.html | Updates canvas markup/classes for new resizing approach. |
| apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts | Removes the StackBlitz-side “resize canvases” environment logic. |
| apps/typegpu-docs/src/components/ExampleView.tsx | Removes the docs-side “replace canvases + ResizeObserver” resizing hook; relies on examples. |
Comments suppressed due to low confidence (2)
apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html:5
<canvas ... />is not a void element in HTML. The self-closing form will cause the following<link>/<style>tags to be parsed inside the canvas element when inserted viainnerHTML. Use an explicit closing tag.
apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html:5<canvas ... />is not a void element in HTML. The following<video>tag will be parsed as a child of the canvas when this markup is injected viainnerHTML. Use</canvas>.
<canvas class="w-full h-full object-contain" />
<video
autoplay
playsinline
class="absolute top-0 left-0 w-px h-px opacity-0 pointer-events-none"
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+18
to
+35
| const observer = new ResizeObserver((entries) => { | ||
| for (const entry of entries) { | ||
| if (!entry) { | ||
| return; | ||
| } | ||
| const width = | ||
| entry.devicePixelContentBoxSize?.[0]?.inlineSize || | ||
| (entry.contentBoxSize[0]?.inlineSize ?? 0) * window.devicePixelRatio; | ||
| const height = | ||
| entry.devicePixelContentBoxSize?.[0]?.blockSize || | ||
| (entry.contentBoxSize[0]?.blockSize ?? 0) * window.devicePixelRatio; | ||
| const canvas = entry.target as HTMLCanvasElement; | ||
| canvas.width = Math.max(1, Math.min(width, root.device.limits.maxTextureDimension2D)); | ||
| canvas.height = Math.max(1, Math.min(height, root.device.limits.maxTextureDimension2D)); | ||
|
|
||
| onResize?.(); | ||
| } | ||
| }); |
Comment on lines
+37
to
+41
| try { | ||
| observer.observe(canvas, { box: 'device-pixel-content-box' }); | ||
| } catch { | ||
| observer.observe(canvas, { box: 'content-box' }); | ||
| } |
Comment on lines
+115
to
+120
| const postProcessing = createPostProcessingPipelines( | ||
| root, | ||
| canvas.width * resolutionScale, | ||
| canvas.height * resolutionScale, | ||
| initialBloom, | ||
| ); |
Comment on lines
+240
to
+243
| onResize() { | ||
| postProcessing.resize(canvas.width * resolutionScale, canvas.height * resolutionScale); | ||
| render(); | ||
| }, |
Comment on lines
+29
to
+32
| <div class="relative w-full h-full"> | ||
| <canvas class="w-full h-full object-contain" /> | ||
| <div id="css-probe"></div> | ||
| </div> |
Comment on lines
1
to
4
| <div class="loading">Model is loading...</div> | ||
| <canvas data-fit-to-container></canvas> | ||
| <canvas class="w-full h-full" /> | ||
| <style> | ||
| .loading { |
Comment on lines
+1
to
+7
| <canvas class="w-full h-full object-contain" /> | ||
| <!-- Keep the video "painted" so Safari continues decoding frames. --> | ||
| <video | ||
| autoplay | ||
| playsinline | ||
| class="absolute top-0 left-0 w-[1px] h-[1px] opacity-0 pointer-events-none" | ||
| /> |
Comment on lines
+144
to
+145
| let width = initialWidth; | ||
| let height = initialHeight; |
Comment on lines
+220
to
+226
| resize: (newWidth: number, newHeight: number) => { | ||
| if (newWidth !== width || newHeight !== height) { | ||
| width = newWidth; | ||
| height = newHeight; | ||
| resources = createResolutionDependantResources(); | ||
| } | ||
| }, |
Comment on lines
+146
to
+155
| function createResolutionDependantResources() { | ||
| const bloomWidth = Math.max(1, Math.floor(width / 2)); | ||
| const bloomHeight = Math.max(1, Math.floor(height / 2)); | ||
|
|
||
| const result = createProcessingTexture(root, width, height); | ||
| const bloom = createProcessingTexture(root, bloomWidth, bloomHeight); | ||
| const blurTemp = createProcessingTexture(root, bloomWidth, bloomHeight); | ||
| const history = createProcessingTexture(root, width, height); | ||
| const taaOutput = createProcessingTexture(root, width, height); | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds a new common helper called
attachAutoResizerwhich adapts the canvas' internal resolution to match its physical pixel size, with additional safe-guards. It's a web only helper, not to be used in React Native apps.The examples were updated to use this helper, which replaces the need for the example environment to handle the canvas resizing. This also makes the examples much more portable, as resizing a canvas can be tricky to get right, and now it's solved in every example.