飞通常的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虽然影响比较严重，可是教训和收获也是深入的。固然啦，热烈欢迎讨论~