Create a 3D game with WebGL and Babylon.js
David Rousset - @davroushttp://blogs.msdn.com/davrousGaming Technical Evangelist
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
Why building a WebGL 3D engine ?
The oldschool way: using 2D canvas
Build a 3D “Software” engine that only uses the CPU
Wireframe Rasterization Lights & Shadows Textures
Soft Engine
DEMONST
RATIO
N
Using WebGL directly
Requires a compatible browser:
A new context for the canvas:
canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});
Using WebGL directly
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
Physics Engine
Complete collisions engine
Handling touch devices
Performance first
Efficient shadersDo only what is REALLY
requiredScene partitioningFrustum / submeshes /
octreesComplete cache system
Update WebGL only when required
Creation Pipeline
.babylon
Online converter
.FBX
.OBJ
.FBX
.OBJ
Enough of your blah-blah!Give us some demos, demos & live
code!
Unleash babylon.js
DEMONST
RATIO
N
Third-parties demos
DEMONST
RATIO
N
Live code with babylon.js
DEMONST
RATIO
N
Questions ?@deltakosh / @davrous
