3D-Visualisierung im Web mit BabylonJS 28.07.2021

Moderne Businessanwendungen sind schon lange nicht mehr langweilig: Daten wollen visualisiert werden und zwar verständlich und ansprechend. Genau dabei helfen Web-Grafik-Engines wie BabylonJS. 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.

Transcript

1. 3D-Visualisierung im Web mit BabylonJS Webinar Max Schulte @MaxOSchulte Engineer / Consultant
2. Good to know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar
3. 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
4. Forms Over Data 3D-Visualisierung im Web mit BabylonJS Webinar P
5. 3D-Visualisierung im Web mit BabylonJS Webinar https://experience.arcgis.com/experience/478220a4c454480e823b17327b2bf1d4
6. http://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm
7. http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=d esignwall_skyline&sgt=tinted&ch1=2225 3D-Engine Talk
8. 3D-Visualisierung im Web mit BabylonJS Webinar
9. 3D-Visualisierung im Web mit BabylonJS Webinar
10. • 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
11. Just one of many possibilities Web-Native TypeScript 3D-Visualisierung im Web mit BabylonJS Webinar
12. • 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar
20. 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
21. 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
22. CODE 3D-Visualisierung im Web mit BabylonJS Webinar
23. 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
24. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D-Visualisierung im Web mit BabylonJS Webinar P
25. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D-Visualisierung im Web mit BabylonJS Webinar
26. Summary 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