Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unleashing WebGL & WebAudio with babylon.js


Published on

During this session, we will see how, thanks to babylon.js, we can easily create and use 3D content associated with sounds directly with JavaScript. We will also see how to interact with DCC tools like Blender or 3DS Max to work with 3D designer. With simplicity in mind we will be able to use complex topics like collisions, physics or even spatial sound with the minimal amount of code!

#jquk 2015

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Unleashing WebGL & WebAudio with babylon.js

  1. 1. jQuery UK 2015#babylonjs Babylon.js ? Free & open source project (Apache 2 license): Written in TypeScript Our philosophy? Simple to use High performance Run everywhere WebGL. simple. powerful.
  2. 2. jQuery UK 2015#babylonjs Advanced features Offline support IndexedDB Network optimizations Incremental loading Blender, 3DS Max & Unity exporters Design & render + Complete collisions and physics engine
  3. 3. jQuery UK 2015#babylonjs Advanced features Smart shaders engine and postprocesses Complete Web Audio engine Advanced texture support (Bump, DDS) Touch, Gamepad, Oculus & virtual joysticks
  4. 4. jQuery UK 2015#babylonjs Handling touch devices One event to rule them all!
  5. 5. jQuery UK 2015#babylonjs Ok, let’s restart the engine from the beginning
  6. 6. jQuery UK 2015#babylonjs Learning Babylon.js using the playground • Get sample code • Try and experiment • Share with friends • Learn by reading examples The power of TypeScript!
  7. 7. #babylonjs Working with 3D artists
  8. 8. jQuery UK 2015#babylonjs Creation Pipeline From 3D tooling to WebGL using 0 line of code! .babylonoffline converter .FBX .OBJ .FBX .OBJ
  9. 9. jQuery UK 2015#babylonjs Babylon.js audio engine Based on Web Audio Supports ambient, omnidirectional or directional 3D sound using linear attenuation by default Managed by code or by loading our .babylon format Supported by our 3DS Max exporter (Blender & Unity to come) Simplicity again as a foundation
  10. 10. jQuery UK 2015#babylonjs Debug layer Draw calls Time spent per feature Number of objects Number of active vertices Are you GPU / CPU locked? User marks + F12 Tool to help you reviewing performance issues
  11. 11. Useful links What we’re working on in Internet Explorer: • like Web Audio, Media Capture, ES6 features, etc. Visit to find ways to test IE11 • via free VMs or 3 months of BrowserStack for free • even on your lovely Mac! Play with Babylon.js demos on • and try some tutorials via our playground: Contact the IE Developer Relations team on twitter: @iedevchat and Babylon.js developers: @deltakosh & @davrous
  12. 12. #babylonjs @deltakosh @davrous @rousseau_michel