Internet Explorer partnered with Ubisoft to launch the first ever Assassin’s Creed title on the web — built using Babylon.JS, an open source 3D engine. The web-based Assassin’s Creed Pirates is available for free play worldwide, in five languages. New gameplay based on the popular app 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.

Congratulations to Developer Challenge Winners!

Thank you to all the participants who sent in submissions built using the Babylon.JS shader editor for the pirate ship from Assassin’s Creed: Pirates. We were delighted to receive very unique and beautiful shaders, and we are posting some our favorites below.

From all the entrees, here are the top three winners selected by our panel of judges. The shaders had to score high on two criteria - efficiency of code and aesthetics.

Grand Prize Winner:
Silvio Mölter | Flying Dutchman Ghost Ship 

First and second runner-up:
Simon Ferquel | Misty Ship
Cory Bloyd | Sin City Ship

Other favorites:
Sofiane Benchaa | Quick Frost
Jérémy Bouny | Floating Ghost ship
Kamil Nowakowski | Reflections

The winners were selected by our esteemed panel of judges:

  • François Bodson, Studio Manager from Ubisoft
  • Christian Nasr, Engine Programmer from Ubisoft
  • David Catuhe, Senior Program Manager from Microsoft
  • Robby Ingebretsen (@ingebretsen‏), Creative Director from Pixel Labs.

Submissions closed on June 20, 2014.

Babylon.JS Shader EditorCyos1


Built with Babylon.JS

Babylon.JS is an easy to use, powerful, and open-source 3D engine built on WebGL, JavaScript, and TypeScript. Created 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 see more demos built with it at babylonjs.com or download the GitHub repo.

As you learn about Babylon.JS, keep in mind that WebGL solutions can also apply outside of the typical browser-based scenario. For instance, WebGL can be used to create games for Windows Store apps.

Guide to 3D

Getting started with Babylon.JS is easy, especially if you are familiar with 3D rendering concepts and software. Babylon.JS can even import scenes created in Blender via a free add on, with many feature entities supported.

Blender is a popular, free open source 3D graphics and animation software. You can download Blender at www.blender.org. There’s also the Sandbox for Babylon.JS, which allows you to create and test your 3D worlds right in your browser. See David Rousset's great tutorial on how to use it.

If you’re not accustomed to 3D graphics programming, it’s helpful to understand some basic concepts. A 3D rendered scene requires several elements at a minimum: an object to render, a camera to view the object and a light for the camera to be able to “see” the object.

Naturally, the more complex the world you create becomes, the more involved your 3D scene becomes. For instance, there are multiple lighting options such as point lights, spot lights, and directional lights. The objects themselves can consist of different textures with different materials applied to them. Each texture and material type adds richness to the objects in your world. For even more control, you can create your own custom shaders to control how the scene renders. To make even more convincing virtual worlds, Babylon.JS supports height maps and skyboxes to complete the illusion of reality.

Games, however, require more than just 3D graphics. Creating a compelling virtual world for gamers to play in requires more than just imagery. Games require collision detection to determine when objects collide and gamers demand a realistic simulation of the physics regarding these collisions. Fortunately, Babylon.JS includes a physics engine and collision detection.

As in the case with many web based solutions, end user bandwidth varies greatly and, if not taken into account, the user’s experience can also vary drastically. In order to mitigate this, Babylon.JS supports incremental loading of resources to cut down on initial loading time. To get further performance enhancements, resources can be cached locally via IndexedDB.

Since Babylon.JS runs inside of a browser, we can leverage some of the interesting features now being added to the DOM. We live in a world of mobile devices and many of these devices have sensors. Fortunately, this is something we can use to create an interesting experience with Babylon.JS to make the sensor input come alive. David Catuhe has an outstanding blog post on creating a little 3D game that bridges sensor input and 3D graphics. The game really touches upon some of the creative possibilities to be found in WebGL and Babylon.JS.

Pirates Tabs Rev2 Alpha

The Browser as a Console Contender

One of the more exciting aspects of HTML5 is the ability to create rich and engaging experiences that were once limited to native applications. With the new functionality added to the HTML standard, it is now possible to create gaming experiences beyond casual games. Enhancements made to Internet Explorer, such as hardware acceleration and touch first design, make it the ideal browser choice for running this new kind of browser based games.

I had a chance to speak with the developers of Babylon.JS who helped Ubisoft bring a demo of Assassins’ Creed Pirates, to learn more about their experience porting a taste of the game to the web. The below exchange also included representatives from Internet Explorer and Ubisoft.

This is a really amazing demo. Rich graphics, high frame rates, and an overall engaging experience. Best of all, it doesn’t require a plug-in and is cross-browser/cross-platform? What makes this possible?

WebGL makes this possible.

It provides a 3D rendering surface that runs in the browser, in a canvas element. WebGL enables developers to directly control and program the computer's GPU.

When you add in Babylon.JS to the equation, browser based gaming gets really exciting. Typically, browser based gaming has been confined to casual gaming, but now things really get exciting.

What exactly is Babylon.JS?

Babylon.JS is a 3D engine based on top of WebGL and JavaScript. It adds common game enabling features such as collision detection, sprites, and a physics engine.

It is completely open source and available to the community to use and extend.

Babylon.JS works on top of the existing WebGL standards, so any browser that supports WebGL will also support Babylon.JS. We wanted to maintain standards compliance to ensure that games running on it will work on as many devices and browsers as possible.

Is this all based on standards?

Yes. The IE team has done a lot of work (and updates!) to ensure that IE11 is a great gaming platform when it comes to graphics, sound and touch. Touch can be an integral part of the gaming experience.

Assassins Creed Pirates Race will run well on every modern browser, but it will run best in IE11.

Additionally, the IE team is working on more features to enable gaming - like the Gamepad API. (And babylon.js is about to support gamepads as well.)

See status.modern.ie for details on what's coming up in future IE updates.

What makes the browser a compelling platform for game developers?

The main selling point is that browser vendors are competing to make things better for web developers and, by extension, users.

When everyone agrees to support the standards, then the main differentiator becomes performance.  

That’s where you see the greatest improvements in the past few years in the browser space: performance. 

Having a 3D rendering engine running inside a browser, even a mobile browser, with such high frame rates and levels of detail, was unthinkable even a few years ago.

This was the type of experience once reserved only for native applications or browser based plug-ins. Now this is available in multiple browsers without the need to install any third party plugins or software.

You mentioned performance, what does IE11 do that other browsers do not?

In terms of graphics performance and security, the one big difference is that IE 11 will run on DirectX 11 -- the very newest runtime that give you great performance and capability.

If achieving this performance means giving web pages access to low level hardware, what about security?

Even though web developers have access to the GPU on the end users’ devices, that does not mean they have direct access to that hardware.

This is simply not just bolting on a GPU driver onto JavaScript. IE has translation and verification layers that act like a broker between the JavaScript code and what actually executes on the hardware.

In other words, the end users’ low level hardware is never unsafely exposed to a web page.

Additionally, Windows is a great environment for WebGL content. Windows prevents one app from hogging the GPU and freezing the system - most GPUs are not pre-emptible yet, so all apps have to fairly share GPU time. If one application hogs the GPU, the whole operating system will appear to be 'frozen'.

If a WebGL page schedules a huge rendering task that would cause problems for other apps, IE automatically switches to software rendering to prevent any problems. 

Defense in depth is a key philosophy on the IE team and you see that in our implementation of WebGL.

What about touch? How does IE make touch a first class citizen?

Touch is critical in mobile gaming and it’s important that touch be treated with the respect it deserves and the criticality that users demand.

There are two main high points to make note of in regards to the overall touch experience in IE. One is the overhaul of IE for versions 10 and 11, including the immersive versions that run in Windows 8.x. Second is hardware acceleration of pan and zoom.

In regards to the touch centric overhaul of IE, we made changes to make browsing any page a better touch first experience in IE from the swipe gesture to navigate forward and backward to smart targeting so that small text links work great with fat fingers.

Another feature worth noting is that our team’s Pointer events specification is now a W3C Candidate Recommendation for handling touch input in the browser.  Varying types of input devices (mouse, touch, stylus, etc.) trigger different types of events (mouse move, swipe, hover, etc.). Previously, there was an assortment of APIs web developers had to take into account. Now with Pointer Events, the process is streamlined and web developers can still differentiate experiences based on input mode with one API.  As of now, IE is the only shipping browser to fully support this specification.  Best of all, it’s coming soon to other browsers.

What was your biggest challenge bringing Assassins’ Creed Pirates to the browser?

The biggest challenge was actually porting the wave function that simulates ocean waves.  The movement of ships on the ocean simulates real conditions and provides such a key experience to our game. We felt that we couldn’t port the game over without this fundamental aspect to the gameplay.  Porting code that simulates the fluid dynamics of the ocean to JavaScript was the most difficult part.

Porting the game over to Babylon.JS was almost trivial, as Babylons.JS includes core game mechanics such as collision detection and a physics engine.

For games developers like ourselves, it’s very exciting to have such a powerful rendering engine in browsers that we can bring an AAA title to.

Really? What about importing the graphics and other assets from the native game?

We actually created our own methods to export our native 3D modeling formats over to Babylon.JS’ native format. Babylon.JS can import 3D models from Blender.

If we had used Blender to create our 3D models, that would have been an easy import process.

What about concerns about intellectual property given that everything is written in JavaScript?

That definitely was a concern and we spent a lot of time debating whether or not we should create this web experience using our branded assets over to the web.In the end, we made the decision that the benefits of eventually being among the first movers in the 3D browser game space far outweighed the perceived risks. Naturally, we still want to protect our intellectual property and will use tools such as obfuscation to protect our brand and property.

Scenarios Beyond Gaming 

Having a browser and device agnostic high performance 3D rendering engine opens up more than just gaming to the web.

Think of the educational scenarios. Students could learn history by walking through recreated versions of ancient cities or examine artifacts from their phone.

In terms of business use cases, data visualization could come alive on users’ phones, tablets, and PCs with no special software required.

Architects could share their building plans along with a 3D walkthrough of the completed project. They could solicit feedback more easily from customers and make changes while still in design mode.

The possibilities and opportunities for 3D on the web are endless.

Author Bio

Frank La Vigne, Senior Technical Evangelist, Microsoft

Frank La Vigne works on the Technology and Civic Engagement team at Microsoft connecting startups, technology influencers and policy makers with each other to build a more connected world. He blogs regularly on FranksWorld.com and vlogs regularly on Frank’s World TV (https://www.youtube.com/user/FranksWorldTV) and #DCTech Minute (https://www.youtube.com/user/DCTechMinute). You can find him on Twitter @tableteer

Co-author

Divya Kumar, Senior Product Marketing Manager, Internet Explorer 

Contributors

David Catuhe, Senior Program Manager, Internet Explorer
François Bodson, Studio Manager, Ubisoft
Frank Olivier, Senior Program Manager, Internet Explorer
Frédéric Peltier, Business Development Manager, Ubisoft
Jacob Rossi, Program Manager, Internet Explorer
Leonard Carpentier, Assistant Technical Producer, Ubisoft

Congratulations to Developer Challenge Winners!

Thank you to all the participants who sent in submissions built using the Babylon.JS shader editor for the pirate ship from Assassin’s Creed: Pirates. We were delighted to receive very unique and beautiful shaders, and we are posting some our favorites below.

From all the entrees, here are the top three winners selected by our panel of judges. The shaders had to score high on two criteria - efficiency of code and aesthetics.

Grand Prize Winner:
Silvio Mölter | Flying Dutchman Ghost Ship 

First and second runner-up:
Simon Ferquel | Misty Ship
Cory Bloyd | Sin City Ship

Other favorites:
Sofiane Benchaa | Quick Frost
Jérémy Bouny | Floating Ghost ship
Kamil Nowakowski | Reflections
Amine Daï | Wavy