WebGL Meetup - GDC 2019

Gary Hsu@bghgary

B a b y l o n . j s a t a G l a n c e

• 3D engine built on top of WebGL (1 and 2)

• Open source (Apache 2 license)

• Community driven

• Written in TypeScript

• Used by a lot of web apps• Office, SharePoint Spaces, OneDrive, Bing, Visio

• Adobe, Samsung, Toyota, Sony Electronics, US Army, Ubisoft

https://www.babylonjs.com

SharePoint Spaces

https://www.exploresharepointspaces.com

hapticmedia Clients Projects

https://hapticmedia.fr/projets-clients

Azure Media Services

https://azure.microsoft.com/en-us/services/media-services/media-player

axeon 360

https://axeon-360.com

https://axeon.fr/CLIENT/INFIME/Virtual_Staging_V2

Adobe Dimension

https://dimension.adobe.com

8th Wall

https://8thwall.com

P r o d u c t s a n d D e m o s

4 . 0 R e l e a s e

What’s New

• New Inspector (Deltakosh)

• PBR Next (Sebavan)

• Energy Conservation

• Clear Coat

• Sheen

• ESNext Modules (Sebavan)

• AmmoJS (TrevorDev)

• Soft bodies (JohnK)

• Optimizations (Deltakosh, barroij, TrevorDev)

• WEBGL_multiview

• KHR_parallel_shader_compile

D r a f t A P I s & E x t e n s i o n s

WebXR

D r a f t A P I & E x t e n s i o n s – W E B G L _ m u l t i v i e w

https://playground.babylonjs.com/#CXREM7#1

Multiview Disabled Multiview Enabled

D r a f t A P I & E x t e n s i o n s – W E B G L _ m u l t i v i e w

24.1 ms 15.9 ms

D r a f t A P I & E x t e n s i o n s – KHR_parallel_shader_compile

https://playground.babylonjs.com/#WHXBFS#4

Disabled Enabled

D r a f t A P I & E x t e n s i o n s – KHR_parallel_shader_compile

74.6 ms 47.8 ms

D e b u g g i n g To o l s

Spector.jsglTF Debugging in

Visual Studio Code

Babylon.js

https://www.babylonjs.com

https://doc.babylonjs.com/features/es6_support

WebGL Draft Extensions

https://www.khronos.org/registry/webgl/extensions/WEBGL_multiview

https://www.khronos.org/registry/webgl/extensions/KHR_parallel_shader_compile

Spector.js

https://spector.babylonjs.com

https://github.com/BabylonJS/Spector.js/blob/master/documentation/extension.md#shader-editor

glTF Debugging in Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=cesium.gltf-vscode

https://medium.com/@babylonjs/gltf-debugging-in-visual-studio-code-a89805bda3cd

R e s o u r c e s