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

Angular - BabylonJS, Integration Deep Dive

9984f149d5e5823a09ff6089abaeaf19?s=47 Max Schulte
February 06, 2020

Angular - BabylonJS, Integration Deep Dive

"Angular - BabylonJS Integration Deep Dive" - This talk demonstrates how Angular and BabylonJS can be integrated in detail, what key aspects are there, and gives an idea of what can be created with the demonstrated approach.
You will learn about the similarities and differences between Angular and BabylonJS, as well as an approach to create a future proof architecture that utilizes the best of both frameworks.

This talk was given at the NgStuttgart Meetup @ JW Fröhlich.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

February 06, 2020
Tweet

Transcript

  1. Angular Stuttgart ngStuttgart @ JW Fröhlich Max Schulte @MaxOSchulte Software

    Consultant /Developer Angular - BabylonJS Integration Deep Dive @ngStuttgart
  2. Angular - BabylonJS Integration Deep Dive Talk Good to know…

    Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant and developer at Thinktecture AG. • Specialised in Angular and BabylonJS
  3. Angular - BabylonJS Integration Deep Dive Talk Forms Over Data

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

  5. Angular - BabylonJS Integration Deep Dive Talk 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?
  6. 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
  7. Angular - BabylonJS Integration Deep Dive Talk Just one of

    many possibilities Web-Native TypeScript
  8. Angular - BabylonJS Integration Deep Dive Talk • 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. Angular - BabylonJS Integration Deep Dive Talk • Matured Framework

    • Great community • Editor • Good learning curve • “Playground” • Official support MS-Docs example • Dedicated Microsoft team incl. the creator of BabylonJS BabylonJS
  10. Angular - BabylonJS Integration Deep Dive Talk BabylonJS Last Month

  11. Angular - BabylonJS Integration Deep Dive Talk Downloads per month

    BabylonJS https://npm-stat.com/charts.html?package=babylonjs&from=2018-01-31&to=2020-01-31
  12. Angular - BabylonJS Integration Deep Dive Talk Downloads per week

    BabylonJS https://npm-stat.com/charts.html?package=babylonjs&from=2018-01-31&to=2020-01-31 ?
  13. Angular - BabylonJS Integration Deep Dive Talk Can I Use

    - WebGL v2 01.02.2020 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2
  14. Angular - BabylonJS Integration Deep Dive Talk Can I Use

    - WebGL v1 01.02.2020 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl
  15. Angular - BabylonJS Integration Deep Dive Talk 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
  16. Angular - BabylonJS Integration Deep Dive Talk 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
  17. Angular - BabylonJS Integration Deep Dive Talk 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
  18. Angular - BabylonJS Integration Deep Dive Talk Playground example https://www.babylonjs-playground.com/#TAZ2CB

    BabylonJS
  19. Angular - BabylonJS Integration Deep Dive Talk 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)
  20. Angular - BabylonJS Integration Deep Dive Talk BabylonJS - Angular

    Angular • UI • Application lifecycle • Dependency injection • NgZone (ZoneJS) • Service, Context Integration BabylonJS • 3D • Engine lifecycle • Scene graph • Event-based system • Render loop
  21. Angular - BabylonJS Integration Deep Dive Talk Render Loop •

    Fast iterating • One image (or frame) each iteration • Static execution order (lifecycle dependent) • 60 frames per second (FPS) desired BabylonJS
  22. Angular - BabylonJS Integration Deep Dive Talk 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
  23. Angular - BabylonJS Integration Deep Dive Talk 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”
  24. Angular - BabylonJS Integration Deep Dive Talk 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( … );
  25. Angular - BabylonJS Integration Deep Dive Talk 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
  26. Angular - BabylonJS Integration Deep Dive Talk 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
  27. Angular - BabylonJS Integration Deep Dive Talk 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)
  28. Angular - BabylonJS Integration Deep Dive Talk Composition over Inheritance

    • Change “behavior” of a Base • Flat hierarchy • Reusable and extendable • Code example: BoxSlot, StackSlot and Ground Design Concept for Engine Objects
  29. Angular - BabylonJS Integration Deep Dive Talk Composition over Inheritance

    – the BlueLightStack problem Architecture Space Item Stack Lights Blue Red content rows move on/off blue red BlueLightStack ? A blue light does not move
  30. Angular - BabylonJS Integration Deep Dive Talk Composition over Inheritance

    – the BlueLightStack composition Architecture BlueLightStack Rows Move On/off Stack Space BlueLight Item Blue ? …
  31. Angular - BabylonJS Integration Deep Dive Talk Composition over Inheritance

    – the BlueLightStack composition Architecture BlueLightStack Rows Move On/off Blue
  32. Angular - BabylonJS Integration Deep Dive Talk CODE

  33. Angular - BabylonJS Integration Deep Dive Talk Level of immersiveness

    3D AR VR Sweet spot Nintendo Oculus Rift S
  34. 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