首页 > 代码库 > 22万个木箱!TWaver 3D极限压榨

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

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

下面就Let’s go吧!

技术分享

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

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个:

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万个箱子,一眼望去,基本上是千军万马,茫茫一片。
技术分享

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

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

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

 

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