通过OpenGL理解前端渲染原理(1)

  

一、OpenGL

  

OpenGL,是一套绘制3 d图形的API,当然它也可以用来绘制2 d的物体.OpenGL有一大套可以用来操作模型和图片的函数,通常编写OpenGL库的人是显卡的制造者。我们买的显卡都支持特定版本的OpenGL。

  

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

  

通过OpenGL理解前端渲染原理(1)

  

二、渲染原理

  

2.1渲染管道

  

在OpenGL中,所有东西都在一个3 d的空间里,而我们的屏幕和窗口都是2 d的,所以OpenGL需要将3 d的坐标转换成2 d的坐标,做这件事的是OpenGL中的渲染管道(图形管道)。

  

渲染管道可以分成两大部分:第一部分将3 d坐标转换成2 d坐标;第二部分把2 d的坐标转换成实际的像素。

  

2.2着色器

  

通常来说,渲染管道把一组3 d坐标转换成屏幕上带有颜色的2 d像素需要经过很多步。上一步的输出作为下一步的输入,所有步骤都是高度专一的,每步都有一个特定的函数,且可以很容易地并发执行。显卡有数千个处理核心来快速处理渲染管道中的数据,而这些是在每个步骤中通过运行在GPU上的多个小程序来处理的,这些小的程序被称之为程序着色器(材质)。

  

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

  

着色器通常使用GLSL来写,全称是OpenGL着色语言。

  

2.3举个例子

  

下图展示了一个抽象的渲染管线中的步骤,其中蓝色部分是我们可以注入自己的着色器。

  

通过OpenGL理解前端渲染原理(1)

  

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

  

我们在渲染管线中传入一组可以组成三角形的3 d坐标数据,这组数据即顶点数据。顶点数据是顶点的集合,而一个顶点是一个3 d坐标的集合。

  

渲染管线的第一步是顶点着色器(顶点着色器)。我们这里传入的是一个简单的顶点,顶点着色器可以让我们做一些基础的处理操作,比如顶点的属性。

  

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

  

从初始装配阶段到几何着色器阶段,我们可以通过发散其他顶点来形成新的图形,本例中形成了第二个三角形。

  

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

  

通过OpenGL理解前端渲染原理(1)

  

细分曲面着色器的下一阶段是光栅化阶段(Rasterzation阶段),在这一阶段会对最终的原型和呈现在屏幕上的对应像素做一个映射,形成碎片,供下一阶段的片段着色器使用。

  

片段着色器最主要的使命是计算出一个像素的最终颜色,在这个阶段我们可以使用OpenGL中一些高级的特效。通常片段着色器会包含3 d界面的多个数据,包括灯光,阴影,颜色等等。

  

当所有对应的颜色都确定以后,最终的原型将会被传入最后一个步骤,我们称之为α测试和混合阶段。这个阶段会判断相应的深度,比如一个物体可能在另一个物体的后面,那它可能采用其他的颜色,或者如果该物体被遮挡,可能会被裁掉。

  

如上文所述,我们可以看到整个渲染管线的步骤和逻辑是十分复杂的,这其中包含了很多个可以改变的步骤,但我们一般只操作顶点着色器和片段着色器,其他的着色器我们会直接采用默认的。在实际的OpenGL编程中,我们至少需要定义一个顶点着色器和片段着色器。(需要说明的是,OpenGL 3.1之前的版本包含了固定管线,从3.1版本开始,固定管线从核心中删掉了,因此我们必须使用着色器去工作)。

  

三,总结

  

本文为该系列文章的第一篇,先简单介绍OpenGL的一些原理,后续文章中会添加新的代码分析,包括着色器(材质)、纹理(Textture),变形(转换),坐标系统(坐标系统)相机(相机)等。

通过OpenGL理解前端渲染原理(1)