We'll see in this session how to create 3D HTML5 WebGL games for the desktop & mobile web. For that, I’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub. It has been recently used by Ubisoft for the Assassin’s Creed Pirates web experience. We’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, virtual joysticks, gamepad, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript. We'll build a simple game to better understand how to use this free engine.

1. http://blogs.msdn.com/davrous

3. Agenda
 Why building a WebGL 3D engine ?
 Using Babylon.js to create 3D apps and games
 Discovering the basics
 Advanced features
 Handling touch devices & Performance first
 Content Pipeline
 Demos, demos & some code
 From Blender/3DS Max to the browser with no line of code
 Loading a scene by code
 Third-parties demos
 Code session

4. Why building a WebGL 3D engine ?

5. The riseof GPUs
Hardware accelerated
rendering:
2D Canvas, CSS3 animations
Accelerated 3D
with WebGL
H264 & JPG hardware
decoding

6. UsingWebGLdirectly
Requires a compatible browser or device:
A new context for the canvas:
canvas.getContext("webgl", { antialias: true}) ||
canvas.getContext("experimental-webgl", { antialias: true});

7. UsingWebGLdirectly
WebGL is a low level API
Need to handle everything
except the rendering:
 Shaders code (loading, compilation)
 Geometry creation, topology, transfer
 Shaders variables management
 Texture and resources management
 Render loop

8. Using Babylon.js to create 3D apps & games

9. How to use Babylon.js ?
Open source project (Available on Github)
http://www.babylonjs.com
https://github.com/babylonjs/babylon.js
How to use it? Include one file and you’re ready to go!
<script src="babylon.js"></script>
To start Babylon.js, you’ve just need to create an engine object:
var engine = new BABYLON.Engine(canvas, true);

11. Advancedfeatures
Offline support
IndexedDB
Network optimizations
Incremental loading
Blender & 3DS Max
exporters
Design & render +
babylonjs.com/sandbox
Complete collisions and
physics engine

12. Advancedfeatures
Smart shaders engine and
postprocesses
Device Orientation API and
Oculus Rift support
Advanced texture support
(Bump, DDS)
Touch, Gamepad &
virtual joysticks

13. Handling touchdevices

15. Creation Pipeline
.babylon
Online/offline
converter
.FBX
.OBJ
.FBX
.OBJ

16. Enough of your blah-blah!
Give us some demos, demos & code!

20. Roadmap for v2
• Web Audio
• Scene Optimizer
• LOD
• Unity Exporter
• Procedural Textures
• Asm.js & simd.js

21. Useful links
What we’re working on in Internet Explorer: status.modern.ie
• like Web Audio, Media Capture, ES6 features, etc.
Visit http://modern.ie to find ways to test IE11
• http://remote.modern.ie works on Windows, Mac, iOS & Android!
Play with Babylon.js demos on www.babylonjs.com
• and try some tutorials via our playground: www.babylonjs.com/playground
Contact the IE Developer Relations team on twitter: @iedevchat
and Babylon.js developers: @deltakosh & @davrous

22. @deltakosh / @davrous