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

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

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

Max Schulte

March 21, 2023
Tweet

More Decks by Max Schulte

Other Decks in Technology

Transcript

  1. 3D im Web mit Babylon.js – Ihre Web-App in Szene
    gesetzt
    Workshop
    Max Marschall
    @MaxOSchulte
    Engineer / Consultant

    View full-size slide

  2. Max Marschall
    [email protected]
    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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  32. Summary
    Try now!
    1. Extend your data visualization
    2. 3D integration is different
    3. On your everyday devices
    [email protected]
    https://www.thinktecture.com/max-marschall
    @MaxOSchulte

    View full-size slide