22万个木箱!TWaver 3D极限压榨

打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有“酣畅淋漓”、“一气呵成”的感受吗?也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展,可能很快你就会惊讶它的能力。现在,我们就试试TWaver的3D能显示多少个木箱子,透明的木箱子。数据量当然要大才行,10万个怎么样?干脆试试20万好了,具体说是60的立方矩阵=60x60x60=216000个。只有压榨到极限才能了解WebGL和TWaver 3D技术适合做什么应用。

下面就Let’s go吧!

首先new一个box和network放在网页上:

?


1

2

3

var
box = new
mono.DataBox();

var
camera = new
mono.PerspectiveCamera(60, 10 / 7, 0.1, 10000);

var
network = new
mono.Network3D(box, camera, ‘canvas‘);

然后创建箱子对象。定义一个矩阵规模数量,循环new出count*count*count个箱子对象矩阵。为每个箱子设置其矩阵中的空间位置、设置透明贴图,最后add到box中进行显示即可。

暂设箱子间距gap为40,矩阵层数为3,则总计数量为3x3x3=27个:

?


1

2

3

4

5

6

7

8

9

10

11

12

var
gap = 40, count = 3;

for
(var
k = 0; k < count; k++) {

  for
(var
i = 0; i < count; i++) {

    for
(var
j = 0; j < count; j++) {

      var
node = new
mono.Cube(20, 20, 20, 1, 1, 1);

      node.setStyle(‘m.texture.image‘,
‘box.png‘);

      node.setPosition((i - count * 0.5) * gap, k * gap, (j - count / 2) * gap);

      box.add(node);

    }

  }

}

27个箱子实在太少了,就像大象拖鹅毛,实在是没感觉。现在增加count到20,总计=20x20x20=8000个箱子。看看效果:

加载多费了一两秒。操作起来还是快如飞车,刷刷流畅,毫无压力!看来要上大刑伺候才行了,继续增加count到40,总计=40x40x40=64000个箱子。看效果:

加载耗时时间长了许多,不过显示和操作还是相当流畅。看来还不是极限,有继续压榨的空间。出大招:增加count到60,总计=60x60x60=216000。将近21万个箱子,TWaver 3D在浏览器上会表现怎么样呢?

哈,果然加载时间更加长了,浏览器甚至2次出现了“不响应”提示。为了看到结果,果断点击wait选择继续等待。

耗时虽久,不过最终结果还是出来了。21.6万个箱子,一眼望去,基本上是千军万马,茫茫一片。

操作了一下,让人惊讶的是,虽然不算流畅,但还是可以响应鼠标操作的。考虑到这么大的海量数据,还算可以接受。箱海中漫游,竟然无意发现一只可爱的小动物!

不必惊讶,仅仅是因为增加了下面的几行代码就行了:

?


1

2

3

4

5

6

7

8

9

var
billboard = new
mono.Billboard();

billboard.s({

  ‘m.texture.image‘
: ‘dog.png‘,

  ‘m.vertical‘
: true,

  ‘m.alignment‘
: mono.BillboardAlignment.bottomCenter,

});

var
position = node.getPosition();

billboard.setPosition(position);

box.add(billboard);

接下来你可以做一个“找狗狗”或“找小鸟”的游戏了。

点击观看TWaver显示22万个木箱视频

那么问题来了:这是TWaver 3D和WebGL的极限吗?不一定。WebGL和TWaver 3D的发展都是日新月异、一日千里,随着标准、产品、硬件、经验的不断提升,基于网页的3D展示能力肯定会有更大的提升和发展。到时候,复杂的3D应用在PC、平板、手机的网页上顺畅的跑,那都不是个事儿!

当然,性能和机器的配置有巨大的关系,尤其是显卡、CPU等关键硬件配置。强大的硬件永远是提升3D应用流畅度的最直接的手段。平板甚至手机的硬件能力比PC会弱很多,在实际应用中,不可能期待手持设备能显示海量的3D数据和复杂的物理场景。在实际3D应用开发中,我们还需要有针对性的对场景进行优化、精简,尽可能的保证用户的交互和视觉体验,然后再尽可能的显示更多的信息。

当然,使用TWaver 3D就会帮您节省更多的时间和成本:因为它已经封装好了绝大部分功能,开发者不需要深入的研究**GL甚至显卡等细节,关注在业务和数据上就好了。如果您对TWaver的3D技术感兴趣,那就马上下载体验吧!

夯下面链接,观看22万个木箱!TWaver 3D极限压榨更多精彩!

http://v.youku.com/v_show/id_XODU3MjczMDgw.html

时间: 2024-10-13 18:17:08

22万个木箱!TWaver 3D极限压榨的相关文章

如何实现TWaver 3D颜色渐变

一般而言,须要实现3D物体的渐变,通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图.这样的方式是能够解决这类问题的.只是对于一般用户而言,通过2D生成一张渐变的图片.有一定的难度,另外假设要生成的图片比較多.性能效率上会成为一个瓶颈,特别是渐变随着条件在不断变化的情况下.就须要每次绘制的时候都去生成一张渐变的canvas图,效率极其低. 在3D中,第二种通常的方式就是通过顶点色来实现渐变.然而这样的方式对于用户的难度更大,由于须要用户了解3D底层的一些原理,同一时候须要对于每

TWaver 3D作品Viewer查看器

为了让开发者更方便的对各类3D模型.设备.物体进行浏览和查看,我们直接封装了mono.Viewer组件.它可以直接根据给定的数据源(json.obj.url等)进行数据加载和浏览展示.对于一般的3D设备.图纸.作品的展示,它可是非常方便了,一句new mono.Viewer()就解决了所有问题.各种常见的交互设置.灯光设置.呈现方式等,都已经直接封装其中. TWaver的3D viewer直接集成了如下功能: 滚轮缩放 光照设置 热点展示 贴图/线条切换 全屏与恢复 一键分享 viewer通过一

2016危及网络安全域名多达22万

根据国家互联网应急中心发布的<2016年我国互联网网络安全态势综述>,2016全球顶级域名申请总数达到近3.293亿个.2016年国家互联网应急中心捕获移动互联网恶意程序数量近205万个,较2015年增长39.0%,恶意程序数量近7年来保持高速增长趋势.按恶意行为进行分类,排名前三位的恶意行为分别是流氓行为类.恶意扣费类和资费消耗类,占比分别为61.1%.18.2%和13.6%.移动互联网恶意程序下载链接近67万条,涉及传播源域名22万余个.IP地址近3万余个,恶意程序传播次数达1.24亿次,

如何创建TWaver 3D的轮廓选中效果

在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几个基本形状进行捏合,生成新的组合体: 1 var node=new mono.ComboNode(nodes, ops); 2 node.s({ 3     'm.color':'#343AD3', 4     //或使用图片贴图:'m.texture.image':'test.png', 5   

日本IT行业劳动力缺口达22万 在日中国留学生迎来就业好时机 2017/07/18 11:25:09

作者:倪亚敏 来源:日本新华侨报 发布时间:2017/07/18 11:25:09   据日本政府提供的数据,日本2018年应届毕业生的"求人倍率"已经达到了1.78倍.换言之,就是100名大学生里有178个就业岗位可选择,即使所有大学毕业生都进入劳动力市场,也还有78个岗位空缺.劳动力现状是寒冷冬天,而学生们确实迎来了就业春天. 在众多岗位当中,日本的信息技术(IT)领域采用的外国人留学生最多.去年,已经在日本企业就职的留学生当中(除去制造行业),27.3%的毕业生进入了IT行业.根

TWaver 3D应用于大型数据中心(续)

在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现.其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让它更加“动”一些,所以今天我抽了个时间再接着来个“续”——动态的添加机柜,主机和告警.1.动态的添加机

[2016.01.22]万峰文本处理专家 v2.1

<万峰文本处理专家>是一款简单易用,且功能强大的各类文本文件处理软件.1.支持多任务的处理模式,允许一次处理多个任务.2.支持正则表达式替换,替换更加强大:3.支持各类关键字的行处理操作:4.支持各类起始关键字和结束关键字的行的处理操作:5.多线程任务管理,速度快,性能稳定.6.文本替换专家作者十年磨一剑之力作. 淘宝购买地址:http://item.taobao.com/item.htm?spm=0.0.0.0.0W6h2V&id=520620878928

飞机超过2万个零件是3D打印生产

有两个方法能够帮我们快速衡量社会中增材制造的增长状况,一是看相关专利的申请数量,二是世界500强企业中使用该技术的数量.过去十年里,涉及到3D打印的专利申请数量已飙升超过800,而专利授权数量也大幅上升.与此同时,这个星球上的一些最大的公司也开始应用3D打印技术,或者是它们早就已经这么干了. 就拿波音公司来说吧,根据本周公布的消息,这家公司最近提交了一份专利申请,主要涉及到更换飞机零部件的3D打印应用.这份专利申请可能对波音公司未来的经营产生重大影响. 一种装置,包括一个被配置为存储多个部件定义

巧用TWaver 3D 矢量图形功能

的确,提起TWaver,大家想到的首先是“电信拓扑图组件”.其实,由于其灵活的MVC架构.矢量化设计.方便定制等特点,TWaver可以做的还有很多.例如房地产行业常见到的“户型图”. 户型推荐是销售接待中很重要的阶段,也被称做是为客户造梦的过程,户型也是客户是否选择该楼盘的一大要素.制作漂亮的户型图在房地产行业无疑是非常重要的一项工作. 首先利用TWaver常被忽视的“矢量图形”功能,来定义房间和隔断的形状.这可以通过代码片段完成.json格式定义完成.或编辑器拖拽完成.一小段代码或json足可