经过OpenGL理解前端渲染原理（1）

经过OpenGL理解前端渲染原理，本文着重介绍渲染管线工做流程。

1、OpenGL

OpenGL，是一套绘制3D图形的API，固然它也能够用来绘制2D的物体。OpenGL有一大套能够用来操做模型和图片的函数，一般编写OpenGL库的人是显卡的制造者。咱们买的显卡都支持特定版本的OpenGL。

下图是用OpenGL作的旋转的立方体。

2、渲染原理

2.1 渲染管道

在OpenGL中，全部东西都在一个3D的空间里，而咱们的屏幕和窗口都是2D的，因此OpenGL须要将3D的坐标转换成2D的坐标，作这件事的是OpenGL中的渲染管道（graphics pipeline）。

渲染管道能够分红两大部分：第一部分将3D坐标转换成2D坐标；第二部分把2D的坐标转换成实际的像素。

2.2 着色器

一般来讲，渲染管道把一组3D坐标转换成屏幕上带有颜色的2D像素须要通过不少步。上一步的输出做为下一步的输入，全部步骤都是高度专注的，每步都有一个特定的函数，且能够很容易地并发执行。显卡有数千个处理核心来快速处理渲染管道中的数据，而这些是在每一个步骤中经过运行在GPU上的多个小程序来处理的，这些小的程序被称之为程序着色器（shader）。

其中的一些着色器是能够配置的，开发者能够根据需求配置本身的着色器去替代已经存在的那些，这就让咱们可以更自由和细粒度地控制渲染的过程。同时，由于它们运行在GPU上，又给咱们保留了珍贵的GPU时间，在平时的开发中，咱们也要充分利用GPU渲染来提升软件性能。

着色器一般使用GLSL来写，全称是OpenGL Shading Language。

2.3 举个例子

下图展现了一个抽象的渲染管线中的步骤，其中蓝色部分是咱们能够注入本身的着色器。

经过上图咱们发现，要把顶点数据转换成全渲染的像素要通过不少步，接下来咱们对每个步骤和代码进行简单的解释。

咱们在渲染管线中传入一组能够组成三角形的3D坐标数据，这组数据即顶点数据。顶点数据是顶点的集合，而一个顶点是一个3D坐标的集合。

渲染管线的第一步是顶点着色器（Vertex Shader）。咱们这里传入的是一个简单的顶点，顶点着色器可让咱们作一些基础的处理操做，好比顶点的属性。

在初始装配阶段，也就是Shape Assembly阶段，从顶点着色器中输出的顶点会造成一个原始的形状。本例中，输出的顶点造成的是一个三角形。

从初始装配阶段到geometry shader阶段，咱们能够经过发散其余顶点来造成新的图形，本例中造成了第二个三角形。

在Tessellation Shader阶段，能够把上一阶段给出的原型图再分割成若干个小的原型图。本例中，能够造成更多的三角形来创造一个更加平坦、顺滑的环境。这么说可能难以理解，咱们结合下图来进一步阐述，这就是细分曲面着色器的做用。

细分曲面着色器的下一阶段是光栅化阶段（Rasterzation stage），在这一阶段会对最终的原型和呈如今屏幕上的对应像素作一个映射，造成fragment，供下一阶段的fragment shader使用。

Fragment shader最主要的使命是计算出一个像素的最终颜色，在这个阶段咱们可使用OpenGL中一些高级的特效。一般fragment shader会包含3D界面的多个数据，包括灯光、阴影、颜色等等。

当全部对应的颜色都肯定之后，最终的原型将会被传入最后一个步骤，咱们称之为Alpha test and blending阶段。这个阶段会判断相应的深度，好比一个物体可能在另外一个物体的后面，那它可能采用其余的颜色；或者若是该物体被遮挡，可能会被裁掉。

如上文所述，咱们能够看到整个渲染管线的步骤和逻辑是十分复杂的，这其中包含了不少个能够改变的步骤，但咱们通常只操做Vertex Shader 和 fragment shader，其余的着色器咱们会直接采用默认的。在实际的OpenGL编程中，咱们至少须要定义一个Vertex Shader和Fragment shader。（须要说明的是，OpenGL 3.1以前的版本包含了固定管线，从3.1版本开始，固定管线从核心中删掉了，所以咱们必须使用着色器去工做）。

3、总结

本文为该系列文章的第一篇，先简单介绍OpenGL的一些原理，后续文章中会添加新的代码分析，包括着色器（Shader）、纹理（Textture）、变形（transformation）、坐标系统（Coordinate systems）、相机（Camera）等。

做者：崔晓迪