WebGL原来如此：搞懂三维坐标系变换

还记得刚入职就迷迷糊糊接手一个原生WebGL项目，对于没有任何图形学基础的我，只是葫芦画瓢地去凑着色器需要的顶点数据，对于控制台输出的那些0-1之间的小数似懂非懂，对于为什么传给着色器这个变换矩阵不求甚解，拼拼凑凑实现了功能也很开心。

随着逐渐学习，才发现那时候的我欠缺了对图形渲染最基础的认知。

对于做前端的同学而言，在web框架日新月异的迭代之间，图形渲染是个相对小众且门槛略高的方向，除了必备的编程能力外还要应用高等数学与计算机图形学知识。但随着浏览器引擎渲染能力增强，对交互效果的要求越来越高，并且有Three.js等库的协助，三维渲染也逐渐成为前端研发的一项重要技能。

那么，既然要做图形渲染，就一起知其然且知其所以然吧~

正文

三维渲染，顾名思义，就是要将多角度可观测的三维物体绘制到一个固定的二维矩形屏幕上，那么三维到二维是如何映射的呢？想必这之间必然经历了一些坐标转换。这也就是前面我说的对图形渲染最基础的认知———坐标转换。

先贴一张我画的WebGL/OpenGL坐标变换流程图随意感受一下：

这也太复杂了吧？

不妨想象一个生活中常见的场景——拍照。

1. 你发现了一处适合拍照的场景，并站过去摆好姿势。（模型变换，model transform）

2. 摄影师找到一个好角度，举起相机对准你。（视图变换，view transform）

3. 摄影师调整焦距，摒除掉干扰物进行拍摄。（投影变换，projection transform）

这就是所谓的MVP变换，整个坐标系变换的核心。

大致有个概念之后，我们再来逐个了解这些变换到底是怎么一回事呢。

一、物体坐标系 -> 世界坐标系（模型变换）

假设我们想要在屏幕上渲染一只喵和一只汪，对于小喵和小汪这两个模型，他们都有以自己为原点的坐标系，这就是物体坐标系。

世界坐标系可以理解为是这个所有模型共享的虚拟场景空间，要将喵和汪这两个模型都导入到这个大场景中来，并指定其各自的位置。这就需要对物体进行平移、旋转等操作，从而将其摆放到合适的位置上。

这里对物体的操作就是模型变换（Model Transform），将物体坐标与模型矩阵相乘就得到了其在世界坐标系下的坐标。

备注：