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.
Frequently Asked Questions about WebGL and Babylon.js Train Demo
What is WebGL and why is it important in Babylon.js?
WebGL, or Web Graphics Library, is a JavaScript API that is used to render interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. It’s crucial in Babylon.js because it allows the library to provide a powerful platform for creating 3D games and applications directly in the browser. WebGL’s ability to use the computer’s GPU for computations makes it possible to render complex scenes in real-time, which is a key requirement for immersive 3D experiences.
How can I start using Babylon.js for my own projects?
To start using Babylon.js, you need to include it in your project. You can do this by downloading the Babylon.js library from the official website or by using a CDN. Once you’ve included the library, you can start creating 3D scenes by initializing a Babylon.js engine and creating a scene, camera, and lights. You can then add meshes to the scene and apply materials to them.
What are the key features of Babylon.js?
Babylon.js is a feature-rich library for creating 3D applications. Some of its key features include a powerful scene graph with support for multiple cameras, lights, and materials, a physics engine for realistic motion and collisions, support for user input via mouse, keyboard, and touch events, and a variety of tools for creating complex materials and textures. It also supports importing 3D models from various formats, including .babylon, .obj, and .gltf.
How does the Babylon.js Train Demo work?
The Babylon.js Train Demo is a showcase of what can be achieved with Babylon.js and WebGL. It features a detailed 3D model of a train moving along a track in a realistic environment. The demo uses a variety of Babylon.js features, including complex materials and textures, dynamic lighting, and user interaction. The train’s movement is controlled by a path-following algorithm, and the user can interact with the demo by changing the camera view and controlling the train’s speed.
Can I use Babylon.js with other JavaScript libraries or frameworks?
Yes, Babylon.js can be used alongside other JavaScript libraries and frameworks. It’s designed to be flexible and modular, so you can use it as part of a larger application or in combination with other libraries. For example, you could use Babylon.js for the 3D graphics in a game while using another library for the game logic.
What are the system requirements for running Babylon.js applications?
Babylon.js applications can run on any device that supports WebGL. This includes most modern desktop and mobile browsers. However, the performance of Babylon.js applications can vary depending on the device’s hardware. For the best performance, a device with a powerful GPU is recommended.
How can I optimize my Babylon.js application for better performance?
There are several ways to optimize a Babylon.js application for better performance. These include reducing the complexity of your 3D models, using simpler materials and textures, limiting the number of lights in your scene, and using the Babylon.js scene optimizer, which can automatically apply a variety of optimization techniques.
Can I create VR experiences with Babylon.js?
Yes, Babylon.js includes support for creating VR experiences. It provides a VR experience helper that makes it easy to add VR support to your application, and it supports a variety of VR devices, including the Oculus Rift, HTC Vive, and Google Cardboard.
How can I learn more about Babylon.js?
The Babylon.js website is a great resource for learning more about the library. It includes a comprehensive documentation, a variety of tutorials and examples, and a community forum where you can ask questions and share your projects.
What is the future of Babylon.js?
Babylon.js is actively developed and regularly updated with new features and improvements. The developers are committed to keeping Babylon.js at the forefront of 3D web technology, so you can expect to see continued support for the latest WebGL features, improved performance, and new tools and features for creating even more impressive 3D experiences.
David CatuheDavid Catuhe is a Principal Program Manager at Microsoft focusing on web development. He is author of the babylon.js framework for building 3D games with HTML5 and WebGL. Read his blog on MSDN or follow him on Twitter.
