Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar Forms Over Data

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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”

Slide 23

Slide 23 text

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;

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

3D-Visualisierung in Web Apps: Angular und BabylonJS in Symbiose Webinar Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S

Slide 30

Slide 30 text

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