飞一般的WebGL之唱起3D编程前的战歌

前言

计算机图形的最初形式就是在一块面板上闪烁的灯。

从上图可以推出“灯泡编程”大致过程是：程序员先对这些机器编程，然后阅读机器的计算结果，最后将计算结果通过很多灯泡的亮灭组合来向计算机用户传达有用的信息。这就是最早的计算机图形。

了解和掌握计算机图形学，可以更好的走向3D图形编程，图形学中理论的知识就不说了，本文章也不介绍很多关键点，我把我学习过程中总结的一些很重要的知识分享出来。

---

从2D走向3D

3D，D是 Dimension 的简写，维度的意识，也就是3维，那么3维是指什么？3维是指：宽度、高度和深度。 3D图形可以很通俗的解释为：一个图形具有三个维度，分别为宽度、高度和深度。那么回头看一下2D图形，也就只有两个维度了，宽度和高度。

那么问题来了，2D图形是在计算机屏幕上显示，3D图形也是。但是计算机屏幕仅仅是面，怎么才能显示出3D图像呢？

其实计算机3D图形在本质上也是平面的，它只是在计算机屏幕上所显示的二维图像，那它如何实现3维的感觉呢？

这是理解从2D走向3D最关键的知识，其实3D图形是通过在计算机屏幕上显示二维图像的同时，再提供深度也就是第三维，来让我们的眼睛对图形产生3D的错觉。如下图通过增加深度来让眼睛产生3D的错觉。

从2D走向3D的本质可以用下面的公式来表达：

    2D + 透视 = 3D 
复制代码

通过给二维图形增加透视(Perspective)，来让我们产生深度的幻觉，从而产生3D既视感。这就是2D走向3D的一个关键知识点。

---

光栅化

看到光栅化的时候，一定会想 光栅 是什么，这里学过光学的小伙伴一定都知道是什么，虽然我在大学时，光机电算控都学。但是我这里就不解释光栅了，想了解的请自行百度。因为我觉得没有必要解释它，解释它会引来更多的专有名词和疑惑。但是什么是光栅化，我可以很通俗和简单的解释给你们听。

我将光栅化这样解释：

光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程。

比如下图：

这两张图片对比看看，考虑考虑，左边是一张图片的几何坐标数据，右边是一张图片的像素位置。再看看两张图有什么区别，然后看下面定义：

光栅化的本质是坐标变换、几何离散化。

从图中可以看到顶点坐标变了，几何连续数据被离散化了。离散化就是将模拟数据转换成了离散数据。

我们现在再回头看图片光栅化，思考一个问题，为什么图片在展示在计算机屏幕上时，要进行光栅化？

答案就是：GIF、JPEG、PNG等图片是基于光栅的，再想一下，也就是基于像素的。这些图片的格式称为光栅图像格式。图片是基于光栅的，那么要将图片在显示设备中显示，就需要对其进行光栅化。因为图片本身是模拟数据，必须经过光栅化来输出到光栅显示器上。也就是计算机屏幕上。

图片光栅化的过程就是将2D图片转化为一个个栅格组成的图像。

---

3D物体投影到2D平面上

这个涉及到一个很重要的知识，叫坐标转换。首先3D物体在空间中使用笛卡尔坐标系(3维坐标系)来表示位置，因为虚拟3D世界中的几何信息都是三维的。但是目前用于显示的设备都是二维的，所以在光栅化之前，需要将3D世界中的物体投影到二维平面上。这就需要将笛卡尔坐标转换成屏幕上的二维坐标。详细坐标转换留在日后再说，现在只需要知道3D坐标是通过一种规则来变换成2D坐标。从而在屏幕上的2D表面(窗口背景)上展示。

---

再看光栅化和坐标转换

通过上面的解释，我们可以得出这样的总结：

我们通过将一个3D物体的坐标转换成2D坐标，让其可以在二维显示器上显示，然后再将2D坐标下围成的图形区域进行光栅化，从而在计算机屏幕上渲染出以像素为单位的图像。

---

总结

进行3D编程，或者进行2D编程时，需要去了解计算机图形的一些基本知识，只有这样才能对图形编程有一个宏观和全面的认识，要学会知其然，知其所以然。

可爱声明: 文章可能有一些错误，如果有，我非常开心的邀请你在评论处指出，就好像是生产上的Bug，出了Bug虽然影响比较严重，但是教训和收获也是深刻的。当然啦，热烈欢迎讨论~