Skip to content

fix(🌎): avoid implicit web canvas resize - #454

Merged
wcandillon merged 2 commits into
wcandillon:mainfrom
huytdps13400:fix/351-web-canvas-resize
Aug 30, 2026
Merged

fix(🌎): avoid implicit web canvas resize#454
wcandillon merged 2 commits into
wcandillon:mainfrom
huytdps13400:fix/351-web-canvas-resize

Conversation

@huytdps13400

Copy link
Copy Markdown
Contributor

Summary

  • stop the web canvas wrapper from silently changing its drawing-buffer dimensions on every window resize
  • preserve initial DPR-aware sizing through the existing MakeWebGPUCanvasContext path
  • leave subsequent buffer resizing to the renderer/app so dependent depth and MSAA attachments can be recreated atomically

Fixes #351.

Root cause

The wrapper listened to window.resize and changed canvas.width / canvas.height after a 100 ms debounce. WebGPU canvas resizing invalidates the current texture, but renderers such as Three.js still owned depth/MSAA attachments at the previous dimensions. The next render pass therefore mixed textures of different extents and failed validation every frame.

The browser regression reproduced the current issue exactly: resizing the example viewport changed the drawing buffer from 2400×1344 to 1800×744 while Three.js kept its 2400×1344 depth attachment.

Verification

  • Current main RED: Three.js InstancedMesh emits repeated attachment-size validation warnings after a 1200×800 → 900×500 viewport resize.
  • Patched GREEN:
    • CSS canvas size changes from 1200×672 to 900×372.
    • Drawing buffer remains 2400×1344 until the renderer explicitly resizes it.
    • Zero attachment-size warnings.
    • The scene continues rendering after resize.
  • tsc -p packages/webgpu/tsconfig.json --noEmit
  • targeted ESLint and Prettier checks
  • yarn workspace react-native-webgpu build
  • root yarn tsc: 3/3 workspaces pass
  • git diff --check

The example asset hook was temporarily bypassed only for browser setup because the current web example cannot resolve its Metro asset IDs; that harness change was fully reverted and is not part of this PR.

@wcandillon

Copy link
Copy Markdown
Owner

Thanks a lot for this :)

@wcandillon
wcandillon self-requested a review August 30, 2026 09:42
@wcandillon
wcandillon merged commit 80455af into wcandillon:main Aug 30, 2026
2 checks passed
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 0.8.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Resizing the example app brakes the canvas

2 participants