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

3D-Visualisierung im Web mit BabylonJS 28.07.2021

3D-Visualisierung im Web mit BabylonJS 28.07.2021

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.

Max Schulte

July 29, 2021
Tweet

More Decks by Max Schulte

Other Decks in Programming

Transcript

  1. Good to know… Max Schulte [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte • Consultant

    at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar
  2. 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 P
  3. • 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
  4. • 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
  5. Can I Use - WebGL v1 28.07.2021 • CAN I

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

    USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D-Visualisierung im Web mit BabylonJS Webinar
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus

    Rift S 3D-Visualisierung im Web mit BabylonJS Webinar P
  15. Summary 1. Extend your data visualization 2. 3D integration is

    different 3. On your everyday devices [email protected] https://www.thinktecture.com/max-schulte @MaxOSchulte