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

3D-Visualisierung im Web mit BabylonJS

3D-Visualisierung im Web mit BabylonJS

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

October 21, 2020
Tweet

Transcript

  1. 3D-Visualisierung im Web mit BabylonJS Webinar Max Schulte @MaxOSchulte Engineer

    / Consultant
  2. 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 3D-Visualisierung im Web mit BabylonJS Webinar
  3. 3D-Visualisierung im Web mit BabylonJS Webinar What to expect -

    Mindset of a 3D-Engine - BabylonJS - Use cases - Angular + BabylonJS integration - Live code Angular + BabylonJS And what not - BabylonJS deep dive - Angular basics 3D-Visualisierung im Web mit BabylonJS
  4. Forms Over Data 3D-Visualisierung im Web mit BabylonJS Webinar

  5. 3D-Visualisierung im Web mit BabylonJS Webinar https://experience.arcgis.com/experience/478220a4c454480e823b17327b2bf1d4

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

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

  8. https://dabmotors.com/configurator/

  9. 3D-Visualisierung im Web mit BabylonJS Webinar

  10. 3D-Visualisierung im Web mit BabylonJS Webinar

  11. • 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 3D-Visualisierung im Web mit BabylonJS Webinar
  12. Just one of many possibilities Web-Native TypeScript 3D-Visualisierung im Web

    mit BabylonJS Webinar
  13. • 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-Visualisierung im Web mit BabylonJS Webinar
  14. Can I Use - WebGL v1 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl 3D-Visualisierung im Web mit BabylonJS Webinar
  15. Can I Use - WebGL v2 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D-Visualisierung im Web mit BabylonJS Webinar
  16. Can I Use - WebGPU v1 20.09.2020 • CAN I

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgpu 3D-Visualisierung im Web mit BabylonJS Webinar
  17. An app that … • combines Angular and BabylonJS •

    is interactive • works on different platforms and devices • uses native hardware (WebGL) https://github.com/thinktecture/webinar-3d- visualisierung-babylonjs-angular DEMO Demo Example App Try now! https://qrgo.page.link/ 15mwG 3D-Visualisierung im Web mit BabylonJS Webinar
  18. 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-Visualisierung im Web mit BabylonJS Webinar
  19. 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-Visualisierung im Web mit BabylonJS Webinar
  20. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

  21. BabylonJS - Angular Angular • UI • Application lifecycle •

    Services, Contexts, Components • NgZone (ZoneJS) • DOM Integration BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D-Visualisierung im Web mit BabylonJS Webinar
  22. 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-Visualisierung im Web mit BabylonJS Webinar
  23. CODE 3D-Visualisierung im Web mit BabylonJS Webinar

  24. 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-Visualisierung im Web mit BabylonJS Webinar
  25. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus

    Rift S 3D-Visualisierung im Web mit BabylonJS Webinar
  26. https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D-Visualisierung im Web mit BabylonJS Webinar

  27. Summary 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
  28. WebAR + Tracking (Development) In Future https://medium.com/@babylonjs/babylon-ar-7823ab4a80c1 • Display and

    edit • Real size • Rotate and scale to position • Integrate into the real world • Web-native 3D-Visualisierung im Web mit BabylonJS Webinar