From 6630e52ba413f140012fb2a2dbe26c9f4505dfcf Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Wed, 27 Sep 2023 08:31:01 -0500
Subject: [PATCH] Fixed mobile scene aspect ratios.

---
 index.html                    | 45 ++++++++++++----
 package-lock.json             | 57 +++++++++++---------
 package.json                  | 12 +++--
 src/app.ts                    | 24 ++++++---
 src/util/customEnvironment.ts | 20 +++++--
 src/util/spinner.ts           | 98 +++++++++++++++++++++++++++++++++++
 6 files changed, 203 insertions(+), 53 deletions(-)
 create mode 100644 src/util/spinner.ts
diff --git a/index.html b/index.html
index 5759a2d..5be3598 100644
--- a/index.html
+++ b/index.html
@@ -2,21 +2,40 @@
 <html>
 <head>
   <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1" name="viewport"/>
   <title>Deep Diagram</title>
   <style>
-    body {
+      body {
+          width: 100vw;
+          heigth: 100vh;
+          margin: 0px;
+          padding: 0px;
+          aspect-ratio: auto;
+      }
 
-    }
+      .scene {
+          width: 100vw;
+          height: 100vh;
+          overflow: hidden;
+      }
 
-    .loader {
-      position: fixed;
-      left: 0px;
-      top: 0px;
-      width: 200px;
-      height: 200px;
-      display: flex;
-      justify-content: center;
-      align-content: center;
+      #gameCanvas {
+          width: 100%;
+          height: 100%;
+          margin: 0px;
+          padding: 0px;
+
+      }
+
+      .loader {
+          position: fixed;
+          left: 0px;
+          top: 0px;
+          width: 200px;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-content: center;
       flex-direction: column;
       z-index: -1;
       /*noinspection CssUnknownTarget*/
@@ -92,5 +111,9 @@
 
 </script>
 <script type="module" src="./src/app.ts"></script>
+<div class="scene">
+    <canvas id="gameCanvas"></canvas>
+</div>
+
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 0803d28..e9e903b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,14 @@
       "name": "immersive",
       "version": "0.0.1",
       "dependencies": {
-        "@babylonjs/core": "^6.21.2",
-        "@babylonjs/gui": "^6.21.2",
+        "@babylonjs/core": "^6.21.3",
+        "@babylonjs/gui": "^6.21.3",
         "@babylonjs/havok": "1.1.4",
-        "@babylonjs/inspector": "^6.21.2",
-        "@babylonjs/loaders": "^6.21.2",
-        "@babylonjs/serializers": "^6.21.2",
+        "@babylonjs/inspector": "^6.21.3",
+        "@babylonjs/loaders": "^6.21.3",
+        "@babylonjs/materials": "^6.21.3",
+        "@babylonjs/procedural-textures": "^6.21.3",
+        "@babylonjs/serializers": "^6.21.3",
         "@cloudflare/workers-types": "^4.20230821.0",
         "@netlify/functions": "^1.6.0",
         "@typed-mxgraph/typed-mxgraph": "^1.0.8",
@@ -54,14 +56,14 @@
       }
     },
     "node_modules/@babylonjs/core": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.2.tgz",
-      "integrity": "sha512-vqMrjZWO+ooe0ATzB/7ymDjLk4pNYokgbImS770W6D6votc0I0YP1zVXGNq9lYrQFmwFToV66cfqK5B3Qeqm1A=="
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.3.tgz",
+      "integrity": "sha512-j+UnhCSz3HldEWVHnxRHKGLqhWafju/WGqKaLXncbgo/Fkz48OoFbrec651jv1cBiNx82zdVa59c8VIK6FNSOw=="
     },
     "node_modules/@babylonjs/gui": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.2.tgz",
-      "integrity": "sha512-i5A6h/gYC/Ew3ygjsPlYk7LB/a2oGIAt4fSVY8Mxthb+nwB+f5G7l1ycyPu4bPWMsivgavGFD6+n4olQU89tlg==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.3.tgz",
+      "integrity": "sha512-bsh6GT/tvWIDua1vSg2n3GeMGWnkuW7j9Dpi6+NVRjaXYEKdtbsSuWwND8JVClSoYa23qosIeeNPCqRPB8pq3g==",
       "peerDependencies": {
         "@babylonjs/core": "^6.0.0"
       }
@@ -87,9 +89,9 @@
       }
     },
     "node_modules/@babylonjs/inspector": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.2.tgz",
-      "integrity": "sha512-XxKryLtA1tW5HDi/fOWsKP37+lhrnpX0/TDUq8k6rAqzXlsJN/5Q+cPboL9w6fDUOB7Y9F0zpZM2Wguj8Cg07g==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.3.tgz",
+      "integrity": "sha512-XJfqYVilSWEDLRy7IaSxkGNAs5U+SHsWBi9+eS49bFsP06fGjcbJjF2ZK1qY7DbMEThbwzwD6VypJtjKaoF9kw==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.0",
         "@fortawesome/free-regular-svg-icons": "^6.0.0",
@@ -107,27 +109,34 @@
       }
     },
     "node_modules/@babylonjs/loaders": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.2.tgz",
-      "integrity": "sha512-K/2CPutV83GJaayVtourxG5ZSybltzbhdiTx4TGK4/+4WQ/cVJ8NxLMzi7yJmG5mPD+rXqUmG4auISn2XXHQyw==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.3.tgz",
+      "integrity": "sha512-2GpMOEQFuih8O/l6IIyGd0i0gCYo6x8LPjD10FBFBVX2dSkazhWDaAQSS8HCZNY2Uennmy83ePzuTf5RvaKDaw==",
       "peerDependencies": {
         "@babylonjs/core": "^6.0.0",
         "babylonjs-gltf2interface": "^6.0.0"
       }
     },
     "node_modules/@babylonjs/materials": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.8.0.tgz",
-      "integrity": "sha512-wx5DbKDRhkUYi20Y89qji9c+E8xLL87bpjJ6T93k1jBEDT0puUQEIGvIb+RgMcq1dAnwML/qjNCGGRDxPA/Cfg==",
-      "peer": true,
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.21.3.tgz",
+      "integrity": "sha512-oH/ZmiYKTJnvWzaZVNDPSjvekKK9C/eQZaiMcYiPTb39LHJw+bnIJS8NyvWjDLLn4cJ9XfEict69WqMb1XItVA==",
+      "peerDependencies": {
+        "@babylonjs/core": "^6.0.0"
+      }
+    },
+    "node_modules/@babylonjs/procedural-textures": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/procedural-textures/-/procedural-textures-6.21.3.tgz",
+      "integrity": "sha512-S1KIMrrVubk06mxuVeLGH8YngUj1W0zhdYjp2tHP2a7gueARG8a2OhqLW4e0MwFxi7XnP9DuFyzmkK95XZMaKw==",
       "peerDependencies": {
         "@babylonjs/core": "^6.0.0"
       }
     },
     "node_modules/@babylonjs/serializers": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.2.tgz",
-      "integrity": "sha512-N7gU2JQpmm34fGlOs9v45Ha/mvwrIaaSaRq9HclrFpahnaZKnTw321TYZ95Z5AH0zAIJcWDs8yZYoHa95C3I3g==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.3.tgz",
+      "integrity": "sha512-E8jerSLDrDkwkNc8D9a9vmvPlNJiaXUl5m6cIUQ317oUk0/pT06NiM/N//HbyjM8ccnkaPUBkNBq4dxtPW/XSw==",
       "peerDependencies": {
         "@babylonjs/core": "^6.0.0",
         "babylonjs-gltf2interface": "^6.0.0"
diff --git a/package.json b/package.json
index c87a17e..d172677 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,14 @@
     "havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps"
   },
   "dependencies": {
-    "@babylonjs/core": "^6.21.2",
-    "@babylonjs/gui": "^6.21.2",
+    "@babylonjs/core": "^6.21.3",
+    "@babylonjs/gui": "^6.21.3",
     "@babylonjs/havok": "1.1.4",
-    "@babylonjs/inspector": "^6.21.2",
-    "@babylonjs/loaders": "^6.21.2",
-    "@babylonjs/serializers": "^6.21.2",
+    "@babylonjs/inspector": "^6.21.3",
+    "@babylonjs/loaders": "^6.21.3",
+    "@babylonjs/materials": "^6.21.3",
+    "@babylonjs/procedural-textures": "^6.21.3",
+    "@babylonjs/serializers": "^6.21.3",
     "@cloudflare/workers-types": "^4.20230821.0",
     "@netlify/functions": "^1.6.0",
     "@typed-mxgraph/typed-mxgraph": "^1.0.8",
diff --git a/src/app.ts b/src/app.ts
index 0c47c76..e0a05aa 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -21,6 +21,7 @@ import {DiagramEventType} from "./diagram/diagramEntity";
 import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
 import {DiagramExporter} from "./util/diagramExporter";
 import {Introduction} from "./tutorial/introduction";
+import {Spinner} from "./util/spinner";
 
 
 export class App {
@@ -34,11 +35,9 @@ export class App {
         log.getLogger('App').setLevel('debug');
         log.getLogger('DiagramManager').setLevel('debug');
         log.getLogger('PeerjsNetworkConnection').setLevel('debug');
-        const canvas = document.createElement("canvas");
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        canvas.id = "gameCanvas";
-        document.body.appendChild(canvas);
+
+        const canvas = document.querySelector('#gameCanvas');
+
         this.logger.debug('App', 'gameCanvas created');
         this.initialize(canvas).then(() => {
             this.logger.debug('App', 'Scene Initialized');
@@ -52,7 +51,14 @@ export class App {
     async initialize(canvas) {
 
         const engine = new Engine(canvas, true);
+        engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
+        window.onresize = () => {
+            engine.resize();
+        }
+
         const scene = new Scene(engine);
+        const spinner = new Spinner(scene);
+        spinner.show();
         const config = new AppConfig();
         const peerjsNetworkConnection = new PeerjsNetworkConnection();
 
@@ -66,6 +72,7 @@ export class App {
         const toolbox = new Toolbox(scene, controllers);
 
         const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
+
         peerjsNetworkConnection.diagramEventObservable.add((evt) => {
             this.logger.debug('App', 'peerjs network event', evt);
             diagramManager.onDiagramEventObservable.notifyObservers(evt, 1);
@@ -77,7 +84,6 @@ export class App {
         }, 2);
         config.onConfigChangedObservable.add((config) => {
             this.logger.debug('App', 'config changed', config);
-
             worker.postMessage({config: config});
         }, 2);
         worker.onmessage = (evt) => {
@@ -138,9 +144,13 @@ export class App {
                 }
 
             });
+
+            spinner.hide();
+
             xr.baseExperience.sessionManager.onXRSessionInit.add((session) => {
                 session.addEventListener('visibilitychange', (ev) => {
                     this.logger.debug(ev);
+
                 });
             });
 
@@ -154,9 +164,7 @@ export class App {
                             log.debug('App', event.detail);
                         }
                     });
-
                 }
-
             });
             import('./controllers/rigplatform').then((rigmodule) => {
                 const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers);
diff --git a/src/util/customEnvironment.ts b/src/util/customEnvironment.ts
index 6f2e2f6..5ce0e81 100644
--- a/src/util/customEnvironment.ts
+++ b/src/util/customEnvironment.ts
@@ -2,7 +2,7 @@ import {
     GroundMesh,
     MeshBuilder,
     Observable,
-    PBRMetallicRoughnessMaterial,
+    PBRMaterial,
     PhotoDome,
     PhysicsAggregate,
     PhysicsShapeType,
@@ -31,9 +31,13 @@ export class CustomEnvironment {
                 const ground = this.createGround();
                 this._groundMeshObservable.notifyObservers(ground);
             });
+
+
         const photo = new PhotoDome('sky',
             '/assets/textures/outdoor_field4.jpeg', {},
             scene);
+
+
         try {
             const sounds = new DiaSounds(scene);
             window.setTimeout((sound) => {
@@ -71,13 +75,18 @@ export class CustomEnvironment {
 
     private createGround() {
         const scene = this.scene;
-        const groundMaterial = new PBRMetallicRoughnessMaterial("groundMaterial", scene);
+        const groundMaterial = new PBRMaterial("groundMaterial", scene);
         const gText = new Texture("/assets/textures/grass1.jpeg", scene);
-        gText.uScale = 40;
-        gText.vScale = 40;
-        groundMaterial.baseTexture = gText;
+        gText.uScale = 30;
+        gText.vScale = 30;
+        groundMaterial.albedoTexture = gText;
         groundMaterial.metallic = 0;
         groundMaterial.roughness = 1;
+        const grassBump = new Texture("/assets/textures/grassnormal.png", scene);
+        grassBump.uScale = 20;
+        grassBump.vScale = 20;
+        groundMaterial.bumpTexture =
+            grassBump;
 
         const ground: GroundMesh = MeshBuilder.CreateGround("ground", {
             width: 100,
@@ -87,6 +96,7 @@ export class CustomEnvironment {
 
         ground.material = groundMaterial;
         new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, scene);
+
         return ground;
     }
 }
\ No newline at end of file
diff --git a/src/util/spinner.ts b/src/util/spinner.ts
new file mode 100644
index 0000000..732acfe
--- /dev/null
+++ b/src/util/spinner.ts
@@ -0,0 +1,98 @@
+import {
+    AbstractMesh,
+    Animation,
+    DynamicTexture,
+    GPUParticleSystem,
+    MeshBuilder,
+    ParticleSystem,
+    Scene,
+    SphereParticleEmitter,
+    StandardMaterial,
+    Texture
+} from "@babylonjs/core";
+
+export class Spinner {
+    private readonly scene: Scene;
+    private spinner: AbstractMesh;
+    private particleSystem: ParticleSystem;
+
+    constructor(scene: Scene) {
+        this.scene = scene;
+        this.build();
+
+    }
+
+    public show() {
+        this.spinner.setEnabled(true);
+        this.particleSystem.start();
+    }
+
+    public hide() {
+        this.spinner.setEnabled(false);
+        this.particleSystem.stop(true);
+    }
+
+    private build() {
+        const spinner: AbstractMesh = MeshBuilder.CreateSphere("spinner", {diameter: 1}, this.scene);
+        const material = new StandardMaterial("spinner", this.scene);
+        const text = new DynamicTexture("spinner", {width: 1024, height: 1024}, this.scene, false);
+        text.drawText("Please Wait", 250, 500, "bold 150px Segoe UI", "white", "transparent", true, true);
+        spinner.rotation.z = Math.PI;
+        material.diffuseTexture = text;
+        material.diffuseColor.set(.5, .5, 0);
+        const rotate = new Animation("rotate", "rotation.y", 10,
+            Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
+        const keys = [];
+        keys.push({
+            frame: 0,
+            value: 0
+        });
+        keys.push({
+            frame: 30,
+            value: Math.PI * 2
+        });
+        rotate.setKeys(keys);
+        spinner.animations.push(rotate);
+        this.scene.beginAnimation(spinner, 0, 30, true);
+        //material.indexOfRefraction = Math.PI/4;
+
+        //material.indexOfRefraction = 1;
+        /*material.reflectionFresnelParameters = new FresnelParameters();
+        material.reflectionFresnelParameters.leftColor = Color3.Black();
+        material.reflectionFresnelParameters.rightColor = Color3.White();
+        material.reflectionFresnelParameters.power = 1;
+*/
+        material.alpha = .9;
+        spinner.material = material;
+        let particleSystem;
+        if (GPUParticleSystem.IsSupported) {
+            particleSystem = new GPUParticleSystem("particles", {capacity: 100000}, this.scene);
+            particleSystem.activeParticleCount = 2048;
+        } else {
+            particleSystem = new ParticleSystem("particles", 2048, this.scene);
+        }
+        particleSystem.emitRate = 10;
+        const emitter = new SphereParticleEmitter(.9);
+        emitter.radiusRange = .2;
+        particleSystem.particleEmitterType = emitter;
+
+        particleSystem.particleTexture = new Texture("/assets/textures/flare.png", this.scene);
+
+
+        particleSystem.minEmitPower = .1;
+        particleSystem.maxEmitPower = .25;
+
+        particleSystem.minLifeTime = .1;
+        particleSystem.maxLifeTime = .8;
+        particleSystem.minSize = 0.01;
+        particleSystem.maxSize = 0.05;
+        particleSystem.emitter = spinner;
+        particleSystem.parent = spinner;
+        spinner.position.y = 1;
+        this.spinner = spinner;
+        this.spinner.setEnabled(false);
+        this.particleSystem = particleSystem;
+
+
+    }
+}
\ No newline at end of file
