Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说WebGPU NDC 标准设备坐标系「建议收藏」,希望能够帮助你!!!。

        看了挺长时间的WebGPU了，会开始记录一些散点的问题。

        今天先来讨论一个问题WebGPU的标准设备坐标（Normalized Device Coordinate ）是什么样的。webgl的ndc大家已经很熟悉了是一个位于中心点（0,0,0）xyz为2x2x2的左手坐标系空间，webgl程序中矩阵变换的目的，就是把想看的物体都变换到这个坐标系下。webgpu的ndc是中心点位于（0,0,0.5）的xyz为2x2x1的左手坐标系空间。这两者的区别也就是OpenGL和Metal的区别。

        那么webgpu标准即将发布之际，webgl原本的程序中矩阵变换部分如何去移植才能达到一样的效果呢。思路其实比较简单，把原本在webgl ndc中的坐标，z缩放0.5，z平移0.5即可达到在webgpu ndc中一样的效果。

        我们拿three.js为例进行分析，看看three.js的矩阵变换部分做了哪些变动。

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;

};

        本质上是做了这样的一个操作，对投影矩阵进行z缩放和评议，进而达到webgl ndc中的坐标变换到webgpu ndc中的目的：

         three.js 关于webgpu ndc 的 issue 详见 WebGPURenderer: Unable to render with orthographic camera. · Issue #20276 · mrdoob/three.js · GitHub

        本文章内容主要来自：

From OpenGL to Metal - The Projection Matrix Problem - metashapes.com        

        写在最后：