經過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）等。

做者：崔曉迪