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
   

   View Slide

2. Forms Over Data
   3D Web - BabylonJS und Angular im Tandem Flug
   Session
   

   View Slide

3. http://gleborgne.github.io/molvwr/#1GCN
   https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm
   3D Web - BabylonJS und Angular im Tandem Flug
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. 3D Web - BabylonJS und Angular im Tandem Flug
   Session
   

   View Slide

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
   

   View Slide

9. Web-Native
   TypeScript
   3D Web - BabylonJS und Angular im Tandem Flug
   Session
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. Can I Use - WebGPU 23.06.2022
    BabylonJS
    https://caniuse.com/#feat=webgpu
    3D Web - BabylonJS und Angular im Tandem Flug
    Session
    

    View Slide

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
    

    View Slide

15. Playground example
    https://www.babylonjs-playground.com/#TAZ2CB
    BabylonJS
    3D Web - BabylonJS und Angular im Tandem Flug
    Session
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s
    Session
    CODE
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

23. Level of immersiveness
    3D AR VR
    Sweet spot
    Nintendo
    Oculus Rift S
    3D Web - BabylonJS und Angular im Tandem Flug
    Session
    

    View Slide

24. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs
    BabylonJS Cheat Sheet
    3D Web - BabylonJS und Angular im Tandem Flug
    Session
    

    View Slide

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
    

    View Slide