feat: common.attachAutoResizer by iwoplaza · Pull Request #2534 · software-mansion/TypeGPU

iwoplaza · 2026-05-21T21:01:52Z

This PR adds a new common helper called attachAutoResizer which 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.

github-actions · 2026-05-21T21:02:50Z

pkg.pr.new

packages
Ready to be installed by your favorite package manager ⬇️

https://pkg.pr.new/software-mansion/TypeGPU/tgpu-gen@2cfcb82fe9758dd008f171115641dccc617784c2

https://pkg.pr.new/software-mansion/TypeGPU/typegpu@2cfcb82fe9758dd008f171115641dccc617784c2

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/cli@2cfcb82fe9758dd008f171115641dccc617784c2

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/color@2cfcb82fe9758dd008f171115641dccc617784c2

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/gl@2cfcb82fe9758dd008f171115641dccc617784c2

benchmark
view benchmark

commit
view commit

github-actions · 2026-05-21T21:03:33Z

Bundle size comparison (`import * as ...` in PR vs `import * as ...` in target):

🟢 Decreased	➖ Unchanged	🔴 Increased (max 1.28%)	❔ Unknown
0	353	2	1

`import * as ...` in PR vs `import * as ...` in target (did bundle size increase?):

Test	tsdown
STATIC_common.ts	57.05 kB ($${\color{red}+1.3\%}$$)
common_attachAutoResizer.ts	722 B

If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.

github-actions · 2026-05-21T21:04:32Z

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 [1.21, 2.36, 4.85, 7.92, 9.63, 14.75, 28.53, 31.21]
  line [1.11, 2.31, 4.89, 7.26, 9.13, 15.07, 29.79, 32.38]
  line [1.07, 2.23, 5.17, 6.95, 9.25, 13.79, 27.15, 30.34]

---
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.34, 0.63, 0.81, 0.96, 1.37, 1.39, 1.65, 1.92]
  line [0.38, 0.59, 0.83, 0.96, 1.31, 1.35, 1.63, 1.82]
  line [0.32, 0.57, 0.74, 0.89, 1.26, 1.33, 1.54, 1.72]

---
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 [0.94, 2.35, 4.78, 8.80, 16.16, 30.08, 64.92, 130.67]
  line [0.93, 2.39, 4.65, 8.02, 14.82, 31.07, 63.85, 128.77]
  line [1.00, 2.73, 4.46, 8.58, 14.17, 28.74, 62.32, 126.03]

iwoplaza · 2026-06-17T20:38:18Z

@pullfrog Review this one please 🙏

pullfrog

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 attachAutoResizer helper — new common/attachAutoResizer.ts exports attachAutoResizer() with AttachAutoResizerOptions (root, canvas, optional onResize callback) and returns an AutoResizer with a detach() cleanup method. Internally uses ResizeObserver with a device-pixel-content-box fallback and clamps dimensions to the GPU's maxTextureDimension2D.
Migrate ~45 docs examples — each example's index.ts now imports common from typegpu, calls common.attachAutoResizer(), and calls autoResizer.detach() in onCleanup(). Standalone fullScreenTriangle imports are consolidated to common.fullScreenTriangle. Example canvases in index.html gain class="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 of ResizeObserver + DOM wrapping) is removed since examples now self-resize.
Update CLI templates — both template-vite-simple and template-vite-complex replace manual ResizeObserver setup with common.attachAutoResizer().

^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏}

pullfrog

ℹ️ 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 attachAutoResizer helper at packages/typegpu/src/common/attachAutoResizer.ts — observes a canvas, sets canvas.width/canvas.height with DPR awareness and device-limit clamping, returns a { detach } handle. Exported via packages/typegpu/src/common/index.ts under the common namespace.
Docs ExampleView.tsx cleanup — removes the useResizableCanvas hook 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 own attachAutoResizer lifecycle.
StackBlitz wrapper cleanup — removes the inline canvas resize loop (~50 lines) from stackBlitzIndex.ts. Examples in StackBlitz now resize via their own attachAutoResizer calls.
Example updates — every example index.html replaces bare <canvas> / data-fit-to-container with <canvas class="w-full h-full" /> (and object-contain where appropriate). Every example index.ts imports common from typegpu, switches fullScreenTriangle → common.fullScreenTriangle, and calls attachAutoResizer with onResize (for animated examples) or without (for requestAnimationFrame loops). Cleanup hooks call autoResizer.detach() before root.destroy().
CLI template updates — template-vite-simple and template-vite-complex replace inline ResizeObserver code with common.attachAutoResizer, demonstrating the intended usage.

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏}

Copilot

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.ts and exported it from common.
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 via innerHTML. 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 via innerHTML. 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.

aleksanderkatan

Here are some things I noticed:

http://localhost:4321/TypeGPU/examples#example=algorithms--jump-flood-distance started flashing black when resizing

aleksanderkatan · 2026-06-24T12:03:44Z

-const resizeObserver = new ResizeObserver(() => {
-  canvasRatioUniform.write(canvas.width / canvas.height);
-  redraw();
+const autoResizer = common.attachAutoResizer({


Were three examples intentionally excluded from this change?

Yes, Three.js handles resizing on its own

pullfrog

Important

One example can still create 0-sized textures on collapse. Otherwise the attachAutoResizer rewrite and example migrations look good.

Reviewed changes — incremental delta since the prior pullfrog review (the branch was rebased onto main, so this covers the net changes over c59c2a7..2d2827f).

Hardened attachAutoResizer — physical size now resolves through devicePixelContentBoxSize → contentBoxSize (array or legacy single object) * dpr → contentRect * dpr, dimensions are rounded and clamped to [1, maxSize], device limits are read behind a try/catch for non-WebGPU roots, and observe() gained a bare-observe final fallback.
Example test harness — commonMocks.ts now stubs a global ResizeObserver that emits an initial 256x256 entry, so the migrated examples' resize path runs under test.
Canvas markup fix — all example index.html files converted self-closing <canvas ... /> to explicit <canvas ...></canvas>, which otherwise nested following nodes inside the canvas when injected via innerHTML.
Newly-added examples migrated — texture-gl, triangle-gl, triplanar-mapping, trippy-raymarching, global-illumination, and monocular-light-injection now use common.attachAutoResizer; several examples were split into scene.ts modules exposing onResize/onCleanup.
Prior review feedback — the redundant | undefined concern was discussed; the branch retains it intentionally (exact optional properties).

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

pullfrog

✅ No new issues found.

Reviewed changes — incremental delta since the prior pullfrog review (19645d6..8a0c65e), commit 8a0c65e ("Address review comments").

Clamped jump-flood-distance's updateDimensions() with Math.max(1, ...), so a collapsed canvas yields a 1x1 render target instead of 0-sized textures.
Converted tests/triangle-targets/index.html's self-closing <canvas ... /> to an explicit <canvas ...></canvas>.

^{｜ Fix it ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

aleksanderkatan · 2026-10-22T11:59:50Z

Stackblitz examples are now 300x150

That's because common.attachAutoResizer isn't published yet, and Stackblitz uses the pinned published version of typegpu

aleksanderkatan · 2026-10-22T12:07:38Z

+
+// Adjusting the resolution when the physical size of the canvas changes,
+// and re-rendering the content.
+common.attachAutoResizer({


Shouldn't we to pin higher TypeGPU in package.json?

Good catch, this should now happen automatically 🫡
#3298

aleksanderkatan · 2026-10-22T12:12:35Z

 </div>

-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>


camera position changed

I moved the preview to the bottom-left so it doesn't intersect with the controls. Otherwise, I think the change is harmless.

pullfrog

ℹ️ No critical issues — one missed letterbox fix inline.

Reviewed changes — incremental delta since the prior pullfrog review (2d47878e5..79fd07ec3), commit 79fd07ec3 ("Fix pointer mapping in letterboxed examples").

Corrected pointer mapping into the object-contain square — liquid-glass (updatePosition) and radiance-cascades' drag controller (canvasToUV) now map clientX/clientY into the centered drawn square via Math.min(rect.width, rect.height) plus the (rect.width - size) / 2 center offset, instead of the full element box.
fluid-with-atomics cell mapping rewritten — the offsetX * devicePixelRatio helper (pointerCellFromCanvasOffset) is replaced by pointerCellFromClient, which maps into the drawn square and is now shared by both mouse and touch handlers.

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

pullfrog

✅ No new issues found.

Reviewed changes — incremental delta since the prior pullfrog review (79fd07ec3..4853241), commit 4853241e5 ("Fix pointer mapping in letterboxed jelly-slider example").

Fixed the missed letterbox mapping in jelly-slider — EventHandler.updateTargetMouseX (events.ts) now maps clientX into the centered drawn square via Math.min(rect.width, rect.height) and the (rect.width - size) / 2 offset, matching liquid-glass, radiance-cascades, and fluid-with-atomics, instead of normalizing over the full element box. Resolves the prior review's single inline thread.

^{｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

pullfrog

✅ No new issues found.

( ◦°^°◦) Ahoy, mateys! I re-reviewed the lone new commit on this here PR — a cosmetic move of the camera preview from starboard to port in two camera examples — and found nary a bug. All prior pullfrog threads be resolved, so I hoist the green flag.

Reviewed changes — incremental delta since the prior pullfrog review (4853241e5..a87aad1a3), commit a87aad1a3 ("Move camera preview to bottom-left in camera examples"). The branch was rebased onto newer main, so the range-diff also carries base-branch noise (the @typegpu/sort → @typegpu/algorithm rename); the only PR-authored change is this commit.

Repositioned the camera preview — image-processing/ascii-filter/index.html and image-processing/camera-thresholding/index.html now anchor the <video> preview at left: 10px instead of right: 10px, keeping it clear of the example controls. This is a deliberate response to the human reviewer's open "camera position changed" thread.

^{｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

pullfrog

Important

The appjs-venue example now recreates its render targets from onResize with hard-coded mipLevelCount: 2, which is invalid once the canvas collapses to the helper's 1x1 minimum.

Reviewed changes — incremental delta since the prior pullfrog review (a87aad1a3..0a967c1), commit 0a967c1 ("Use common.attachAutoResizer in App.js Venue example, update brush size on resize in jump-flood-distance").

Migrated appjs-venue to common.attachAutoResizer — canvas markup switched from data-fit-to-container to w-full h-full; the draw body was split out of frame() into render(); render-target recreation moved from the per-frame size check into onResize; and autoResizer.detach() was added to onCleanup().
Recomputed brush size on resize in jump-flood-distance — updateBrushSize() is now called from the onResize callback, so the brush radius follows the resized texture dimensions instead of staying at its initial value.

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

- Make attachAutoResizer more robust (rounding, contentBoxSize shapes, observe() without options, roots without a WebGPU device) - Use explicit closing tags for <canvas> and <video> - Keep the 1:1 aspect ratio in bitonic-sort and sdf-docs-examples - Remove the resizer from log-test - Use integer sizes and destroy stale textures in ripple-cube

- Forward onResize from the Jelly Slider landing example, and make it required for landing examples - Only recreate blur textures in background-segmentation when the video frame size changes

Map pointer coordinates into the centered square drawn by object-contain in liquid-glass, radiance-cascades and fluid-with-atomics.

pullfrog

ℹ️ No new issues in this delta.

( ◦°^°◦) Arr, I re-checked the fresh commits on this here PR — a tidy tonemapping migration and a swizzle snapshot regen — and spied nary a new bug, so this be informational rather than an approval, since the old appjs-venue thread still be open.

Reviewed changes — incremental delta since the prior pullfrog review (0a967c1..3d517f9), commits 3d517f9a6 and 5704332a6. The branch was rebased again onto newer main, so the range-diff also carries base-branch noise; these are the only PR-authored changes.

Migrated tonemapping to common.attachAutoResizer — the example's index.html canvas switched from data-fit-to-container to w-full h-full, and index.ts now calls common.attachAutoResizer({ root, canvas }) and detaches it in onCleanup. The existing requestAnimationFrame loop already rewrites resolutionUniform from canvas.width/canvas.height every frame, so no onResize callback is needed.
Regenerated example-test snapshots — 3d-fish.test.ts and slime-mold-3d.test.ts snapshots now emit swizzle access (repulsion.x, gpuSeed.y) instead of integer indexing (repulsion[0i], gpuSeed[1i]), matching the base's WGSL/JS vector swizzle-assignment codegen after the rebase. Test-only.

^{｜ Fix it ➔ ｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

…ze on resize in jump-flood-distance

pullfrog

✅ No new issues found.

Reviewed changes — incremental delta since the prior pullfrog review (3d517f9..2cfcb82). The branch was rebased again, so the raw commit range carries noise; the range-diff nets to a single authored change — the fix for the prior review's appjs-venue finding. The tonemapping migration and swizzle snapshot regen are byte-identical across the rebase and were already reviewed.

Guarded appjs-venue render-target recreation at the 1x1 minimum — render() and onResize() now bail via the new isCanvasTooSmall() (canvas.width < 2 || canvas.height < 2), so the targets created with mipLevelCount: 2 are never constructed while the canvas is collapsed below the two-mip-level size, and the generateMipmaps(0, 2) path is skipped. This resolves the prior IMPORTANT thread on appjs-venue; the thread is now resolved.

^{｜ View workflow run ｜ Using deepseek-v4.1-flash (free via Pullfrog for OSS) ｜ 𝕏}

iwoplaza added this to the 0.11.5 milestone May 21, 2026

deluksic reviewed May 22, 2026

View reviewed changes

Comment thread packages/typegpu/src/common/attachAutoResizer.ts Resolved

deluksic reviewed May 22, 2026

View reviewed changes

Comment thread packages/typegpu/src/common/attachAutoResizer.ts Resolved

iwoplaza force-pushed the feat/resize-common branch from 64f3189 to 4567fed Compare May 26, 2026 14:41

iwoplaza force-pushed the feat/resize-common branch 8 times, most recently from df4e541 to 11345a6 Compare June 17, 2026 17:52

iwoplaza force-pushed the feat/resize-common branch from b7bbb8b to 11fccf5 Compare June 17, 2026 20:39

pullfrog Bot reviewed Jun 17, 2026

View reviewed changes

iwoplaza force-pushed the feat/resize-common branch from 11fccf5 to c59c2a7 Compare June 18, 2026 08:00

iwoplaza marked this pull request as ready for review June 18, 2026 08:00

iwoplaza requested review from aleksanderkatan, cieplypolar, Copilot and reczkok June 18, 2026 08:00

Copilot started reviewing on behalf of iwoplaza June 18, 2026 08:00

View session

pullfrog Bot reviewed Jun 18, 2026

View reviewed changes

Comment thread packages/typegpu/src/common/attachAutoResizer.ts Resolved

Copilot AI reviewed Jun 18, 2026

View reviewed changes

aleksanderkatan requested changes Jun 24, 2026

View reviewed changes

iwoplaza force-pushed the feat/resize-common branch from c59c2a7 to 2d2827f Compare October 2, 2026 12:32

pullfrog Bot reviewed Oct 2, 2026

View reviewed changes

Comment thread apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts Resolved

pullfrog Bot reviewed Oct 18, 2026

View reviewed changes

iwoplaza requested a review from aleksanderkatan October 18, 2026 10:40

iwoplaza force-pushed the feat/resize-common branch from 8a0c65e to 2aaecce Compare October 20, 2026 12:31

iwoplaza mentioned this pull request Oct 20, 2026

refactor(@typegpu/react): Use common.attachAutoResizer in useConfigureContext #3226

Draft

iwoplaza added this pull request to stack #3227 October 20, 2026 12:38

iwoplaza force-pushed the feat/resize-common branch from 2aaecce to 2d47878 Compare October 21, 2026 15:32

aleksanderkatan requested changes Oct 22, 2026

View reviewed changes

pullfrog Bot reviewed Oct 27, 2026

View reviewed changes

Comment thread apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts Resolved

pullfrog Bot reviewed Oct 27, 2026

View reviewed changes

iwoplaza force-pushed the feat/resize-common branch from 92e9ee3 to a87aad1 Compare October 27, 2026 15:44

pullfrog Bot reviewed Oct 27, 2026

View reviewed changes

Comment thread apps/typegpu-docs/src/examples/advanced/appjs-venue/index.ts Resolved

iwoplaza added 11 commits October 30, 2026 16:20

feat: common.attachAutoResizer

015b3a0

Mock ResizeObserver in all example tests

cceff9f

Use common.attachAutoResizer in examples added since

6b34589

Fix issues found while verifying examples in the browser

649c797

- Forward onResize from the Jelly Slider landing example, and make it required for landing examples - Only recreate blur textures in background-segmentation when the video frame size changes

Using onResize

c933262

Address review comments

10cbd20

Update sort snapshot

8c2de56

Fix pointer mapping in letterboxed examples

d33a795

Map pointer coordinates into the centered square drawn by object-contain in liquid-glass, radiance-cascades and fluid-with-atomics.

Fix pointer mapping in letterboxed jelly-slider example

55df305

Move camera preview to bottom-left in camera examples

cb18165

iwoplaza force-pushed the feat/resize-common branch from 0a967c1 to 3d517f9 Compare October 30, 2026 15:23

pullfrog Bot reviewed Oct 30, 2026

View reviewed changes

iwoplaza added 3 commits October 30, 2026 16:31

Use common.attachAutoResizer in App.js Venue example, update brush si…

bc3127c

…ze on resize in jump-flood-distance

Update snapshots after rebase

ca24667

Use common.attachAutoResizer in tonemapping example

2cfcb82

iwoplaza force-pushed the feat/resize-common branch from 3d517f9 to 2cfcb82 Compare October 30, 2026 15:32

pullfrog Bot reviewed Oct 30, 2026

View reviewed changes

Conversation

iwoplaza commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size comparison (import * as ... in PR vs import * as ... in target):

import * as ... in PR vs import * as ... in target (did bundle size increase?):

Uh oh!

github-actions Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolution Time Benchmark

Uh oh!

Uh oh!

Uh oh!

iwoplaza commented Jun 17, 2026

Uh oh!

pullfrog Bot left a comment

Choose a reason for hiding this comment

Uh oh!

pullfrog Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aleksanderkatan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pullfrog Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pullfrog Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pullfrog Bot left a comment

Choose a reason for hiding this comment

iwoplaza commented May 21, 2026 •

edited

Loading

github-actions Bot commented May 21, 2026 •

edited

Loading

github-actions Bot commented May 21, 2026 •

edited

Loading

Bundle size comparison (`import * as ...` in PR vs `import * as ...` in target):

`import * as ...` in PR vs `import * as ...` in target (did bundle size increase?):

github-actions Bot commented May 21, 2026 •

edited

Loading