一, OpenGL
OpenGL, 是一套绘制 3D 图形的 API, 当然它也可以用来绘制 2D 的物体. OpenGL 有一大套可以用来操作模型和图片的函数, 通常编写 OpenGL 库的人是显卡的制造者. 我们买的显卡都支持特定版本的 OpenGL.
下图是用 OpenGL 做的旋转的立方体.
二, 渲染原理
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 版本开始, 固定管线从核心中删掉了, 因此我们必须使用着色器去工作).
三, 总结
本文为该系列文章的第一篇, 先简单介绍 OpenGL 的一些原理, 后续文章中会添加新的代码分析, 包括着色器 (Shader), 纹理(Textture), 变形(transformation), 坐标系统(Coordinate systems), 相机(Camera) 等.
来源: https://www.cnblogs.com/yixinjishu/p/11269220.html