Embed Size (px)
DESCRIPTION
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.
Citation preview
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
