Remove depthTest setting, improve container sorting, clean up renderer

packages/examples/src/examples/platformer/createGame.ts

@@ -26,7 +26,6 @@ export const createGame = () => {
 		scaleMethod: "flex-width",
 		renderer: AUTO,
 		preferWebGL1: false,
-		depthTest: "z-buffer",
 		subPixel: false,
 	});
 

packages/melonjs/CHANGELOG.md

@@ -30,13 +30,17 @@
 - `Renderable.rotate(angle, v)` defaults to Z axis when no axis given (same 2D behavior)
 - `Renderable.scale(x, y, z)` defaults z to 1 (preserves Z dimension)
 - `QuadBatcher` and `MeshBatcher` now extend `MaterialBatcher` (was `Batcher`) — eliminates ~180 lines of duplicated texture management code
-- WebGL context always created with `depth: true` for hardware depth buffer support
-- WebGL `clear()` now always clears depth + color + stencil buffers
+- WebGL context always created with `depth: true` for hardware depth buffer support (used by 3D mesh rendering)
 - WebGL renderer `setBatcher()` now syncs the projection matrix to the new batcher
 - **BREAKING**: `Text.draw()` and `BitmapText.draw()` no longer accept `text`, `x`, `y` parameters — standalone draw without a parent container is removed (deprecated since 10.6.0)
 - **BREAKING**: `Text.measureText()` no longer takes a `renderer` parameter (was unused)
 - **BREAKING**: `UITextButton` settings `backgroundColor` and `hoverColor` removed — use `hoverOffColor` and `hoverOnColor` instead
 - **BREAKING**: `Tween` no longer adds itself to `game.world` — uses event-based lifecycle (`TICK`, `GAME_AFTER_UPDATE`, `STATE_PAUSE`, `STATE_RESUME`, `GAME_RESET`) instead. Public API unchanged. `isPersistent` and `updateWhenPaused` properties still supported.
+- **BREAKING**: removed `depthTest` application setting and `DepthTest` type — GPU depth sorting is incompatible with 2D alpha blending and the painter's algorithm. The `"z-buffer"` option never worked correctly for 2D sprites. Depth testing remains available internally for 3D mesh rendering only (`drawMesh`).
+- Container: `sortOn` is now a getter/setter that caches the comparator function — avoids string lookup on each sort call
+- Container: sort comparators simplified — removed legacy null guards (children always have `pos`)
+- Renderer: `customShader` property moved to base `Renderer` class — `Renderable.preDraw`/`postDraw` no longer check renderer type via `renderer.gl`
+- WebGL: `clear()` no longer clears the depth buffer (only used by `drawMesh` which clears it locally)
 
 ### Fixed
 - Geometry: `Rect.setSize()` now calls `updateBounds()` — fixes a regression from July 2024 (`4d185c902`) where replacing `Rect.setShape()` with `pos.set()` + `setSize()` during the TypeScript conversion left bounds stale, causing pointer event broadphase lookups to use `(0,0)` instead of the actual pointer position (see #817)

packages/melonjs/src/application/application.ts

@@ -244,7 +244,6 @@
 			scale: autoScale ? 1.0 : +merged.scale || 1.0,
 			zoomX: 0,
 			zoomY: 0,
-			depthTest: merged.depthTest === "z-buffer" ? "z-buffer" : "sorting",
 			scaleMethod: /^(fill-(min|max)|fit|flex(-(width|height))?|stretch)$/.test(
 				merged.scaleMethod,
 			)
@@ -274,7 +273,7 @@
 		this.settings = settings;
 
 		// identify parent element and/or the html target for resizing
 		this.parentElement = device.getElement(this.settings.parent!);
 		if (typeof this.settings.scaleTarget !== "undefined") {
 			this.settings.scaleTarget = device.getElement(this.settings.scaleTarget);
 		}
@@ -383,11 +382,6 @@
 
 		// app starting time
 		this.lastUpdate = globalThis.performance.now();
-		// manually sort child if depthTest setting is "sorting"
-		this.world.autoSort = !(
-			this.renderer.type === "WEBGL" && this.settings.depthTest === "z-buffer"
-		);
-
 		// only register event listeners once per instance
 		if (!this.isInitialized) {
 			/* eslint-disable @typescript-eslint/unbound-method */
@@ -418,7 +412,7 @@
 		// point to the current active stage "default" camera
 		const current = state.get();
 		if (typeof current !== "undefined") {
 			this.viewport = (current.cameras as unknown as Map<string, Camera2d>).get(
 				"default",
 			)!;
 		}
@@ -527,21 +521,21 @@
 			globalThis.removeEventListener("resize", this._onResize);
 			globalThis.removeEventListener(
 				"orientationchange",
 				this._onOrientationChange!,
 			);
 			globalThis.removeEventListener("scroll", this._onScroll!);
 			if (device.screenOrientation) {
 				globalThis.screen.orientation.onchange = null;
 			}
 		}
 
 		// destroy the world and all its children
 		if (this.world) {
 			this.world.destroy();
 		}
 
 		// remove the canvas from the DOM
 		if (removeCanvas && this.renderer) {
 			const canvas = this.renderer.getCanvas();
 			if (canvas.parentElement) {
 				canvas.parentElement.removeChild(canvas);
@@ -618,7 +612,7 @@
 				// update all objects (and pass the elapsed time since last frame)
 				this.isDirty = this.world.update(this.updateDelta);
 				this.isDirty =
 					state.current()!.update(this.updateDelta) || this.isDirty;
 
 				this.lastUpdate = globalThis.performance.now();
 				this.updateAverageDelta = this.lastUpdate - this.lastUpdateStart;
@@ -647,7 +641,7 @@
 			this.renderer.clear();
 
 			// render the stage
 			state.current()!.draw(this.renderer, this.world);
 
 			// set back to flag
 			this.isDirty = false;

packages/melonjs/src/application/defaultApplicationSettings.ts

@@ -7,7 +7,6 @@ export const defaultApplicationSettings = {
 	scale: 1.0,
 	scaleMethod: ScaleMethods.Manual,
 	preferWebGL1: false,
-	depthTest: "sorting",
 	powerPreference: "default",
 	transparent: false,
 	antiAlias: false,

packages/melonjs/src/application/header.ts

@@ -11,15 +11,11 @@ export function consoleHeader(app: Application): void {
 		typeof app.renderer.GPURenderer === "string"
 			? ` (${app.renderer.GPURenderer})`
 			: "";
-	const depthTesting =
-		renderType.includes("WebGL") && app.renderer.depthTest === "z-buffer"
-			? "Depth Test | "
-			: "";
 	const audioType = device.hasWebAudio ? "Web Audio" : "HTML5 Audio";
 
 	// output video information in the console
 	console.log(
-		`${renderType} renderer${gpu_renderer} | ${depthTesting}${audioType} | ` +
+		`${renderType} renderer${gpu_renderer} | ${audioType} | ` +
 			`pixel ratio ${device.devicePixelRatio} | ${
 				device.platform.nodeJS
 					? "node.js"

packages/melonjs/src/application/settings.ts

@@ -14,8 +14,6 @@ type PhysicsType = "builtin" | "none";
 
 type PowerPreference = "default" | "low-power";
 
-type DepthTest = "sorting" | "z-buffer";
-
 export type ApplicationSettings = {
 	/**
 	 * renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
@@ -46,12 +44,6 @@ export type ApplicationSettings = {
 	 */
 	preferWebGL1: boolean;
 
-	/**
-	 * ~Experimental~ the default method to sort object on the z axis in WebGL
-	 * @default sorting
-	 */
-	depthTest: DepthTest;
-
 	/**
 	 * a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context. To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
 	 * @default default

packages/melonjs/src/camera/camera2d.ts

@@ -760,7 +760,7 @@ export default class Camera2d extends Renderable {
 	 * @param target - the renderable to focus the camera on
 	 */
 	focusOn(target: Renderable): void {
-		const bounds = target.getBounds();
+		const bounds = target.getBounds() as Bounds;
 		this.moveTo(
 			bounds.left + bounds.width / 2 - this.width / 2,
 			bounds.top + bounds.height / 2 - this.height / 2,

packages/melonjs/src/math/matrix2d.ts

@@ -403,16 +403,19 @@ export class Matrix2d {
 	 * @returns true if the matrix is an identity matrix
 	 */
 	isIdentity() {
+		const a = this.val;
+
+		// check translation first (most commonly non-zero), then diagonal, then rest
 		return (
-			this.val[0] === 1 &&
-			this.val[1] === 0 &&
-			this.val[2] === 0 &&
-			this.val[3] === 0 &&
-			this.val[4] === 1 &&
-			this.val[5] === 0 &&
-			this.val[6] === 0 &&
-			this.val[7] === 0 &&
-			this.val[8] === 1
+			a[6] === 0 &&
+			a[7] === 0 &&
+			a[0] === 1 &&
+			a[4] === 1 &&
+			a[8] === 1 &&
+			a[1] === 0 &&
+			a[2] === 0 &&
+			a[3] === 0 &&
+			a[5] === 0
 		);
 	}
 

packages/melonjs/src/math/matrix3d.ts

@@ -633,23 +633,24 @@ export class Matrix3d {
 	isIdentity() {
 		const a = this.val;
 
+		// check translation first (most commonly non-zero), then diagonal, then rest
 		return (
+			a[12] === 0 &&
+			a[13] === 0 &&
 			a[0] === 1 &&
+			a[5] === 1 &&
+			a[10] === 1 &&
+			a[15] === 1 &&
 			a[1] === 0 &&
 			a[2] === 0 &&
 			a[3] === 0 &&
 			a[4] === 0 &&
-			a[5] === 1 &&
 			a[6] === 0 &&
 			a[7] === 0 &&
 			a[8] === 0 &&
 			a[9] === 0 &&
-			a[10] === 1 &&
 			a[11] === 0 &&
-			a[12] === 0 &&
-			a[13] === 0 &&
-			a[14] === 0 &&
-			a[15] === 1
+			a[14] === 0
 		);
 	}