Skip to content

2026-02-28 fix: Pixi WebGPU snapshot roomInfo white screen

Background

After upgrading pixi.js to 8.16.0, the WebGPU rendering flow started failing in one specific sequence: call snapshotByData, then render room information in the main instance.

This record captures the reproduction path, root cause, fix, and regression checklist so future Pixi upgrades are easier to verify.

Symptom

In the demo, run this sequence:

  1. Render either Raster Map or Structured Map.
  2. Click Snapshot Other Map (this triggers snapshotByData).
  3. Click Draw roomInfo.

The map turns white and the console reports:

  • BindGroupSystem._createBindGroup
  • Cannot read properties of null (reading '0'/'2')

Root cause

The issue is in Pixi BindGroup.setResource(resource, index).

When replacing a resource, the old logic incorrectly called off('change') on the new resource instead of the previous resource (currentResource). Because of this, stale listeners can survive on the old resource. After the old resource is destroyed, it can still trigger the current BindGroup callback and null out resources[i], which later crashes WebGPU bind group creation.

Fix

The project patch updates both CJS and ESM files:

  • node_modules/pixi.js/lib/rendering/renderers/gpu/shader/BindGroup.js
  • node_modules/pixi.js/lib/rendering/renderers/gpu/shader/BindGroup.mjs

Key change:

diff
- resource.off?.("change", this.onResourceChange, this)
+ currentResource.off?.("change", this.onResourceChange, this)

Patch location:

  • patches/pixi.js+8.16.0.patch

Risk assessment

This is a low-intrusion lifecycle fix. It only changes listener cleanup in the resource replacement path. It does not change rendering strategy or public business APIs.

Regression checklist

Run these checks after each Pixi upgrade or patch refresh:

  1. Raster -> Snapshot Other Map -> Draw roomInfo.
  2. Structured -> Snapshot Other Map -> Draw roomInfo.
  3. Repeat snapshot multiple times, then toggle showRoomProperty.
  4. Run one core flow on both WebGPU and WebGL.
  • package.json: upgrade pixi.js to 8.16.0
  • yarn.lock: lockfile update
  • patches/pixi.js+8.16.0.patch: new versioned patch (includes this fix)

最后更新于: