Three.js WebGL 绘制流程(一)
2012-08-17 10:24
633 查看
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 函数
而构造一个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 函数
相关文章推荐
- Three.js WebGL 绘制流程(一)
- Three.js WebGL 绘制流程(一)
- [原]Three.js WebGL 绘制流程(一)
- Three.js的绘制流程(三)----地形
- Three.js的绘制流程(三)----地形
- three.js(七) 绘制到WebGLRenderTarget
- Three.js的绘制流程(三)----地形
- Three.js的绘制流程(三)----地形
- Threejs 官网 - 检测使用 three.js 时的 WebGL 和浏览器兼容性(Detecting WebGL and browser compatibility with three.js)
- 如何用webgl(three.js)搭建一个3D库房
- Three.js 第一篇:绘制一个静态的3D球体
- webGL之three.js入门1
- [webGL学习]基于three.js构建WebGL实例第六讲
- three.js 与 webGL
- Three.js讲解以及WEBGL实例(转)
- Three.js和WebGL
- WEBGl之THREEJS导入shp文件,生成三维模型
- 如何用webgl(three.js)搭建一个3D库房
- 使用WebGL + Three.js制作动画场景
- three.js绘制地球、飞机与轨迹的效果示例