文档章节

Three.js WebGL 绘制流程(一)

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 588
阅读 44
收藏 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

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

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

李勇2
2012/09/18
0
0
《WebGL编程指南》学习笔记——4.绘制一个点

《WebGL编程指南》学习笔记——4.绘制一个点 之前,我们学习了如何建立一个WebGL程序,如何使用一些简单的WebGL相关函数。这一节,我们进一步在一个示例程序中绘制一个最简单的图形:一个点。...

hushhw
2017/12/24
0
0
原生webGL练习:利用点精灵实现字符串动画!

自从2017年2月份,写了一个基于canvas 2d的字符串动画的玩具之后,就一直想着怎么样把那个玩具性能优化一下。而且那玩意局限性很大,只能渲染纯色单色的字,而且通过每一帧疯狂调用方法,导致...

CharTen
07/29
0
0
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw
2017/12/16
0
0
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatm...

xhload3d
2014/09/12
0
35

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部