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
   

   View Slide

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
   

   View Slide

3. Forms Over Data
   3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
   Workshop
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   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 na8ve 3D
   3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
   Workshop
   

   View Slide

9. Just one of many possibilities
   Web-Na1ve
   TypeScript
   3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
   Workshop
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Playground example
    https://www.babylonjs-playground.com/#TAZ2CB
    BabylonJS
    3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
    Workshop
    

    View Slide

17. Mesh
    • Vertex
    • Vertices
    • Faces
    • Geometry
    • Instances
    • Clones
    BabylonJS
    3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
    Workshop
    

    View Slide

18. Material
    • Diffuse, Specular, Emissive, Ambient
    • Maps
    • Texture
    • Color
    BabylonJS
    3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
    Workshop
    

    View Slide

19. GameObjects
    • In BabylonJS: TransformNode
    • Create Groupings
    • Add Logic
    BabylonJS
    3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt
    Workshop
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide