BABYLON.JS
Unleash 3Dgamesforthe WEB
davca@microsoft.com - @deltakosh - http://aka.ms/davca
DAVIDCATUHE
Senior ProgramManager –IE/Open Web Standards
Developer ...
FIRSTCONTACT
Hello worldBabylon.js
LEARN AND EXPERIMENT
Playground
CREATE YOUROWN SHADER
CYOS
CREATING ASSETS
Using Blender
PLAYING WITH INPUT
Touch
Camera based on
pointer events
Device Orientation
Camera based on
Device Orientation
API
Virtual ...
UNIVERSALAPP
Creating Windows andWindows Phone with Babylon.js
ABOUTASSASSIN’S CREED PIRATESRACE
UbiSoft used Babylon.js to create a complete racinggame forthe web
Contest for developer...
BABYLON.JS FEATURES
1 Easy to use
• Simplicity as a foundation
• Minimal amount of code
• Pure JavaScript
• Open-source
• ...
BABYLON.JS TOOLS
1 Playground
Learn and experiment Babylon.js in your
browser:
http://www.babylonjs.com/playground
For sha...
USEFUL LINKS
http://www.babylonjs.com
http://www.babylonjs.com/playground
http://www.babylonjs.com/cyos
https://github.com...
THANK
YOU!
Upcoming SlideShare
Loading in …5
×

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

1,244 views

Published on

Babylon.js is an open-source project built with simplicity in mind in order to help web developers creating 3D games. During this session, you will discover how simple it can be to play with 3D without having to deal with WebGL plumbing!

Published in: Software, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,244
On SlideShare
0
From Embeds
0
Number of Embeds
253
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Create a simple project
    Add reference to Babylon.js
    Start with a really simple scene (camera, light, sphere)
    Then add a material and a bump texture
  • Select code from Playground and copy/paste to previous page
  • http://babylonjs.com/cyos/acpr/#OHRBR#24

    http://babylonjs.com/cyos/acpr/#GWJ6S#1
  • Create small scene with collisions and physics in Blender
    Use it in sandbox
  • Exemple de camera
  • Copy/paste code from playground (load skull) to page
  • Unleash 3D games with Babylon.js - JSConf 2014 talk

    1. 1. BABYLON.JS Unleash 3Dgamesforthe WEB
    2. 2. davca@microsoft.com - @deltakosh - http://aka.ms/davca DAVIDCATUHE Senior ProgramManager –IE/Open Web Standards Developer Experience and Evangelism 2
    3. 3. FIRSTCONTACT Hello worldBabylon.js
    4. 4. LEARN AND EXPERIMENT Playground
    5. 5. CREATE YOUROWN SHADER CYOS
    6. 6. CREATING ASSETS Using Blender
    7. 7. 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
    8. 8. UNIVERSALAPP Creating Windows andWindows Phone with Babylon.js
    9. 9. ABOUTASSASSIN’S CREED PIRATESRACE UbiSoft used Babylon.js to create a complete racinggame forthe 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/
    10. 10. 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
    11. 11. BABYLON.JS TOOLS 1 Playground Learn and experiment Babylon.js in your browser: http://www.babylonjs.com/playground For shaders: http://www.babylonjs.com/cyos 2 Sandbox Simply 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/
    12. 12. 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
    13. 13. THANK YOU!

    ×