feat(sample): add sky texture samples (Orillusion#96)

Add sky texture samples.

samples/sky/Sample_AtmosphericSky.ts

@@ -0,0 +1,53 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture, AtmosphericScatteringSky } 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, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // gui
+        this.debug(component);
+    }
+
+    private debug(component: AtmosphericComponent) {
+        GUIHelp.init();
+        GUIHelp.addFolder('AtmosphericSky');
+        GUIHelp.add(component, 'sunX', 0, 1, 0.01);
+        GUIHelp.add(component, 'sunY', 0, 1, 0.01);
+        GUIHelp.add(component, 'eyePos', 0, 5000, 1);
+        GUIHelp.add(component, 'sunRadius', 0, 1000, 0.01);
+        GUIHelp.add(component, 'sunRadiance', 0, 100, 0.01);
+        GUIHelp.add(component, 'sunBrightness', 0, 10, 0.01);
+        GUIHelp.add(component, 'exposure', 0, 2, 0.01);
+        GUIHelp.add(component, 'displaySun', 0, 1, 0.01);
+        GUIHelp.open();
+        GUIHelp.endFolder();
+    }
+}
+
+new Sample_AtmosphericSky().run();

samples/sky/Sample_BitmapCubeSky.ts

@@ -0,0 +1,58 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture } from "@orillusion/core";
+
+// sample to replace sky map. (witch contains 6 faces)
+class Sample_BitmapCubeSky {
+    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();
+        // add sky
+        this._scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // load sky texture (nx/px/py/ny/nz/pz), a total of 6 images
+        let urls: string[] = [];
+        urls.push('textures/cubemap/skybox_nx.png');
+        urls.push('textures/cubemap/skybox_px.png');
+        urls.push('textures/cubemap/skybox_py.png');
+        urls.push('textures/cubemap/skybox_ny.png');
+        urls.push('textures/cubemap/skybox_nz.png');
+        urls.push('textures/cubemap/skybox_pz.png');
+
+        this._externalTexture = await Engine3D.res.loadTextureCubeMaps(urls);
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.addButton('Switch Maps', () => {
+            this._originTexture ||= this._scene.envMap;
+            this._useExternal = !this._useExternal;
+            this._scene.envMap = this._useExternal ? this._externalTexture : this._originTexture;
+        })
+        GUIHelp.open();
+    }
+
+}
+
+new Sample_BitmapCubeSky().run();

samples/sky/Sample_BitmapCubeStdSky.ts

@@ -0,0 +1,51 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture } from "@orillusion/core";
+
+// sample to replace standard sky map
+class Sample_BitmapCubeStdSky {
+    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();
+        // add sky
+        this._scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // load standard sky texture
+        let url = 'sky/StandardCubeMap-2.jpg';
+        this._externalTexture = await Engine3D.res.loadTextureCubeStd(url);
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.addButton('Switch Maps', () => {
+            this._originTexture ||= this._scene.envMap;
+            this._useExternal = !this._useExternal;
+            this._scene.envMap = this._useExternal ? this._externalTexture : this._originTexture;
+        })
+        GUIHelp.open();
+    }
+
+}
+
+new Sample_BitmapCubeStdSky().run();

samples/sky/Sample_HDRSky.ts

@@ -0,0 +1,50 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture } 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();
+        // add sky
+        this._scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // load sky texture
+        this._externalTexture = await Engine3D.res.loadHDRTextureCube('hdri/sunset.hdr');
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.addButton('Switch Maps', () => {
+            this._originTexture ||= this._scene.envMap;
+            this._useExternal = !this._useExternal;
+            this._scene.envMap = this._useExternal ? this._externalTexture : this._originTexture;
+        })
+        GUIHelp.open();
+    }
+
+}
+
+new Sample_HDRSky().run();

samples/sky/Sample_LDRSky.ts

@@ -0,0 +1,50 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture } from "@orillusion/core";
+
+// 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();
+        // add sky
+        this._scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // load LDR sky texture
+        this._externalTexture = await Engine3D.res.loadLDRTextureCube('sky/LDR_sky.jpg');
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.addButton('Switch Maps', () => {
+            this._originTexture ||= this._scene.envMap;
+            this._useExternal = !this._useExternal;
+            this._scene.envMap = this._useExternal ? this._externalTexture : this._originTexture;
+        })
+        GUIHelp.open();
+    }
+
+}
+
+new Sample_LDRSky().run();

samples/sky/Sample_SolidColorSky.ts

@@ -0,0 +1,54 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, webGPUContext, HoverCameraController, View3D, Texture, Color, SolidColorSky, 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({});
+
+        // init scene
+        this._scene = new Scene3D();
+        // add default sky
+        this._scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this._scene);
+        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0);
+
+        // 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;
+
+        // start renderer
+        Engine3D.startRenderView(view);
+
+        // gui
+        GUIHelp.init();
+        GUIHelp.addButton('Switch Maps', () => {
+            if (!this._externalTexture) {
+                // init solid color sky
+                this._externalTexture = new SolidColorSky(new Color(0.5, 0.8, 0, 1));
+                this._originTexture = this._scene.envMap;
+                GUIHelp.addColor(this._externalTexture, 'color');
+            }
+
+            this._useExternal = !this._useExternal;
+            this._scene.envMap = this._useExternal ? this._externalTexture : this._originTexture;
+        })
+        GUIHelp.open();
+    }
+
+}
+
+new HDRSkyMap().run();