1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»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條評論
        登錄會員中心
        江苏快3投注技巧