任意線段集生成多邊形 WebGL 頂點和多邊形

在三維空間中描繪出來的東西

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

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

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

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