WebGPU NDC 标准设备坐标系

Webglzhang

已于 2022-05-02 21:21:39 修改

阅读量1.6k

点赞数 1

分类专栏：实时渲染 WebGL Three.js 文章标签： WebGPU WebGL

于 2022-04-10 22:47:36 首次发布

本文链接：https://blog.csdn.net/weixin_37683659/article/details/124087286

版权

本文探讨了WebGPU的标准化设备坐标（NDC）与WebGL的不同，指出WebGPU的NDC是中心在(0,0,0.5)，范围为2x2x1的左手坐标系，而WebGL的是2x2x2的坐标系。为将WebGL程序中的矩阵变换适配到WebGPU，可以对z轴进行0.5的缩放和平移。以three.js为例，说明了矩阵变换的具体调整，并引用相关资源进行了详细解释。" 122818476,8617829,掌握Junit5：单元测试新体验,"['软件测试', '自动化测试', 'Java开发', '单元测试框架']

摘要由CSDN通过智能技术生成

看了挺长时间的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 = - f