unparent skybox from zone

Skybox is no longer attached to zone and now displays behind everything else as "infinite." This is one step towards allowing for multiple zones to work properly.
vircadia · Oct 6, 2024 · 1904842 · 1904842
1 parent bea1e0b
commit 1904842
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 VERSION.json
+
+# Ignore BabylonJS_Docs folder
+/BabylonJS_Docs/
diff --git a/src/modules/entity/components/components/SkyboxComponent.ts b/src/modules/entity/components/components/SkyboxComponent.ts
@@ -12,13 +12,16 @@
 
 
 import { MeshComponent, DEFAULT_MESH_RENDER_GROUP_ID } from "@Modules/object";
-import { Scene, MeshBuilder, StandardMaterial, Texture, CubeTexture, EquiRectangularCubeTexture, BaseTexture } from "@babylonjs/core";
+import { Scene, MeshBuilder, StandardMaterial, Texture, CubeTexture, EquiRectangularCubeTexture, BaseTexture, Camera } from "@babylonjs/core";
 import { ISkyboxProperty, IVector3Property } from "../../EntityProperties";
 import { EntityMapper } from "../../package";
 import { AssetUrl } from "../../builders/asset";
 
 export class SkyboxComponent extends MeshComponent {
-    static readonly DefaultSkyBoxSize = 2000;
+    private _camera: Camera | null = null;
+    private _scene: Scene | null = null;
+
+    static readonly DefaultSkyBoxSize = 10000;
     static readonly DefaultCubeMapSize = 1024;
 
     /**
@@ -37,45 +40,45 @@ export class SkyboxComponent extends MeshComponent {
         return "Skybox";
     }
 
-    public load(props: ISkyboxProperty, dimensions: IVector3Property | undefined, id: string): void {
+    public load(props: ISkyboxProperty, dimensions: IVector3Property | undefined, id: string, camera: Camera): void {
         if (this._mesh) {
             this._mesh.dispose(false, true);
             this._mesh = null;
         }
 
-        if (!this._gameObject) {
-            return;
-        }
+        this._camera = camera;
+        this._scene = camera.getScene();
 
         let skyBox = null;
-        const scene = this._gameObject ? this._gameObject?.getScene() : null;
         if (dimensions) {
             skyBox = MeshBuilder.CreateBox(this.componentType,
                 { width: dimensions.x, height: dimensions.y, depth: dimensions.z },
-                scene);
+                this._scene);
         } else {
             skyBox = MeshBuilder.CreateBox(this.componentType,
-                { size: SkyboxComponent.DefaultSkyBoxSize }, scene);
+                { size: SkyboxComponent.DefaultSkyBoxSize }, this._scene);
         }
         skyBox.infiniteDistance = true;
         skyBox.id = id;
         skyBox.isPickable = false;
         skyBox.isNearGrabbable = false;
         skyBox.isNearPickable = false;
-        skyBox.renderingGroupId = DEFAULT_MESH_RENDER_GROUP_ID;
+        skyBox.renderingGroupId = 0; // Ensure it's rendered first
+
+        // Attach the skybox directly to the scene, not to the camera
+        skyBox.parent = null;
 
         this.mesh = skyBox;
 
         this.update(props);
     }
 
     public update(props: ISkyboxProperty): void {
-        if (this._mesh) {
-            const scene = this._mesh.getScene();
+        if (this._mesh && this._scene) {
             let material = this._mesh.material as StandardMaterial;
 
             if (!material) {
-                material = new StandardMaterial(`${this._mesh.name}_${this._mesh.id}`, scene);
+                material = new StandardMaterial(`${this._mesh.name}_${this._mesh.id}`, this._scene);
                 material.backFaceCulling = false;
                 material.disableLighting = true;
                 this._mesh.material = material;
@@ -86,7 +89,7 @@ export class SkyboxComponent extends MeshComponent {
 
             if (props.url && props.url !== material.reflectionTexture?.name) {
                 material.reflectionTexture?.dispose();
-                material.reflectionTexture = this._createReflectionTexture(props.url, scene);
+                material.reflectionTexture = this._createReflectionTexture(props.url, this._scene);
             }
         }
     }

diff --git a/src/modules/entity/components/controllers/ZoneEntityController.ts b/src/modules/entity/components/controllers/ZoneEntityController.ts
@@ -142,18 +142,19 @@ export class ZoneEntityController extends EntityController {
 
         // reload sky box mesh
         if (this._skybox) {
-            this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id);
+            this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id, this._scene.activeCamera);
         }
 
         this._updateSkybox();
     }
 
     protected _updateSkybox(): void {
-        if (this._zoneEntity.skyboxMode === "enabled" && this._zoneEntity.skybox && this._gameObject) {
+        if (this._zoneEntity.skyboxMode === "enabled" && this._zoneEntity.skybox && this._scene.activeCamera) {
             if (!this._skybox) {
                 this._skybox = new SkyboxComponent();
-                this._gameObject.addComponent(this._skybox);
-                this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id);
+                // Create the skybox mesh and add it to the scene
+                this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id, this._scene.activeCamera);
+                // The mesh is now added to the scene in the load method
             }
             this._skybox.update(this._zoneEntity.skybox);
             this._skybox.enable = true;