3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt

Moderne Businessanwendungen und Web-Apps sind längst nicht mehr langweilig. In vielen Bereichen spielen UX und UI heute eine prägende Rolle. Es reicht oft nicht mehr aus, Daten einfach nur klassisch anzuzeigen, sie wollen ansprechend visualisiert werden – in 2D, 3D, Virtual Reality (VR) oder Augmented Reality (AR). State-Oft-The-Art 3D-Engines für das Web ermöglichen uns Entwicklern, komplexe Daten in einer ansprechenden und verständlichen Weise zu präsentieren: Cross-Plattform und gänzlich ohne Installationsprozess.

Mit dem gleichen Technologie-Stack erstellt wie die Web-App, greifen die verschiedenen Bestandteile reibungslos ineinander und unterstützen sich gegenseitig.

In diesem Workshop zeigt Max Marschall, wie Sie eine 3D-Engine nutzen und in Ihre Businessanwendung integrieren können. Anhand einer beispielhaften Integration in eine Angular Single Page Application (SPA) lernen Sie die Grundlagen, um Ihre Anwendung mit neuen Visualisierungen in Szene zu setzen.

Transcript

1. 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop Max Marschall @MaxOSchulte Engineer / Consultant
2. Max Marschall max.marschall@thinktecture.com h2ps://www.thinktecture.com/max-marschall @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
3. Forms Over Data 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
4. h2p://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
5. http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=designwall_skyline&s gt=tinted&ch1=2225 3D-Engine Talk
6. An app that … § combines Angular and BabylonJS § is interac8ve § works on different pla>orms and devices § uses na8ve hardware (WebGL) https://github.com/thinktecture/webinar-3d- visualisierung-babylonjs-angular DEMO Demo Example App Try now! https://qrgo.page.link/15 mwG 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
7. 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
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 na8ve 3D 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
9. Just one of many possibilities Web-Na1ve TypeScript 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
10. • Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine • Currently V5.x Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
11. Upcoming V5 • WebGPU support • Snapshot Rendering Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
12. Can I Use - WebGL v1 18.10.2022 • CAN I USE SCREENSHOT + DATE BabylonJS h2ps://caniuse.com/#feat=webgl 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
13. Can I Use - WebGL v2 18.10.2022 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
14. Can I Use - WebGPU 18.10.2022 BabylonJS https://caniuse.com/#feat=webgpu 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop BabylonJS WebGPU Comparison: https://www.youtube.com/watch?v=gKTQ3VWn0cU
15. 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 informa8on • Engine à renders the Scene BabylonJS Babylonjs.com 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
16. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
17. Mesh • Vertex • Vertices • Faces • Geometry • Instances • Clones BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
18. Material • Diffuse, Specular, Emissive, Ambient • Maps • Texture • Color BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
19. GameObjects • In BabylonJS: TransformNode • Create Groupings • Add Logic BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
20. How changes happen • Itera8ons (loop, render loop) • Fixed steps rela8ve to each frame • Setup everything then modify something • Step by step, no reordering etc. BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
21. BabylonJS - Angular Angular • UI • Applica8on lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integra8on BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
22. Application Angular Components Direc[ves 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 func[on Architecture Overview (simplified) 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
23. 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop CODING
24. Lifecycle • Different steps executed by the render loop • Sta8c execu8on order • Move from “manipulate it now” to “I instruct you to manipulate it at the correct 8me” mindset • see: Angular’s changeDetectorRef.markForCheck • Syncs the “state” with the “view” (physics not included) BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
25. Two Different Lifecycles Angular • DOM • Event Integra8on BabylonJS • Loop à e.g. dispose on next iteration • Different 8mings can cause synchroniza8on problems à Lifecycles should be separated à No dependency from BabylonJS to the Angular lifecycle / change detec8on cycle à “Add box to scene” becomes “Add box on next itera8on” 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
26. Change Detec:on Angular • NgZone (ZoneJS) • Checks on every event Integration BabylonJS • Event-based communica8on • 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 im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
27. Clear responsibilities • Separate contexts • Lifecycle hooks • Naming • Extend exis8ng BabylonJS classes • Scene • Mesh • TransformNode • Don’t mix (a mesh must not be a component) My integration key points 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
28. Composition over Inheritance • Change “behavior” of a Base • Flat hierarchy • Reusable and extendable Design Concept for Engine Objects 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
29. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
30. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
31. Summary Try now! 1. Extend your data visualization 2. 3D integration is different 3. On your everyday devices max.schulte@thinktecture.com h2ps://www.thinktecture.com/max-schulte @MaxOSchulte