3D-Visualisierung im Web mit BabylonJS 28.07.2021

by Max Schulte

Slide 1

Slide 1 text

3D-Visualisierung im Web mit BabylonJS Webinar Max Schulte @MaxOSchulte Engineer / Consultant

Slide 2

Slide 2 text

Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 3

Slide 3 text

3D-Visualisierung im Web mit BabylonJS Webinar What to expect - Mindset of a 3D-Engine - BabylonJS - Use cases - Angular + BabylonJS integration - Live code Angular + BabylonJS And what not - BabylonJS deep dive - Angular basics 3D-Visualisierung im Web mit BabylonJS P

Slide 4

Slide 4 text

Forms Over Data 3D-Visualisierung im Web mit BabylonJS Webinar P

Slide 5

Slide 5 text

3D-Visualisierung im Web mit BabylonJS Webinar https://experience.arcgis.com/experience/478220a4c454480e823b17327b2bf1d4

Slide 6

Slide 6 text

http://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm

Slide 7

Slide 7 text

http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=d esignwall_skyline&sgt=tinted&ch1=2225 3D-Engine Talk

Slide 8

Slide 8 text

3D-Visualisierung im Web mit BabylonJS Webinar

Slide 9

Slide 9 text

3D-Visualisierung im Web mit BabylonJS Webinar

Slide 10

Slide 10 text

• Cross platform • Any device • Code once run everywhere • On location & remote planning and editing • Shareable with a simple URL • Easy integration web technology Web 3D benefits over native 3D 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 11

Slide 11 text

Just one of many possibilities Web-Native TypeScript 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 12

Slide 12 text

• Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 13

Slide 13 text

Can I Use - WebGL v1 28.07.2021 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 14

Slide 14 text

Can I Use - WebGL v2 28.07.2021 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 15

Slide 15 text

Can I Use - WebGPU v1 20.09.2020 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgpu 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 16

Slide 16 text

An app that … • combines Angular and BabylonJS • is interactive • works on different platforms and devices • uses native hardware (WebGL) https://github.com/thinktecture/webinar-3d- visualisierung-babylonjs-angular DEMO Demo Example App Try now! https://qrgo.page.link/ 15mwG 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 17

Slide 17 text

Clarifying keywords • GameObject (TransformNode) à Logical objects • Can hold visual objects and much more • The root of all possible things • Mesh à Visual objects • Scene (Stage) à holds all information • Engine à renders the Scene BabylonJS Babylonjs.com 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 18

Slide 18 text

How changes happen • Iterations (loop, render loop) • Fixed steps relative to each frame • Setup everything then modify something • Step by step, no reordering etc. BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 19

Slide 19 text

Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 20

Slide 20 text

BabylonJS - Angular Angular • UI • Application lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integration BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 21

Slide 21 text

Application Angular Components Directives Service BabylonJS Scene Engine Objects Browser Rendering Engine feed instructions update model Web APIs render 3D content WebGL (WebGPU) OS API Hardware View render HTML trigger function Architecture Overview (simplified) 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 22

Slide 22 text

CODE 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 23

Slide 23 text

Change Detection Angular • NgZone (ZoneJS) • Checks on every event Integration BabylonJS • Event-based communication • Events on every frame (60 FPS!) • Exclude BabylonJS from the NgZone à ngZone.runOutsideAngular( … ); • Stop zone.js to observe animation frame requests à (window as any).__Zone_disable_requestAnimationFrame = true; 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 24

Slide 24 text

Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D-Visualisierung im Web mit BabylonJS Webinar P

Slide 25

Slide 25 text

https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D-Visualisierung im Web mit BabylonJS Webinar

Slide 26

Slide 26 text

Summary 1. Extend your data visualization 2. 3D integration is different 3. On your everyday devices [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte