3D Web - BabylonJS und Angular im Tandem Flug

Moderne Businessanwendungen sind alles andere als langweilig: Daten wollen verständlich und ansprechend visualisiert werden.

Web-Grafik-Engines wie BabylonJS unterstützen uns genau dabei. Sie ermöglichen, 2D-, 3D-, Virtual- und Augmented-Reality-Inhalte verständlich darzustellen. Somit lassen sich unter anderem digitale Konzepte visualisieren, konfigurieren und testen – Cross-Plattform und performant.

In diesem Vortrag zeigt Max Schulte, wie man BabylonJS und Angular beispielhaft integrieren kann, sodass beide Technologien ihr volles Potential im Tandem entfalten können.

Anhand von Live-Coding lernen die Teilnehmenden, wie sie eine Grafik-Engine selbst integrieren und Ihre Ziele erreichen können.

Transcript

1. 3D Web - BabylonJS und Angular im Tandem Flug Session Max Schulte @MaxOSchulte Engineer / Consultant
2. Forms Over Data 3D Web - BabylonJS und Angular im Tandem Flug Session
3. http://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm 3D Web - BabylonJS und Angular im Tandem Flug
4. http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=designwall_skyline&s gt=tinted&ch1=2225 3D-Engine Talk
5. Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D Web - BabylonJS und Angular im Tandem Flug Session
6. 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/15 mwG 3D Web - BabylonJS und Angular im Tandem Flug Session
7. 3D Web - BabylonJS und Angular im Tandem Flug Session
8. • 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 Web - BabylonJS und Angular im Tandem Flug Session
9. Web-Native TypeScript 3D Web - BabylonJS und Angular im Tandem Flug Session
10. • Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine • Currently V4.x • V5 • WebGPU support • Snapshot Rendering BabylonJS 3D Web - BabylonJS und Angular im Tandem Flug Session
11. Can I Use - WebGL v1 23.06.2022 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl 3D Web - BabylonJS und Angular im Tandem Flug Session
12. Can I Use - WebGL v2 23.06.2022 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D Web - BabylonJS und Angular im Tandem Flug Session
13. Can I Use - WebGPU 23.06.2022 BabylonJS https://caniuse.com/#feat=webgpu 3D Web - BabylonJS und Angular im Tandem Flug Session
14. 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 Web - BabylonJS und Angular im Tandem Flug Session
15. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D Web - BabylonJS und Angular im Tandem Flug Session
16. BabylonJS - Angular Angular • UI • Application lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integration BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D Web - BabylonJS und Angular im Tandem Flug Session
17. 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 Web - BabylonJS und Angular im Tandem Flug Session
18. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session CODE
19. Lifecycle • Different steps executed by the render loop • Static execution order • Move from “manipulate it now” to “I instruct you to manipulate it at the correct time” mindset • see: Angular’s changeDetectorRef.markForCheck • Syncs the “state” with the “view” (physics not included) BabylonJS 3D Web - BabylonJS und Angular im Tandem Flug Session
20. Two Different Lifecycles Angular • DOM • Event Integration BabylonJS • Loop à e.g. dispose on next iteration • Different timings can cause synchronization problems à Lifecycles should be separated à No dependency from BabylonJS to the Angular lifecycle / change detection cycle à “Add box to scene” becomes “Add box on next iteration” 3D Web - BabylonJS und Angular im Tandem Flug Session
21. 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 Web - BabylonJS und Angular im Tandem Flug Session
22. Clear responsibilities • Separate contexts • Lifecycle hooks • Naming • Extend existing BabylonJS classes • Scene • Mesh • TransformNode • Don’t mix (a mesh must not be a component) My integration key points 3D Web - BabylonJS und Angular im Tandem Flug Session
23. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D Web - BabylonJS und Angular im Tandem Flug Session
24. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D Web - BabylonJS und Angular im Tandem Flug Session
25. Summary Try now! https://qrgo.page.link/15 mwG 1. Extend your data visualization 2. 3D integration is different 3. On your everyday devices max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte