Skip to content

[backport cloud/1.41] fix: 3D asset disappears when switching to image output in app mode#10231

Open
comfy-pr-bot wants to merge 1 commit intocloud/1.41from
backport-9622-to-cloud-1.41
Open

[backport cloud/1.41] fix: 3D asset disappears when switching to image output in app mode#10231
comfy-pr-bot wants to merge 1 commit intocloud/1.41from
backport-9622-to-cloud-1.41

Conversation

@comfy-pr-bot
Copy link
Member

@comfy-pr-bot comfy-pr-bot commented Mar 18, 2026

Backport of #9622 to cloud/1.41

Automatically created by backport workflow.

┆Issue is synchronized with this Notion page by Unito

…9622)

## Summary

Fix 3D asset disappearing when switching between 3D and image outputs in
app mode — missing `onUnmounted` cleanup leaked WebGL contexts.

## Changes

- **What**: Add `onUnmounted` hook to `Preview3d.vue` that calls
`viewer.cleanup()`, releasing the WebGL context when Vue destroys the
component via its v-if chain. Add unit tests covering init, cleanup on
unmount, and remount behavior.

## Review Focus

When switching outputs in app mode, Vue's v-if chain destroys and
recreates `Preview3d`. Without `onUnmounted` cleanup, the old `Load3d`
instance (WebGL context, RAF loop, ResizeObserver) leaks. After ~8-16
toggles, the browser's WebGL context limit is exhausted and new 3D
viewers silently fail to render.

<!-- Pipeline-Ticket: e36489d2-a9fb-47ca-9e27-88eb3170836b -->

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
@comfy-pr-bot comfy-pr-bot requested a review from a team as a code owner March 18, 2026 01:08
@comfy-pr-bot comfy-pr-bot added the backport Backporting a PR onto a release candidate label Mar 18, 2026
@comfy-pr-bot comfy-pr-bot enabled auto-merge (squash) March 18, 2026 01:08
@github-actions
Copy link

github-actions bot commented Mar 18, 2026

🎭 Playwright: ✅ 565 passed, 0 failed · 1 flaky

📊 Browser Reports
  • chromium: View Report (✅ 552 / ❌ 0 / ⚠️ 1 / ⏭️ 10)
  • chromium-2x: View Report (✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • chromium-0.5x: View Report (✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • mobile-chrome: View Report (✅ 10 / ❌ 0 / ⚠️ 0 / ⏭️ 0)

@github-actions
Copy link

github-actions bot commented Mar 18, 2026

🎨 Storybook: ✅ Built — View Storybook

Details

⏰ Completed at: 03/18/2026, 01:10:31 AM UTC

Links

@github-actions
Copy link

📦 Bundle Size

⏳ Size data collection in progress…

⚡ Performance Report

No baseline found — showing absolute values.

Metric Value
canvas-idle: style recalcs 123
canvas-idle: layouts 0
canvas-idle: task duration 416ms
canvas-idle: heap delta -3.6 MB
canvas-mouse-sweep: style recalcs 184
canvas-mouse-sweep: layouts 12
canvas-mouse-sweep: task duration 991ms
canvas-mouse-sweep: heap delta -2.8 MB
dom-widget-clipping: style recalcs 42
dom-widget-clipping: layouts 0
dom-widget-clipping: task duration 360ms
dom-widget-clipping: heap delta 7.6 MB
subgraph-dom-widget-clipping: style recalcs 73
subgraph-dom-widget-clipping: layouts 0
subgraph-dom-widget-clipping: task duration 397ms
subgraph-dom-widget-clipping: heap delta 14.2 MB
subgraph-idle: style recalcs 122
subgraph-idle: layouts 0
subgraph-idle: task duration 402ms
subgraph-idle: heap delta -3.5 MB
subgraph-mouse-sweep: style recalcs 155
subgraph-mouse-sweep: layouts 16
subgraph-mouse-sweep: task duration 745ms
subgraph-mouse-sweep: heap delta -6.0 MB
Raw data
{
  "timestamp": "2026-03-18T01:13:07.550Z",
  "gitSha": "63a90ecebab351f8b9615dae8a868cd42794ece6",
  "branch": "backport-9622-to-cloud-1.41",
  "measurements": [
    {
      "name": "canvas-idle",
      "durationMs": 2014.5430000000033,
      "styleRecalcs": 123,
      "styleRecalcDurationMs": 20.305999999999997,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 416.345,
      "heapDeltaBytes": -3619668
    },
    {
      "name": "canvas-idle",
      "durationMs": 2040.0900000000206,
      "styleRecalcs": 124,
      "styleRecalcDurationMs": 23.562,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 425.834,
      "heapDeltaBytes": -3816988
    },
    {
      "name": "canvas-idle",
      "durationMs": 2015.4719999999884,
      "styleRecalcs": 123,
      "styleRecalcDurationMs": 21.017,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 405.11800000000005,
      "heapDeltaBytes": -3869824
    },
    {
      "name": "canvas-mouse-sweep",
      "durationMs": 2151.695000000018,
      "styleRecalcs": 192,
      "styleRecalcDurationMs": 62.847,
      "layouts": 13,
      "layoutDurationMs": 4.228,
      "taskDurationMs": 1136.462,
      "heapDeltaBytes": -2801488
    },
    {
      "name": "canvas-mouse-sweep",
      "durationMs": 1909.6319999999878,
      "styleRecalcs": 175,
      "styleRecalcDurationMs": 50.419,
      "layouts": 12,
      "layoutDurationMs": 3.7859999999999996,
      "taskDurationMs": 830.13,
      "heapDeltaBytes": -2984980
    },
    {
      "name": "canvas-mouse-sweep",
      "durationMs": 2043.814999999995,
      "styleRecalcs": 184,
      "styleRecalcDurationMs": 54.99,
      "layouts": 12,
      "layoutDurationMs": 3.5199999999999996,
      "taskDurationMs": 1006.098,
      "heapDeltaBytes": -3109600
    },
    {
      "name": "dom-widget-clipping",
      "durationMs": 598.6540000000105,
      "styleRecalcs": 44,
      "styleRecalcDurationMs": 13.950000000000001,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 363.57,
      "heapDeltaBytes": 7825568
    },
    {
      "name": "dom-widget-clipping",
      "durationMs": 575.567000000035,
      "styleRecalcs": 41,
      "styleRecalcDurationMs": 12.182,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 359.26,
      "heapDeltaBytes": 7550824
    },
    {
      "name": "dom-widget-clipping",
      "durationMs": 540.898000000027,
      "styleRecalcs": 42,
      "styleRecalcDurationMs": 17.026,
      "layouts": 1,
      "layoutDurationMs": 0.3320000000000001,
      "taskDurationMs": 358.511,
      "heapDeltaBytes": 8552444
    },
    {
      "name": "subgraph-dom-widget-clipping",
      "durationMs": 597.4370000000135,
      "styleRecalcs": 73,
      "styleRecalcDurationMs": 14.786000000000001,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 397.123,
      "heapDeltaBytes": 15182664
    },
    {
      "name": "subgraph-dom-widget-clipping",
      "durationMs": 586.4140000000475,
      "styleRecalcs": 73,
      "styleRecalcDurationMs": 14.871,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 385.65,
      "heapDeltaBytes": 14244572
    },
    {
      "name": "subgraph-dom-widget-clipping",
      "durationMs": 573.8139999999703,
      "styleRecalcs": 72,
      "styleRecalcDurationMs": 15.154,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 406.883,
      "heapDeltaBytes": 15194256
    },
    {
      "name": "subgraph-idle",
      "durationMs": 2005.978999999968,
      "styleRecalcs": 121,
      "styleRecalcDurationMs": 22.594999999999995,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 410.472,
      "heapDeltaBytes": -4181512
    },
    {
      "name": "subgraph-idle",
      "durationMs": 2023.6909999999853,
      "styleRecalcs": 123,
      "styleRecalcDurationMs": 20.676,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 397.42699999999996,
      "heapDeltaBytes": -3414332
    },
    {
      "name": "subgraph-idle",
      "durationMs": 2014.7440000000074,
      "styleRecalcs": 122,
      "styleRecalcDurationMs": 20.813,
      "layouts": 0,
      "layoutDurationMs": 0,
      "taskDurationMs": 396.655,
      "heapDeltaBytes": -3430192
    },
    {
      "name": "subgraph-mouse-sweep",
      "durationMs": 1705.7819999999992,
      "styleRecalcs": 155,
      "styleRecalcDurationMs": 48.767,
      "layouts": 16,
      "layoutDurationMs": 4.539,
      "taskDurationMs": 766.961,
      "heapDeltaBytes": -6652312
    },
    {
      "name": "subgraph-mouse-sweep",
      "durationMs": 1706.752999999992,
      "styleRecalcs": 155,
      "styleRecalcDurationMs": 47.177,
      "layouts": 16,
      "layoutDurationMs": 4.615,
      "taskDurationMs": 747.79,
      "heapDeltaBytes": -6106296
    },
    {
      "name": "subgraph-mouse-sweep",
      "durationMs": 1691.1369999999692,
      "styleRecalcs": 154,
      "styleRecalcDurationMs": 43.54900000000001,
      "layouts": 16,
      "layoutDurationMs": 4.354,
      "taskDurationMs": 721.342,
      "heapDeltaBytes": -6106192
    }
  ]
}

@dosubot dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Mar 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport Backporting a PR onto a release candidate size:XL This PR changes 500-999 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants