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
Why building a WebGL 3D engine ?
The riseof GPUs
Hardware acceleratedrendering:
2D Canvas, CSS3 animations
Accelerated 3D with WebGL
H264 & JPG hardware decoding
Using WebGLdirectly
Requires a compatible browser or device:
A new context for the canvas:
canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});
Using WebGLdirectly
WebGL is a low level API
Need to handle everythingexcept the rendering:
Shaders code (loading, compilation) Geometry creation, topology, transfer Shaders variables management Texture and resources management Render loop
Using Babylon.js to create 3D apps & games
How to use Babylon.js ?
Open source project (Available on Github)
http://www.babylonjs.comhttps://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);
Advanced features
Offline supportIndexedDB
Network optimizationsIncremental loading
Blender & 3DS Max exporters
Design & render +babylonjs.com/sandbox
Complete collisions and physics engine
Advanced features
Smart shaders engine and postprocesses
Device Orientation API and Oculus Rift support
Advanced texture support (Bump, DDS)
Touch, Gamepad &virtual joysticks
Handling touchdevices
Creation Pipeline
.babylon
On
line/o
ffline
con
verter
.FBX
.OBJ
.FBX
.OBJ
Enough of your blah-blah!Give us some demos, demos & code!
Roadmap for v2
• Web Audio
• Scene Optimizer
• LOD
• Unity Exporter
• Procedural Textures
• Asm.js & simd.js
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: @iedevchatand Babylon.js developers: @deltakosh & @davrous
@deltakosh / @davrous
