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

3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s

9984f149d5e5823a09ff6089abaeaf19?s=47 Max Schulte
September 24, 2020

3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s

Moderne Businessanwendungen sind schon lange nicht mehr langweilig: Daten wollen visualisiert werden und zwar verständlich und ansprechend. Genau dabei helfen Web-Grafik-Engines wie BabylonJS. Sie ermöglichen, 2D-, 3D, Virtual- und Augmented-Reality-Inhalte verständlich darzustellen. Somit lassen sich unter anderem digitale Konzepte visualisieren, konfigurieren und testen – Cross-Plattform und performant. In dieser Session zeigt Max Schulte anhand einer Angular-Anwendung Kernaspekte und Wege sowie einen Architekturansatz, um neue Visualisierungs- und Bedienmöglichkeiten in Ihre Anwendung integrieren zu können.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

September 24, 2020
Tweet

Transcript

  1. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Max

    Schulte @MaxOSchulte Consultant
  2. The image part with relationship ID rId12 was not found

    in the file. The image part with relationship ID rId12 was not found in the file. Special Day “Cross-Plattform” Thema Sprecher Datum, Uhrzeit Figma, Storybook und Angular: Toolchain für plattformunabhängige User Interfaces Andreas Wissel Do, 24. September 2020, 09.00 bis 10.00 Cross-Plattform-Apps für Desktop, Mobile und Web mit Electron, Cordova & Angular Fabian Gosebrink Do, 24. September 2020, 10.30 bis 11.30 Electron.NET: Cross-Plattform- Desktop-Software mit ASP.NET Core Gregor Biswanger Do, 24. September 2020, 12.00 bis 13.00 Electron, Cordova, PWA – was, wann, wie und warum Christian Liebel, Thorsten Hans Do, 24. September 2020, 15.45 bis 16.45 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Max Schulte Do, 24. September 2020, 17.15 bis 18.15
  3. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

    Good to know… Max Schulte max.schulte@thinktecture.com https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS
  4. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

    Forms Over Data
  5. http://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm

  6. http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=d esignwall_skyline&sgt=tinted&ch1=2225 3D-Engine Talk Angular - BabylonJS Integration Deep Dive

  7. https://dabmotors.com/configurator/

  8. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

  9. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

    • 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
  10. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

    Just one of many possibilities Web-Native TypeScript
  11. • 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 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  12. Can I Use - WebGL v1 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  13. Can I Use - WebGL v2 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  14. Can I Use - WebGPU v1 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgpu 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  15. 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 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  16. 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 BabylonJS Babylonjs.com 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  17. 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 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  18. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS –

    das Web kann’s Session
  19. BabylonJS - Angular Angular • UI • Application lifecycle •

    Services, Contexts, Components • NgZone (ZoneJS) • DOM Integration BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  20. 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-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  21. 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session

    CODE
  22. 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( … ); • Stop zone.js to observe animation frame requests à (window as any).__Zone_disable_requestAnimationFrame = true; 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  23. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus

    Rift S 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS – das Web kann’s Session
  24. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D-Daten-Visualisierung in Businessanwendungen mit BabylonJS –

    das Web kann’s Session
  25. 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