feat: PixiJS v8.15.0 support

packages/api/package.json

@@ -32,7 +32,7 @@
     "start": "npm run watch"
   },
   "devDependencies": {
-    "pixi.js": "^8.2.2"
+    "pixi.js": "^8.14.3"
   },
   "peerDependencies": {
     "pixi.js": "^7 || ^8"

packages/backend/src/assets/gpuTextures/textures.ts

@@ -1,5 +1,5 @@
 import type { TextureDataState } from '@devtool/frontend/pages/assets/assets';
-import type { CanvasSource, GlTexture, TextureSource, WebGLRenderer, WebGPURenderer } from 'pixi.js';
+import type { CanvasSource, GlTexture, TextureSource, WebGLRenderer } from 'pixi.js';
 import { PixiHandler } from '../../handler';
 
 const gpuTextureFormatSize: Record<string, number> = {
@@ -67,6 +67,7 @@ export class Textures extends PixiHandler {
   private _textures: Map<number, string> = new Map();
   private _gpuTextureSize: Map<number, number> = new Map();
   private _canvas = document.createElement('canvas');
+  private _previousData: TextureDataState[] = [];
 
   public override init() {
     this._textures.clear();
@@ -76,6 +77,7 @@ export class Textures extends PixiHandler {
   public override reset() {
     this._textures.clear();
     this._gpuTextureSize.clear();
+    this._previousData = [];
   }
 
   public override update() {}
@@ -86,6 +88,7 @@ export class Textures extends PixiHandler {
 
     const data: TextureDataState[] = [];
     currentTextures.forEach((texture) => {
+      if (!texture) return;
       if (!texture.resource) return;
 
       if (!this._textures.get(texture.uid)) {
@@ -103,6 +106,7 @@ export class Textures extends PixiHandler {
       }
 
       data.push({
+        uid: texture.uid,
         name: texture.label,
         gpuSize: this._gpuTextureSize.get(texture.uid) || 0,
         pixelWidth: texture.pixelWidth,
@@ -123,15 +127,49 @@ export class Textures extends PixiHandler {
       });
     });
 
+    if (!('_glTextures' in this._devtool.renderer.texture)) {
+      // currentTextures can now contain null values, these null values are the textures that have been garbage collected
+      // we need to map these null values to the previous data so we can add them back to the data array
+      // loop through the previous data and any texture that is not in the current data array, add it back to the data array
+      const currentUids = new Set(data.map((t) => t.uid));
+      this._previousData.forEach((previousTexture) => {
+        if (!currentUids.has(previousTexture.uid)) {
+          data.push({ ...previousTexture, isLoaded: false });
+        }
+      });
+      this._previousData = data.slice();
+    }
+
     return data;
   }
 
   public getWebTextures() {
-    const glRenderer = this._devtool.renderer as WebGLRenderer;
-    const gpuRenderer = this._devtool.renderer as WebGPURenderer;
-
-    const glTextures: Record<number, GlTexture | GPUTexture> =
-      glRenderer.texture['_glTextures'] || gpuRenderer.texture['_gpuSources'];
+    const renderer = this._devtool.renderer as WebGLRenderer;
+
+    let glTextures: Record<number, GlTexture | GPUTexture> = {};
+    const textureSystem = renderer.texture as unknown as
+      | { _glTextures: Record<number, GlTexture> }
+      | { _gpuSources: Record<number, GPUTexture> }
+      | { managedTextures: Readonly<TextureSource[]> };
+
+    if ('_glTextures' in textureSystem || '_gpuSources' in textureSystem) {
+      glTextures = '_glTextures' in textureSystem ? textureSystem['_glTextures'] : textureSystem['_gpuSources'];
+    } else {
+      // we are now using pixi 8.15
+      const managedTextures = textureSystem.managedTextures;
+      glTextures = managedTextures.reduce(
+        (acc, texture) => {
+          if (!texture) return acc;
+          // @ts-expect-error - pixi 8.15 introduced a new property _gpuData
+          const gpuData = texture._gpuData[this._devtool.renderer.uid];
+          if (!gpuData) return acc;
+
+          acc[texture.uid] = 'gpuTexture' in gpuData ? gpuData.gpuTexture : gpuData;
+          return acc;
+        },
+        {} as Record<number, GlTexture | GPUTexture>,
+      );
+    }
 
     return glTextures;
   }

packages/backend/src/rendering/instructions.ts

@@ -152,7 +152,7 @@ export function getFilterInstruction(
       return {
         type: filter.constructor.name,
         padding: filter.padding,
-        resolution: filter.resolution,
+        resolution: typeof filter.resolution === 'number' ? filter.resolution : 1,
         antialias: filter.antialias,
         blendMode: filter.blendMode,
         program: {
@@ -193,8 +193,8 @@ export function getMeshInstruction(
 
   if (!shader) {
     shader = PixiDevtools.renderer.renderPipes.mesh['_adaptor']._shader;
-    program.fragment = getProgramSource(shader, 'fragment', rendererType);
-    program.vertex = getProgramSource(shader, 'vertex', rendererType);
+    program.fragment = getProgramSource(shader!, 'fragment', rendererType);
+    program.vertex = getProgramSource(shader!, 'vertex', rendererType);
   } else {
     program.fragment = getProgramSource(shader, 'fragment', rendererType);
     program.vertex = getProgramSource(shader, 'vertex', rendererType);

packages/backend/src/rendering/rendering.ts

@@ -218,7 +218,7 @@ export class Rendering extends PixiHandler {
       premultipliedAlpha = contextAttributes.premultipliedAlpha?.toString() ?? '';
     }
 
-    return {
+    const defaults = {
       type: this._devtool.rendererType!,
       width: canvas.width,
       height: canvas.height,
@@ -238,12 +238,25 @@ export class Rendering extends PixiHandler {
       resolution: renderer.resolution.toString(),
       roundPixels: renderer.roundPixels.toString(),
       failIfMajorPerformanceCaveat,
+    };
 
-      // @ts-expect-error - private properties
+    if (!('glTextures' in renderer.texture)) {
+      return {
+        ...defaults,
+        // @ts-expect-error - newer pixi version
+        gcActive: renderer.gc.enabled.toString(),
+        // @ts-expect-error - newer pixi version
+        gcMaxUnusedTime: renderer.gc.maxUnusedTime.toString(),
+        // @ts-expect-error - newer pixi version
+        gcFrequency: renderer.gc._frequency.toString(),
+      };
+    }
+
+    return {
+      ...defaults,
       renderableGCActive: renderer.renderableGC?.enabled.toString(),
       // @ts-expect-error - private properties
       renderableGCFrequency: renderer.renderableGC?._frequency.toString(),
-      // @ts-expect-error - private properties
       renderableGCMaxUnusedTime: renderer.renderableGC?.maxUnusedTime.toString(),
       textureGCAMaxIdle: renderer.textureGC.maxIdle.toString(),
       textureGCActive: renderer.textureGC.active.toString(),

packages/backend/src/scene/tree/tree.ts

@@ -114,7 +114,7 @@ export class Tree extends PixiHandler {
     }
 
     if (updateSceneGraph) {
-      const parent = this._sceneGraph.get(container.parent);
+      const parent = this._sceneGraph.get(container.parent!);
       parent?.children.push(node);
       this._sceneGraph.set(container, node);
     }

packages/backend/src/utils/getPixiType.ts

@@ -106,7 +106,6 @@ export function isContainer(container: Container, pixi?: (typeof PixiDevtools)['
 
 export function isParticleContainer(container: Container, pixi?: (typeof PixiDevtools)['pixi']): boolean {
   if (pixi) {
-    // @ts-expect-error - particle container is a unreleased 8.5 feature
     return pixi.ParticleContainer && container instanceof pixi.ParticleContainer;
   }
   return ('renderPipeId' in container && container['renderPipeId'] === 'particle') || 'particleChildren' in container;

packages/backend/src/utils/loop.ts

@@ -19,13 +19,13 @@ function loopRecursive(container: Container, opts: Omit<LoopOptions, 'container'
     return;
   }
 
-  const testResult = test?.(container, container.parent) ?? true;
+  const testResult = test?.(container, container.parent!) ?? true;
 
   if (testResult === false) {
     return;
   }
 
-  loop(container, container.parent);
+  loop(container, container.parent!);
 
   if (container.children.length === 0 || testResult === 'children') {
     return;

packages/example/package.json

@@ -9,7 +9,7 @@
     "start": "npm run watch"
   },
   "dependencies": {
-    "pixi.js": "^8.2.2",
+    "pixi.js": "^8.14.3",
     "@pixi/devtools": "*"
   }
 }

packages/frontend/src/pages/assets/assets.ts

@@ -3,6 +3,7 @@ import type { ALPHA_MODES, TEXTURE_DIMENSIONS, TEXTURE_FORMATS } from 'pixi.js';
 import type { RemoveSetters } from '../../types';
 
 export interface TextureDataState {
+  uid: number;
   gpuSize: number;
   pixelWidth: number;
   pixelHeight: number;

packages/frontend/src/pages/rendering/rendering.ts

@@ -41,7 +41,7 @@ export interface FrameCaptureData {
   };
 }
 
-export interface CanvasData {
+interface BaseCanvasData {
   width: number;
   height: number;
   clientWidth: number;
@@ -60,13 +60,25 @@ export interface CanvasData {
   background: string;
   clearBeforeRender: string;
   failIfMajorPerformanceCaveat: string | undefined;
+}
+
+interface CanvasData8_14 extends BaseCanvasData {
   renderableGCFrequency: string;
   renderableGCActive: string;
   renderableGCMaxUnusedTime: string;
   textureGCAMaxIdle: string;
   textureGCActive: string;
   textureGCCheckCountMax: string;
 }
+
+interface CanvasData8_15 extends BaseCanvasData {
+  gcActive: string;
+  gcMaxUnusedTime: string;
+  gcFrequency: string;
+}
+
+export type CanvasData = CanvasData8_14 | CanvasData8_15;
+
 export interface RenderingState {
   selectedInstruction: number | null;
   setSelectedInstruction: (instruction: RenderingState['selectedInstruction']) => void;