Three.js WebGL 绘制流程(一) - 李勇2的个人空间 - 开源中国

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 函数

原网址: 访问
创建于: 2018-10-13 16:37:27
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论