WebGL坐标系基础（一）

希沃ENOW大前端

公司官网：CVTE(广州视源股份)

团队：CVTE旗下未来教育希沃软件平台中心enow团队

本文作者:

前言

本文假设读者已经对向量、矩阵有一定的了解。

对于坐标系相信大家都不陌生，写css的时候大量使用的绝对定位就通过坐标系来描述一个dom的位置。而在WebGL中不仅大量使用了坐标系，还使用了各种各样的坐标系，有的用来描述一个模型自身，有的用来描述一个3d场景。

这些坐标系有各自的使用场景，之间相互独立。但我们能通过坐标变换来将他们串联起来，最终的目的就是告诉计算机，我们要将一个个的顶点绘制在屏幕的哪些位置。

本文将从一个模型出发，叙述它是如何一步一步渲染到屏幕上的，过程中你将会了解WebGL都涉及到哪些坐标系，为什么会有这么多坐标系，各个坐标系的作用是什么，以及他们之间是怎么关联起来的。

整体概念

坐标系的种类

前面提到，WebGL中应用了很多类型的坐标系，他们分别是：

• 模型坐标系（object space）
• 世界坐标系（world space）
• 观察坐标系（view space）
• 裁剪坐标系（clip space）
• 规范化的设备坐标系（NDC，normalized device coordinates）
• 屏幕坐标系（screen space）

坐标系转换流水线

这些坐标系之间的转换通过转换矩阵来进行，即如果一个点，在A坐标系的坐标是a，A与B坐标系之间的转换矩阵是M，那么这个点在B坐标系的坐标b为：

已知一个点在模型坐标系中的坐标，计算机会先将这个坐标其变换到世界坐标系中，再一步步变换到屏幕坐标系中，这样计算机就知道该在屏幕的哪个位置渲染这个点。

我们知道矩阵乘法并不符合交换律，因此这样的坐标系转换必须是固定顺序的，否则将得到错误的坐标。这样固定顺序的坐标转换，我们称之为坐标系转换流水线。