creating 3d worlds with webgl and babylon.js - codemotion.es
DESCRIPTION
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.TRANSCRIPT
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