Slide 1

Slide 1 text

3D Web – Babylon.js for Your Web App Session Max Schulte @MaxOSchulte Engineer / Consultant

Slide 2

Slide 2 text

Forms Over Data 3D Web – Babylon.js for Your Web App Session

Slide 3

Slide 3 text

h"p://gleborgne.github.io/molvwr/#1GCN https://kitchenplanner.ikea.com/jp/UI/Pages/VPUI.htm Session

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Max Marschall [email protected] https://www.thinktecture.com/max-marschall @MaxOSchulte • Consultant at Thinktecture AG. • Specialised in Angular, Ionic and BabylonJS 3D Web – Babylon.js for Your Web App Session

Slide 6

Slide 6 text

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/15 mwG 3D Web – Babylon.js for Your Web App Session

Slide 7

Slide 7 text

3D Web – Babylon.js for Your Web App Session

Slide 8

Slide 8 text

• 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 Web – Babylon.js for Your Web App Session

Slide 9

Slide 9 text

Web-Na;ve TypeScript 3D Web – Babylon.js for Your Web App Session

Slide 10

Slide 10 text

• Open source project supported by Microsoft • Framework optimized for web • WebGL hardware acceleration • Complete 3D-Engine • Currently V4.x • V5 • WebGPU support • Snapshot Rendering Babylon.js 3D Web – Babylon.js for Your Web App Session

Slide 11

Slide 11 text

Can I Use - WebGL v1 26.10.2022 • CAN I USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl 3D Web – Babylon.js for Your Web App Session

Slide 12

Slide 12 text

Can I Use - WebGL v2 23.06.2022 • CAN I USE SCREENSHOT + DATE Babylon.js https://caniuse.com/#feat=webgl2 3D Web – Babylon.js for Your Web App Session

Slide 13

Slide 13 text

Can I Use - WebGPU 23.06.2022 Babylon.js h"ps://caniuse.com/#feat=webgpu 3D Web – Babylon.js for Your Web App Session

Slide 14

Slide 14 text

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 Babylon.js Babylonjs.com 3D Web – Babylon.js for Your Web App Session

Slide 15

Slide 15 text

Playground h"ps://www.babylonjs-playground.com/#TAZ2CB BabylonJS 3D Web – Babylon.js for Your Web App Session

Slide 16

Slide 16 text

BabylonJS - Angular Angular • UI • Application lifecycle • Services, Contexts, Components • NgZone (ZoneJS) • DOM Integra;on BabylonJS • 3D • Engine lifecycle • Scene • Event-based system • Scene Graph 3D Web – Babylon.js for Your Web App Session

Slide 17

Slide 17 text

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 Web – Babylon.js for Your Web App Session

Slide 18

Slide 18 text

3D Web – Babylon.js for Your Web App Session LIVE CODING

Slide 19

Slide 19 text

Lifecycle • Different steps executed by the render loop • Static execution order • Move from “manipulate it now” to “I instruct you to manipulate it at the correct time” mindset • see: Angular’s changeDetectorRef.markForCheck • Syncs the “state” with the “view” (physics not included) Babylon.js 3D Web – Babylon.js for Your Web App Session

Slide 20

Slide 20 text

Two Different Lifecycles Angular • DOM • Event Integration Babylon.js • Loop à e.g. dispose on next iteration • Different timings can cause synchronization problems à Lifecycles should be separated à No dependency from BabylonJS to the Angular lifecycle / change detection cycle à “Add box to scene” becomes “Add box on next iteration” 3D Web – Babylon.js for Your Web App Session

Slide 21

Slide 21 text

Change Detec5on 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 Web – Babylon.js for Your Web App Session

Slide 22

Slide 22 text

Clear responsibilities • Separate contexts • Lifecycle hooks • Naming • Extend exisdng BabylonJS classes • Scene • Mesh • TransformNode • Don’t mix (a mesh must not be a component) My integration key points 3D Web – Babylon.js for Your Web App Session

Slide 23

Slide 23 text

Level of immersiveness 3D AR VR Sweet spot Nintendo Oculus Rift S 3D Web – Babylon.js for Your Web App Session

Slide 24

Slide 24 text

WebAR + Tracking (Development) In Future https://medium.com/@babylonjs/babylon-ar-7823ab4a80c1 • Display and edit • Real size • Rotate and scale to posidon • Integrate into the real world • Web-nadve 3D Web – Babylon.js for Your Web App Workshop

Slide 25

Slide 25 text

https://www.thinktecture.com/de/cheatsheet/angular-babylonjs BabylonJS Cheat Sheet 3D Web – Babylon.js for Your Web App Session

Slide 26

Slide 26 text

Summary Try now! h7ps://qrgo.page.link/15 mwG 1. Extend your data visualization 2. 3D integration is different 3. On your everyday devices max. [email protected] https://www.thinktecture.com/max-marschall @MaxOSchulte