fix(hdrSky): Distinguish HDR/LDR texture (#171)

Distinguish between HDR and LDR sky box rendering methods update import path. Reuse variables simplified code
Orillusion · May 23, 2023 · 9a89d2b · 9a89d2b
1 parent 071ac16
commit 9a89d2b
Show file tree

Hide file tree

Showing 17 changed files with 182 additions and 356 deletions.
diff --git a/samples/sky/Sample_AtmosphericSky.ts b/samples/sky/Sample_AtmosphericSky.ts
@@ -1,43 +1,19 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, Texture, AtmosphericScatteringSky, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
 import { GUIUtil } from "@samples/utils/GUIUtil";
+import { createExampleScene } from "@samples/utils/ExampleScene";
+import { AtmosphericComponent, Engine3D, Scene3D } from "@orillusion/core";
 
 // sample of AtmosphericSky
 class Sample_AtmosphericSky {
-    private _scene: Scene3D;
-
     async run() {
         // init engine
         await Engine3D.init({});
-
         // init scene
-        this._scene = new Scene3D();
-        // add atmospheric sky
-        let component = this._scene.addComponent(AtmosphericComponent);
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-
-        // camera controller
-        mainCamera.object3D.addComponent(HoverCameraController).setCamera(45, -10, 10);
-
-        // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
-
+        let scene: Scene3D = createExampleScene().scene;
         // start renderer
-        Engine3D.startRenderView(view);
-
+        Engine3D.startRenderView(scene.view);
+        // add atmospheric sky
+        let component = scene.getComponent(AtmosphericComponent);
         // gui
         GUIHelp.init();
         GUIUtil.renderAtomosphericSky(component);

diff --git a/samples/sky/Sample_BitmapCubeSky.ts b/samples/sky/Sample_BitmapCubeSky.ts
@@ -1,40 +1,14 @@
-import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, CameraUtil, HoverCameraController, View3D, Texture, SkyRenderer, Object3D, BoxGeometry, LitMaterial, MeshRenderer } from "@orillusion/core";
+import { createExampleScene } from "@samples/utils/ExampleScene";
+import { Engine3D, Scene3D, SkyRenderer, Object3DUtil } from "@orillusion/core";
 
 // sample to replace sky map. (witch contains 6 faces)
 class Sample_BitmapCubeSky {
-    private _scene: Scene3D;
     async run() {
         // init engine
         await Engine3D.init({});
-
         // init scene
-        this._scene = new Scene3D();
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-
-        // camera controller
-        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
-        hoverCameraController.setCamera(45, -10, 10);
-
-        // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
-
-        // start renderer
-        Engine3D.startRenderView(view);
-
+        let scene: Scene3D = createExampleScene().scene;
+        let sky = scene.getOrAddComponent(SkyRenderer);
         // load sky texture (nx/px/py/ny/nz/pz), a total of 6 images
         let urls: string[] = [];
         urls.push('textures/cubemap/skybox_nx.png');
@@ -44,11 +18,14 @@ class Sample_BitmapCubeSky {
         urls.push('textures/cubemap/skybox_nz.png');
         urls.push('textures/cubemap/skybox_pz.png');
 
-        let sky = this._scene.addComponent(SkyRenderer)
         sky.map = await Engine3D.res.loadTextureCubeMaps(urls);
-        this._scene.envMap = sky.map
-    }
+        // create a basic cube
+        scene.addChild(Object3DUtil.GetSingleCube(10, 10, 10, 0.6, 0.6, 0.6));
 
+        // start renderer
+        Engine3D.startRenderView(scene.view);
+
+    }
 }
 
 new Sample_BitmapCubeSky().run();
diff --git a/samples/sky/Sample_BitmapCubeStdSky.ts b/samples/sky/Sample_BitmapCubeStdSky.ts
@@ -1,48 +1,22 @@
-import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, Texture, SkyRenderer, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
+import { createExampleScene } from "@samples/utils/ExampleScene";
+import { Engine3D, Scene3D, SkyRenderer, Object3DUtil } from "@orillusion/core";
 
 // sample to replace standard sky map
 class Sample_BitmapCubeStdSky {
-    private _scene: Scene3D;
     async run() {
         // init engine
         await Engine3D.init({});
-
         // init scene
-        this._scene = new Scene3D();
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-
-        // camera controller
-        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
-        hoverCameraController.setCamera(45, -10, 10);
+        let scene: Scene3D = createExampleScene().scene;
+        let sky = scene.getOrAddComponent(SkyRenderer);
+        sky.map = await Engine3D.res.loadTextureCubeStd('sky/StandardCubeMap-2.jpg');
 
         // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
+        scene.addChild(Object3DUtil.GetSingleCube(10, 10, 10, 0.6, 0.6, 0.6));
 
         // start renderer
-        Engine3D.startRenderView(view);
-
-        // load standard sky texture
-        let url = 'sky/StandardCubeMap-2.jpg';
-
-        let sky = this._scene.addComponent(SkyRenderer)
-        sky.map = await Engine3D.res.loadTextureCubeStd(url);
-        this._scene.envMap = sky.map
+        Engine3D.startRenderView(scene.view);
     }
-
 }
 
 new Sample_BitmapCubeStdSky().run();
diff --git a/samples/sky/Sample_HDRSky.ts b/samples/sky/Sample_HDRSky.ts
@@ -1,48 +1,24 @@
-import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, Texture, SkyRenderer, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
+import { createExampleScene } from "@samples/utils/ExampleScene";
+import { Engine3D, Scene3D, SkyRenderer, Object3DUtil } from "@orillusion/core";
 
 // sample to replace hdr sky map
 class Sample_HDRSky {
-    private _scene: Scene3D;
-    private _externalTexture: Texture;
-    private _originTexture: Texture;
-    private _useExternal: boolean = false;
     async run() {
         // init engine
         await Engine3D.init({});
-
         // init scene
-        this._scene = new Scene3D();
-        // load sky texture
-        let sky = this._scene.addComponent(SkyRenderer)
+        let scene: Scene3D = createExampleScene().scene;
+        let sky = scene.getOrAddComponent(SkyRenderer);
         sky.map = await Engine3D.res.loadHDRTextureCube('/hdri/sunset.hdr');
-        this._scene.envMap = sky.map
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
 
         // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // camera controller
-        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
-        hoverCameraController.setCamera(45, -10, 10);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
+        scene.addChild(Object3DUtil.GetSingleCube(10, 10, 10, 0.6, 0.6, 0.6));
 
         // start renderer
-        Engine3D.startRenderView(view);
+        Engine3D.startRenderView(scene.view);
     }
 
 }
 
+
 new Sample_HDRSky().run();
diff --git a/samples/sky/Sample_LDRSky.ts b/samples/sky/Sample_LDRSky.ts
@@ -1,46 +1,21 @@
-import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, Texture, SkyRenderer, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
+import { Scene3D, Object3DUtil, Engine3D, SkyRenderer } from "@orillusion/core";
+import { createExampleScene } from "@samples/utils/ExampleScene";
 
 // sample to replace ldr sky map
 class Sample_LDRSky {
-    private _scene: Scene3D;
-    private _originTexture: Texture;
-    private _externalTexture: Texture;
-    private _useExternal: boolean = false;
     async run() {
         // init engine
         await Engine3D.init({});
-
         // init scene
-        this._scene = new Scene3D();
-        let sky = this._scene.addComponent(SkyRenderer)
+        let scene: Scene3D = createExampleScene().scene;
+        let sky = scene.getOrAddComponent(SkyRenderer);
         sky.map = await Engine3D.res.loadLDRTextureCube('sky/LDR_sky.jpg')
-        sky.roughness = 0.2
-        this._scene.envMap = sky.map
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-
-        // camera controller
-        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
-        hoverCameraController.setCamera(45, -10, 10);
 
         // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
+        scene.addChild(Object3DUtil.GetSingleCube(10, 10, 10, 0.6, 0.6, 0.6));
 
         // start renderer
-        Engine3D.startRenderView(view);
+        Engine3D.startRenderView(scene.view);
     }
 
 }

diff --git a/samples/sky/Sample_SolidColorSky.ts b/samples/sky/Sample_SolidColorSky.ts
@@ -1,48 +1,27 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, View3D, Texture, Color, SolidColorSky, Object3DUtil, SkyRenderer, BoxGeometry, LitMaterial, MeshRenderer, Object3D } from "@orillusion/core";
+import { createExampleScene } from "@samples/utils/ExampleScene";
+import { SolidColorSky, Engine3D, SkyRenderer, Color, Object3DUtil } from "@orillusion/core";
 
 // sample to display solid color sky
 class HDRSkyMap {
-    private _scene: Scene3D;
-    private _externalTexture: SolidColorSky;
-    private _originTexture: Texture;
-    private _useExternal: boolean = false;
-
     async run() {
         // init engine
         await Engine3D.init({});
-
+        GUIHelp.init();
         // init scene
-        this._scene = new Scene3D();
-        // use default env lights
-        this._scene.addComponent(AtmosphericComponent)
+        let scene = createExampleScene().scene;
         // use solid color as background
-        let sky = this._scene.addComponent(SkyRenderer)
-        sky.map = new SolidColorSky(new Color(0.3, 0.3, 0.3, 1))
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-
-        // camera controller
-        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
-        hoverCameraController.setCamera(45, -10, 10);
-
+        let sky = scene.getOrAddComponent(SkyRenderer);
+        sky.map = new SolidColorSky(new Color(0.3, 0.5, 0.3, 1));
+        //gui
+        GUIHelp.addColor(sky.map, 'color');
+        GUIHelp.open();
+        GUIHelp.endFolder();
         // create a basic cube
-        let cubeObj = new Object3D();
-        let mr = cubeObj.addComponent(MeshRenderer);
-        mr.geometry = new BoxGeometry();
-        let mat = new LitMaterial();
-        mr.material = mat;
-        this._scene.addChild(cubeObj);
-
-        // init view3D
-        let view = new View3D();
-        view.scene = this._scene;
-        view.camera = mainCamera;
+        scene.addChild(Object3DUtil.GetSingleCube(10, 10, 10, 0.6, 0.6, 0.6));
 
         // start renderer
-        Engine3D.startRenderView(view);
+        Engine3D.startRenderView(scene.view);
     }
 
 }

diff --git a/samples/utils/ExampleScene.ts b/samples/utils/ExampleScene.ts
@@ -51,7 +51,7 @@ export function createSceneParam(): ExampleSceneParam {
             far: 5000,
             distance: 100,
             fov: 60,
-            pitch: -30,
+            pitch: -15,
             roll: -30,
         },
 

diff --git a/src/assets/shader/sky/CubeSky_Shader.ts b/src/assets/shader/sky/CubeSky_Shader.ts
@@ -77,8 +77,11 @@ export class CubeSky_Shader {
     @fragment
     fn main(@location(0) fragUV: vec2<f32>, @location(1) vWorldPos: vec4<f32>, @location(2) vWorldNormal: vec3<f32>) -> FragmentOutput {
         let maxLevel: u32 = textureNumLevels(baseMap);
-        let textureColor:vec3<f32> = textureSampleLevel(baseMap, baseMapSampler, normalize(vWorldPos.xyz), global.roughness * f32(maxLevel) ).xyz;
-        let o_Target: vec4<f32> = vec4<f32>(LinearToGammaSpace(textureColor),1.0) * globalUniform.skyExposure ;
+        var textureColor:vec3<f32> = textureSampleLevel(baseMap, baseMapSampler, normalize(vWorldPos.xyz), global.roughness * f32(maxLevel) ).xyz;
+        #if IS_HDR_SKY
+        textureColor = LinearToGammaSpace(textureColor);
+        #endif
+        let o_Target: vec4<f32> =vec4<f32>(textureColor, 1.0) * globalUniform.skyExposure ;
         var normal_rgba8unorm = (vWorldNormal + 1.0) * 0.5;
         normal_rgba8unorm = clamp(normal_rgba8unorm, vec3<f32>(0.0), vec3<f32>(1.0));
 

diff --git a/src/gfx/graphics/webGpu/core/texture/Texture.ts b/src/gfx/graphics/webGpu/core/texture/Texture.ts
@@ -120,6 +120,7 @@ export class Texture implements GPUSamplerDescriptor {
      *  whether is video texture
      */
     public isVideoTexture?: boolean;
+    public isHDRTexture?: boolean;
 
     private _useMipmap: boolean = false;
 

diff --git a/src/index.ts b/src/index.ts
@@ -453,6 +453,7 @@ export * from "./textures/HDRTexture"
 export * from "./textures/HDRTextureCube"
 export * from "./textures/LDRTextureCube"
 export * from "./textures/SolidColorSky"
+export * from "./textures/TextureCubeFaceData"
 export * from "./textures/Uint16Texture"
 export * from "./textures/Uint8ArrayTexture"
 export * from "./textures/VirtualTexture"