webgl 2.0 测试_测试WebGL的极限：Babylon.js培训演示

webgl 2.0 测试

为了庆祝Windows 8.1和Internet Explorer 11的发布 ，我们决定为Babylon.js创建一个新的演示场景。

该演示旨在展示Internet Explorer 11等现代浏览器上WebGL的原始功能。 我请我的一位朋友（ Romuald Rouhier ）允许我们使用他通过3dsMax创建的3D场景：

正如您在这里看到的那样，场景真的很美。 面临的挑战是使其能够在WebGL下实时运行。

一些统计

场景本身是一大堆超过90万个活动顶点（用于水的镜子几乎将顶点的体积乘以2）。 它使用了28种以上的着色器，重量为70 MB 。

为了评估场景的性能，我们做了两个基准测试：一个基准测试是在我的个人PC上（一台功能强大且功能强大的Intel Core-I7 PC和Nvidia GeForce 680），另一个是在笔记本电脑上（联想X1 Carbon带有Intel Core） -I7和Intel板载图形卡（HD4000）。

我们每次都运行两个测试。 一台装在主旋转相机上，一台装在较窄的相机上（步行相机）。 旋转相机具有以下观点：

此摄像机需要巨大的功率，因为​​每个物体都是可见的！

另一台摄像机的渲染有点简单：

这些基准测试的结果如下：

如您所见，即使在中等范围的硬件（我的笔记本电脑）中， WebGL的功能也使我们能够在Internet Explorer 11上每秒交付30帧。

引擎盖下

为了能够渲染这样的场景，我们必须向Babylon.js添加新功能。

首先，这是我们首次能够使用此新界面动态更换摄像机：

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

然后，为了增加场景的生命，我们增加了对动画摄像机的支持。 例如，名为CAM_ROT的相机正在围绕整个场景旋转。

同样，如果您切换到CAM_TRAIN摄像机或CAM_TRAIIN_AVANT摄像机，我们还将发现一个新功能：摄像机可以与网格相关。 这允许将摄像机（作为儿童）链接到对象（例如，此处的火车）：

关于原始性能，为了简化渲染，我们花了很多时间为几乎每个WebGL函数创建缓存。 这些缓存使我们能够删除冗余状态更改，这对于WebGL状态机而言确实是昂贵的。

使用Internet Explorer 11的F12开发人员栏 ，我们能够优化引擎，以使Javascript代码不会成为瓶颈。 集成的探查器（请参见下文）告诉我们，几乎所有时间都花在图形卡代码内部：

drawElements函数是用于渲染三角形的WebGL函数。 我们可以在前面的屏幕截图中看到Babylon.js （从第二行开始）不是问题。

不要犹豫，使用这些注释来分享您在自己的计算机上获得的性能（不要忘记指出用于操作系统，浏览器和硬件的版本）。 我们很想听听您的经历！

更进一步

您想这样做并释放WebGL的功能吗？ 以下是一些有趣的链接：

• 现代
• 通过使用babylon.js创建小型3D游戏来了解DeviceOrientation事件
• 使用babylon.js为Windows 8.1应用程序创建3D图表
• Babylon.js：使用自定义着色器，高度图和天空框为您的游戏创造令人信服的世界
• 介绍Babylon.js
• Github仓库： https : //github.com/BabylonJS/Babylon.js
• 在线教程： https : //github.com/BabylonJS/Babylon.js/wiki/Tutorials

最初发布： http : //blogs.msdn.com/b/eternalcoding/archive/2013/10/28/babylon-js-the-train-demo.aspx 。 经作者许可在此处转载。

翻译自: https://www.sitepoint.com/testing-limits-webgl-babylon-js-train-demo/

webgl 2.0 测试