文档章节

Three.js WebGL 绘制流程(一)

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 588
阅读 43
收藏 0
点赞 0
评论 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 函数 




    


© 著作权归作者所有

共有 人打赏支持
李勇2

李勇2

粉丝 45
博文 188
码字总数 62209
作品 0
广州
程序员
《WebGL编程指南》学习笔记——4.绘制一个点

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

hushhw ⋅ 2017/12/24 ⋅ 0

《WebGL编程指南》学习笔记——2.使用元素

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

hushhw ⋅ 2017/12/16 ⋅ 0

WebGL编程指南(2)绘制和变换三角形

书本源代码 https://download.csdn.net/download/qfire/10371055 2.1 绘制多个点 不管三维模型的形状多么复杂,其基本组成部分都是三角形,只不过复杂的模型由更多的三角形构成而已。 WebGL提...

qfire ⋅ 04/24 ⋅ 0

三角形的 N 种画法与浏览器的开放世界

最近,我完全沉迷在了任天堂 Switch 上的《塞尔达传说:荒野之息》里,以至于专栏都快要停更了(罪过罪过)。大概每个塞尔达玩家都会有这个疑问,那就是 这个游戏为什么这么好玩?! 非常有意...

doodlewind ⋅ 05/02 ⋅ 0

白鹭引擎和layabox哪个好用,哪个技术更成熟 ?

作者:匿名用户 链接:https://www.zhihu.com/question/37819832/answer/104230057 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。...

wangyihero8 ⋅ 04/11 ⋅ 0

实战分享:淘宝Web 3D应用与游戏开发

大家下午好!我们今天讲个比较有意思的话题,这个话题在业界被谈及得比较少。大家在座有做过移动端开发的同学吗?请举个手,人还挺多的。那做过3D应用的同学请举个手,有用过Threejs的请举个...

技术小能手 ⋅ 05/31 ⋅ 0

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

AR/VR 开发工具 Amazon Sumerian 正式上线

去年 AWS 赶在 re:Invent 大会前,推出 AR/VR 开发工具 Amazon Sumerian,让开发者可以在 Oculus Rift、HTC Vive、iOS 移动装置,甚至网页浏览器环境制作3D、虚拟现实或增强现实(VR/AR)应用...

雨田桑 ⋅ 05/18 ⋅ 0

WebGL执行原理 (笔记2)

WebGL执行原理 图形流水线 文字描述 确定图形的每一个顶点,比如说一个三角形,她需要三个顶点来确定他的大小位置等 图元装配: 他的意思主要是通过上面的 来确定一个图形 光栅化: 你已经有...

m0_37036014 ⋅ 05/11 ⋅ 0

技术实践:Javascript如何实现GPU加速?

  一、什么是Javascript实现GPU加速?   CPU与GPU设计目标不同,导致它们之间内部结构差异很大。CPU需要应对通用场景,内部结构非常复杂。而GPU往往面向数据类型统一,且相互无依赖的计算...

博客园 ⋅ 05/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 40分钟前 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部