3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop Max Marschall @MaxOSchulte Engineer / Consultant

Max Marschall [email protected] h2ps://www.thinktecture.com/max-marschall @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Forms Over Data 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

h2p://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

http://build.aritcohomelifts.com/?ct1=0&sc=RAL9006&dc=RAL9006&f=bolon_gradient&dw=designwall_skyline&s gt=tinted&ch1=2225 3D-Engine Talk

An app that … § combines Angular and BabylonJS § is interac8ve § works on different pla>orms and devices § uses na8ve hardware (WebGL) https://github.com/thinktecture/webinar-3d- visualisierung-babylonjs-angular DEMO Demo Example App Try now! https://qrgo.page.link/15 mwG 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

• 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 na8ve 3D 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Just one of many possibilities Web-Na1ve TypeScript 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

• Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine • Currently V5.x Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Upcoming V5 • WebGPU support • Snapshot Rendering Alternatives: Playcanvas, A-Frame ( Non-Web: Unity, Unreal Engine ), Three.js BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Can I Use - WebGL v1 18.10.2022 • CAN I USE SCREENSHOT + DATE BabylonJS h2ps://caniuse.com/#feat=webgl 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Can I Use - WebGL v2 18.10.2022 • CAN I USE SCREENSHOT + DATE BabylonJS https://caniuse.com/#feat=webgl2 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Can I Use - WebGPU 18.10.2022 BabylonJS https://caniuse.com/#feat=webgpu 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop BabylonJS WebGPU Comparison: https://www.youtube.com/watch?v=gKTQ3VWn0cU

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 informa8on • Engine à renders the Scene BabylonJS Babylonjs.com 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Playground example https://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Mesh • Vertex • Vertices • Faces • Geometry • Instances • Clones BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Material • Diffuse, Specular, Emissive, Ambient • Maps • Texture • Color BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

GameObjects • In BabylonJS: TransformNode • Create Groupings • Add Logic BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

How changes happen • Itera8ons (loop, render loop) • Fixed steps rela8ve to each frame • Setup everything then modify something • Step by step, no reordering etc. BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

BabylonJS - Angular Angular • UI • Applica8on lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integra8on BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Application Angular Components Direc[ves 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 func[on Architecture Overview (simplified) 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop CODING

Lifecycle • Different steps executed by the render loop • Sta8c execu8on order • Move from “manipulate it now” to “I instruct you to manipulate it at the correct 8me” mindset • see: Angular’s changeDetectorRef.markForCheck • Syncs the “state” with the “view” (physics not included) BabylonJS 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Two Different Lifecycles Angular • DOM • Event Integra8on BabylonJS • Loop à e.g. dispose on next iteration • Different 8mings can cause synchroniza8on problems à Lifecycles should be separated à No dependency from BabylonJS to the Angular lifecycle / change detec8on cycle à “Add box to scene” becomes “Add box on next itera8on” 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Change Detec:on Angular • NgZone (ZoneJS) • Checks on every event Integration BabylonJS • Event-based communica8on • 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 im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Clear responsibilities • Separate contexts • Lifecycle hooks • Naming • Extend exis8ng BabylonJS classes • Scene • Mesh • TransformNode • Don’t mix (a mesh must not be a component) My integration key points 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Composition over Inheritance • Change “behavior” of a Base • Flat hierarchy • Reusable and extendable Design Concept for Engine Objects 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D im Web mit Babylon.js – Ihre Web-App in Szene gesetzt Workshop

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