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添加新功能。
首先,这是我们首次能够使用此新界面动态更换摄像机:
![](https://i-blog.csdnimg.cn/blog_migrate/565709cd42b978650dbdf5bb40f11002.png)
免费学习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 测试