[Babylon.js]–The 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.


 You want to discuss about this article: reach me on Twitter: @deltakosh

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 Sourire.

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:

Comments (7)

  1. erix says:

    sur mon ASUS i5 / HD4000 / 8Gb RAM, je ne sors pas du "Loading, please wait… 100%" sous IE11

  2. erix says:

    Bon j'ai trouvé, ça fonctionne en IE11 en mode desktop, car IE11 pose une question pour active un stockage local.

    En mode modern UI on ne voit pas la question, donc IE11 reste bloqué.

    Avec la config annoncée dans min post précédent, je suis en moyenne à 50 fps sous IE11 et 30 fps sous Chrome (la performance change selon la caméra utilisée).

    Super cool démo !

  3. David Catuhe says:

    Pas mal!!!!

  4. Mark says:

    Core i7-4770K @4.5Ghz, GTX770, 32GB RAM, Windows 8.1

    For CAM_ROT scene:

    IE11: 60fps steady, not a flicker

    Chrome: 58-60fps

    Firefox: 58-60fps


  5. erix says:

    It now works on IE 11 even on Modern UI style :-)

    I have noticed performance is not as a good on IE11 modern UI as on IE11 on desktop mode.

    This has also been confirmed by some partners.

    For instance, on my config CAMERA-TRAIN is running at 50 fps on IE11 desktop, and only at 40 fps on IE11 modern UI.

  6. Benjamin says:

    50-60fps sous Firefox 25 (MacOS X Mavericks)

  7. Tommy Burn says:

    There's a bug on chrome 35.0.1916.153 in windows 8.1 (64bit) where if you turn on Black and white, then turn on Sepia, then turn off black and white, the whole world becomes water!