mrdoob/three.js · error

THREE.Matrix4.makeOrthographic(): Invalid coordinate system:

Error message

THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ${coordinateSystem}

What it means

Thrown by Matrix4.makeOrthographic() when the coordinateSystem argument is neither WebGLCoordinateSystem nor WebGPUCoordinateSystem. As with makePerspective, the orthographic depth scaling (c and d) differs between WebGL (-1..1 z) and WebGPU (0..1 z); an unknown system yields no valid matrix.

Source

Thrown at src/math/Matrix4.js:1238

			c = 1 / ( far - near );
			d = far / ( far - near );

		} else {

			if ( coordinateSystem === WebGLCoordinateSystem ) {

				c = - 2 / ( far - near );
				d = - ( far + near ) / ( far - near );

			} else if ( coordinateSystem === WebGPUCoordinateSystem ) {

				c = - 1 / ( far - near );
				d = - near / ( far - near );

			} else {

				throw new Error( 'THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ' + coordinateSystem );

			}

		}

		te[ 0 ] = x;		te[ 4 ] = 0;		te[ 8 ] = 0; 		te[ 12 ] = a;
		te[ 1 ] = 0; 		te[ 5 ] = y;		te[ 9 ] = 0; 		te[ 13 ] = b;
		te[ 2 ] = 0; 		te[ 6 ] = 0;		te[ 10 ] = c;		te[ 14 ] = d;
		te[ 3 ] = 0; 		te[ 7 ] = 0;		te[ 11 ] = 0;		te[ 15 ] = 1;

		return this;

	}

	/**
	 * Returns `true` if this matrix is equal with the given one.
	 *
	 * @param {Matrix4} matrix - The matrix to test for equality.

View on GitHub (pinned to da05705fa3)

Solutions

1. Pass a valid coordinate system as the last argument matching your renderer.
2. Use renderer.coordinateSystem to source the value.
3. Confirm the constant is imported and resolves to a real value.
4. When migrating renderers, audit every makeOrthographic/makePerspective call site.

Example fix

// before: missing coordinate system
ortho.makeOrthographic(-10, 10, 10, -10, 0.1, 1000);

// after: explicit valid system
ortho.makeOrthographic(-10, 10, 10, -10, 0.1, 1000, THREE.WebGPUCoordinateSystem);

import { WebGLCoordinateSystem, WebGPUCoordinateSystem } from 'three';

function makeOrthographicSafe(m, l, r, t, b, near, far, coordinateSystem) {
  if (coordinateSystem !== WebGLCoordinateSystem && coordinateSystem !== WebGPUCoordinateSystem) {
    throw new Error('coordinateSystem must be WebGL or WebGPU');
  }
  return m.makeOrthographic(l, r, t, b, near, far, coordinateSystem);
}

function isValidCoordinateSystem(cs) {
  return cs === THREE.WebGLCoordinateSystem || cs === THREE.WebGPUCoordinateSystem;
}

When it happens

Trigger: Calling matrix.makeOrthographic(left, right, top, bottom, near, far, coordinateSystem) with a missing/null/custom coordinateSystem. Building an orthographic camera matrix manually without matching the renderer's depth convention.

Common situations: Custom orthographic projection for UI/2D layers. Orthographic camera whose coordinateSystem was never synced from a renderer. Porting WebGL projection math to WebGPU (or vice versa) without updating the system flag.

Related errors

• THREE.Matrix4.makePerspective(): Invalid coordinate system:
• THREE.CubeCamera.updateCoordinateSystem(): Invalid coordinat
• THREE.CameraHelper.update(): Invalid coordinate system: ${th
• THREE.Frustum.setFromProjectionMatrix(): Invalid coordinate
• THREE.BufferAttribute: array should be a Typed Array.

AI-assisted analysis of mrdoob/three.js@da05705fa3 (2026-08-12). Data as JSON: /api/errors/7201c24a7dfba154. Report an issue: GitHub.