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.

9984f149d5e5823a09ff6089abaeaf19?s=128

Max Schulte

July 29, 2021
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 P
  4. Forms Over Data 3D-Visualisierung im Web mit BabylonJS Webinar P

  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. 3D-Visualisierung im Web mit BabylonJS Webinar

  9. 3D-Visualisierung im Web mit BabylonJS Webinar

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

    mit BabylonJS Webinar
  12. • 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D-Visualisierung im Web mit BabylonJS Webinar

  20. 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
  21. 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
  22. CODE 3D-Visualisierung im Web mit BabylonJS Webinar

  23. 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
  24. Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus

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

  26. 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