`

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

阅读更多

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

下面就Let’s go吧!

twaver-performance-216000-box

首先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);
    }
  }
}

twaver3d-box-27

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

twaver3d-box-8000

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

twaver3d-box-64000

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

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

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

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

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

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);

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

twaver3d-box-216000-bird

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

 

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

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

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

 

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

 

分享到:
评论

相关推荐

    TWaver的3d图形组件库,小demo

    "TWaver的3d图形组件库,小demo" 提示我们这是一个基于TWaver库的3D图形展示实例。TWaver是一个专业级的图表和数据可视化工具,它提供了HTML5版本的3D图形组件,允许开发者在Web应用中创建交互式的三维图形。 ...

    基于TWaver实现的3D机房Demo

    TWaver是一款强大的WebGL3D框架,它为开发者提供了一个高效、灵活的工具,用于创建交互式的3D应用程序,特别是针对网络拓扑和机房管理等场景。本文将深入探讨如何利用TWaver实现3D机房的演示项目。 首先,TWaver的...

    TWaver 3D Flex 3D 实例 例子

    TWaver是一款强大的数据可视化工具,它提供了丰富的图表类型和交互功能,而Flex 3D是Adobe Flex框架的一个扩展,用于创建复杂的三维(3D)图形和用户界面。这个压缩包很可能包含了一系列的示例项目,帮助开发者理解...

    twaver 3D机房接口文档

    ### 3D机房系统接口文档关键知识点 ...通过以上介绍可以看出,《twaver 3D机房接口文档》详细描述了3D机房系统的关键功能模块及其接口设计,旨在帮助开发者更好地理解并利用这些接口来实现机房管理自动化和智能化。

    10个TWaver网页3D可视化精彩案例.docx

    DNA3D模型是TWaver的一个亮点案例,它包含了数千个球体,总面数达到几十万。通过高性能渲染技术和丰富的色彩与光照效果,使得模型既具有科学准确性又不失美观性。 **详细分析:** 1. **模型精度:**DNA双螺旋结构...

    twaverflex 3D开发文档

    通过上述内容,可以了解TWaver3D for Flex开发文档为开发者提供了一个全面的指导,涵盖从基础的3D图形概念到具体的API使用方法,还包括模型文件导入和交互功能的设计,旨在帮助开发者构建出具有吸引力的3D应用程序。...

    twaver.js使用示例

    “twaver.js使用示例”这一标题表明了我们即将探讨的是一个关于twaver.js的实践应用案例。Twaver.js是一款强大的图形化建模和可视化库,主要用于创建复杂的网络拓扑图、流程图、组织结构图等。这个标题暗示我们将...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织结构等场景。5.9.0是该库的一个特定版本,可能包含了新功能、性能优化或错误修复。 描述简单明了,"twaver-html5-5.9.0-api"直接...

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    flex Twaver组件使用

    此外,TWaver Flex还预定义了丰富的业务对象,如告警(`twaver.IAlarm`)和告警容器(`twaver.AlarmBox`),图层(`twaver.ILayer`)和图层管理容器(`twaver.LayerBox`),以及拓扑网元(`twaver.IElement`)和拓扑...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    TWaver HTML5 开发指南代码

    TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的绘制,尤其适合在Web上创建交互式的机房、网络设备、服务器架构等展示。 一、TWaver概述 TWaver是一个高效且灵活的JavaScript库,专门用于...

    twaver web实例源码

    【标题】"Twaver Web实例源码"是一个关于使用Twaver与ExtJS结合的Web应用程序开发的学习资源。Twaver是一款强大的图形化建模和可视化工具,常用于数据可视化、网络拓扑图、流程图等场景。ExtJS则是一个流行的...

    TWaver 源代码下载 案例

    TWaver 源代码下载 3D 机房代码下载 TWaver 编辑器下载

    Twaver-html5.zip

    Twaver学习案例的例子

    Twaver 3.7性能测试报告

    2. **随机连接测试**:在多个节点之间建立随机连接,模拟实际应用中可能出现的复杂网络拓扑结构,进而考察Twaver Java处理复杂连接的能力。 3. **特定比例连接测试**:设置不同节点间的连接比例(如5:1),以研究...

    TWaver文档

    综上所述,TWaver是一款功能强大且高度可定制的图形界面组件解决方案,尤其适合于电信、电力、能源等多个行业中的数据可视化需求。无论是从技术层面还是从实际应用的角度来看,TWaver都展现出了极高的价值和潜力。

    twaver拓扑

    【标题】"twaver拓扑" 是一个基于HTML5技术的图形化工具,主要用于创建和展示复杂的网络拓扑结构。...无论是对于IT专业人士还是需要图形化表示关系的其他领域,twaver都是一个值得考虑的解决方案。

    twaver for flex 开发手册

    TWaver for Flex 不仅是一个强大的图形组件库,还提供了一整套完整的图形开发解决方案。通过深入了解 TWaverFlex 的设计模式、数据模型和视图组件等知识点,开发者可以充分利用其丰富的功能来创建高质量的图形化用户...

    twaver-java-3.7

    Twaver是一个跨平台的图形化解决方案,它提供了丰富的图表类型和交互功能,使得数据的展示和分析变得直观且高效。 **一、Twaver简介** Twaver是一款用于创建动态、交互式图表和网络拓扑图的Java库。它支持多种图表...

Global site tag (gtag.js) - Google Analytics