[WebGL入門]二十四，補色著色

標籤：webgl

註：文章譯自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的額外說明，我會加上［lufy：］，另外，鄙人webgl研究還不夠深入，一些專業詞語，如果翻譯有誤，歡迎大家指正。

本次的demo的運行結果

著色方法

上次介紹了反射光，反射光是實現光澤的不可缺少的概念，到此為止，基本的光照效果都已經封裝完畢了。光照的效果主要就是擴散光，環境光線和反射光三種方法，靈活運用這三種光照，應該就能實現非常逼真的照明效果了。前幾篇一直在說光照，這次稍微換個視點，看一下著色，著色是一個比較大的話題，這次講一下Gouraud Shading和補色著色。

Gouraud Shading（gouraud shading）

Gouraud Shading從名字上看，是比較難明白具體是什麼樣的著色的，這個高氏（gouraud）其實是以研究該著色的Henri Gouraud來命名的。

lufy:Gouraud Shading又叫高洛德著色或高氏渲染（Gouraud Shading）：這是一種光影渲染技術也是目前較為流行的著色方法，它可對3D模型各頂點的顏色進行平滑、融合處理，將每個多邊形上的每個點賦以一組色調值，同時將多邊形著上較為順滑的漸層色，使其外觀具有更強烈的即時感和立體動感，不過其著色速度比平面著色慢得多但是效果要好得多。

Gouraud Shading可以對多邊形的頂點之間的顏色進行補間，Gouraud Shading的計算負荷並不是太高，但是，可以實現很漂亮的渲染，所以經常被使用。

對頂點間的顏色進行補間是什麼意思呢？

簡單的說，用Gouraud Shading計算得到的最終的顏色情報，適用於所有頂點，並且對頂點和頂點之間的顏色進行補間處理，最後渲染模型。

使用Gouraud Shading，想用少量的頂點渲染漂亮的光照是很難的。比如說，一個最簡單的三角形多邊形，三維空間中只有這一個三角形，這個面就直接和光碰撞了。

放射性光源的時候（比如說燈泡），應該是三角形的中心就最亮，而頂點的部分要稍微暗一些，但是Gouraud Shading只是在頂點之間進行顏色補間，所以無法凸顯三角形中間的亮點。
另外，因為是根據每個頂點進行顏色補間，顏色變化的時候會出現鋸齒。這個鋸齒隨著頂點數的增多而逐漸消失，但是這麼做的話，Gouraud Shading計算負荷小的優勢就沒有了，所以這是個難處理的地方。

細心的朋友可能會發現，這個網站中所有的demo，都是用的Gouraud Shading。頂點著色器的光的強度和顏色的進行計算，然後只是將最終算出的顏色傳給了片段著色器，這種根據每個頂點來計算顏色的方法就是Gouraud Shading。
下面是證據，目前為止的demo中的顏色之間會存在鋸齒，會有一些不太自然的鏡面反射。

擴大之後看的話就比較清楚了吧，頂點數越少，這種現象就越明顯。

補色著色(phong shading)
理解了Gouraud Shading之後，接著看補色著色。
像剛才說的那樣，相對Gouraud Shading是對頂點之間的顏色進行補間處理，補色著色是對各個像素進行顏色的補間處理。也就是說，計算量會比Gouraud Shading增大很多，但是可以將渲染出顏色的細節。
補色著色的名字跟Gouraud Shading一樣，都是以人名(Bui Tuong Phong)來命名的。使用補色著色的話，會克服Gouraud Shading的弱點，即使頂點數少的時候也能得到很自然的效果。

因為補色著色是在像素之間對顏色進行補間，所以不會發生不自然的鋸齒。下面是和Gouraud Shading的渲染效果做比較。

完全是相同的頂點數，相同的光源渲染出的補色著色和Gouraud Shading。左邊是補色著色，無論陰影還是高亮的部分，都非常的漂亮和自然。

補色著色的封裝知道了Gouraud Shading和補色著色兩者之間的不同，那麼就來看看補色著色的封裝吧。補色著色就是剛才說的那樣，在像素之間進行顏色的補間處理，那麼目前為止的在頂點著色器中進行的光照處理，全部要交給片段著色器。
具體的說，追加一個處理，頂點著色器中的頂點的法線情報用varying變數傳給片段著色器，然後其他的光照處理全部移到片段著色器中。
首先看頂點著色器的代碼。

>頂點著色器的代碼

attribute vec3 position;attribute vec3 normal;attribute vec4 color;uniform   mat4 mvpMatrix;varying   vec3 vNormal;varying   vec4 vColor;void main(void){    vNormal     = normal;    vColor      = color;    gl_Position = mvpMatrix * vec4(position, 1.0);}

和目前為止的代碼不同，新定義了一個叫做vNormal的varying變數，用來將法線情報傳給片段著色器。頂點的顏色情報和座標變換矩陣等地方不用變。
接著是片段著色器。

>片段著色器代碼

precision mediump float;uniform mat4 invMatrix;uniform vec3 lightDirection;uniform vec3 eyeDirection;uniform vec4 ambientColor;varying vec3 vNormal;varying vec4 vColor;void main(void){    vec3  invLight  = normalize(invMatrix * vec4(lightDirection, 0.0)).xyz;    vec3  invEye    = normalize(invMatrix * vec4(eyeDirection, 0.0)).xyz;    vec3  halfLE    = normalize(invLight + invEye);    float diffuse   = clamp(dot(vNormal, invLight), 0.0, 1.0);    float specular  = pow(clamp(dot(vNormal, halfLE), 0.0, 1.0), 50.0);    vec4  destColor = vColor * vec4(vec3(diffuse), 1.0) + vec4(vec3(specular), 1.0) + ambientColor;    gl_FragColor    = destColor;}

逆矩陣，光向量，視線向量等一直以來都在頂點著色器中使用的資料，全都移動到片段著色器中來了。另外，利用剛才在頂點著色器中定義的varying變數vNormal進行了計算。計算的方法和以前一樣，沒有任何改變。就是說，只是把頂點著色器中的處理，放到了片段著色器中而已。
這次的變化，並沒有添加新的uniform變數，也就是說，javascript部分基本上不用變。
簡單的來說，Gouraud Shading和補色著色的主要區別就在於，根據頂點處理還是根據像素處理，雖然這麼說跟定義相比有些奇怪，但是這麼理解的話也沒什麼錯。

總結這一次分別說了Gouraud Shading和補色著色兩種著色，Gouraud Shading的優點是計算量比較低，而和補色著色相比的話，渲染效果不太自然。
補色著色正好相反，計算量很高，但是渲染效果非常完美。
到底選擇那種方法，取決於模型的頂點數和需要的渲染效果，以及執行環境能夠承受的計算負荷。
實際應用中，根據利用的情境和描畫的模型，分別使用不同的方法是非常重要的。
這次也準備了demo，急著看運行效果的人可以點擊文章最後的連結來測試。

另外，補充一點，這次的demo中對圓環體的產生函數做了幾處修改，傳回值是以對象的形勢返回的，可以指定圓環體的顏色了。其實，也並沒有做什麼其他特別的處理。

下次，介紹一下電光源。

用補色著色來渲染的圓環體

http://wgld.org/s/sample_012/

轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend

[WebGL入門]二十四，補色著色