[WebGL入門]六,頂點和多邊形

lufy發表於2014-08-01

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

可以在三維空間中描畫的東西

要說在WebGL的世界裡能夠描畫什麼,其實任何東西都可以描畫。而描畫的最基本的東西就是下面幾種。

・點

・線段

・三角形

雖然在OpenGL中提供了矩形的繪製,但是WebGL中基本上只能繪製上面的三種型別。和二維世界不同,比如像HTML中的img標籤那樣,簡單的在畫面上繪製一個矩形影象是不能的。

先不說點和線,基本上,WebGL就是使用三角形在畫面上繪製一些東西。這個三角形就是一個多邊形,一個多邊形至少是將三個頂點連線畫出來的三角形,所以一個繪製一個多邊形,最少需要三個頂點。


頂點,就是三維空間上存在的一個點。當然,這個點需要有座標位置。頂點的橫座標是x,縱座標是y,深度是z。將包含這些資訊的點連線起來就形成了一個多邊形。

近年來,非常逼真的3D遊戲,或者迪斯尼,組織活動等製作的3D動畫,其實就是做了同樣的事情。用了你想像不到的大量的三角形,製作出了無比精美的人物和場景。

想要繪製複雜構造的模型的話,需要準備大量的非常小的多邊形。用的多邊形越少,繪製的模型的稜角就越明顯(就像Virtua Fighter第一代那樣)。想要繪製精美的模型,就需要更多的多邊形,當然,這些多邊形的數量增加的話,定點數量也會成倍成倍的增加,座標計算的負荷就越大。

3D渲染世界的難點就在於,到底頂點數,多邊形數增加到多少比較合適。太多的頂點和多邊形,處理速度可能跟不上,太少的話,視覺效果又會降低。

如果是抽象的設計的話,頂點數和多邊形數量會大幅度減少,但是要說到設計,也是比較難的,真煩人呢。


頂點的連線順序和遮擋剔除

使用頂點和線連線起來繪製多邊形,是有連線順序的。順時針連線或是逆時針順序連線,實際上這個順序非常重要。


要說這是為什麼,比如要繪製一個球體,球體的話,無論你從什麼位置攝影,肯定都是一個球。而且,肯定是隻能看到一半。月亮看不到後半面也是同樣的道理,球體的前半面以外的部分都被隱藏了。

隱藏的部分是不需要繪製的,如果這部分進行了座標計算,那麼都是無效的計算。球體內側相關的處理如果不執行的話,處理的量就會減少一半,所以3D渲染的世界裡,看不到的東西不繪製的是減輕負擔的最普通的方法。

裡面的東西不繪製的機制,叫做遮擋剔除。OpenGL和WebGL當然都是可以設定遮擋剔除的。如果設定了遮擋剔除,就只會繪製外側看得見的多邊形,內側的所有多邊形就都不再進行繪製了。

但是,試著想一想,多邊形在內側還是外側的判斷,要如何進行呢?

實際上,就是通過剛才說的頂點的連線順序為判斷基準的。順時針連線頂點的多邊形是在外側,而逆時針連線的多邊形在內側。所以,在定義頂點情報的時候,要特別注意。如果設定了遮擋剔除,本來應該在某個位置有個多邊形,但是根本就不會進行繪製。


總結

頂點就是至少包含了座標情報的三維空間上的任意的一個點,三個點用線連線起來,表現為一個三角形的多邊形。而多邊形根據頂點的連線順序不同,分為內側和外側,根據這個可以進行遮擋剔除。

接下來,實際進行渲染的時候,會從頂點的情報的定義開始。這時候,頂點的順序,遮擋剔除等設定就變得非常重要了,所以一定要把這次的內容徹底理解。


下次,開始準備一下實際進行渲染的環境。


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

相關文章