Today, we’re excited to announce a new partnership with Ubisoft to launch the first ever Assassin’s Creed title on the modern web with HTML5, 3D WebGL graphics, and JavaScript. The Assassin’s Creed Pirates web-based experience is available today for free play in five languages worldwide. New gameplay based on the popular iOS Assassin’s Creed Pirates game allows you to step into the shoes of Alonzo Batilla, a young captain, racing his ship through the Caribbean seas, evading mines and other hurdles, amidst searching for treasure.

This ACP game demo was developed using the Babylon.JS open source framework – today developers have a tool that makes it simpler to build interoperable 3D games like this one. And for adventurous players, we're announcing a new developer challenge: Build your own shader with Babylon.JS and you could win an Assassin’s Creed Collector’s Black Chest Edition and an Xbox One! It only takes a few minutes and you don’t really have to be a pro developer to play with code this easy. Complete contest details are below.

...

Built with Babylon.JS

Babylon.JS is an easy to use and powerful, open-source 3D engine built on WebGL, JavaScript, and TypeScript. Made by a team of four developer evangelists at Microsoft – David Catuhe, David Rousset, Michel Rousseau and Pierre Lagarde – it pushes the limits of 3D gaming on the web. With Babylon.JS, developers can quickly add collision detection, physics, lighting, camera angles, textures, effects, and new 3D scenes with minimal coding. Babylon.JS was developed from the ground up on top of adaptable shaders that are recompiled on the fly. It can run on many devices and allows you to use your own shaders (like the ocean shader in the ACP demo), without the burden of handling WebGL plumbing. You can get a complete tear-down on how ACP on the web was built and see more demos built with it at babylonjs.com or download the GitHub repo.

“I was amazed” says David Catuhe, one of the creators of Babylon.JS. “Without ever asking a question, Ubisoft developers were able to embrace the philosophy of Babylon.js. This proves that with the right tools you can create great games for the browser. I feel proud to see such talented developers use the Babylon.JS framework to create such a great experience!”

I’m going to tell you the impact of our recent “success story” around our WebGL open-source gaming framework, babylon.js and its official website: http://www.babylonjs.com. We’ll see how Microsoft Azure helped us to keep our site live! We’re going to see also the various optimizations we’ve put in place to limit as much as possible the output bandwidth from our servers to your browser. I think our recent story could be compared to what a startup could live when its solution suddenly become very successful or popular.

Introduction

Babylon.js is a personal project we’ve been working on for now 1 year. As it’s a personal (=== our time & money), we’ve hosted the website, textures & 3d scenes on a relatively cheap hosting solution (30€/months) using a small dedicated Windows/IIS machine. The project started in France but was quickly under the radar of several 3D & web specialists around the globe as well as some gaming studios. We were happy about the community’s feedbacks but the traffic on our website wasn’t crazy. And we were completely ok with that!

For instance, between 01/02/2014 and 30/04/2014, we had an average of 7K+ users/months with an average of 16K+ pages/viewed/months. Some of the events we’ve been speaking at have generated some interesting peaks:

But the experience on the website was still good enough. Loading our scenes wasn’t done at stellar speed but users weren’t complaining that much.

Game over for our little server! It slowly stopped working and the experience for our users was really bad. The IIS server was spending its time serving large static assets & images and the CPU usage was too high. As we were about to launch the Assassin’s Creed Pirates WebGL experience project running on babylon.js, it’s was time to switch to a more scalable professional hosting by using a cloud solution.

1 – Everything is static on our website. We currently don’t have any server-side code running. 2 – Our scenes (.babylon JSON files) & textures (.png or .jpeg) files could be very big (up to 100 MB). This means that we absolutely needed to activate gzip compression on our “.babylon” scene files. Indeed, in our case, the pricing is going to be indexed a lot on the outgoing bandwidth. 3 – Drawing into the WebGL canvas needs special security checks. You can’t load our scenes & textures from another server without CORS enabled for instance.

One year ago when we decided to sacrifice all of our spare time to create Babylon.js we had a really interesting discussion about using TypeScript as main development language.

At that time, TypeScript was not robust enough (even if we did some experiments) so we decided to use plain JavaScript language. But I am really excited to announce that we started the port of Babylon.js to TypeScript this weekend!

Before going further, here are some numbers you may need to correctly understand my explanations. Indeed Babylon.js is:

An average of 1 version per month

21 contributors

32 releases

365 commits (one per day )

14000+ lines of code

More than 120 files of code

More than 200 forks

A bandwidth of 1TB per month for the website

All my spare time (I cannot even remember the last time I went to see a movie)

1.3GB (Code and samples)

Let me explain you what the main reasons for this decision are.

Because it is transparent for users

TypeScript is a language that generates plain JavaScript files. The code produced follows all the JavaScript rules (the “good parts”) and thus is clean and modular (one file per class). You can export namespaces (modules) and to be honest most of the time the produced JavaScript is fairly the same as what we can do.

Developers that use Babylon.js will not be able to see the difference between previous version developed with JavaScript and new version developed using TypeScript.

Furthermore, we can reach more users who can be afraid by JavaScript. TypeScript is for instance a good way for C#, Java and all strong typed languages developers to start developing for the web.

Because Babylon.js is an open-source project

...

Because TypeScript is an open source project

...

Because tooling is awesome when working with a modern IDE

...

Because TypeScript is handy

...

Because of the future

The real power of TypeScript is its compilation. At the end of the day the goal is to produce JavaScript. Thanks to the compilation you can add new options to generated files without changing a line of your code

...

Call to action

We have just started porting our code so it is a bit too early for a post-mortem but I will write an article in two or three months about how things will have gone our 3D engine written using TypeScript.

In the meantime, if you want to learn more about TypeScript here are some useful pointers:

In this post we’ll see how we can create physics-enabled environments mixed with character animation for gaming using babylon.js and WebGL.

In previous posts, I showed how we can use babylon.js to create 3D Maps using Bing and share 3D Scans from Kinect. But the heart of babylon.js is all about games, and here we’ll talk about aspects of interactive, physics-based 3D games using the framework.

Skeletal Animation

Skeletal animation is used to animate meshes based on bones – such as the walking character animation shown here. Babylon.js supports skeletal animation, and will accept animations exported from Blender. When creating the animation for this demo, I needed separate animations for walking, kicking, jumping and standing. What I chose to do was just append all of these separate animations into a single group of 90 frames, which you can see in the image here.

...

Keyboard Input

In this demo, I used a simple means of tracking which keys were down, first by adding standard event handlers:

...

Virtual (Touch) Joysticks

If you happen to try the demo on a touch-enabled device, you can use the left side of the screen to control a virtual joystick for movement, and the tapping anywhere on the right side of the screen makes the character kick. This is made possible by using the virtual joystick class from the GameFX library, which is included as babylon.virtualJoystick.js in the babylon source.

We can create an instance of the joystick with:

...

Adding Physics

Babylon.js uses Cannon.js to support 3D Physics, and it makes it very easy to do so through imposters. For example, to add physics to our “beach balls,” we can use the SphereImposter in a call to setPhysicsState like so:

...

Getting Help and Support

If you choose to use babylon.js for your next project, here are some resources that can get you started.