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.
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?
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
• Matured Framework • Great community • Editor • Good learning curve • “Playground” • Official support MS-Docs example • Dedicated Microsoft team incl. the creator of BabylonJS BabylonJS
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
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
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)
Render Loop • Fast iterating • One image (or frame) each iteration • Static execution order (lifecycle dependent) • 60 frames per second (FPS) desired BabylonJS
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
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”
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;
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
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
Composition over Inheritance • Add “behavior” to a Base • Flat hierarchy • Reusable and extendable • Code example: BoxSlot, StackSlot and Ground Design Concept for Engine Objects
maxoschulte
niftycorp
hirobe1999
mackee
nrslib
javiergs
kirik
maroon1st
kazatohiei
h0r15h0
blueswen
tucksaun
makihiro
skipperchong
aleyda
michaelherold
jmmastey
kastner
quramy
yeseniaperezcruz
mongodb
akosma
davidbonilla
gr2m
addyosmani
