We'll see in this session how to create 3D HTML5 WebGL games for the web (IE11/Chrome/Firefox & Opera) as well as for some mobile ecosystems. For that, we’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub: https://github.com/BabylonJS/Babylon.js You’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, device orientation, 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 from scratch to better understand how to use this free engine.

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

2. Agenda
 Why building a WebGL 3D engine ?
 The old school way: Using the 2D canvas
 Using WebGL directly
 Using Babylon.js to create 3D apps and games
 Advanced features
 Handling touch devices
 Performance first
 Content Pipeline
 Demos, demos & live code
 From Blender to the browser with no line of code
 Loading a scene by code
 Third-parties demos
 Live code session

3. Whybuilding a WebGL 3D engine?

4. The oldschool way: using 2D canvas
Build a 3D “Software” engine that only uses the CPU
Wireframe Rasterization
Lights &
Shadows
Textures

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

7. UsingWebGL directly
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. UsingBabylon.js to create 3D apps & games

9. Howto 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!
To start Babylon.js, you’ve just need to create an engine object:
<script src="babylon.js"></script>
var engine = new BABYLON.Engine(canvas, true);

10. Advanced features
Offline support
IndexedDB
Network optimizations
Incremental loading
Physics Engine
Complete collisions
engine

11. Handlingtouch devices

12. Performance first
Efficient shaders
Do only what is REALLY required
Scene partitioning
Frustum / submeshes / octrees
Complete cache system
Update WebGL only when
required

13. Creation Pipeline
.babylonOnlineconverter
.FBX
.OBJ
.FBX
.OBJ

14. Enoughof yourblah-blah!
Giveus some demos, demos &live code!

18. @deltakosh / @davrous