用WebGL显示22万个箱子

最新推荐文章于 2022-05-12 13:41:18 发布

joshuaxiao

最新推荐文章于 2022-05-12 13:41:18 发布

阅读量350

点赞数

分类专栏： WebGL HTML5 文章标签： webgl html5 3d

HTML5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

WebGL

1 篇文章 0 订阅

订阅专栏

放下了Java Swing，最近两年一直都在研究HTML5和WebGL 3D方面的东西，这也是目前比较热门的技术领域。以前也对HTML5和WebGL产生质疑，企业应用能行么？js乱哄哄的语法、WebGL不成熟的标准...现在打开个门户网站都慢慢腾腾千呼万唤，我们还能期待网页上的2D甚至3D技术会有“酣畅淋漓”、“一气呵成”的感受吗？也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展，可能很快你就会惊讶它的能力。在我所在的产品项目里，就实验了在网页上加载22万个立方体箱子的例子，和大家分享。

首先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个箱子。看看效果：

加载过程多费了一两秒，不过操作起来还是快如飞车，刷刷流畅，毫无压力！看来WebGL还是不错的。继续增加count到40，总计=40x40x40=64000个箱子。看效果：

加载耗时时间长了许多，不过显示和操作还是相当流畅。看来还不是极限，有继续压榨的空间。最后索性增加count到60，总计=60x60x60=216000。将近22万个箱子，WebGL和Chrome浏览器表现会怎么样呢？

哈，果然加载时间更加长了，浏览器甚至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);

这样，在箱海中漫游，就可以无意中发现一只可爱的小动物了：

或者放几只小鸟也ok。接下来可以做一个“找狗狗”或“找小鸟”的游戏了，呵呵。

可以点击观看WebGL显示22万个木箱视频。

不过，这也未必是WebGL的极限。现在技术、软件、硬件发展都很快，基于网页的3D展示能力肯定会有更大的提升和发展。到时候，复杂的3D应用在PC、平板、手机的网页上顺畅的跑，估计都不算是个事儿。

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