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

3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose

3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose

Dieses Webinar zeigt die Vorteile einer 3D-Engine in modernen Business-Anwendungen. Es wird in Detail auf die Aspekte einer integrativen Architektur eingegangen und anhand einer Demo und Live-Code verdeutlicht wie die Kommunikation stattfinden kann.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

May 13, 2020
Tweet

Transcript

  1. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Max Schulte @MaxOSchulte Software Consultant / Developer
  2. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Forms Over Data
  3. http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=d esignwall_skyline&sgt=tinted&ch1=2225 3D-Engine https://www.aritcohomelifts.com

  4. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Just some use cases • Real-time data visualization • “Hands-On” experience for customers • Understandable data for non experts • Preview (simulation results, objects, etc.) • Upselling • Immersive tutorials and help guides • … BabylonJS, 3D-Engine?
  5. Echte Cross-Plattform-Entwicklung für alle mit Angular Hands-on-Workshop https://dabmotors.com/configurator/ https://www.tontossport.com/custom-polo-uniform/women- short-sleeve-polo-shirts/white-short-sleeve-polo-shirts-with-

    pockets-504 https://vaxthusguiden.willabgarden.se/#/greenhous e/greenroomwall/adjustments https://www.microsoft.com/de-de/hololens
  6. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Just one of many possibilities Web-Native TypeScript
  7. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    An app that … • combines Angular and BabylonJS • is interactive • works on different platforms and devices • uses native hardware (WebGL) https://github.com/thinktecture/angular- babylonjs-architecture DEMO Demo Example App Try now! http://tiny.cc/ngb-js
  8. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    • Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS
  9. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    • Matured Framework • Great community • Editor • Good learning curve • “Playground” • Official support MS-Docs example • Dedicated Microsoft team incl. the creator of BabylonJS BabylonJS
  10. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    BabylonJS Last Month
  11. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Downloads per month BabylonJS https://npm-stat.com/charts.html?package=babylonjs&from=2018-01-31&to=2020-04-30
  12. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Downloads per week BabylonJS https://npm-stat.com/charts.html?package=babylonjs&from=2018-01-31&to=2020-01-31 ?
  13. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Can I Use - WebGL v2 10.05.2020 BabylonJS https://caniuse.com/#feat=webgl2
  14. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Can I Use - WebGL v1 10.05.2020 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl
  15. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    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 information • Engine à renders the Scene BabylonJS Babylonjs.com
  16. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    How changes happen • Iterations (loop, render loop) • Fixed steps relative to each frame • Setup everything then modify something • Step by step, no reordering etc. BabylonJS
  17. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS
  18. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Application Angular Components Context Service BabylonJS Scene Engine Objects HTML Rendering Engine feed instructions update model HTML APIs render 3D content WebGL (WebGPU) OS API Hardware View render HTML trigger function Architecture Overview (simplified)
  19. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    BabylonJS - Angular Angular • UI • Application lifecycle • Dependency injection • NgZone (ZoneJS) • Service, Context Integration BabylonJS • 3D • Engine lifecycle • Scene graph • Event-based system • Render loop
  20. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Render Loop • Fast iterating • One image (or frame) each iteration • Static execution order (lifecycle dependent) • 60 frames per second (FPS) desired BabylonJS
  21. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    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
  22. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    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”
  23. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    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( … ); à * (window as any).__Zone_disable_requestAnimationFrame = true;
  24. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Clear responsibilities • Factory • Lifecycle hooks • Naming • Extend existing BabylonJS classes • Scene • Mesh • Don’t mix (a mesh must not be a component) My integration key points
  25. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Dependency Injection • Provide access to context • Don’t mangle with providing all necessary dependencies (chains) • Re-Use Angular (or other’s) tools • Key to integrate Angular and BabylonJS Factory
  26. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Factory Creator Module Injector Scene Create factory multi token Get child factory injector /w dep. Add engine object Get new engine object instance Creator = services, components, game objects … Angular Architecture Overview (Factory)
  27. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Composition over Inheritance • Add “behavior” to a Base • Flat hierarchy • Reusable and extendable • Code example: BoxSlot, StackSlot and Ground Design Concept for Engine Objects
  28. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    CODE
  29. 3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar

    Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S
  30. Summary Try now! http://tiny.cc/ngb-js 1. Extend your data visualization 2.

    3D integration is different 3. On your everyday devices max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte