Environment (skybox) configuration

Viewer/src/configuration/configuration.ts

@@ -40,25 +40,7 @@ export interface ViewerConfiguration {
         defaultCamera?: boolean;
         defaultLight?: boolean;
         clearColor?: { r: number, g: number, b: number, a: number };
-        imageProcessingConfiguration?: {
-            colorGradingEnabled?: boolean;
-            colorCurvesEnabled?: boolean;
-            colorGradingWithGreenDepth?: boolean;
-            colorGradingBGR?: boolean;
-            exposure?: number;
-            toneMappingEnabled?: boolean;
-            contrast?: number;
-            vignetteEnabled?: boolean;
-            vignetteStretch?: number;
-            vignetteCentreX?: number;
-            vignetteCentreY?: number;
-            vignetteWeight?: number;
-            vignetteColor?: { r: number, g: number, b: number, a: number };
-            vignetteCameraFov?: number;
-            vignetteBlendMode?: number;
-            applyByPostProcess?: boolean;
-
-        }
+        imageProcessingConfiguration?: IImageProcessingConfiguration;
     },
     // at the moment, support only a single camera.
     camera?: {
@@ -76,6 +58,21 @@ export interface ViewerConfiguration {
 
         [propName: string]: any;
     },
+    skybox?: {
+        cubeTexture: {
+            noMipMap?: boolean;
+            gammaSpace?: boolean;
+            url: string | Array<string>;
+        };
+        pbr?: boolean;
+        scale?: number;
+        blur?: number;
+        material?: {
+            imageProcessingConfiguration?: IImageProcessingConfiguration;
+        };
+        infiniteDIstance?: boolean;
+
+    },
     lights?: Array<{
         type: number;
         name?: string;
@@ -111,6 +108,45 @@ export interface ViewerConfiguration {
     // nodes?
 }
 
+export interface IImageProcessingConfiguration {
+    colorGradingEnabled?: boolean;
+    colorCurvesEnabled?: boolean;
+    colorCurves?: {
+        globalHue?: number;
+        globalDensity?: number;
+        globalSaturation?: number;
+        globalExposure?: number;
+        highlightsHue?: number;
+        highlightsDensity?: number;
+        highlightsSaturation?: number;
+        highlightsExposure?: number;
+        midtonesHue?: number;
+        midtonesDensity?: number;
+        midtonesSaturation?: number;
+        midtonesExposure?: number;
+        shadowsHue?: number;
+        shadowsDensity?: number;
+        shadowsSaturation?: number;
+        shadowsExposure?: number;
+    };
+    colorGradingWithGreenDepth?: boolean;
+    colorGradingBGR?: boolean;
+    exposure?: number;
+    toneMappingEnabled?: boolean;
+    contrast?: number;
+    vignetteEnabled?: boolean;
+    vignetteStretch?: number;
+    vignetteCentreX?: number;
+    vignetteCentreY?: number;
+    vignetteWeight?: number;
+    vignetteColor?: { r: number, g: number, b: number, a?: number };
+    vignetteCameraFov?: number;
+    vignetteBlendMode?: number;
+    vignetteM?: boolean;
+    applyByPostProcess?: boolean;
+
+}
+
 export let defaultConfiguration: ViewerConfiguration = {
     version: "0.1",
     eventPrefix: 'babylonviewer-',
@@ -161,10 +197,42 @@ export let defaultConfiguration: ViewerConfiguration = {
             }
         }
     ],
+    skybox: {
+        cubeTexture: {
+            url: 'http://localhost:9000/environment.dds',
+
+        },
+        pbr: true,
+        blur: 0.7,
+        scale: 32,
+        infiniteDIstance: false,
+        material: {
+            imageProcessingConfiguration: {
+                colorCurves: {
+                    globalDensity: 89,
+                    globalHue: 58.88,
+                    globalSaturation: 94
+                },
+                colorCurvesEnabled: true,
+                exposure: 1.5,
+                contrast: 1.66,
+                toneMappingEnabled: true,
+                vignetteEnabled: true,
+                vignetteWeight: 5,
+                vignetteColor: { r: 0.8, g: 0.6, b: 0.4 },
+                vignetteM: true
+            }
+        }
+    },
     engine: {
         antialiasing: true
     },
     scene: {
+        imageProcessingConfiguration: {
+            exposure: 1.4,
+            contrast: 1.66,
+            toneMappingEnabled: true
+        }
         //autoRotate: true,
         //rotationSpeed: 0.1
     }

Viewer/src/viewer/defaultViewer.ts

@@ -1,6 +1,6 @@
 import { Template } from './../templateManager';
 import { AbstractViewer } from './viewer';
-import { Observable, ShadowLight, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ShadowOnlyMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
+import { Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ShadowOnlyMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
 import { CameraBehavior } from '../interfaces';
 
 // A small hack for the inspector. to be removed!
@@ -11,6 +11,13 @@ export class DefaultViewer extends AbstractViewer {
 
     private camera: ArcRotateCamera;
 
+    public initScene(): Promise<Scene> {
+        return super.initScene().then(() => {
+            this.extendClassWithConfig(this.scene, this.configuration.scene);
+            return this.scene;
+        })
+    }
+
     protected onTemplatesLoaded() {
 
         this.showLoadingScreen();
@@ -59,42 +66,37 @@ export class DefaultViewer extends AbstractViewer {
         ground.material = new ShadowOnlyMaterial('shadow-only-mat', this.scene)
         ground.material.alpha = 0.4;
 
-        return Promise.resolve(this.scene);
+        return this.initEnvironment();
     }
 
     public initEnvironment(): Promise<Scene> {
-        this.scene.imageProcessingConfiguration.exposure = 1.4;
-        this.scene.imageProcessingConfiguration.contrast = 1.66;
-        this.scene.imageProcessingConfiguration.toneMappingEnabled = true;
-
-        // Define a general environment textue
-        /*var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://playground.babylonjs.com/textures/environment.dds", this.scene);
-        hdrTexture.gammaSpace = false;
-
-        // Let's create a color curve to play with background color
-        var curve = new BABYLON.ColorCurves();
-        curve.globalHue = 58.88;
-        curve.globalDensity = 89;
-        curve.globalSaturation = 94;
-
-        // Create a dedicated background configuration 
-        var backgroundImageProcessingConfiguration = new ImageProcessingConfiguration();
-        backgroundImageProcessingConfiguration.exposure = 1.5;
-        backgroundImageProcessingConfiguration.contrast = 1.66;
-        backgroundImageProcessingConfiguration.toneMappingEnabled = true;
-        backgroundImageProcessingConfiguration.vignetteEnabled = true;
-        //backgroundImageProcessingConfiguration.vignetteM = true;
-        backgroundImageProcessingConfiguration.vignetteWeight = 5;
-        //backgroundImageProcessingConfiguration.vignetteColor = new Color3(0.8, 0.6, 0.4);
-        backgroundImageProcessingConfiguration.colorCurves = curve;
-        backgroundImageProcessingConfiguration.colorCurvesEnabled = true;*/
-
-        /**/
-
-        // Our skybox with the color curve
-        /*var box = this.scene.createDefaultSkybox(hdrTexture, true, (this.scene.activeCamera.maxZ - this.scene.activeCamera.minZ) / 2, 0.7);
-        box.infiniteDistance = false;
-        (<StandardMaterial>box.material).imageProcessingConfiguration = backgroundImageProcessingConfiguration;*/
+        if (this.configuration.skybox) {
+            // Define a general environment textue
+            let texture;
+            // this is obligatory, but still - making sure it is there.
+            if (this.configuration.skybox.cubeTexture) {
+                if (typeof this.configuration.skybox.cubeTexture.url === 'string') {
+                    texture = CubeTexture.CreateFromPrefilteredData(this.configuration.skybox.cubeTexture.url, this.scene);
+                } else {
+                    texture = CubeTexture.CreateFromImages(this.configuration.skybox.cubeTexture.url, this.scene, this.configuration.skybox.cubeTexture.noMipMap);
+                }
+            }
+            if (texture) {
+
+                this.extendClassWithConfig(texture, this.configuration.skybox.cubeTexture);
+
+                console.log((this.scene.activeCamera.maxZ - this.scene.activeCamera.minZ) / 2);
+
+                let box = this.scene.createDefaultSkybox(texture, this.configuration.skybox.pbr, this.configuration.skybox.scale, this.configuration.skybox.blur);
+
+                // before extending, set the material's imageprocessing configuration object, if needed:
+                if (this.configuration.skybox.material && this.configuration.skybox.material.imageProcessingConfiguration) {
+                    (<StandardMaterial>box.material).imageProcessingConfiguration = new ImageProcessingConfiguration();
+                }
+
+                this.extendClassWithConfig(box, this.configuration.skybox);
+            }
+        }
 
         return Promise.resolve(this.scene);
     }