WebGPU: Fix computation of projection matrices.

[Mugen87]

Fixed #20276.

[mrdoob]

Could WebGPURenderer have a internal matrix used to premultiply these at render time?

[Mugen87]

I thought about this but I'm afraid this approach is too error prone. When projection matrices are recomputed in user-code, they always get incorrect results as long as WebGPURenderer.render() has been called. This is a misleading/unexpected behavior I would like to avoid.

TBH, the safest approach would be to modify Matrix4.makePerspective() and Matrix4.makeOrthographic() since both implementations are wrong in context of WebGPU.

[mrdoob]

Doing Matrix4.prototype.makeOrthographic = function () { console.log( 'bar' ) } seems to work on a class.

However, if we create the camera before the renderer that wouldn't work...

Forgot to ask.. if we just changed makeOrthographic to go from [0,1] I guess a ton of shaders would break, right?

[Mugen87]

Yes, the projection matrices are specific for both WebGL and WebGPU. We need different ones depending on what renderer is going to be used otherwise things break.

I've updated the PR and now changed Matrix4. Should have done this right from the beginning.

[mrdoob]

Maybe better not to add WebGPU stuff to core yet.

I would add this to WebGPURenderer for now:

console.warn( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective and Matrix4.makeOrtographic to work with WebGPU.' );

Matrix4.prototype.makePerspective = function ( left, right, top, bottom, near, far ) {

	const te = this.elements;
	const x = 2 * near / ( right - left );
	const y = 2 * near / ( top - bottom );

	const a = ( right + left ) / ( right - left );
	const b = ( top + bottom ) / ( top - bottom );
	const c = - far / ( far - near );
	const d = - far * near / ( far - near );

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

	return this;

};

Matrix4.prototype.makeOrthographic = function ( left, right, top, bottom, near, far ) {

	const te = this.elements;
	const w = 1.0 / ( right - left );
	const h = 1.0 / ( top - bottom );
	const p = 1.0 / ( far - near );

	const x = ( right + left ) * w;
	const y = ( top + bottom ) * h;
	const z = - near * p;

	te[ 0 ] = 2 * w;	te[ 4 ] = 0;	te[ 8 ] = 0;	te[ 12 ] = - x;
	te[ 1 ] = 0;	te[ 5 ] = 2 * h;	te[ 9 ] = 0;	te[ 13 ] = - y;
	te[ 2 ] = 0;	te[ 6 ] = 0;	te[ 10 ] = - 1 * p;	te[ 14 ] = - z;
	te[ 3 ] = 0;	te[ 7 ] = 0;	te[ 11 ] = 0;	te[ 15 ] = 1;

	return this;

};

class WebGPURenderer {

Doing it at import time means the methods will be modified by the time we create a camera.

[Mugen87]

Okay, let's start this approach. Updated the PR.

[Mugen87]

Merging for further testing on dev.

[mrdoob]

Thanks!