[原]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 查看评论