Unleash 3D games with Babylon.js - JSConf 2014 talk

BABYLON.JSUnleash 3D games for the WEB

[email protected] - @deltakosh - http://aka.ms/davca

DAVIDCATUHESenior Program Manager – IE / Open Web StandardsDeveloper Experience and Evangelism

2

FIRST CONTACTHello world Babylon.js

LEARN AND EXPERIMENTPlayground

CREATE YOUR OWN SHADERCYOS

CREATING ASSETSUsing Blender

PLAYING WITH INPUT

Touch

Camera based on pointer events

Device Orientation

Camera based on Device Orientation

API

Virtual Joysticks

Using pointer events, this camera

generates two joysticks on top of

the scene

Anaglyph

Use this camera with Red/Green glasses

Oculus

Control camera orientation with

Oculus Rift device

UNIVERSAL APPCreating Windows and Windows Phone with Babylon.js

ABOUT ASSASSIN’S CREED PIRATES RACEUbiSoft used Babylon.js to create a complete racing game for the web

Contest for developers

Create a shader for the pirate ship at

http://www.babylonjs.com/cyos/acpr

Submit your entry by June 20, 2014

http://race.assassinscreedpirates.com/

BABYLON.JS FEATURES

1 Easy to use• Simplicity as a foundation• Minimal amount of code• Pure JavaScript• Open-source• Optimizations engines (Octree, clipping,

offline mode)

2 Advanced shaders• Smart shaders• Per-pixel lighting• Video / dynamic textures• Bump• Shadows• Etc..

3 Collisions / physics engine• Complete collisions engine• Physics drivers (cannon.js)

4 And so many more• Oculus Rift / Touch / Device Orientation • Local cache using IDB• Network optimizations with incremental loading• Particles• Mirrors• Skyboxes• Postprocesses• Sprites

BABYLON.JS TOOLS

1 PlaygroundLearn and experiment Babylon.js in your browser:http://www.babylonjs.com/playground

For shaders: http://www.babylonjs.com/cyos

2 SandboxSimply test your scene with drag’n’drop:http://www.babylonjs.com/sandbox

3 Exporters• Blender• 3DS Max (thanks to UbiSoft)• FBX converter• OBJ converter• Collada converter

4 WIKI• https://github.com/BabylonJS/Babylon.js• Tutorials• Documentation• Forum:

http://www.html5gamedevs.com/forum/16-babylonjs/

USEFUL LINKS

http://www.babylonjs.com

http://www.babylonjs.com/playground

http://www.babylonjs.com/cyos

https://github.com/BabylonJS/Babylon.js/wiki

http://www.html5gamedevs.com/forum/16-babylonjs

THANK

YOU!

Unleash 3D games with Babylon.js - JSConf 2014 talk

Software

Transcript of Unleash 3D games with Babylon.js - JSConf 2014 talk