@vpmedia/phaser 1.114.0 → 1.115.0

package/src/phaser/display/display_object.ts

@@ -6,6 +6,7 @@ import { PI_2 } from '../util/math.js';
 import { renderCanvas, renderWebGL } from './sprite_util.js';
 import type { Graphics } from './graphics.js';
 import type { Game } from '../core/game.js';
+import type { RenderSession } from './render_session.js';
 
 export class DisplayObject {
   /** @type {boolean} */
@@ -508,7 +509,7 @@ export class DisplayObject {
    * @param {object} renderSession - The WebGL rendering session.
    * @param {Matrix | null} _matrix - The transform matrix to render with.
    */
-  public renderWebGL(renderSession: any, _matrix: Matrix | null = null) {
+  public renderWebGL(renderSession: RenderSession, _matrix: Matrix | null = null) {
     if (!this.visible || this.alpha <= 0) {
       return;
     }
@@ -520,7 +521,7 @@ export class DisplayObject {
       }
       if (this._mask) {
         renderSession.spriteBatch.stop();
-        renderSession.maskManager.pushMask(this.mask, renderSession);
+        renderSession.maskManager.pushMask(this.mask!, renderSession);
         renderSession.spriteBatch.start();
       }
       for (const child of this.children) {
@@ -545,7 +546,7 @@ export class DisplayObject {
    * Renders this display object using Canvas.
    * @param {object} renderSession - The Canvas rendering session.
    */
-  public renderCanvas(renderSession: any) {
+  public renderCanvas(renderSession: RenderSession) {
     if (!this.visible || this.alpha <= 0) {
       return;
     }
@@ -556,7 +557,7 @@ export class DisplayObject {
       child.renderCanvas(renderSession);
     }
     if (this._mask) {
-      renderSession.maskManager.popMask(renderSession);
+      renderSession.maskManager.popMask(this._mask, renderSession);
     }
   }
 
@@ -618,7 +619,7 @@ export class DisplayObject {
    * Renders a cached sprite for this display object.
    * @param {object} renderSession - The rendering session.
    */
-  public renderCachedSprite(renderSession: any) {
+  public renderCachedSprite(renderSession: RenderSession) {
     if (!this._cachedSprite) {
       return;
     }

package/src/phaser/display/graphics.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest';
+import type { Game } from '../core/game.js';
+import { Point } from '../geom/point.js';
+import { Polygon } from '../geom/polygon.js';
+import { Rectangle } from '../geom/rectangle.js';
+import { Graphics } from './graphics.js';
+
+const createGame = (): Game => ({ renderer: { resolution: 1 } }) as unknown as Game;
+
+const createGraphics = (): Graphics => new Graphics(createGame());
+
+describe('Graphics', () => {
+  describe('containsPoint', () => {
+    // The index never advanced here, so any filled shape that did not contain the point spun
+    // forever. A vitest timeout is the only way a hang shows up as a failure.
+    it('returns false for a point outside a filled shape instead of hanging', { timeout: 2000 }, () => {
+      const graphics = createGraphics();
+      graphics.beginFill(0xff0000);
+      graphics.drawRect(0, 0, 10, 10);
+      graphics.endFill();
+      expect(graphics.containsPoint(new Point(100, 100), new Point())).toBe(false);
+    });
+
+    it('returns true for a point inside a filled shape', { timeout: 2000 }, () => {
+      const graphics = createGraphics();
+      graphics.beginFill(0xff0000);
+      graphics.drawRect(0, 0, 10, 10);
+      graphics.endFill();
+      expect(graphics.containsPoint(new Point(5, 5), new Point())).toBe(true);
+    });
+
+    it('walks past a non-matching shape to a later matching one', { timeout: 2000 }, () => {
+      const graphics = createGraphics();
+      graphics.beginFill(0xff0000);
+      graphics.drawRect(0, 0, 10, 10);
+      graphics.drawRect(100, 100, 10, 10);
+      graphics.endFill();
+      expect(graphics.containsPoint(new Point(105, 105), new Point())).toBe(true);
+    });
+
+    it('ignores unfilled shapes', { timeout: 2000 }, () => {
+      const graphics = createGraphics();
+      graphics.lineStyle(1, 0x00ff00);
+      graphics.drawRect(0, 0, 10, 10);
+      expect(graphics.containsPoint(new Point(5, 5), new Point())).toBe(false);
+    });
+
+    it('returns false when nothing has been drawn', { timeout: 2000 }, () => {
+      expect(createGraphics().containsPoint(new Point(0, 0), new Point())).toBe(false);
+    });
+  });
+
+  describe('drawShape', () => {
+    it('records a polygon as the current path', () => {
+      const graphics = createGraphics();
+      const data = graphics.drawShape(new Polygon([0, 0, 10, 0, 10, 10]));
+      expect(graphics.currentPath).toBe(data);
+      expect(data.shape).toBeInstanceOf(Polygon);
+    });
+
+    it('does not record a rectangle as the current path', () => {
+      const graphics = createGraphics();
+      graphics.drawShape(new Rectangle(0, 0, 10, 10));
+      expect(graphics.currentPath).toBeNull();
+    });
+
+    it('carries the current fill and line style onto the data', () => {
+      const graphics = createGraphics();
+      graphics.lineStyle(4, 0x00ff00, 0.5);
+      graphics.beginFill(0xff0000, 0.25);
+      const data = graphics.drawShape(new Rectangle(0, 0, 10, 10));
+      expect(data.lineWidth).toBe(4);
+      expect(data.lineColor).toBe(0x00ff00);
+      expect(data.lineAlpha).toBe(0.5);
+      expect(data.fillColor).toBe(0xff0000);
+      expect(data.fillAlpha).toBe(0.25);
+      expect(data.fill).toBe(true);
+    });
+
+    it('flattens a polygon so the builders see numbers', () => {
+      const graphics = createGraphics();
+      const data = graphics.drawShape(new Polygon([new Point(0, 0), new Point(10, 0), new Point(10, 10)]));
+      expect((data.shape as Polygon)._points.every((value) => typeof value === 'number')).toBe(true);
+    });
+  });
+
+  describe('path building', () => {
+    it('accumulates points through moveTo and lineTo', () => {
+      const graphics = createGraphics();
+      graphics.moveTo(0, 0);
+      graphics.lineTo(10, 0);
+      graphics.lineTo(10, 10);
+      expect(graphics.currentPath?.shape.points).toStrictEqual([0, 0, 10, 0, 10, 10]);
+    });
+
+    it('starts a path at the origin when lineTo comes first', () => {
+      const graphics = createGraphics();
+      graphics.lineTo(10, 10);
+      expect(graphics.currentPath?.shape.points).toStrictEqual([0, 0, 10, 10]);
+    });
+  });
+
+  describe('endFill', () => {
+    it('stops filling subsequent shapes', () => {
+      const graphics = createGraphics();
+      graphics.beginFill(0xff0000);
+      graphics.endFill();
+      expect(graphics.drawShape(new Rectangle(0, 0, 10, 10)).fill).toBe(false);
+    });
+  });
+
+  describe('clear', () => {
+    it('drops the recorded graphics data', () => {
+      const graphics = createGraphics();
+      graphics.beginFill(0xff0000);
+      graphics.drawRect(0, 0, 10, 10);
+      graphics.clear();
+      expect(graphics.graphicsData).toStrictEqual([]);
+      expect(graphics.currentPath).toBeNull();
+    });
+  });
+});

package/src/phaser/display/graphics.ts

@@ -1,14 +1,6 @@
 import type { Game } from '../core/game.js';
 import type { Matrix } from '../geom/matrix.js';
-import {
-  BLEND_NORMAL,
-  GEOM_CIRCLE,
-  GEOM_ELLIPSE,
-  GEOM_POLYGON,
-  GEOM_RECTANGLE,
-  GEOM_ROUNDED_RECTANGLE,
-  GRAPHICS,
-} from '../core/const.js';
+import { BLEND_NORMAL, GRAPHICS } from '../core/const.js';
 import { Circle } from '../geom/circle.js';
 import { Ellipse } from '../geom/ellipse.js';
 import { Point } from '../geom/point.js';
@@ -20,37 +12,54 @@ import { getEmptyRectangle } from '../geom/util/rectangle.js';
 import { CanvasBuffer } from './canvas/buffer.js';
 import { renderGraphics as renderCanvasGraphics } from './canvas/graphics.js';
 import { DisplayObject } from './display_object.js';
+import type { GraphicsShape } from './graphics_data.js';
 import { GraphicsData } from './graphics_data.js';
 import { Image } from './image.js';
 import { renderCanvas as renderSpriteCanvas, renderWebGL as renderSpriteWebGL } from './sprite_util.js';
 import { renderGraphics as renderWebGLGraphics } from './webgl/graphics.js';
 import { textureFromCanvas } from './webgl/texture_util.js';
+import type { RenderSession } from './render_session.js';
+import type { GraphicsData as WebGLGraphicsData } from './webgl/graphics_data.js';
+import type { IdentifiedWebGLRenderingContext } from './webgl/util.js';
+
+/** Graphics attaches the buffer it draws into onto its cached sprite. */
+export type CachedSprite = Image & { buffer: CanvasBuffer };
+
+/** drawShape only records a current path for polygon data, so its shape is always a Polygon. */
+export type PolygonPath = GraphicsData & { shape: Polygon };
+
+/** Per-context WebGL state cached on a graphics object, keyed by gl context id. */
+export type GraphicsWebGLBucket = {
+  lastIndex: number;
+  data: WebGLGraphicsData[];
+  gl: IdentifiedWebGLRenderingContext;
+};
 
 export class Graphics extends DisplayObject {
-  declare public type: any;
-  declare public renderable: any;
-  public fillAlpha!: any;
-  public lineWidth!: any;
-  public lineColor!: any;
-  public lineAlpha!: any;
-  public graphicsData!: any;
-  declare public tint: any;
-  public blendMode!: any;
-  public currentPath!: any;
-  public _webGL!: any;
-  public isMask!: any;
-  public boundsPadding!: any;
-  public _localBounds!: any;
-  public dirty!: any;
-  public clearDirty!: any;
-  public _boundsDirty!: any;
-  public _cacheAsBitmap!: any;
-  public webGLDirty!: any;
-  public cachedSpriteDirty!: any;
-  declare public _cachedSprite: any;
-  public filling!: any;
-  public fillColor!: any;
-  public _prevTint!: any;
+  declare public type: number;
+  declare public renderable: boolean;
+  public fillAlpha!: number;
+  public lineWidth!: number;
+  public lineColor!: number;
+  public lineAlpha!: number;
+  public graphicsData!: GraphicsData[];
+  declare public tint: number;
+  public blendMode!: number;
+  public currentPath!: PolygonPath | null;
+  public _webGL!: Record<number, GraphicsWebGLBucket | undefined>;
+  public isMask!: boolean;
+  public boundsPadding!: number;
+  public _localBounds!: Rectangle;
+  public dirty!: boolean;
+  public clearDirty!: boolean;
+  public _boundsDirty!: boolean;
+  public _cacheAsBitmap!: boolean;
+  public webGLDirty!: boolean;
+  public cachedSpriteDirty!: boolean;
+  declare public _cachedSprite: CachedSprite | null;
+  public filling!: boolean;
+  public fillColor!: number | null;
+  public _prevTint!: number;
   /**
    * Creates a new Graphics object.
    * @param {Game} game - The game instance.
@@ -152,7 +161,7 @@ export class Graphics extends DisplayObject {
     if (!this.currentPath) {
       this.moveTo(0, 0);
     }
-    this.currentPath.shape.points.push(x, y);
+    this.currentPath!.shape.points.push(x, y);
     this.dirty = true;
     this._boundsDirty = true;
     return this;
@@ -177,7 +186,7 @@ export class Graphics extends DisplayObject {
     let xa;
     let ya;
     const n = 20;
-    const { points } = this.currentPath.shape;
+    const { points } = this.currentPath!.shape;
     if (points.length === 0) {
       this.moveTo(0, 0);
     }
@@ -219,7 +228,7 @@ export class Graphics extends DisplayObject {
     let dt3;
     let t2;
     let t3;
-    const { points } = this.currentPath.shape;
+    const { points } = this.currentPath!.shape;
     const fromX = points.at(-2);
     const fromY = points.at(-1);
     let j = 0;
@@ -257,7 +266,7 @@ export class Graphics extends DisplayObject {
     } else {
       this.moveTo(x1, y1);
     }
-    const { points } = this.currentPath.shape;
+    const { points } = this.currentPath!.shape;
     const fromX = points.at(-2);
     const fromY = points.at(-1);
     const a1 = fromY - y1;
@@ -335,7 +344,7 @@ export class Graphics extends DisplayObject {
       this.moveTo(startX, startY);
     }
     //  currentPath will always exist after calling a moveTo
-    const { points } = this.currentPath.shape;
+    const { points } = this.currentPath!.shape;
     const theta = sweep / (segs * 2);
     const theta2 = theta * 2;
     const cTheta = Math.cos(theta);
@@ -489,9 +498,9 @@ export class Graphics extends DisplayObject {
    * Renders the graphics object using WebGL.
    * @param {object} renderSession - The render session to use.
    */
-  public override renderWebGL(renderSession: any) {
+  public override renderWebGL(renderSession: RenderSession) {
     // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha === 0 || this.isMask === true) {
+    if (!this.visible || this.alpha === 0 || this.isMask) {
       return;
     }
     if (this._cacheAsBitmap) {
@@ -502,8 +511,8 @@ export class Graphics extends DisplayObject {
         this.cachedSpriteDirty = false;
         this.dirty = false;
       }
-      this._cachedSprite.worldAlpha = this.worldAlpha;
-      (renderSpriteWebGL as any).call(this._cachedSprite, renderSession);
+      this._cachedSprite!.worldAlpha = this.worldAlpha;
+      renderSpriteWebGL(this._cachedSprite!, renderSession);
     } else {
       renderSession.spriteBatch.stop();
       renderSession.blendModeManager.setBlendMode(this.blendMode);
@@ -517,7 +526,7 @@ export class Graphics extends DisplayObject {
       if (this.blendMode !== renderSession.spriteBatch.currentBlendMode) {
         renderSession.spriteBatch.currentBlendMode = this.blendMode;
         const blendModeWebGL = globalThis.PhaserRegistry.blendModesWebGL[renderSession.spriteBatch.currentBlendMode]!;
-        renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
+        renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0]!, blendModeWebGL[1]!);
       }
       // check if the webgl graphic needs to be updated
       if (this.webGLDirty) {
@@ -549,9 +558,9 @@ export class Graphics extends DisplayObject {
    * Renders the graphics object using Canvas.
    * @param {object} renderSession - The render session to use.
    */
-  public override renderCanvas(renderSession: any) {
+  public override renderCanvas(renderSession: RenderSession) {
     // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha === 0 || this.isMask === true) {
+    if (!this.visible || this.alpha === 0 || this.isMask) {
       return;
     }
     // if the tint has changed, set the graphics object to dirty.
@@ -567,14 +576,15 @@ export class Graphics extends DisplayObject {
         this.cachedSpriteDirty = false;
         this.dirty = false;
       }
-      this._cachedSprite.alpha = this.alpha;
-      renderSpriteCanvas(this._cachedSprite, renderSession);
+      this._cachedSprite!.alpha = this.alpha;
+      renderSpriteCanvas(this._cachedSprite!, renderSession);
     } else {
       const { context } = renderSession;
       const transform = this.worldTransform;
       if (this.blendMode !== renderSession.currentBlendMode) {
         renderSession.currentBlendMode = this.blendMode;
-        context.globalCompositeOperation = globalThis.PhaserRegistry.blendModesCanvas[renderSession.currentBlendMode];
+        context.globalCompositeOperation =
+          globalThis.PhaserRegistry.blendModesCanvas[renderSession.currentBlendMode] ?? 'source-over';
       }
       if (this._mask) {
         renderSession.maskManager.pushMask(this._mask, renderSession);
@@ -596,7 +606,7 @@ export class Graphics extends DisplayObject {
         child.renderCanvas(renderSession);
       }
       if (this._mask) {
-        renderSession.maskManager.popMask(renderSession);
+        renderSession.maskManager.popMask(this._mask, renderSession);
       }
     }
   }
@@ -689,8 +699,7 @@ export class Graphics extends DisplayObject {
   public containsPoint(point: Point, tempPoint: Point) {
     this.worldTransform.applyInverse(point, tempPoint);
     const { graphicsData } = this;
-    for (let i = 0; i < graphicsData.length; i += 0) {
-      const data = graphicsData[i];
+    for (const data of graphicsData) {
       if (data.fill && data.shape) {
         if (data.shape.contains(tempPoint.x, tempPoint.y)) {
           return true;
@@ -716,10 +725,9 @@ export class Graphics extends DisplayObject {
       let w;
       let h;
       for (const data of this.graphicsData) {
-        const { type } = data;
         const { lineWidth } = data;
         shape = data.shape;
-        if (type === GEOM_RECTANGLE || type === GEOM_ROUNDED_RECTANGLE) {
+        if (shape instanceof Rectangle || shape instanceof RoundedRectangle) {
           x = shape.x - lineWidth / 2;
           y = shape.y - lineWidth / 2;
           w = shape.width + lineWidth;
@@ -728,7 +736,7 @@ export class Graphics extends DisplayObject {
           maxX = x + w > maxX ? x + w : maxX;
           minY = y < minY ? y : minY;
           maxY = y + h > maxY ? y + h : maxY;
-        } else if (type === GEOM_CIRCLE) {
+        } else if (shape instanceof Circle) {
           x = shape.x;
           y = shape.y;
           w = shape.radius + lineWidth / 2;
@@ -737,7 +745,7 @@ export class Graphics extends DisplayObject {
           maxX = x + w > maxX ? x + w : maxX;
           minY = y - h < minY ? y - h : minY;
           maxY = y + h > maxY ? y + h : maxY;
-        } else if (type === GEOM_ELLIPSE) {
+        } else if (shape instanceof Ellipse) {
           x = shape.x;
           y = shape.y;
           w = shape.width + lineWidth / 2;
@@ -788,7 +796,7 @@ export class Graphics extends DisplayObject {
     if (!this._cachedSprite) {
       const canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
       const texture = textureFromCanvas(canvasBuffer.canvas);
-      this._cachedSprite = new Image(this.game, 0, 0, texture);
+      this._cachedSprite = new Image(this.game, 0, 0, texture) as CachedSprite;
       this._cachedSprite.buffer = canvasBuffer;
       this._cachedSprite.worldTransform = this.worldTransform;
     } else {
@@ -810,7 +818,7 @@ export class Graphics extends DisplayObject {
    * Updates the cached sprite texture.
    */
   public updateCachedSpriteTexture() {
-    const cachedSprite = this._cachedSprite;
+    const cachedSprite = this._cachedSprite!;
     const { texture } = cachedSprite;
     const { canvas } = cachedSprite.buffer;
     texture.baseTexture.width = canvas.width;
@@ -841,7 +849,7 @@ export class Graphics extends DisplayObject {
    * @param {object} shape - The shape to draw.
    * @returns {GraphicsData} The graphics data for the drawn shape.
    */
-  public drawShape(shape: any) {
+  public drawShape(shape: GraphicsShape) {
     if (this.currentPath) {
       // check current path!
       if (this.currentPath.shape.points.length <= 2) {
@@ -850,9 +858,10 @@ export class Graphics extends DisplayObject {
     }
     this.currentPath = null;
     //  Handle mixed-type polygons
-    if (shape instanceof Polygon) {
-      shape = shape.clone();
-      shape.flatten();
+    let target = shape;
+    if (target instanceof Polygon) {
+      target = target.clone();
+      target.flatten();
     }
     const data = new GraphicsData(
       this.lineWidth,
@@ -861,12 +870,12 @@ export class Graphics extends DisplayObject {
       this.fillColor,
       this.fillAlpha,
       this.filling,
-      shape
+      target
     );
     this.graphicsData.push(data);
-    if (data.type === GEOM_POLYGON) {
+    if (data.shape instanceof Polygon) {
       data.shape.closed = this.filling;
-      this.currentPath = data;
+      this.currentPath = data as PolygonPath;
     }
     this.dirty = true;
     this._boundsDirty = true;

package/src/phaser/display/graphics_data.ts

@@ -1,16 +1,26 @@
+import type { Circle } from '../geom/circle.js';
+import type { Ellipse } from '../geom/ellipse.js';
+import type { Polygon } from '../geom/polygon.js';
+import type { Rectangle } from '../geom/rectangle.js';
+import type { RoundedRectangle } from '../geom/rounded_rectangle.js';
 import { clone } from './graphics_data_util.js';
 
+/** The geometry a graphics path can be built from. */
+export type GraphicsShape = Circle | Ellipse | Polygon | Rectangle | RoundedRectangle;
+
 export class GraphicsData {
-  public lineWidth!: any;
-  public lineColor!: any;
-  public lineAlpha!: any;
-  public _lineTint!: any;
-  public fillColor!: any;
-  public fillAlpha!: any;
-  public _fillTint!: any;
-  public fill!: any;
-  public shape!: any;
-  public type!: any;
+  public lineWidth: number;
+  public lineColor: number;
+  public lineAlpha: number;
+  public _lineTint: number;
+  public fillColor: number | null;
+  public fillAlpha: number;
+  public _fillTint: number | null;
+  public fill: boolean;
+  public shape: GraphicsShape;
+  public type: number;
+  /** Flattened points the WebGL builders work from, filled in while updating the graphics. */
+  public points: number[] = [];
   /**
    * Creates a new GraphicsData object.
    * @param {number} lineWidth - The line width.
@@ -25,10 +35,10 @@ export class GraphicsData {
     lineWidth: number,
     lineColor: number,
     lineAlpha: number,
-    fillColor: number,
+    fillColor: number | null,
     fillAlpha: number,
     fill: boolean,
-    shape: any
+    shape: GraphicsShape
   ) {
     this.lineWidth = lineWidth;
     this.lineColor = lineColor;

package/src/phaser/display/image.ts

@@ -9,6 +9,7 @@ import { Texture } from './webgl/texture.js';
 import type { Game } from '../core/game.js';
 import type { Frame } from '../core/frame.js';
 import type { Matrix } from '../geom/matrix.js';
+import type { RenderSession } from './render_session.js';
 
 export class Image extends DisplayObject {
   public key!: any;
@@ -18,7 +19,7 @@ export class Image extends DisplayObject {
   public tint!: number;
   public cachedTint!: number;
   public tilingTexture!: Texture | null;
-  public tintedTexture!: Texture | null;
+  public tintedTexture!: HTMLCanvasElement | null;
   public blendMode!: number;
   public shader!: object | null;
   public _frame!: any;
@@ -409,7 +410,7 @@ export class Image extends DisplayObject {
    * @param {object} renderSession - The WebGL rendering session.
    * @param {Matrix} matrix - The transformation matrix to use.
    */
-  public override renderWebGL(renderSession: any, matrix: Matrix | null = null) {
+  public override renderWebGL(renderSession: RenderSession, matrix: Matrix | null = null) {
     renderWebGL(this, renderSession, matrix);
   }
 
@@ -418,7 +419,7 @@ export class Image extends DisplayObject {
    * @param {object} renderSession - The Canvas rendering session.
    * @param {Matrix} matrix - The transformation matrix to use.
    */
-  public override renderCanvas(renderSession: any, matrix: Matrix | null = null) {
+  public override renderCanvas(renderSession: RenderSession, matrix: Matrix | null = null) {
     renderCanvas(this, renderSession, matrix);
   }
 }

package/src/phaser/display/render_session.ts

@@ -0,0 +1,45 @@
+import type { Point } from '../geom/point.js';
+import type { Graphics } from './graphics.js';
+import type { WebGLBlendModeManager } from './webgl/blend_manager.js';
+import type { WebGLFilterManager } from './webgl/filter_manager.js';
+import type { WebGLRenderer } from './webgl/renderer.js';
+import type { WebGLShaderManager } from './webgl/shader_manager.js';
+import type { WebGLSpriteBatch } from './webgl/sprite_batch.js';
+import type { WebGLStencilManager } from './webgl/stencil_manager.js';
+import type { IdentifiedWebGLRenderingContext } from './webgl/util.js';
+
+/** The canvas and WebGL mask managers, which the renderers supply as namespace imports. */
+export type MaskManager = {
+  pushMask: (maskData: Graphics, renderSession: RenderSession) => void;
+  popMask: (maskData: Graphics | null, renderSession: RenderSession) => void;
+};
+
+/**
+ * State threaded through every render call.
+ *
+ * The canvas and WebGL renderers each populate the subset their pipeline needs, so a session is
+ * only ever fully populated for one of the two. Members are declared non-optional because that is
+ * how the render paths consume them; the renderers assemble the session in one place each.
+ */
+export type RenderSession = {
+  blendModeManager: WebGLBlendModeManager;
+  context: CanvasRenderingContext2D;
+  currentBlendMode: number;
+  drawCount: number;
+  filterManager: WebGLFilterManager;
+  flipY: number;
+  gl: IdentifiedWebGLRenderingContext;
+  maskManager: MaskManager;
+  offset: Point;
+  projection: Point;
+  renderer: WebGLRenderer;
+  resolution: number;
+  roundPixels: boolean;
+  scaleMode: number;
+  shaderManager: WebGLShaderManager;
+  shakeX: number;
+  shakeY: number;
+  smoothProperty: string | null;
+  spriteBatch: WebGLSpriteBatch;
+  stencilManager: WebGLStencilManager;
+};