SlideShare a Scribd company logo
1 of 13
BABYLON.JS
Unleash 3Dgamesforthe WEB
davca@microsoft.com - @deltakosh - http://aka.ms/davca
DAVIDCATUHE
Senior ProgramManager –IE/Open Web Standards
Developer Experience and Evangelism
2
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 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
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 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 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/
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!

More Related Content

What's hot

Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
Joseph Labrecque
 

What's hot (11)

WebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platformWebVR, not just Holograms in the web but powerful platform
WebVR, not just Holograms in the web but powerful platform
 
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
Building GPU-Accelerated Mobile Application Interfaces with Starling and Feat...
 
Achieving Scale with HoloLens and BIM: Designing for interactions with large ...
Achieving Scale with HoloLens and BIM: Designing for interactions with large ...Achieving Scale with HoloLens and BIM: Designing for interactions with large ...
Achieving Scale with HoloLens and BIM: Designing for interactions with large ...
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 
Xamarin Sqlite Performance
Xamarin Sqlite PerformanceXamarin Sqlite Performance
Xamarin Sqlite Performance
 
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
 
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
【Unite 2017 Tokyo】NVIDIA Gameworks アップデートおよびAnselとVRWorksの紹介
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
 
Josh Carpenter (Google): ARCore: Augmented Reality at Android scale
Josh Carpenter (Google): ARCore: Augmented Reality at Android scaleJosh Carpenter (Google): ARCore: Augmented Reality at Android scale
Josh Carpenter (Google): ARCore: Augmented Reality at Android scale
 
Sceneform SDK
Sceneform SDKSceneform SDK
Sceneform SDK
 

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

Tri droid web development on android
Tri droid   web development on androidTri droid   web development on android
Tri droid web development on android
Brandon Smith
 
Introduce coco2dx with cookingstar
Introduce coco2dx with cookingstarIntroduce coco2dx with cookingstar
Introduce coco2dx with cookingstar
ozlael ozlael
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
Robert Nyman
 

Similar to Unleash 3D games with Babylon.js - JSConf 2014 talk (20)

Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVR
 
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the BrowserScotland JS 2016 Keynote: The VR Web and the Future of the Browser
Scotland JS 2016 Keynote: The VR Web and the Future of the Browser
 
2021 02 13 CodeGen Verona - Let’s code a drone to follow faces syncing everyt...
2021 02 13 CodeGen Verona - Let’s code a drone to follow faces syncing everyt...2021 02 13 CodeGen Verona - Let’s code a drone to follow faces syncing everyt...
2021 02 13 CodeGen Verona - Let’s code a drone to follow faces syncing everyt...
 
Using babylon js to create apps & games for all web gl devices
Using babylon js to create apps & games for all web gl devicesUsing babylon js to create apps & games for all web gl devices
Using babylon js to create apps & games for all web gl devices
 
Global Azure AI Tour Buenos Aires Argentina, Drones and AI
Global Azure AI Tour Buenos Aires Argentina, Drones and AIGlobal Azure AI Tour Buenos Aires Argentina, Drones and AI
Global Azure AI Tour Buenos Aires Argentina, Drones and AI
 
Getting started with Unity and AR/VR for the .NET developer... Reloaded!
Getting started with Unity and AR/VR for the .NET developer... Reloaded!Getting started with Unity and AR/VR for the .NET developer... Reloaded!
Getting started with Unity and AR/VR for the .NET developer... Reloaded!
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
Philipp Nagele (CTO, Wikitude) An Insider Deep-Dive into the Wikitude SDK
Philipp Nagele (CTO, Wikitude) An Insider Deep-Dive into the Wikitude SDK Philipp Nagele (CTO, Wikitude) An Insider Deep-Dive into the Wikitude SDK
Philipp Nagele (CTO, Wikitude) An Insider Deep-Dive into the Wikitude SDK
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SKJavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
JavaScript Revolution - 5/Nov/13 - PrDC Saskatoon, SK
 
Tri droid web development on android
Tri droid   web development on androidTri droid   web development on android
Tri droid web development on android
 
Web Development on Android
Web Development on AndroidWeb Development on Android
Web Development on Android
 
Java 8 for Tablets, Pis, and Legos
Java 8 for Tablets, Pis, and LegosJava 8 for Tablets, Pis, and Legos
Java 8 for Tablets, Pis, and Legos
 
Introduce coco2dx with cookingstar
Introduce coco2dx with cookingstarIntroduce coco2dx with cookingstar
Introduce coco2dx with cookingstar
 
Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
 

Recently uploaded

CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
anilsa9823
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
anilsa9823
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 

Recently uploaded (20)

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 

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

Editor's Notes

  1. 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
  2. Select code from Playground and copy/paste to previous page
  3. http://babylonjs.com/cyos/acpr/#OHRBR#24 http://babylonjs.com/cyos/acpr/#GWJ6S#1
  4. Create small scene with collisions and physics in Blender Use it in sandbox
  5. Exemple de camera
  6. Copy/paste code from playground (load skull) to page