@vpmedia/phaser 1.114.0 → 1.115.0

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

@@ -1,10 +1,15 @@
-import { GEOM_CIRCLE, GEOM_ELLIPSE, GEOM_POLYGON, GEOM_RECTANGLE, GEOM_ROUNDED_RECTANGLE } from '../../core/const.js';
 import { Point } from '../../geom/point.js';
 import { hex2rgb } from '../../util/math.js';
 import { triangulate } from './earcut.js';
 import { GraphicsData } from './graphics_data.js';
 import type { IdentifiedWebGLRenderingContext } from './util.js';
 import type { Graphics } from '../graphics.js';
+import type { RenderSession } from '../render_session.js';
+import { Circle } from '../../geom/circle.js';
+import { Ellipse } from '../../geom/ellipse.js';
+import { Polygon } from '../../geom/polygon.js';
+import { Rectangle } from '../../geom/rectangle.js';
+import { RoundedRectangle } from '../../geom/rounded_rectangle.js';
 
 /**
  * Updates the graphics data for WebGL rendering.
@@ -366,7 +371,7 @@ export const buildCircle = (graphicsData: any, webGLData: GraphicsData) => {
   let width;
   let height;
   // TODO - bit hacky??
-  if (graphicsData.type === GEOM_CIRCLE) {
+  if (graphicsData.shape instanceof Circle) {
     width = circleData.radius;
     height = circleData.radius;
   } else {
@@ -509,7 +514,7 @@ export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingC
     graphics.clearDirty = false;
     // lop through and return all the webGLDatas to the object pool so than can be reused later on
     for (i = 0; i < webGL.data.length; i += 1) {
-      const graphicsData = webGL.data[i];
+      const graphicsData = webGL.data[i]!;
       graphicsData.reset();
       getGraphicsDataPool().push(graphicsData);
     }
@@ -522,14 +527,14 @@ export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingC
   // if the object is a complex fill then the new stencil buffer technique will be used
   // other wise graphics objects will be pushed into a batch..
   for (i = webGL.lastIndex; i < graphics.graphicsData.length; i += 1) {
-    const data = graphics.graphicsData[i];
-    if (data.type === GEOM_POLYGON) {
+    const data = graphics.graphicsData[i]!;
+    if (data.shape instanceof Polygon) {
       // need to add the points the the graphics object..
       data.points = [...data.shape.points];
       if (data.shape.closed) {
         // close the poly if the value is true!
         if (data.points[0] !== data.points.at(-2) || data.points[1] !== data.points.at(-1)) {
-          data.points.push(data.points[0], data.points[1]);
+          data.points.push(data.points[0]!, data.points[1]!);
         }
       }
       // MAKE SURE WE HAVE THE CORRECT TYPE..
@@ -554,21 +559,20 @@ export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingC
       }
     } else {
       webGLData = switchMode(webGL, 0);
-      if (data.type === GEOM_RECTANGLE) {
+      if (data.shape instanceof Rectangle) {
         buildRectangle(data, webGLData);
-      } else if (data.type === GEOM_CIRCLE || data.type === GEOM_ELLIPSE) {
+      } else if (data.shape instanceof Circle || data.shape instanceof Ellipse) {
         buildCircle(data, webGLData);
-      } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
+      } else if (data.shape instanceof RoundedRectangle) {
         buildRoundedRectangle(data, webGLData);
       }
     }
     webGL.lastIndex += 1;
   }
   // upload all the dirty data...
-  for (i = 0; i < webGL.data.length; i += 1) {
-    webGLData = webGL.data[i];
-    if (webGLData.dirty) {
-      webGLData.upload();
+  for (const uploadable of webGL.data) {
+    if (uploadable.dirty) {
+      uploadable.upload();
     }
   }
 };
@@ -578,11 +582,14 @@ export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingC
  * @param {Graphics} graphics - The graphics object to update.
  * @param {object} renderSession - The rendering session.
  */
-export const renderGraphics = (graphics: Graphics, renderSession: any) => {
+export const renderGraphics = (graphics: Graphics, renderSession: RenderSession) => {
   const { gl } = renderSession;
   const { projection } = renderSession;
   const { offset } = renderSession;
   let shader = renderSession.shaderManager.primitiveShader;
+  if (!shader) {
+    return;
+  }
   let webGLData;
   if (graphics.dirty) {
     updateGraphics(graphics, gl);
@@ -594,16 +601,18 @@ export const renderGraphics = (graphics: Graphics, renderSession: any) => {
   }
   // This could be speeded up for sure!
   for (let i = 0; i < webGL.data.length; i += 1) {
-    if (webGL.data[i].mode === 1) {
-      webGLData = webGL.data[i];
+    webGLData = webGL.data[i]!;
+    if (webGLData.mode === 1) {
       renderSession.stencilManager.pushStencil(graphics, webGLData, renderSession);
       // render quad..
       gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, (webGLData.indices.length - 4) * 2);
       renderSession.stencilManager.popStencil(graphics, webGLData, renderSession);
     } else {
-      webGLData = webGL.data[i];
       renderSession.shaderManager.setShader(shader); // activatePrimitiveShader();
       shader = renderSession.shaderManager.primitiveShader;
+      if (!shader) {
+        return;
+      }
       gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
       gl.uniform1f(shader.flipY, 1);
       gl.uniform2f(shader.projectionVector, projection.x, -projection.y);

package/src/phaser/display/webgl/graphics_data.ts

@@ -1,15 +1,15 @@
 export class GraphicsData {
   public glPoints!: Float32Array | null;
   public glIndicies!: Uint16Array | null;
-  public gl!: any;
-  public color!: any;
-  public points!: any;
-  public indices!: any;
-  public buffer!: any;
-  public indexBuffer!: any;
-  public mode!: any;
-  public alpha!: any;
-  public dirty!: any;
+  public gl: WebGLRenderingContext;
+  public color: number[];
+  public points: number[];
+  public indices: number[];
+  public buffer: WebGLBuffer | null;
+  public indexBuffer: WebGLBuffer | null;
+  public mode: number;
+  public alpha: number;
+  public dirty: boolean;
   /**
    * Creates a new GraphicsData instance.
    * @param {WebGLRenderingContext} gl - The WebGL rendering context.

package/src/phaser/display/webgl/mask_manager.ts

@@ -1,11 +1,12 @@
 import { updateGraphics } from './graphics.js';
+import type { RenderSession } from '../render_session.js';
 
 /**
  * Sets up the mask manager for WebGL rendering.
  * @param {object} maskData - The mask data to apply.
  * @param {object} renderSession - The rendering session.
  */
-export const pushMask = (maskData: any, renderSession: any) => {
+export const pushMask = (maskData: any, renderSession: RenderSession) => {
   const { gl } = renderSession;
   if (maskData.dirty) {
     updateGraphics(maskData, gl);
@@ -25,7 +26,7 @@ export const pushMask = (maskData: any, renderSession: any) => {
  * @param {object} maskData - The mask data to apply.
  * @param {object} renderSession - The rendering session.
  */
-export const popMask = (maskData: any, renderSession: any) => {
+export const popMask = (maskData: any, renderSession: RenderSession) => {
   const { gl } = renderSession;
   if (
     maskData._webGL[gl.id] === undefined ||

package/src/phaser/display/webgl/render_texture.ts

@@ -10,9 +10,9 @@ import type { CanvasRenderer } from '../canvas/renderer.js';
 
 export class RenderTexture extends Texture {
   [key: string]: any;
-  declare public width: any;
-  declare public height: any;
-  public resolution!: any;
+  declare public width: number;
+  declare public height: number;
+  public resolution!: number;
   declare public frame: any;
   declare public crop: any;
   public renderer!: any;

package/src/phaser/display/webgl/renderer.ts

@@ -34,17 +34,18 @@ import { WebGLSpriteBatch } from './sprite_batch.js';
 import { WebGLStencilManager } from './stencil_manager.js';
 import type { IdentifiedWebGLRenderingContext } from './util.js';
 import { getWebGLContextErrorCode, getWebGLContextErrorName } from './util.js';
+import type { RenderSession } from '../render_session.js';
 
 export class WebGLRenderer {
   public gl!: IdentifiedWebGLRenderingContext;
   public glContextId!: number;
   public type!: any;
-  public resolution!: any;
+  public resolution!: number;
   public autoResize!: any;
   public contextLost!: any;
   public clearBeforeRender!: any;
-  public width!: any;
-  public height!: any;
+  public width!: number;
+  public height!: number;
   public view!: any;
   public _contextOptions!: any;
   public projection!: any;
@@ -54,7 +55,7 @@ export class WebGLRenderer {
   public filterManager!: any;
   public stencilManager!: any;
   public blendModeManager!: any;
-  public renderSession!: any;
+  public renderSession!: RenderSession;
   /**
    * Creates a new WebGLRenderer instance.
    * @param {Game} game - The game instance.
@@ -85,7 +86,8 @@ export class WebGLRenderer {
     this.filterManager = new WebGLFilterManager();
     this.stencilManager = new WebGLStencilManager();
     this.blendModeManager = new WebGLBlendModeManager();
-    this.renderSession = {};
+    // Only the WebGL half of the session applies to this renderer.
+    this.renderSession = {} as RenderSession;
     this.renderSession.gl = this.gl;
     this.renderSession.drawCount = 0;
     this.renderSession.shaderManager = this.shaderManager;
@@ -121,7 +123,6 @@ export class WebGLRenderer {
         loseContextExt.loseContext();
       }
     }
-    this.renderSession = null;
     remove(this);
     globalThis.PhaserRegistry.INSTANCES[this.glContextId] = null;
     globalThis.PhaserRegistry.GL_CONTEXT_ID -= 1;

package/src/phaser/display/webgl/shader/normal.ts

@@ -23,13 +23,22 @@ const defaultVertexSrc = [
 
 const glMember = (gl: WebGLRenderingContext, name: string): any => (gl as unknown as Record<string, unknown>)[name];
 
+/** Applies one of the gl uniform setters, whose signatures vary by uniform kind. */
+const callUniformSetter = (setter: unknown, gl: WebGLRenderingContext, ...args: unknown[]): void => {
+  if (typeof setter === 'function') {
+    (setter as (...rest: unknown[]) => void).apply(gl, args);
+  }
+};
+
 // this shader is used for the default sprite rendering
 
 export type ShaderUniform = {
   type: string;
   value: any;
   uniformLocation?: WebGLUniformLocation | null;
-  glFunc?: (...args: any[]) => void;
+  /** One of the gl uniform setters. Their arities differ by uniform kind, so the stored value is
+   * opaque and applied through callUniformSetter. */
+  glFunc?: unknown;
   glMatrix?: boolean;
   glValueLength?: number;
   transpose?: boolean;
@@ -224,16 +233,24 @@ export class NormalShader {
     for (const uniform of Object.values(this.uniforms)) {
       if (uniform.glValueLength === 1) {
         if (uniform.glMatrix === true) {
-          uniform.glFunc?.call(gl, uniform.uniformLocation, uniform.transpose, uniform.value);
+          callUniformSetter(uniform.glFunc, gl, uniform.uniformLocation, uniform.transpose, uniform.value);
         } else {
-          uniform.glFunc?.call(gl, uniform.uniformLocation, uniform.value);
+          callUniformSetter(uniform.glFunc, gl, uniform.uniformLocation, uniform.value);
         }
       } else if (uniform.glValueLength === 2) {
-        uniform.glFunc?.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
+        callUniformSetter(uniform.glFunc, gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
       } else if (uniform.glValueLength === 3) {
-        uniform.glFunc?.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
+        callUniformSetter(
+          uniform.glFunc,
+          gl,
+          uniform.uniformLocation,
+          uniform.value.x,
+          uniform.value.y,
+          uniform.value.z
+        );
       } else if (uniform.glValueLength === 4) {
-        uniform.glFunc?.call(
+        callUniformSetter(
+          uniform.glFunc,
           gl,
           uniform.uniformLocation,
           uniform.value.x,

package/src/phaser/display/webgl/shader_manager.ts

@@ -5,6 +5,13 @@ import { PrimitiveShader } from './shader/primitive.js';
 import { StripShader } from './shader/strip.js';
 import type { IdentifiedWebGLRenderingContext } from './util.js';
 
+/** The structural subset of a shader that the manager binds. */
+export type ManagedShader = {
+  _UID: string;
+  program: WebGLProgram | null;
+  attributes: (number | undefined)[] | null;
+};
+
 export class WebGLShaderManager {
   public gl!: IdentifiedWebGLRenderingContext;
   public primitiveShader: PrimitiveShader | null = null;
@@ -15,8 +22,8 @@ export class WebGLShaderManager {
   public maxAttibs = 10;
   public attribState: (boolean | undefined)[];
   public tempAttribState: (boolean | undefined)[];
-  public stack: NormalShader[];
-  public currentShader: NormalShader | null = null;
+  public stack: ManagedShader[];
+  public currentShader: ManagedShader | null = null;
   public _currentId: string | null = null;
   /**
    * Initializes the shader manager with a WebGL context.
@@ -48,7 +55,7 @@ export class WebGLShaderManager {
    * Sets up the shader manager for WebGL rendering.
    * @param {number[]} attribs - The attribute locations to set up.
    */
-  public setAttribs(attribs: number[]) {
+  public setAttribs(attribs: (number | undefined)[]) {
     // reset temp state
     let i;
     for (i = 0; i < this.tempAttribState.length; i += 1) {
@@ -56,7 +63,9 @@ export class WebGLShaderManager {
     }
     // set the new attribs
     for (const attribId of attribs) {
-      this.tempAttribState[attribId] = true;
+      if (attribId !== undefined) {
+        this.tempAttribState[attribId] = true;
+      }
     }
     const { gl } = this;
     for (i = 0; i < this.attribState.length; i += 1) {
@@ -76,14 +85,14 @@ export class WebGLShaderManager {
    * @param {NormalShader} shader - The shader to set up.
    * @returns {boolean} Whether the shader setup was successful.
    */
-  public setShader(shader: NormalShader): boolean {
+  public setShader(shader: ManagedShader): boolean {
     if (this._currentId === shader._UID) {
       return false;
     }
     this._currentId = shader._UID;
     this.currentShader = shader;
     this.gl.useProgram(shader.program);
-    this.setAttribs(shader.attributes);
+    this.setAttribs(shader.attributes ?? []);
     return true;
   }
 

package/src/phaser/display/webgl/sprite_batch.ts

@@ -4,6 +4,7 @@ import type { IdentifiedWebGLRenderingContext } from './util.js';
 import type { Image } from '../../display/image.js';
 import type { Matrix } from '../../geom/matrix.js';
 import type { BaseTexture } from './base_texture.js';
+import type { RenderSession } from '../render_session.js';
 
 export class WebGLSpriteBatch {
   public vertSize = 5;
@@ -26,7 +27,7 @@ export class WebGLSpriteBatch {
   public vertexBuffer!: WebGLBuffer | null;
   public indexBuffer!: WebGLBuffer | null;
   public currentBlendMode!: number;
-  public renderSession!: any;
+  public renderSession!: RenderSession;
   public shader!: NormalShader | null;
   /**
    * Creates a new SpriteBatch instance.
@@ -96,7 +97,7 @@ export class WebGLSpriteBatch {
    * Renders the sprite batch using WebGL.
    * @param {object} renderSession - The render session to use.
    */
-  public begin(renderSession: any) {
+  public begin(renderSession: RenderSession) {
     this.renderSession = renderSession;
     this.shader = this.renderSession.shaderManager.defaultShader;
     this.start();
@@ -114,7 +115,7 @@ export class WebGLSpriteBatch {
    * @param {Image} sprite - The sprite to render.
    * @param {Matrix} matrix - The transformation matrix.
    */
-  public render(sprite: Image, matrix: Matrix) {
+  public render(sprite: Image, matrix: Matrix | null = null) {
     const { texture } = sprite;
     //  They provided an alternative rendering matrix, so use it
     let wt = sprite.worldTransform;

package/src/phaser/display/webgl/stencil_manager.ts

@@ -1,6 +1,7 @@
 import { hex2rgb } from '../../util/math.js';
 import type { Graphics } from '../graphics.js';
 import type { GraphicsData } from './graphics_data.js';
+import type { RenderSession } from '../render_session.js';
 
 export class WebGLStencilManager {
   public gl!: WebGLRenderingContext;
@@ -37,7 +38,7 @@ export class WebGLStencilManager {
    * @param {GraphicsData} webGLData - The WebGL graphics data.
    * @param {object} renderSession - The rendering session.
    */
-  public pushStencil(graphics: Graphics, webGLData: GraphicsData, renderSession: any) {
+  public pushStencil(graphics: Graphics, webGLData: GraphicsData, renderSession: RenderSession) {
     const { gl } = renderSession;
     this.bindGraphics(graphics, webGLData, renderSession);
     if (this.stencilStack.length === 0) {
@@ -95,7 +96,7 @@ export class WebGLStencilManager {
    * @param {GraphicsData} webGLData - The WebGL graphics data.
    * @param {object} renderSession - The rendering session.
    */
-  public bindGraphics(graphics: Graphics, webGLData: GraphicsData, renderSession: any) {
+  public bindGraphics(graphics: Graphics, webGLData: GraphicsData, renderSession: RenderSession) {
     // if(this._currentGraphics === graphics)return;
     // this._currentGraphics = graphics;
     const { gl } = renderSession;
@@ -105,6 +106,9 @@ export class WebGLStencilManager {
     let shader; // = renderSession.shaderManager.primitiveShader;
     if (webGLData.mode === 1) {
       shader = renderSession.shaderManager.complexPrimitiveShader;
+      if (!shader) {
+        return;
+      }
       renderSession.shaderManager.setShader(shader);
       gl.uniform1f(shader.flipY, renderSession.flipY);
       gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
@@ -121,6 +125,9 @@ export class WebGLStencilManager {
     } else {
       // renderSession.shaderManager.activatePrimitiveShader();
       shader = renderSession.shaderManager.primitiveShader;
+      if (!shader) {
+        return;
+      }
       renderSession.shaderManager.setShader(shader);
       gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
       gl.uniform1f(shader.flipY, renderSession.flipY);
@@ -142,7 +149,7 @@ export class WebGLStencilManager {
    * @param {GraphicsData} webGLData - The WebGL graphics data.
    * @param {object} renderSession - The rendering session.
    */
-  public popStencil(graphics: Graphics, webGLData: GraphicsData, renderSession: any) {
+  public popStencil(graphics: Graphics, webGLData: GraphicsData, renderSession: RenderSession) {
     const { gl } = renderSession;
     this.stencilStack.pop();
     this.count -= 1;

package/src/phaser/display/webgl/texture.ts

@@ -6,13 +6,13 @@ export class TextureUvs {
   public baseTexture!: any;
   public frame!: any;
   public trim!: any;
-  public valid!: any;
+  public valid!: boolean;
   public isTiling!: any;
   public requiresUpdate!: any;
   public requiresReTint!: any;
   public _uvs!: any;
-  public width!: any;
-  public height!: any;
+  public width!: number;
+  public height!: number;
   public crop!: any;
   public x0: any = 0;
   public y0: any = 0;
@@ -37,13 +37,13 @@ export class Texture {
   public baseTexture!: any;
   public frame!: any;
   public trim!: any;
-  public valid!: any;
+  public valid!: boolean;
   public isTiling!: any;
   public requiresUpdate!: any;
   public requiresReTint!: any;
   public _uvs!: any;
-  public width!: any;
-  public height!: any;
+  public width!: number;
+  public height!: number;
   public crop!: any;
   /**
    * Creates a new Texture instance.