http://blogs.msdn.com/davrous

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