[原]Three.js WebGL 繪製流程(一)

Three.js 中3D 物體 都繼承於 Object3D;

而構造一個3D 物體 須要 提供兩個對象 即Gemotry 幾何體 和 Material 材質。

Gemotry 中 vertices 決定定點的 列表， face 決定面的構成， faceVertexUv 決定 紋理座標

而Material 不一樣類型將會採用不一樣類型的shader 來繪製， 經過 設定Material 的某些材質來開啓默認shader的一些屬性：例如map 屬性將會開啓紋理功能

WebGL 中任何的繪製都須要提供shader， Three 自身提供了一些shader 模板， 這些模板和 Three提供的材質類型 以及3D 對象的類型相關；

例如一個Mesh 類型的3D 對象， 經過PlaneGemotry 和 MeshBasicMaterial 來構造， 則 會採用編號爲basic的shader

在WebGlRender 這個文件中聚集了繪製的基本邏輯， 而 在ShaderUtil 文件中集中了shader 模板。

一個場景的構成：

Scene  Camera Object

Scene 中一個數組存儲了全部Object ， 同時其經過繼承 Object3D , 將整個場景也構成了一棵樹。

全部任何3d對象在加入到場景中時， 都會將入到最終的Scene對象的 內部數組中。

在WebGLRender 中將會對Scene的這個數組進行遍歷用於初始化 Shader 和 GPU 中的vertexBuffer texture.

WebGL Render 中的Render函數， 接受 scene 和 camera 做爲參數。

首先初始化scene中的全部3d對象的shader 和 buffer， 

 initWebGLObjects

場景初次初始化WebglObject：

     構建場景的webglObjects， webglObjectsImmediate webglSprites webglFlares

     對場景中全部新添加的物體 進行webgl的初始話 addObject  清空場景的新添加的object

    對於場景中 刪除掉的物體， 進行webgl的清理 removeObject 清空場景刪除的物體

    更新場景中全部的webglObject   updateObject

更新場景中的世界矩陣：

進行一系列照相機的處理（須要細化）

設定繪製的目標， 默認是屏幕， 也能夠是其它的framebuffer

繪製全部webgl Object 包括由shader buffer texture 等 構成的一個對象

繪製場景的排序物體， 涉及到 混合效果的物體

繪製場景的當即物體  調用renderObjects  renderObjectsImmediate

須要瞭解Three 的 webglObjects， webglObjectsImmediate webglSprites webglFlares 幾種對象， 以及 sortedList 中的對象的 分別是什麼。

To be continued:

      照相機的處理

      Three的幾種webgl對象

       renderObjects renderObjectsImmediate 函數 

    

做者：liyong748 發表於2012/8/17 10:24:49 原文連接

閱讀：1442 評論：1 查看評論