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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   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 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
   

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

   View Slide

9. Just one of many possibilities
   Web-Native
   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. 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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide