[WebGL入門]六,頂點和多邊形
注:文章譯自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的額外說明,我會加上[lufy:],另外,鄙人webgl研究還不夠深入,一些專業詞語,如果翻譯有誤,歡迎大家指正。
可以在三維空間中描畫的東西
要說在WebGL的世界裡能夠描畫什麼,其實任何東西都可以描畫。而描畫的最基本的東西就是下面幾種。
・點
・線段
・三角形
雖然在OpenGL中提供了矩形的繪製,但是WebGL中基本上只能繪製上面的三種型別。和二維世界不同,比如像HTML中的img標籤那樣,簡單的在畫面上繪製一個矩形影象是不能的。
先不說點和線,基本上,WebGL就是使用三角形在畫面上繪製一些東西。這個三角形就是一個多邊形,一個多邊形至少是將三個頂點連線畫出來的三角形,所以一個繪製一個多邊形,最少需要三個頂點。
頂點,就是三維空間上存在的一個點。當然,這個點需要有座標位置。頂點的橫座標是x,縱座標是y,深度是z。將包含這些資訊的點連線起來就形成了一個多邊形。
近年來,非常逼真的3D遊戲,或者迪斯尼,組織活動等製作的3D動畫,其實就是做了同樣的事情。用了你想像不到的大量的三角形,製作出了無比精美的人物和場景。
想要繪製複雜構造的模型的話,需要準備大量的非常小的多邊形。用的多邊形越少,繪製的模型的稜角就越明顯(就像Virtua Fighter第一代那樣)。想要繪製精美的模型,就需要更多的多邊形,當然,這些多邊形的數量增加的話,定點數量也會成倍成倍的增加,座標計算的負荷就越大。
3D渲染世界的難點就在於,到底頂點數,多邊形數增加到多少比較合適。太多的頂點和多邊形,處理速度可能跟不上,太少的話,視覺效果又會降低。
如果是抽象的設計的話,頂點數量和多邊形數量會大幅度減少,但是要說到設計,也是比較難的,真煩人呢。
頂點的連線順序和遮擋剔除
使用頂點和線連線起來繪製多邊形,是有連線順序的。順時針連線或是逆時針順序連線,實際上這個順序非常重要。
要說這是為什麼,比如要繪製一個球體,球體的話,無論你從什麼位置攝影,肯定都是一個球。而且,肯定是隻能看到一半。月亮看不到後半面也是同樣的道理,球體的前半面以外的部分都被隱藏了。
隱藏的部分是不需要繪製的,如果這部分進行了座標計算,那麼都是無效的計算。球體內側相關的處理如果不執行的話,處理的量就會減少一半,所以3D渲染的世界裡,看不到的東西不繪製的是減輕負擔的最普通的方法。
裡面的東西不繪製的機制,叫做遮擋剔除。OpenGL和WebGL當然都是可以設定遮擋剔除的。如果設定了遮擋剔除,就只會繪製外側看得見的多邊形,內側的所有多邊形就都不再進行繪製了。
但是,試著想一想,多邊形在內側還是外側的判斷,要如何進行呢?
實際上,就是通過剛才說的頂點的連線順序為判斷基準的。順時針連線頂點的多邊形是在外側,而逆時針連線的多邊形在內側。所以,在定義頂點情報的時候,要特別注意。如果設定了遮擋剔除,本來應該在某個位置有個多邊形,但是根本就不會進行繪製。
總結
頂點就是至少包含了座標情報的三維空間上的任意的一個點,三個點用線連線起來,表現為一個三角形的多邊形。而多邊形根據頂點的連線順序不同,分為內側和外側,根據這個可以進行遮擋剔除。
接下來,實際進行渲染的時候,會從頂點的情報的定義開始。這時候,頂點的順序,遮擋剔除等設定就變得非常重要了,所以一定要把這次的內容徹底理解。
下次,開始準備一下實際進行渲染的環境。
相關文章
- 六邊形架構入門 - levelup架構
- webgl入門(2)-初識webgl和著色器Web
- 微信小程式-測試遊戲生成六邊多邊形微信小程式遊戲
- 六邊形架構架構
- Java和Spring的六邊形架構 - reflectoringJavaSpring架構
- 2394 輸出六邊形
- SVG <polygon> 多邊形SVGGo
- opencv多邊形逼近OpenCV
- webgl入門(1)-什麼是webglWeb
- Spring Boot 入門(六):整合 treetable 和 zTree 實現樹形圖Spring Boot
- 六邊形之埠和介面卡架構 - cockburn架構
- PCL(26)cropHull任意多邊形內部點雲提取
- IDL建立泰森多邊形
- 多邊形填充-活動邊表法
- 六邊形架構 Java 實現架構Java
- [CSS LEARN]Border與多邊形CSS
- 【JAVA】多邊形重心計算Java
- 折線(Polyline)、多邊形(Polygon)Go
- matlab繪製正多邊形Matlab
- 如何利用CSS寫一個六邊形?CSS
- Kotlin和SpringBoot開發的六邊形架構應用案例KotlinSpring Boot架構
- AutoCAD C# 判斷多邊形與點的位置關係C#
- JS 射線法 判斷點是否在多邊形內部JS斷點
- 為什麼需要六邊形架構?- silkandspinach架構
- 初識“六邊形”架構設計理論架構
- H5 六邊形消除遊戲開發H5遊戲開發
- 在 .NET Core 中應用六邊形架構架構
- HexMap學習筆記(一)——建立六邊形網格筆記
- css實現圖片背景填充的正六邊形CSS
- 視覺化學習:利用向量判斷多邊形邊界視覺化
- 計算任意多邊形的面積(Android)Android
- GO語言入門 - (六)函式和方法Go函式
- 圖形學之紋理後續/WebGL多紋理處理Web
- 如何判斷一個點在地圖上?如何判斷一個點在多邊形內?地圖
- 從邊緣走向中心,邊緣計算出現三大門派和六大趨勢
- Python 實現任意多邊形的最大內切圓演算法_任意多邊形最大內切圓演算法Python演算法
- JS實現滑鼠點選愛心&繪製多邊形&每日一言功能JS
- 六邊形架構:管理複雜性的解決方案架構
- Three.js入門篇之1 - WebGL on HTMLJSWebHTML