Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3D Web - BabylonJS und Angular im Tandem Flug

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.

Max Schulte

June 24, 2022
Tweet

More Decks by Max Schulte

Other Decks in Programming

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
    [email protected]
    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
    [email protected]
    https://www.thinktecture.com/max-schulte
    @MaxOSchulte

    View Slide