expanding skybox capabilities

Author: matas-bitbybit-dev

examples/angular/threejs/simple/README.md

@@ -1,4 +1,4 @@
-# LaptopHolder
+# Simple
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.
 

packages/dev/babylonjs/lib/api/bitbybit/babylon/scene.ts

@@ -333,22 +333,49 @@ export class BabylonScene {
      * @shortname skybox
      */
     enableSkybox(inputs: Inputs.BabylonScene.SkyboxDto): void {
-        let texture: BABYLON.CubeTexture;
-        if (inputs.skybox === Inputs.Base.skyboxEnum.default) {
-            texture = new BABYLON.CubeTexture("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/default_skybox/skybox", this.context.scene);
-        } else if (inputs.skybox === Inputs.Base.skyboxEnum.greyGradient) {
-            texture = new BABYLON.CubeTexture("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/grey_gradient/skybox", this.context.scene);
-        } else if (inputs.skybox === Inputs.Base.skyboxEnum.clearSky) {
-            texture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/clear_sky/environment.env",
-                this.context.scene, false, false);
-        } else if (inputs.skybox === Inputs.Base.skyboxEnum.city) {
-            texture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/city/environmentSpecular.env",
-                this.context.scene, false, false);
+
+        let texture: BABYLON.CubeTexture | BABYLON.HDRCubeTexture;
+
+        if (inputs.skybox === "custom" && inputs.textureUrl) {
+            // Handle custom HDR/EXR textures
+            const textureUrl = inputs.textureUrl;
+            const textureSize = inputs.textureSize || 512; // Default size
+
+            // Better URL parsing to handle query strings
+            const urlPath = textureUrl.split("?")[0].toLowerCase();
+
+            if (urlPath.endsWith(".hdr")) {
+                // Use HDRCubeTexture for .hdr files
+                if (inputs.hdrTexture) {
+                    texture = new BABYLON.HDRCubeTexture(textureUrl, this.context.scene, textureSize, false, true, false, true);
+                }
+            } else if (urlPath.endsWith(".env")) {
+                texture = BABYLON.CubeTexture.CreateFromPrefilteredData(inputs.textureUrl,
+                    this.context.scene, false, false);
+            } else {
+                // Fallback to CubeTexture for other formats
+                texture = new BABYLON.CubeTexture(textureUrl, this.context.scene);
+            }
+        } else {
+            if (inputs.skybox === Inputs.Base.skyboxEnum.default) {
+                texture = new BABYLON.CubeTexture("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/default_skybox/skybox", this.context.scene);
+            } else if (inputs.skybox === Inputs.Base.skyboxEnum.greyGradient) {
+                texture = new BABYLON.CubeTexture("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/grey_gradient/skybox", this.context.scene);
+            } else if (inputs.skybox === Inputs.Base.skyboxEnum.clearSky) {
+                texture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/clear_sky/environment.env",
+                    this.context.scene, false, false);
+            } else if (inputs.skybox === Inputs.Base.skyboxEnum.city) {
+                texture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.5/textures/skybox/city/environmentSpecular.env",
+                    this.context.scene, false, false);
+            }
         }
 
         this.context.scene.getMeshByName("bitbybit-hdrSkyBox")?.dispose(false, true);
         const skybox = this.context.scene.createDefaultSkybox(texture, true, inputs.size, inputs.blur, true);
         skybox.name = "bitbybit-hdrSkyBox";
+        if (inputs.hideSkybox) {
+            skybox.isVisible = false;
+        }
         this.context.scene.environmentIntensity = inputs.environmentIntensity;
     }
 

packages/dev/babylonjs/lib/api/context.ts

@@ -8,7 +8,7 @@ export class Context extends ContextBase {
     scene: BABYLON.Scene;
     engine: BABYLON.Engine | BABYLON.WebGPUEngine;
     havokPlugin: BABYLON.HavokPlugin;
-   
+
     getSamplingMode(samplingMode: Inputs.BabylonTexture.samplingModeEnum): number {
         switch (samplingMode) {
             case Inputs.BabylonTexture.samplingModeEnum.nearest:

packages/dev/babylonjs/lib/api/inputs/base-inputs.ts

@@ -2,6 +2,7 @@
 export namespace Base {
     export enum skyboxEnum {
         default = "default",
+        custom = "custom",
         clearSky = "clearSky",
         city = "city",
         greyGradient = "greyGradient",

packages/dev/babylonjs/lib/api/inputs/scene-inputs.ts

@@ -401,11 +401,15 @@ export namespace BabylonScene {
         wheelPrecision = 3;
     }
     export class SkyboxDto {
-        constructor(skybox?: Base.skyboxEnum, size?: number, blur?: number, environmentIntensity?: number) {
+        constructor(skybox?: Base.skyboxEnum, size?: number, blur?: number, environmentIntensity?: number, hideSkybox?: boolean, textureUrl?: string, textureSize?: number, hdrTexture?: boolean,) {
             if (skybox !== undefined) { this.skybox = skybox; }
             if (size !== undefined) { this.size = size; }
             if (blur !== undefined) { this.blur = blur; }
             if (environmentIntensity !== undefined) { this.environmentIntensity = environmentIntensity; }
+            if (hideSkybox !== undefined) { this.hideSkybox = hideSkybox; }
+            if (textureUrl !== undefined) { this.textureUrl = textureUrl; }
+            if (textureSize !== undefined) { this.textureSize = textureSize; }
+            if (hdrTexture !== undefined) { this.hdrTexture = hdrTexture; }
         }
         /**
          * Skybox type
@@ -436,6 +440,29 @@ export namespace BabylonScene {
          * @step 0.1
          */
         environmentIntensity = 0.7;
+        /**
+         * Hides the skybox mesh but keeps the environment texture
+         * @default false
+         */
+        hideSkybox?: boolean = false;
+        /**
+         * Skybox texture URL - only needed if skybox type is set to custom
+         * @default undefined
+         * @optional true
+         */
+        textureUrl?: string;
+        /**
+         * Skybox HDR texture URL - only needed if skybox type is set to custom and the texture is in .hdr format
+         * @default true
+         * @optional true
+         */
+        hdrTexture?: boolean = true;
+        /**
+         * Skybox texture size (only applies to custom URL texture)
+         * @default 512
+         * @optional true
+         */
+        textureSize?: number = 512;
     }
 
     export class PointerDto {