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

3D Web – Babylon.js for Your Web App

Max Schulte
May 16, 2024
9

3D Web – Babylon.js for Your Web App

Modern business applications are anything but boring. Data needs to be visualized understandably and appealingly. Web graphics engines like BabylonJS help us do just that. They enable 2D, 3D, virtual, and augmented reality content to be presented comprehensibly. Thus, among other things, digital concepts can be visualized, configured, and tested – cross-platform and performant. In this session, Max Schulte shows how you can integrate BabylonJS and Angular in an exemplary way, so that both technologies can unfold their full potential in tandem. Learn by live coding how to integrate a graphics engine yourself and achieve your goals.

Max Schulte

May 16, 2024
Tweet

Transcript

  1. 3D Web – Babylon.js for Your Web App Session Max

    Schulte @MaxOSchulte Engineer / Consultant
  2. Max Marschall [email protected] https://www.thinktecture.com/max-marschall @MaxOSchulte • Consultant at Thinktecture AG.

    • Specialised in Angular, Ionic and BabylonJS 3D Web – Babylon.js for Your Web App Session
  3. 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 – Babylon.js for Your Web App Session
  4. • 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 – Babylon.js for Your Web App Session
  5. • Open source project supported by Microsoft • Framework optimized

    for web • WebGL hardware acceleration • Complete 3D-Engine • Currently V4.x • V5 • WebGPU support • Snapshot Rendering Babylon.js 3D Web – Babylon.js for Your Web App Session
  6. Can I Use - WebGL v1 26.10.2022 • CAN I

    USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl 3D Web – Babylon.js for Your Web App Session
  7. Can I Use - WebGL v2 23.06.2022 • CAN I

    USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl2 3D Web – Babylon.js for Your Web App Session
  8. 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 Web – Babylon.js for Your Web App Session
  9. BabylonJS - Angular Angular • UI • Application lifecycle •

    Services, Contexts, Components • NgZone (ZoneJS) • DOM Integra;on BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D Web – Babylon.js for Your Web App Session
  10. 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 – Babylon.js for Your Web App Session
  11. 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 Web – Babylon.js for Your Web App Session
  12. Two Different Lifecycles Angular • DOM • Event Integration Babylon.js

    • 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 – Babylon.js for Your Web App Session
  13. Change Detec5on 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 – Babylon.js for Your Web App Session
  14. Clear responsibilities • Separate contexts • Lifecycle hooks • Naming

    • Extend exisdng BabylonJS classes • Scene • Mesh • TransformNode • Don’t mix (a mesh must not be a component) My integration key points 3D Web – Babylon.js for Your Web App Session
  15. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus

    Rift S 3D Web – Babylon.js for Your Web App Session
  16. WebAR + Tracking (Development) In Future https://medium.com/@babylonjs/babylon-ar-7823ab4a80c1 • Display and

    edit • Real size • Rotate and scale to posidon • Integrate into the real world • Web-nadve 3D Web – Babylon.js for Your Web App Workshop
  17. Summary Try now! h7ps://qrgo.page.link/15 mwG 1. Extend your data visualization

    2. 3D integration is different 3. On your everyday devices max. [email protected] https://www.thinktecture.com/max-marschall @MaxOSchulte