From 3ade3d4d6a3d69b1d11beb752b201cc945c10f24 Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Tue, 7 May 2024 19:33:06 -0500 Subject: [PATCH] Slight simplification refactor (no functional change) --- public/sw.js | 2 +- src/diagram/diagramManager.ts | 32 ++++--- src/util/appConfig.ts | 6 -- src/util/appConfigType.ts | 1 - src/util/customEnvironment.ts | 3 +- src/util/functions/groundMeshObserver.ts | 8 +- src/vrApp.ts | 106 +++++++++-------------- 7 files changed, 64 insertions(+), 94 deletions(-) diff --git a/public/sw.js b/public/sw.js index eca3cfd..f203cf0 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,5 +1,5 @@ importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js'); -const VERSION = '4'; +const VERSION = '5'; const CACHE = "deepdiagram"; const IMAGEDELIVERY_CACHE = "deepdiagram-images"; diff --git a/src/diagram/diagramManager.ts b/src/diagram/diagramManager.ts index b08a108..7ee039d 100644 --- a/src/diagram/diagramManager.ts +++ b/src/diagram/diagramManager.ts @@ -35,9 +35,7 @@ export class DiagramManager { this.onDiagramEventObservable.add(this.onDiagramEvent, DiagramEventObserverMask.FROM_DB, true, this); this.logger.debug("DiagramManager constructed"); this._scene.onMeshRemovedObservable.add((mesh) => { - if (isDiagramEntity(mesh)) { - this.cleanupOrphanConnections(mesh) - } + cleanupOrphanConnections(mesh, this.onDiagramEventObservable); }); document.addEventListener('uploadImage', (event: CustomEvent) => { let position = {x: 0, y: 1.6, z: 0}; @@ -56,16 +54,12 @@ export class DiagramManager { rotation: {x: 0, y: Math.PI, z: 0}, scale: {x: 1, y: 1, z: 1}, } - - console.log(diagramEntity); //const newMesh = buildMeshFromDiagramEntity(diagramEntity, this._scene); if (this.onDiagramEventObservable) { this.onDiagramEventObservable.notifyObservers({ type: DiagramEventType.ADD, entity: diagramEntity }, DiagramEventObserverMask.ALL); - - //this.onDiagramEventObservable.notifyObservers({type: DiagramEventType.ADD, entity: diagramEntity}, DiagramEventObserverMask.FROM_DB); } }) } @@ -77,6 +71,7 @@ export class DiagramManager { public createClickMenu(mesh: AbstractMesh, grip: WebXRInputSource): ClickMenu { return this._diagramMenuManager.createClickMenu(mesh, grip); } + private notifyAll(event: DiagramEvent) { this.onDiagramEventObservable.notifyObservers(event, DiagramEventObserverMask.ALL); } @@ -110,24 +105,27 @@ export class DiagramManager { } return newMesh; } + public get config(): AppConfig { return this._config; } - private cleanupOrphanConnections(mesh: AbstractMesh) { - if (mesh.metadata.template != '#connection-template') { - this._scene.meshes.forEach((m) => { - if (m?.metadata?.to == mesh.id || m?.metadata?.from == mesh.id) { - this.logger.debug("removing connection", m.id); - this.notifyAll({type: DiagramEventType.REMOVE, entity: toDiagramEntity(m)}); - } - }); - } - } private onDiagramEvent(event: DiagramEvent) { diagramEventHandler( event, this._scene, this._diagramMenuManager.toolbox, this._config.current.physicsEnabled, this._diagramEntityActionManager); } +} + +function cleanupOrphanConnections(mesh: AbstractMesh, diagramEventObservable: Observable) { + if (isDiagramEntity(mesh)) { + if (mesh.metadata.template != '#connection-template') { + mesh.getScene().meshes.forEach((m) => { + if (m?.metadata?.to == mesh.id || m?.metadata?.from == mesh.id) { + diagramEventObservable.notifyObservers({type: DiagramEventType.REMOVE, entity: toDiagramEntity(m)}); + } + }); + } + } } \ No newline at end of file diff --git a/src/util/appConfig.ts b/src/util/appConfig.ts index 7b76141..53f9f85 100644 --- a/src/util/appConfig.ts +++ b/src/util/appConfig.ts @@ -13,7 +13,6 @@ export class AppConfig { newRelicKey: null, newRelicAccount: null, physicsEnabled: false, - demoCompleted: false, flyMode: true } @@ -75,11 +74,6 @@ export class AppConfig { this.save(); } - public setDemoCompleted(demoCompleted: boolean) { - this._currentConfig.demoCompleted = demoCompleted; - this.save(); - } - private save() { localStorage.setItem('appConfig', JSON.stringify(this._currentConfig)); this.onConfigChangedObservable.notifyObservers(this._currentConfig, -1); diff --git a/src/util/appConfigType.ts b/src/util/appConfigType.ts index 4149d2a..eb940a8 100644 --- a/src/util/appConfigType.ts +++ b/src/util/appConfigType.ts @@ -8,7 +8,6 @@ export type AppConfigType = { physicsEnabled?: boolean, newRelicKey?: string, newRelicAccount?: string, - demoCompleted?: boolean, passphrase?: string, flyMode?: boolean, diff --git a/src/util/customEnvironment.ts b/src/util/customEnvironment.ts index 5641870..47b9cb8 100644 --- a/src/util/customEnvironment.ts +++ b/src/util/customEnvironment.ts @@ -113,6 +113,8 @@ export class CustomEnvironment { private createWall(position: Vector3, rotation: Vector3, color1: Color3, color2: Color3) { const scene = this.scene; const wall = MeshBuilder.CreatePlane("wall", {width: 20, height: 20}, scene); + wall.isPickable = false; + wall.isNearPickable = false; wall.position = position; wall.rotation = rotation; wall.material = createGridMaterial(color1, color2); @@ -163,7 +165,6 @@ function createGridMaterial(lineColor: Color3, mainColor: Color3): Material { material.majorUnitFrequency = 10; material.mainColor = mainColor; material.lineColor = lineColor; - return material; } diff --git a/src/util/functions/groundMeshObserver.ts b/src/util/functions/groundMeshObserver.ts index f8af814..6b76a47 100644 --- a/src/util/functions/groundMeshObserver.ts +++ b/src/util/functions/groundMeshObserver.ts @@ -56,7 +56,10 @@ export async function groundMeshObserver(ground: AbstractMesh, logger.debug(ev); }); }); - + xr.baseExperience.sessionManager.onXRSessionEnded.add(() => { + logger.debug('session ended'); + window.location.reload(); + }); xr.baseExperience.onStateChangedObservable.add((state) => { logger.debug(WebXRState[state]); switch (state) { @@ -70,9 +73,8 @@ export async function groundMeshObserver(ground: AbstractMesh, break; case WebXRState.EXITING_XR: setTimeout(() => { - logger.debug('reloading'); + logger.debug('EXITING_XR, reloading'); window.location.reload(); - }, 500); } diff --git a/src/vrApp.ts b/src/vrApp.ts index 8240492..f34876b 100644 --- a/src/vrApp.ts +++ b/src/vrApp.ts @@ -16,9 +16,10 @@ import {Introduction} from "./tutorial/introduction"; const webGpu = false; log.setLevel('error', false); +const canvas = (document.querySelector('#gameCanvas') as HTMLCanvasElement); export class VrApp { - private engine: WebGPUEngine | Engine; + //preTasks = [havokModule]; private logger: Logger = log.getLogger('App'); @@ -28,62 +29,15 @@ export class VrApp { }); } - public async initialize() { - const scene = DefaultScene.Scene; - const camera: FreeCamera = new FreeCamera("Main Camera", - new Vector3(0, 1.6, 0), scene); - scene.setActiveCameraByName("Main Camera"); + public async initialize(scene: Scene) { + setMainCamera(scene); const spinner = new Spinner(); spinner.show(); const diagramManager = new DiagramManager(); - const db = new PouchdbPersistenceManager(); - db.setDiagramManager(diagramManager); - await db.initialize(); - const environment = new CustomEnvironment("default", diagramManager.config); - environment.groundMeshObservable.add((ground) => { - groundMeshObserver(ground, diagramManager, spinner); - }, -1, false, this); - + await initDb(diagramManager); + initEnvironment(diagramManager, spinner); const gamepadManager = new GamepadManager(scene); addSceneInspector(); - - /* - SceneLoader.ImportMesh(null,'https://models.deepdiagram.com/', 'Chair_textured_mesh_lowpoly_glb.glb', scene, (meshes) => { - const transform = new Mesh('chair', scene); - for(const mesh of meshes){ - mesh.parent= transform; - } - let {min, max} = transform.getHierarchyBoundingVectors(true); - const parentMesh = MeshBuilder.CreateBox('boundingBox', {width: max.x - min.x, height: max.y - min.y, depth: max.z - min.z}, scene); - for(const mesh of meshes){ - mesh.parent= parentMesh; - - } - transform.dispose(); - //parentMesh.setBoundingInfo(new BoundingInfo(min, max)); - parentMesh.showBoundingBox = true; - parentMesh.scaling = new Vector3(.2,.2,.2); - //mesh.metadata = {grabbable: true}; - parentMesh.position.y = .5; - parentMesh.position.z = 0; - parentMesh.metadata = {grabbable: true}; - const material = new StandardMaterial('chairMaterial', scene); - material.alpha = 0; - parentMesh.material = material; - parentMesh.showBoundingBox = true; - }); - - */ - /* - const chair = new GaussianSplattingMesh('chair', null, scene); - const m = await chair.loadFileAsync('https://models.deepdiagram.com/house.ply'); - - chair.position.y = 1.6; - chair.rotation.y = Math.PI; - chair.scaling = chair.scaling.scale(1); - chair.showBoundingBox = true; - - */ const el = document.querySelector('#download'); if (el) { el.addEventListener('click', () => { @@ -94,36 +48,58 @@ export class VrApp { this.logger.info('Starting tutorial'); const intro = new Introduction(); } - this.engine.runRenderLoop(() => { - scene.render(); - }); this.logger.info('Render loop started'); } private async initializeEngine() { - const canvas = (document.querySelector('#gameCanvas') as HTMLCanvasElement); + let engine: WebGPUEngine | Engine = null; if (webGpu) { - this.engine = new WebGPUEngine(canvas); - await (this.engine as WebGPUEngine).initAsync(); + engine = new WebGPUEngine(canvas); + await (engine as WebGPUEngine).initAsync(); } else { - this.engine = new Engine(canvas, true); + engine = new Engine(canvas, true); } - this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio); + engine.setHardwareScalingLevel(1 / window.devicePixelRatio); window.onresize = () => { - this.engine.resize(); + engine.resize(); } - const scene = new Scene(this.engine); - scene.ambientColor = new Color3(.1, .1, .1); + const scene = new Scene(engine); DefaultScene.Scene = scene; + scene.ambientColor = new Color3(.1, .1, .1); //log.resetLevel(); //log.setDefaultLevel('error'); - this.logger.debug('App', 'gameCanvas created'); - await this.initialize(); + await this.initialize(scene); + engine.runRenderLoop(() => { + scene.render(); + }); } } const vrApp = new VrApp(); buildQuestLink(); +function setMainCamera(scene: Scene) { + const CAMERA_NAME = 'Main Camera'; + const camera: FreeCamera = new FreeCamera(CAMERA_NAME, + new Vector3(0, 1.6, 0), scene); + scene.setActiveCameraByName(CAMERA_NAME); +} + +async function initDb(diagramManager: DiagramManager) { + const db = new PouchdbPersistenceManager(); + db.setDiagramManager(diagramManager); + await db.initialize(); + +} + +function initEnvironment(diagramManager: DiagramManager, spinner: Spinner) { + const environment = new CustomEnvironment("default", diagramManager.config); + environment.groundMeshObservable.add((ground) => { + groundMeshObserver(ground, diagramManager, spinner).then(() => { + + }); + }, -1, false, this); +} +