通過OpenGL理解前端渲染原理（1）

一、OpenGL

OpenGL，是一套繪制3D圖形的API，當然它也可以用來繪制2D的物體。OpenGL有一大套可以用來操作模型和圖片的函數(shù)，通常編寫OpenGL庫的人是顯卡的制造者。我們買的顯卡都支持特定版本的OpenGL。

下圖是用OpenGL做的旋轉(zhuǎn)的立方體。

二、渲染原理

2.1 渲染管道

在OpenGL中，所有東西都在一個3D的空間里，而我們的屏幕和窗口都是2D的，所以O(shè)penGL需要將3D的坐標轉(zhuǎn)換成2D的坐標，做這件事的是OpenGL中的渲染管道（graphics pipeline）。

渲染管道可以分成兩大部分：第一部分將3D坐標轉(zhuǎn)換成2D坐標；第二部分把2D的坐標轉(zhuǎn)換成實際的像素。

2.2 著色器

通常來說，渲染管道把一組3D坐標轉(zhuǎn)換成屏幕上帶有顏色的2D像素需要經(jīng)過很多步。上一步的輸出作為下一步的輸入，所有步驟都是高度專一的，每步都有一個特定的函數(shù)，且可以很容易地并發(fā)執(zhí)行。顯卡有數(shù)千個處理核心來快速處理渲染管道中的數(shù)據(jù)，而這些是在每個步驟中通過運行在GPU上的多個小程序來處理的，這些小的程序被稱之為程序著色器（shader）。

其中的一些著色器是可以配置的，開發(fā)者可以根據(jù)需求配置自己的著色器去替代已經(jīng)存在的那些，這就讓我們能夠更自由和細粒度地控制渲染的過程。同時，因為它們運行在GPU上，又給我們保留了珍貴的GPU時間，在平時的開發(fā)中，我們也要充分利用GPU渲染來提高軟件性能。

著色器通常使用GLSL來寫，全稱是OpenGL Shading Language。

2.3 舉個例子

下圖展示了一個抽象的渲染管線中的步驟，其中藍色部分是我們可以注入自己的著色器。

通過上圖我們發(fā)現(xiàn)，要把頂點數(shù)據(jù)轉(zhuǎn)換成全渲染的像素要經(jīng)過很多步，接下來我們對每一個步驟和代碼進行簡單的解釋。

我們在渲染管線中傳入一組可以組成三角形的3D坐標數(shù)據(jù)，這組數(shù)據(jù)即頂點數(shù)據(jù)。頂點數(shù)據(jù)是頂點的集合，而一個頂點是一個3D坐標的集合。

渲染管線的第一步是頂點著色器（Vertex Shader）。我們這里傳入的是一個簡單的頂點，頂點著色器可以讓我們做一些基礎(chǔ)的處理操作，比如頂點的屬性。

在初始裝配階段，也就是Shape Assembly階段，從頂點著色器中輸出的頂點會形成一個原始的形狀。本例中，輸出的頂點形成的是一個三角形。

從初始裝配階段到geometry shader階段，我們可以通過發(fā)散其他頂點來形成新的圖形，本例中形成了第二個三角形。

在Tessellation Shader階段，可以把上一階段給出的原型圖再分割成若干個小的原型圖。本例中，可以形成更多的三角形來創(chuàng)造一個更加平坦、順滑的環(huán)境。這么說可能難以理解，我們結(jié)合下圖來進一步闡述，這就是細分曲面著色器的作用。

細分曲面著色器的下一階段是光柵化階段（Rasterzation stage），在這一階段會對最終的原型和呈現(xiàn)在屏幕上的對應(yīng)像素做一個映射，形成fragment，供下一階段的fragment shader使用。

Fragment shader最主要的使命是計算出一個像素的最終顏色，在這個階段我們可以使用OpenGL中一些高級的特效。通常fragment shader會包含3D界面的多個數(shù)據(jù)，包括燈光、陰影、顏色等等。

當所有對應(yīng)的顏色都確定以后，最終的原型將會被傳入最后一個步驟，我們稱之為Alpha test and blending階段。這個階段會判斷相應(yīng)的深度，比如一個物體可能在另一個物體的后面，那它可能采用其他的顏色；或者如果該物體被遮擋，可能會被裁掉。

如上文所述，我們可以看到整個渲染管線的步驟和邏輯是十分復雜的，這其中包含了很多個可以改變的步驟，但我們一般只操作Vertex Shader 和 fragment shader，其他的著色器我們會直接采用默認的。在實際的OpenGL編程中，我們至少需要定義一個Vertex Shader和Fragment shader。（需要說明的是，OpenGL 3.1之前的版本包含了固定管線，從3.1版本開始，固定管線從核心中刪掉了，因此我們必須使用著色器去工作）。

三、總結(jié)

本文為該系列文章的第一篇，先簡單介紹OpenGL的一些原理，后續(xù)文章中會添加新的代碼分析，包括著色器（Shader）、紋理（Textture）、變形（transformation）、坐標系統(tǒng)（Coordinate systems）、相機（Camera）等。

作者：崔曉迪

來源：宜信技術(shù)學院