Testing the Limits of WebGL: The Babylon.js Train Demo

To celebrate the launch of Windows 8.1 and Internet Explorer 11, we decided to create a new demo scene for Babylon.js.

This demo was intended to show off the raw power of WebGL on modern browsers like Internet Explorer 11. I asked one of my friend (Romuald Rouhier) to allow us to use a 3D scene that he created with 3dsMax:

As you can see here, the scene is really beautiful. The challenge was to enable it to run in realtime under WebGL.

Some statistics

The scene itself is a big bunch of more than 900 000 active vertices (the mirror used for the water almost multiply the volume of vertices by 2). It uses more than 28 differents shaders and weight 70 MB.

In order to evaluate the performance of the scene, we did two benchmarks: One on my personal PC (a fat and powerful Intel Core-I7 PC with a Nvidia GeForce 680) and one on my laptop (a Lenovo X1 Carbon with an Intel Core-I7 and an Intel onboard graphics card (HD4000).

We run two tests each time. One on the main rotating camera and one on a less wide camera (Walk camera). The rotating camera has this point of view:

This camera requires huge power because every single object is visible!

The other camera is a bit less complex to render:

The results for these benchmarks are the following:

As you can see, even in a middle range hardware (my laptop) the power of WebGL allows us to deliver 30 frames per second on Internet Explorer 11.

Under the hood

To be able to render such a scene, we had to add new features to Babylon.js.

First of all this is the first time that we are able to dynamically change cameras using this new interface:

Then to add more life to the scene, we added support for animated cameras. For instance, the camera called CAM_ROT is rotating around the full scene.

In a same way, if you switch to CAM_TRAIN camera or CAM_TRAIIN_AVANT camera, we will also discover a new feature: cameras can be related to mesh. This allows a camera to be linked (as a child) to an object (for instance the train right here):

About raw performances, in order to streamline the rendering, we spent a lot of time creating caches for almost every WebGL functions. These caches allow us to remove redundant states changes which are really expensive for the WebGL state machine.

Using the F12 developer bar of Internet Explorer 11, we were able to optimize the engine so that Javascript code is not a bottleneck. The integrated profiler (see below) tells us that almost all the time is spent INSIDE the graphics card code:

The drawElements functions is a WebGL function used to render triangles. We can see on the previous screenshot that Babylon.js (starting at the second line) is not a problem.

Do not hesitate to use the comments to share the performance you achieved on your own computer (Do not forget to indicate which version you use for OS, browser and hardware). We are eager to hear about your own experience!

Going further

You want to do the same and unleash the power of WebGL? Here are some interesting links:

• Modern.IE
• Understanding DeviceOrientation events by creating a small 3D game with babylon.js
• Creating a 3D chart for your Windows 8.1 app using babylon.js
• Babylon.js: Creating a convincing world for your game with custom shaders, height maps and skyboxes
• Introducing Babylon.js
• Github repo: https://github.com/BabylonJS/Babylon.js
• Online tutorials: https://github.com/BabylonJS/Babylon.js/wiki/Tutorials

Originally published: https://blogs.msdn.com/b/eternalcoding/archive/2013/10/28/babylon-js-the-train-demo.aspx. Reprinted here with permission of the author.