ngf2014 - create a 3d game with webgl and babylon.js

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