Add second camera to host GUI outside of post-processes

jelster · Apr 12, 2022 · 685e3fb · 685e3fb
1 parent cad8e96
commit 685e3fb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/route-planning/route-plan-gui.js b/src/route-planning/route-plan-gui.js
@@ -8,7 +8,10 @@ import { Grid, Image, Slider, StackPanel } from "@babylonjs/gui";
 import { Scalar } from "@babylonjs/core/Maths/math.scalar";
 import { Tools } from "@babylonjs/core/Misc/tools";
 import guiScreen from "../guis/route-planning-gui.json";
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { Vector3 } from "@babylonjs/core";
 
+const GUI_LAYER_MASK = 2;
 class PlanningScreenGui {
     gui;
     scene;
@@ -17,6 +20,7 @@ class PlanningScreenGui {
     transitDistance;
     gameStage;
     encounterPanels = [];
+    guiCamera;
 
     #launchSlider;
     get launchForce() {
@@ -87,6 +91,7 @@ class PlanningScreenGui {
             AdvancedDynamicTexture.NEAREST_NEAREST,
             true);
         gui.parseContent(guiScreen);
+        gui.layer.layerMask = GUI_LAYER_MASK;
         this.#launchSlider = gui.getControlByName("launchSlider");
         this.#centerText = gui.getControlByName("centerText");
         this.#currentAccelerationText = gui.getControlByName("currentAccelerationText");
@@ -96,6 +101,15 @@ class PlanningScreenGui {
         this.#launchResetButton = gui.getControlByName("launchResetButton");
         this.#routeSimulationText = gui.getControlByName("routeSimulationText");
 
+        this.guiCamera = new ArcRotateCamera("guiCamera", 0, 0.8, 100, Vector3.Zero(), this.scene);
+        this.guiCamera.position = this.planningScreen.camera.position;
+        this.guiCamera.rotation = this.planningScreen.camera.rotation;
+        this.guiCamera.parent = this.planningScreen.camera;
+
+        this.guiCamera.layerMask = GUI_LAYER_MASK;
+        this.guiCamera.maxZ = 10;
+        this.scene.activeCameras.push(this.guiCamera);
+
     }
 
 

diff --git a/src/route-planning/spaceTruckerPlanningScreen.js b/src/route-planning/spaceTruckerPlanningScreen.js
@@ -45,6 +45,8 @@ const preFlightActionList = [
 const overworldMusic = "overworld";
 const ambientSound = "ambient";
 
+const PLANNING_SCREEN_LAYER_MASK = 1;
+
 const PLANNING_STATE = Object.freeze({
     Created: 0,
     Initialized: 1,
@@ -111,6 +113,8 @@ class SpaceTruckerPlanningScreen {
         engine.loadingUIText = 'Loading Route Planning Simulation...';
 
         this.scene = new Scene(engine);
+        this.scene.onNewMeshAddedObservable.add(mesh => mesh.layerMask = PLANNING_SCREEN_LAYER_MASK);
+
         this.config = config;
         const { blurParameter, environmentTexture, IBLIntensity, lightIntensity, skyboxScale } = config.environment;
 
@@ -136,6 +140,9 @@ class SpaceTruckerPlanningScreen {
         this.skybox = this.scene.createDefaultSkybox(skyTexture, true, skyboxScale, blurParameter, true);
         this.scene.environmentIntensity = IBLIntensity;
         this.camera = new ArcRotateCamera("cam", 0, 1.35, 3000, Vector3.Zero(), this.scene);
+        this.scene.activeCamera = this.camera;
+        this.scene.activeCameras.push(this.camera);
+        this.camera.layerMask = PLANNING_SCREEN_LAYER_MASK;
         this.camera.maxZ = 100000;
         this.camera.position.y += 10000;