Unleashing WebGL & WebAudio with babylon.js
-
Upload
davrous -
Category
Technology
-
view
1.252 -
download
6
Transcript of Unleashing WebGL & WebAudio with babylon.js
![Page 1: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/1.jpg)
![Page 2: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/2.jpg)
![Page 3: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/3.jpg)
jQuery UK 2015#babylonjs
Babylon.js ?
Free & open source project (Apache 2 license): https://github.com/babylonjs/babylon.js
Written in TypeScript
Our philosophy?
Simple to use
High performance
Run everywhere
WebGL. simple. powerful.
![Page 4: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/4.jpg)
jQuery UK 2015#babylonjs
Advanced features
Offline supportIndexedDB
Network optimizationsIncremental loading
Blender, 3DS Max & Unityexporters
Design & render +babylonjs.com/sandbox
Complete collisions and physics engine
![Page 5: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/5.jpg)
jQuery UK 2015#babylonjs
Advanced features
Smart shaders engine and postprocesses
Complete Web Audioengine
Advanced texture support (Bump, DDS)
Touch, Gamepad, Oculus &virtual joysticks
![Page 6: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/6.jpg)
jQuery UK 2015#babylonjs
Handling touch devicesOne event to rule them all!
![Page 7: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/7.jpg)
![Page 8: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/8.jpg)
jQuery UK 2015#babylonjs
Ok, let’s restart the engine from the beginning
![Page 9: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/9.jpg)
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!
![Page 10: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/10.jpg)
![Page 11: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/11.jpg)
#babylonjs
Working with 3D artists
![Page 12: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/12.jpg)
![Page 13: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/13.jpg)
![Page 14: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/14.jpg)
![Page 15: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/15.jpg)
![Page 16: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/16.jpg)
![Page 17: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/17.jpg)
jQuery UK 2015#babylonjs
Creation PipelineFrom 3D tooling to WebGL using 0 line of code!
.babylon
offlin
e
con
verte
r
.FBX
.OBJ
.FBX
.OBJ
![Page 18: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/18.jpg)
![Page 19: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/19.jpg)
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
![Page 20: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/20.jpg)
![Page 21: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/21.jpg)
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
![Page 22: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/22.jpg)
Useful links
What we’re working on in Internet Explorer: status.modern.ie• like Web Audio, Media Capture, ES6 features, etc.
Visit http://modern.ie 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 www.babylonjs.com• and try some tutorials via our playground: www.babylonjs.com/playground
Contact the IE Developer Relations team on twitter: @iedevchatand Babylon.js developers: @deltakosh & @davrous
![Page 23: Unleashing WebGL & WebAudio with babylon.js](https://reader031.fdocuments.in/reader031/viewer/2022020110/55a63de21a28ab70778b4742/html5/thumbnails/23.jpg)
www.babylonjs.com
#babylonjs
@deltakosh
@davrous
@rousseau_michel