- Posted: May 28, 2014 at 6:00AM
- 10,720 views
You might have seen the news of how the Internet Explorer team and Ubisoft released the WebGL game, Assassin’s Creed Pirates?
Today we're highlighting a new of recent Babylon.JS posts, starting with...
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
“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
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.
- Step 1: moving to Azure Web Sites & the Autoscale service
- Step 2: moving assets into Azure Blob Storage, enabling CORS, gzip support & CDN
- Step 3: using HTML5 IndexedDB to avoid re-downloading the assets
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.
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.
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
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
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
How about we see something get actually built with it? Andy Beaulieu does just that!
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 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.
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:
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 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.
Some related posts you might find interesting;