首頁»HTML/CSS»圖解WebGL和Three.js工作原理

圖解WebGL和Three.js工作原理

來源:wanbo 發布時間:2018-12-08 閱讀次數:

一、我們講什么?

我們講兩個東西:

1、WebGL背后的工作原理是什么?

2、以Three.js為例,講述框架在背后扮演什么樣的角色?

二、我們為什么要了解原理?

我們假定你對WebGL已經有一定了解,或者用Three.js做過了一些東西,這個時候,你可能碰到了這樣一些問題:

1、很多東西還是做不出來,甚至沒有任何思路;

2、碰到bug無法解決,甚至沒有方向;

3、性能出現問題,完全不知道如何去優化。

這個時候,我們需要了解更多。

三、先了解一個基礎概念 

1、什么是矩陣?

簡單說來,矩陣用于坐標變換,如下圖:

2、那它具體是怎么變換的呢,如下圖:

3、舉個實例,將坐標平移2,如下圖:

如果這時候,你還是沒有理解,沒有關系,你只需要知道,矩陣用于坐標變換。

四、WebGL的工作原理

4.1、WebGL API

在了解一門新技術前,我們都會先看看它的開發文檔或者API。

查看Canvas的繪圖API,我們會發現它能畫直線、矩形、圓、弧線、貝塞爾曲線。

于是,我們看了看WebGL繪圖API,發現:

它只能會點、線、三角形?一定是我看錯了。

沒有,你沒看錯。

就算是這樣一個復雜的模型,也是一個個三角形畫出來的。

4.2、WebGL繪制流程

簡單說來,WebGL繪制過程包括以下三步:

1、獲取頂點坐標

2、圖元裝配(即畫出一個個三角形)

3、光柵化(生成片元,即一個個像素點)

接下來,我們分步講解每個步驟。 

4.2.1、獲取頂點坐標

頂點坐標從何而來呢?一個立方體還好說,如果是一個機器人呢?

沒錯,我們不會一個一個寫這些坐標。

往往它來自三維軟件導出,或者是框架生成,如下圖:

寫入緩存區是啥?

沒錯,為了簡化流程,之前我沒有介紹。

由于頂點數據往往成千上萬,在獲取到頂點坐標后,我們通常會將它存儲在顯存,即緩存區內,方便GPU更快讀取。 

4.2.2、圖元裝配

我們已經知道,圖元裝配就是由頂點生成一個個圖元(即三角形)。那這個過程是自動完成的嗎?答案是并非完全如此。

為了使我們有更高的可控性,即自由控制頂點位置,WebGL把這個權力交給了我們,這就是可編程渲染管線(不用理解)。

WebGL需要我們先處理頂點,那怎么處理呢?我們先看下圖:

我們引入了一個新的名詞,叫“頂點著色器”,它由opengl es編寫,由javascript以字符串的形式定義并傳遞給GPU生成。

比如如下就是一段頂點著色器代碼:

attribute vec4 position;
void main() {
  gl_Position = position;  
}

attribute修飾符用于聲明由瀏覽器(javascript)傳輸給頂點著色器的變量值;

position即我們定義的頂點坐標;

gl_Position是一個內建的傳出變量。

這段代碼什么也沒做,如果是繪制2d圖形,沒問題,但如果是繪制3d圖形,即傳入的頂點坐標是一個三維坐標,我們則需要轉換成屏幕坐標。

比如:v(-0.5, 0.0, 1.0)轉換為p(0.2, -0.4),這個過程類似我們用相機拍照。 

4.2.2.1、頂點著色器處理流程

回到剛才的話題,頂點著色器是如何處理頂點坐標的呢?

如上圖,頂點著色器會先將坐標轉換完畢,然后由GPU進行圖元裝配,有多少頂點,這段頂點著色器程序就運行了多少次。

你可能留意到,這時候頂點著色器變為:

attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = position * matrix;  
}

這就是應用了矩陣matrix,將三維世界坐標轉換成屏幕坐標,這個矩陣叫投影矩陣,由javascript傳入,至于這個matrix怎么生成,我們暫且不討論。 

4.2.3、光柵化

和圖元裝配類似,光柵化也是可控的。

在圖元生成完畢之后,我們需要給模型“上色”,而完成這部分工作的,則是運行在GPU的“片元著色器”來完成。

它同樣是一段opengl es程序,模型看起來是什么質地(顏色、漫反射貼圖等)、燈光等由片元著色器來計算。

如下是一段簡單的片元著色器代碼:

precision mediump float;  
void main(void) { 
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
} 

gl_FragColor即輸出的顏色值。 

4.2.3.1、片元著色器處理流程

片元著色器具體是如何控制顏色生成的呢?

如上圖,頂點著色器是有多少頂點,運行了多少次,而片元著色器則是,生成多少片元(像素),運行多少次。 

4.3、WebGL的完整工作流程

至此,實質上,WebGL經歷了如下處理流程:

1、準備數據階段

在這個階段,我們需要提供頂點坐標、索引(三角形繪制順序)、uv(決定貼圖坐標)、法線(決定光照效果),以及各種矩陣(比如投影矩陣)。

其中頂點數據存儲在緩存區(因為數量巨大),以修飾符attribute傳遞給頂點著色器;

矩陣則以修飾符uniform傳遞給頂點著色器。

2、生成頂點著色器

根據我們需要,由Javascript定義一段頂點著色器(opengl es)程序的字符串,生成并且編譯成一段著色器程序傳遞給GPU。

3、圖元裝配

GPU根據頂點數量,挨個執行頂點著色器程序,生成頂點最終的坐標,完成坐標轉換。

4、生成片元著色器

模型是什么顏色,看起來是什么質地,光照效果,陰影(流程較復雜,需要先渲染到紋理,可以先不關注),都在這個階段處理。

5、光柵化

能過片元著色器,我們確定好了每個片元的顏色,以及根據深度緩存區判斷哪些片元被擋住了,不需要渲染,最終將片元信息存儲到顏色緩存區,最終完成整個渲染。

五、Three.js究竟做了什么?

我們知道,three.js幫我們完成了很多事情,但是它具體做了什么呢,他在整個流程中,扮演了什么角色呢?

我們先簡單看一下,three.js參與的流程:

黃色和綠色部分,都是three.js參與的部分,其中黃色是javascript部分,綠色是opengl es部分。

我們發現,能做的,three.js基本上都幫我們做了。

  • 輔助我們導出了模型數據;
  • 自動生成了各種矩陣;
  • 生成了頂點著色器;
  • 輔助我們生成材質,配置燈光;
  • 根據我們設置的材質生成了片元著色器。

而且將webGL基于光柵化的2D API,封裝成了我們人類能看懂的 3D API。 

5.1、Three.js頂點處理流程

從WebGL工作原理的章節中,我們已經知道了頂點著色器會將三維世界坐標轉換成屏幕坐標,但實際上,坐標轉換不限于投影矩陣。

如下圖:

之前WebGL在圖元裝配之后的結果,由于我們認為模型是固定在坐標原點,并且相機在x軸和y軸坐標都是0,其實正常的結果是這樣的:

5.1.1、模型矩陣

現在,我們將模型順時針旋轉Math.PI/6,所有頂點位置肯定都變化了。

box.rotation.y = Math.PI/6;

但是,如果我們直接將頂點位置用javascript計算出來,那性能會很低(頂點通常成千上萬),而且,這些數據也非常不利于維護。

所以,我們用矩陣modelMatrix將這個旋轉信息記錄下來。

5.1.2、視圖矩陣

然后,我們將相機往上偏移30。

camera.position.y = 30;

同理,我們用矩陣viewMatrix將移動信息記錄下來。 

5.1.3、投影矩陣

這是我們之前介紹過的了,我們用projectMatrix記錄。 

5.1.4、應用矩陣

然后,我們編寫頂點著色器:

gl_Position = position * modelMatrix * viewMatrix * projectionMatrix;

這樣,我們就在GPU中,將最終頂點位置計算出來了。

實際上,上面所有步驟,three.js都幫我們完成了。

5.2、片元著色器處理流程

我們已經知道片元著色器負責處理材質、燈光等信息,但具體是怎么處理呢?

如下圖:

5.3、three.js完整運行流程:

當我們選擇材質后,three.js會根據我們所選的材質,選擇對應的頂點著色器和片元著色器。

three.js中已經內置了我們常用著色器。

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
快乐彩票开奖号码 连州市| 邮箱| 宁陕县| 蒙自县| 黄陵县| 宁津县| 昌平区| 十堰市| 平谷区| 定结县| 蓝田县| 贵阳市| 福安市| 吴江市| 长宁县| 金昌市| 开化县| 饶河县| 尉氏县| 林州市| 苏尼特右旗| 榆中县| 横峰县| 南汇区| 和硕县| 义乌市| 吴江市| 兴宁市| 黎城县| 裕民县| 嘉义县| 长顺县| 湖北省| 广宁县| 肇源县| 泾阳县| 太白县| 安化县| 邵武市| 仲巴县| 凯里市| 正定县| 濮阳县| 义乌市| 肥城市| 磐石市| 皮山县| 涪陵区| 江都市| 乾安县| 平乡县| 邻水| 宿迁市| 泸西县| 漯河市| 垦利县| 尉犁县| 平潭县| 三亚市| 海林市| 桂东县| 高陵县| 武义县| 阳春市| 禄劝| 穆棱市| 资阳市| 察隅县| 安宁市| 龙游县| 会同县| 腾冲县| 犍为县| 宝山区| 达州市| 封丘县| 咸阳市| 聊城市| 潼关县| 吉木乃县| 博罗县| 小金县| 吉木乃县| 阳原县| 新和县| 宝山区| 青岛市| 正定县| 安国市| 沅江市| 龙川县| 高青县| 临海市| 龙胜| 辽宁省| 花莲市| 高州市| 丰镇市| 阿拉善盟| 咸阳市| 兴业县| 临湘市| 凤城市| 五台县| 称多县| 岚皋县| 山阴县| 广东省| 德清县| 新绛县| 灵山县| 邹平县| 广水市| 遂宁市| 盐城市| 和平区| 南部县| 泰兴市| 繁峙县| 柘荣县| 三台县| 玛沁县| 花垣县| 金川县| 宁阳县| 资阳市| 耒阳市| 大荔县| 靖宇县| 滕州市| 赫章县| 申扎县| 泽库县| 九龙县| 浮梁县| 富顺县| 扎兰屯市|