Unleashing WebGL & WebAudio with babylon.js

23

Transcript of Unleashing WebGL & WebAudio with babylon.js

Page 1: Unleashing WebGL & WebAudio with babylon.js
Page 2: Unleashing WebGL & WebAudio with babylon.js
Page 3: Unleashing WebGL & WebAudio with babylon.js

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

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

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

jQuery UK 2015#babylonjs

Handling touch devicesOne event to rule them all!

Page 7: Unleashing WebGL & WebAudio with babylon.js
Page 8: Unleashing WebGL & WebAudio with babylon.js

jQuery UK 2015#babylonjs

Ok, let’s restart the engine from the beginning

Page 9: Unleashing WebGL & WebAudio with babylon.js

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
Page 11: Unleashing WebGL & WebAudio with babylon.js

#babylonjs

Working with 3D artists

Page 12: Unleashing WebGL & WebAudio with babylon.js
Page 13: Unleashing WebGL & WebAudio with babylon.js
Page 14: Unleashing WebGL & WebAudio with babylon.js
Page 15: Unleashing WebGL & WebAudio with babylon.js
Page 16: Unleashing WebGL & WebAudio with babylon.js
Page 17: Unleashing WebGL & WebAudio with babylon.js

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
Page 19: Unleashing WebGL & WebAudio with babylon.js

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
Page 21: Unleashing WebGL & WebAudio with babylon.js

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

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

www.babylonjs.com

#babylonjs

@deltakosh

@davrous

@rousseau_michel