文档章节

Three.js WebGL 绘制流程(一)

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 588
阅读 47
收藏 0

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




    


本文转载自:http://blog.csdn.net/liyong748/article/details/7875956

共有 人打赏支持
李勇2

李勇2

粉丝 46
博文 189
码字总数 62209
作品 0
广州
程序员
私信 提问
Three.js WebGL 绘制流程(一)

Three.js 中3D 物体 都继承于 Object3D; 而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。 Gemotry 中 vertices 决定定点的 列表, face 决定面的构成, faceVert...

李勇2
2012/09/18
0
0
原生 WebGL开发文章目录(持续更新)

版权声明:本文为博主原创文章,欢迎读者转载学习,转载请注明文章出处。 https://blog.csdn.net/qq_37338983/article/details/83096215 为了方便读者学习和阅读,这篇文章主要是列出笔者撰写...

Bruce_wjh
10/16
0
0
使用THREE.js制作一款3D游戏

使用THREE.js制作一款3D游戏 本文是基于某位大神使用three.js设计游戏的学习心得与知识分享 The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 前言 这个学期选修了...

黄河滴滴
10/07
0
0
Khronos发布WebGL标准规范 1.0

The Khronos Group在2011游戏开发者大会上发布了WebGL标准规范 R 1.0(中文), 支持WebGL的浏览器不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。 目前WebGL标准已经获得了业界大...

红薯
2011/03/04
519
0
《WebGL编程指南》学习笔记——4.绘制一个点

版权声明:欢迎访问http://hushhw.cn (我的个人博客) https://blog.csdn.net/hushhw/article/details/78885717 《WebGL编程指南》学习笔记——4.绘制一个点 之前,我们学习了如何建立一个W...

hushhw
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

deepin中配置robot framework环境

本文永久更新地址:https://my.oschina.net/bysu/blog/2989005 【若要到岸,请摇船:开源中国 不最醉不龟归】 1.在终端中输入pip,回车,如果提示没有该命令,则先安转pip sudo apt-get inst...

不最醉不龟归
36分钟前
2
0
OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
今天
114
4
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
20
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
30
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部