Being Cross with WebGL and Babylon.js

David Rousset writes up a great article about creating a cross-platform game using Babylon.js and WebGL...

Building A Cross-Platform WebGL Game With Babylon.js

Here’s a challenge for you: what about building a 3D game over the weekend? Babylon.js¹ is a JavaScript framework for building 3D games with HTML5, WebGL and Web Audio, built by yours truly and the Babylon.js team. To celebrate the new version 2.3 of the library, we decided to build a new demo named “Sponza” to highlight what can be done with the WebGL engine and HTML5 when it comes to building great games nowadays.

The idea was to create a consistent, similar, if not identical, experience on all WebGL supported platforms and to try to reach native apps’ features. In this article, I’ll explain how it all works together, along with the various challenges we’ve faced and the lessons we’ve learned while building it.

To achieve this goal, Sponza uses a number of HTML5 features like WebGL, Web Audio, as well as Pointer Events (widely supported now thanks to jQuery PEP polyfill³²²), Gamepad API, IndexedDB, HTML5 AppCache, CSS3 transition/animation, flexbox and Fullscreen API. You can test the Sponza demo³ on your desktop, mobile or Xbox One.

The main hall in the interactive Sponza demo⁵.

Discovering The Demo

First, you’ll start on an auto-animated sequence giving the credits to whoever has built the scene. Most of the team’s members come from the demo⁶ scene⁷. You’ll discover that this is an important part of the 3D developers’ culture. On my side, I was on Atari while David Catuhe was on Amiga which is still a regular source of conflicts between us, believe it or not. I was coding a bit but mainly composing the music in my demo group. I was a huge fan of Future Crew⁸ and more specifically of Purple Motion⁹, my favorite demo scene composer of all time. But let’s not deviate from the topic.

For Sponza, here are the contributors:

• Michel Rousseau aka “Mitch” has done remarkable visuals animations & rendering optimizations acting as the 3D artist. It took the Sponza model provided freely by Crytek on their website¹⁰ and used the 3DS Max exporter¹¹ to generate what you see.
• David Catuhe aka “deltakosh” and I have done the core part of the Babylon.js engine and also all the code for the demo (custom loader, special effects for the demo mode using fade to black post-processes etc.) as well as a new type of camera named “UniversalCamera” handling all type of inputs in a generic way.
• I’ve composed the music using Renoise and the EastWest Symphonic Orchestra sound bank. If you’re interested, I’ve already shared my workflow and process in the article on Composing the music for the World Monger Windows 8 game using the Renoise tracker & East West VST Plug-ins¹²
• Julien Moreau-Mathis helped us by building a new tool to help 3D artists finalize the job between the modelling tools (3DS Max, Blender) and the final result. For instance, Michel used it to test and tune various animated cameras and to inject particles into the scene.

If you wait until the end of the automatic sequence up to the “epic finish”, you’ll be automatically switched to the interactive mode. If you’d like to by-pass the demo mode, simply click on the camera icon or press A on your gamepad.

Offline first! ...

Xbox One enjoys the show ...

Hack The Scene With The Debug Layer ...

Challenges ...

Handling all inputs in a transparent way ...

Synchronizing the transitions with music ...

Handling Web Audio on iOS ...

...

So here we go! I hope that you’ve enjoyed a few insights behind the development of the demo. To learn more, read the complete source code of this demo on our GitHub. Obviously, everything is open sourced, and you can find main files on GitHub: index.js⁴⁴ and babylon.demo.ts⁴⁵.

Finally, I really hope you’ll be now even more convinced that the web is definitely a great platform for gaming! Stay tuned, as we’re working on new demos at this very moment, and hopefully they will be quite impressive as well.

This article is part of the web development series from Microsoft tech evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge⁴⁶ browser.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com⁴⁷, including F12 developer tools⁴⁸ — seven distinct, fully-documented tools to help you debug, test, and speed up your webpages. Also, visit the Edge blog⁴⁹ to stay updated and informed from Microsoft developers and experts.

Here’s a few more links you might find interesting:

• Babylon.js 2.4
• Babylon.js v2.0
• Ahoy Babylon.JS!
• "Learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript"
• Playing in the Babylon.js sandbox and editor
• WebGL to Windows 8
• BabylonJS + WebGL + Bing + Maps + 3D = BabylonBing
• Kinect Fusion powered 3D with WebGL, BabylonJS
• Taking the HTML5 Platformer and WebGL Game Projects Universal

Follow @CH9
Follow @coding4fun
Follow @gduncan411