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

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 https://www.thinktecture.com/max-marschall @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and Babylon.js 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. http://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 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 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 native 3D 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
9. Just one of many possibilities Web-Native 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. V5 • WebGPU support • Snapshot Rendering Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
12. Upcoming V6 Announcements & Rumors • Screen Reader Support • AR Marker Tracking • Included Physics • Texture Decals • GUI Editor • Fluid Rendering • Performance Priority Mode Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
13. Can I Use - WebGL v1 • CAN I USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
14. Can I Use - WebGL v2 • CAN I USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl2 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
15. Can I Use - WebGPU 21.03.2023 Babylon.js https://caniuse.com/#feat=webgpu 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop Babylon.js WebGPU Comparison: https://www.youtube.com/watch?v=gKTQ3VWn0cU
16. 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 Babylon.js Babylonjs.com 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
17. Playground example https://www.babylonjs-playground.com/#TAZ2CB Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
18. Mesh • Vertex • Vertices • Faces • Geometry • Instances • Clones Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
19. Material • Diffuse, Specular, Emissive, Ambient • Maps • Texture • Color Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
20. GameObjects • In BabylonJS: TransformNode • Create Groupings • Add Logic Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
21. How changes happen • Iterations (loop, render loop) • Fixed steps relative to each frame • Setup everything then modify something • Step by step, no reordering etc. Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
22. Babylon.js - Angular Angular • UI • Application lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integration BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
23. 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 im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
24. 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop CODING
25. 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) Babylon.js 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
26. 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 im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
27. 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 im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
28. Clear responsibilities • Separate contexts • Lifecycle hooks • Naming • Extend existing Babylon.js 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
29. 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
30. 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
31. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop
32. Summary Try now! 1. Extend your data visualization 2. 3D integration is different 3. On your everyday devices max.marschall@thinktecture.com https://www.thinktecture.com/max-marschall @MaxOSchulte