You might have seen the news of how the Internet Explorer team and Ubisoft released the WebGL game, Assassin’s Creed Pirates?
The cool news, and the hook for this post, was how Babylon.JS, a WebGL Javascript 3D engine we're highlighted a number of times in the past.
Today we're highlighting a new of recent Babylon.JS posts, starting with...
Ahoy Matey! Internet Explorer and Ubisoft Launch Assassin’s Creed Pirates for the Web
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!”
Developer Contest – Build your own shader
...
[Click through for the details on the contest and more]
Why and how we migrated babylonjs.com to Microsoft Azure
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
Step 1: moving to Azure Web Sites & the Autoscale service
Step 2: moving assets into Azure Blob Storage, enabling CORS, gzip support & CDN
Enabling CORS on blob storage
Enabling gzip support on our blob storage
Enabling CDN
Step 3: using HTML5 IndexedDB to avoid re-downloading the assets
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.
However, recently, a cool guy decided to share our work on Hacker News: https://news.ycombinator.com/item?id=7748413 . We were really happy of such a news! But look at what happened on the site’s connections:
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.
But before reviewing our hosting choices, let’s briefly talk about the specifics of our engine & website:
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.
...
[Click through to read the entire thing]
Why we decided to move from plain JavaScript to TypeScript for Babylon.js
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:
Official site: http://www.TypeScriptlang.org/
Online playground: http://www.TypeScriptlang.org/Playground
Source code: http://TypeScript.codeplex.com/
Documentation: http://TypeScript.codeplex.com/documentation
And obviously, I urge you to think about doing the same thing if you have open source projects that use JavaScript!
[Click on through to read it all]
How about we see something get actually built with it? Andy Beaulieu does just that!
babylon.js: physics and character animation
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.
Babylon.js forums on HTML5 Game Devs – this is an awesome community of like-minded game devs using javascript frameworks such as babylon.
Babylon.js samples and source – if there is one thing babylon provides, it’s a lot of cool samples. Poking around through this code is invaluable in learning the ropes.
Babylon.js Wiki – full of some good tutorials to get started.
[Drive on through to see the source, get the demo link and more]
Some related posts you might find interesting;
"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