fix(skyLight): change all AtmosphericComponent of samples (#239)

Cover all samples and bind the direction of the sky and sunlight.
Change the initialization sun direction to the appropriate value

samples/animation/Sample_CurveAnimation.ts

@@ -22,7 +22,7 @@ class Sample_AnimCurve {
         Engine3D.setting.shadow.type = `HARD`;
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
 
         let camera = CameraUtil.createCamera3DObject(this.scene);
         camera.perspective(60, Engine3D.aspect, 0.01, 5000.0);
@@ -36,6 +36,7 @@ class Sample_AnimCurve {
         Engine3D.startRenderView(view);
 
         await this.initScene();
+        sky.relativeTransform = this.lightObj3D.transform;
     }
 
     async initScene() {

samples/animation/Sample_MorphTarget.ts

@@ -14,13 +14,14 @@ class Sample_MorphTarget {
         await Engine3D.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
 
         let camera = CameraUtil.createCamera3DObject(this.scene);
         camera.perspective(60, webGPUContext.aspect, 1, 5000.0);
         camera.object3D.addComponent(HoverCameraController).setCamera(0, 0, 150);
 
         this.initDirectLight();
+        sky.relativeTransform = this.lightObj3D.transform;
         await this.initMorphModel();
 
         let view = new View3D();

samples/animation/Sample_PropertyAnimation.ts

@@ -16,8 +16,6 @@ class Sample_PropertyAnimation {
         await Engine3D.init();
         let param = createSceneParam();
         param.camera.distance = 16;
-        param.camera.pitch = -25;
-        param.light.intensity = 40;
         let exampleScene = createExampleScene(param);
 
         GUIHelp.init();

samples/animation/Sample_Skeleton.ts

@@ -15,7 +15,7 @@ class Sample_Skeleton {
         await Engine3D.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
 
         let camera = CameraUtil.createCamera3DObject(this.scene);
         camera.perspective(60, Engine3D.aspect, 0.01, 5000.0);
@@ -30,7 +30,8 @@ class Sample_Skeleton {
 
         Engine3D.startRenderView(view);
 
-        this.initScene(this.scene);
+        await this.initScene(this.scene);
+        sky.relativeTransform = this.lightObj3D.transform;
     }
 
 

samples/animation/Sample_Skeleton2.ts

@@ -16,7 +16,7 @@ class Sample_Skeleton2 {
         await Engine3D.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
         this.scene.exposure = 1;
 
         let mainCamera = CameraUtil.createCamera3DObject(this.scene);
@@ -33,6 +33,7 @@ class Sample_Skeleton2 {
         Engine3D.startRenderView(view);
 
         await this.initScene(this.scene);
+        sky.relativeTransform = this.lightObj3D.transform;
     }
 
     async initScene(scene: Scene3D) {
@@ -56,7 +57,7 @@ class Sample_Skeleton2 {
             GUIUtil.renderDirLight(directLight);
             scene.addChild(this.lightObj3D);
         }
-     
+
         {
             // load model with skeletion animation
             let rootNode = await Engine3D.res.loadGltf('gltfs/glb/Soldier.glb');
@@ -96,8 +97,8 @@ class Sample_Skeleton2 {
         return true;
     }
 
-    sleep(time:number){
-        return new Promise(res=>{
+    sleep(time: number) {
+        return new Promise(res => {
             setTimeout(res, time || 200)
         })
     }

samples/animation/Sample_Skeleton3.ts

@@ -21,7 +21,7 @@ class Sample_Skeleton3 {
         GUIHelp.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
 
         let mainCamera = CameraUtil.createCamera3DObject(this.scene);
         mainCamera.perspective(60, webGPUContext.aspect, 1, 3000.0);
@@ -37,6 +37,7 @@ class Sample_Skeleton3 {
         this.view.camera = mainCamera;
 
         Engine3D.startRenderView(this.view);
+        sky.relativeTransform = this.lightObj3D.transform;
     }
 
     async initScene(scene: Scene3D) {

samples/base/Sample_Destroy.ts

@@ -31,6 +31,7 @@ class Sample_Destroy {
         let light: Object3D = new Object3D()
         // add direct light component
         let component: DirectLight = light.addComponent(DirectLight)
+        sky.relativeTransform = component.transform;
         // adjust lighting
         light.rotationX = 45
         light.rotationY = 30

samples/base/Sample_Transform.ts

@@ -44,6 +44,8 @@ class Sample_Transform {
         dirLight.intensity = 10;
         scene.addChild(lightObj);
 
+        sky.relativeTransform = dirLight.transform;
+
         // create a view with target scene and camera
         let view = new View3D();
         view.scene = scene;

samples/geometry/Sample_CustomGeometry.ts

@@ -4,6 +4,7 @@ import { GUIUtil } from "@samples/utils/GUIUtil";
 
 // An sample of custom vertex attribute of geometry
 class Sample_CustomGeometry {
+    dirLight: DirectLight;
     async run() {
         Engine3D.setting.shadow.autoUpdate = true;
         Engine3D.setting.shadow.shadowBias = 0.002;
@@ -13,7 +14,7 @@ class Sample_CustomGeometry {
         await Engine3D.init();
         let view = new View3D();
         view.scene = new Scene3D();
-        view.scene.addComponent(AtmosphericComponent);
+        let sky = view.scene.addComponent(AtmosphericComponent);
 
         view.camera = CameraUtil.createCamera3DObject(view.scene);
         view.camera.perspective(60, webGPUContext.aspect, 1, 5000.0);
@@ -22,12 +23,13 @@ class Sample_CustomGeometry {
 
         Engine3D.startRenderView(view);
 
-        this.createScene(view.scene);
+        await this.createScene(view.scene);
+        sky.relativeTransform = this.dirLight.transform;
     }
 
     private async createScene(scene: Scene3D) {
         let sunObj = new Object3D();
-        let sunLight = sunObj.addComponent(DirectLight);
+        let sunLight = this.dirLight = sunObj.addComponent(DirectLight);
         sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(65533);
         sunLight.castShadow = true;
         sunObj.transform.rotationX = 50;

samples/geometry/Sample_InternalGeometry.ts

@@ -4,6 +4,7 @@ import { GUIUtil } from "@samples/utils/GUIUtil";
 
 // An sample of display internal geometry
 class Sample_InternalGeometry {
+    lightObj: Object3D;
     async run() {
         Engine3D.setting.shadow.autoUpdate = true;
         Engine3D.setting.shadow.shadowBias = 0.002;
@@ -13,7 +14,7 @@ class Sample_InternalGeometry {
         await Engine3D.init();
         let view = new View3D();
         view.scene = new Scene3D();
-        view.scene.addComponent(AtmosphericComponent);
+        let sky = view.scene.addComponent(AtmosphericComponent);
 
         view.camera = CameraUtil.createCamera3DObject(view.scene);
         view.camera.perspective(60, webGPUContext.aspect, 1, 5000.0);
@@ -22,12 +23,13 @@ class Sample_InternalGeometry {
 
         Engine3D.startRenderView(view);
 
-        this.createScene(view.scene);
+        await this.createScene(view.scene);
+        sky.relativeTransform = this.lightObj.transform;
     }
 
     private async createScene(scene: Scene3D) {
         // add a direction light
-        let lightObj3D = new Object3D();
+        let lightObj3D = this.lightObj = new Object3D();
         let sunLight = lightObj3D.addComponent(DirectLight);
         sunLight.intensity = 15;
         sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(6553);

samples/geometry/Sample_VertexAnimation.ts

@@ -8,14 +8,15 @@ class Smaple_VertexAnimation {
     // This geometry will dynamically update its vertex data over time
     floorGeometry: PlaneGeometry;
     scene: Scene3D;
+    lightObj: Object3D;
     async run() {
 
         await Engine3D.init({ beforeRender: () => this.update() });
 
         let view = new View3D();
 
         view.scene = new Scene3D();
-        view.scene.addComponent(AtmosphericComponent);
+        let sky = view.scene.addComponent(AtmosphericComponent);
         view.scene.addComponent(Stats);
 
         this.scene = view.scene;
@@ -27,12 +28,13 @@ class Smaple_VertexAnimation {
         Engine3D.startRenderView(view);
 
         this.createScene();
+        sky.relativeTransform = this.lightObj.transform;
     }
 
     private createScene() {
         GUIHelp.init();
         // add light
-        let lightObj3D = new Object3D();
+        let lightObj3D = this.lightObj = new Object3D();
         let directLight = lightObj3D.addComponent(DirectLight);
         directLight.intensity = 25;
         directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);

samples/lights/Sample_AddRemovePointLight.ts

@@ -15,7 +15,7 @@ class Sample_AddRemovePointLight {
         GUIHelp.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
         // init camera3D
         let mainCamera = CameraUtil.createCamera3D(null, this.scene);
         mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
@@ -29,6 +29,7 @@ class Sample_AddRemovePointLight {
         view.camera = mainCamera;
 
         Engine3D.startRenderViews([view]);
+        sky.relativeTransform = this.lightObj.transform;
 
     }
 

samples/lights/Sample_DirectLight.ts

@@ -19,7 +19,7 @@ class Sample_DirectLight {
         mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
         //set camera data
         mainCamera.object3D.addComponent(HoverCameraController).setCamera(0, -25, 1000);
-        
+
         sky.relativeTransform = this.initLight();
         this.initScene();
 
@@ -39,7 +39,7 @@ class Sample_DirectLight {
         this.lightObj3D.z = -40;
         this.lightObj3D.rotationX = 46;
         this.lightObj3D.rotationY = 62;
-        this.lightObj3D.rotationZ = 360;
+        this.lightObj3D.rotationZ = 0;
         let directLight = this.lightObj3D.addComponent(DirectLight);
         //Convert color temperature to color object
         directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);

samples/lights/Sample_DirectLightShadow.ts

@@ -32,22 +32,25 @@ class Sample_DirectLightShadow {
         let view = new View3D();
         view.scene = this.scene;
         view.camera = mainCamera;
-        
+
         Engine3D.startRenderView(view);
     }
 
     // create direction light
     private initLight() {
         // add a direction light
         let lightObj3D = new Object3D();
+        lightObj3D.rotationX = 46;
+        lightObj3D.rotationY = 62;
+        lightObj3D.rotationZ = 0;
         let sunLight = lightObj3D.addComponent(DirectLight);
         sunLight.intensity = 15;
         sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(6553);
         sunLight.castShadow = true;
 
         GUIUtil.renderDirLight(sunLight);
         this.scene.addChild(lightObj3D);
-        return sunLight.transform
+        return sunLight.transform;
     }
 
     initScene() {

samples/lights/Sample_PointLight.ts

@@ -15,14 +15,15 @@ class Sample_PointLight {
         GUIHelp.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
         // init camera3D
         let mainCamera = CameraUtil.createCamera3D(null, this.scene);
         mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
         //set camera data
         mainCamera.object3D.addComponent(HoverCameraController).setCamera(0, -25, 500);
 
         await this.initScene(this.scene);
+        sky.relativeTransform = this.lightObj.transform;
 
         let view = new View3D();
         view.scene = this.scene;
@@ -32,7 +33,7 @@ class Sample_PointLight {
     }
 
     initScene(scene: Scene3D) {
-        let lightObj3D = new Object3D();
+        let lightObj3D = this.lightObj = new Object3D();
         let render = lightObj3D.addComponent(MeshRenderer);
         render.geometry = new SphereGeometry(5, 30, 30);
         render.material = new LitMaterial();

samples/lights/Sample_PointLightShadow.ts

@@ -5,7 +5,7 @@ import { GUIUtil } from "@samples/utils/GUIUtil";
 // sample of point light shadow
 class Sample_PointLightShadow {
     scene: Scene3D;
-
+    lightObj: Object3D;
     async run() {
 
         Engine3D.setting.shadow.enable = true;
@@ -16,7 +16,7 @@ class Sample_PointLightShadow {
         await Engine3D.init({});
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
 
         // init camera3D
         let mainCamera = CameraUtil.createCamera3D(null, this.scene);
@@ -25,6 +25,7 @@ class Sample_PointLightShadow {
         mainCamera.object3D.addComponent(HoverCameraController).setCamera(0, -45, 500);
 
         await this.initScene(this.scene);
+        sky.relativeTransform = this.lightObj.transform;
 
         let view = new View3D();
         view.scene = this.scene;
@@ -34,7 +35,7 @@ class Sample_PointLightShadow {
     }
 
     async initScene(scene: Scene3D) {
-        let lightObj3D = new Object3D();
+        let lightObj3D = this.lightObj = new Object3D();
         lightObj3D.y = 25;
 
         //make point light

samples/loader/Sample_LoadGLTF.ts

@@ -40,9 +40,10 @@ class Sample_LoadGLTF {
     }
 
     async initScene() {
+        let atmospheric: AtmosphericComponent;
         /******** sky *******/
         {
-            let atmospheric = this.scene.addComponent(AtmosphericComponent);
+            atmospheric = this.scene.addComponent(AtmosphericComponent);
             atmospheric.sunY = 0.62;
             atmospheric.sunRadiance = 47;
             atmospheric.exposure = 1;
@@ -62,6 +63,8 @@ class Sample_LoadGLTF {
             GUIHelp.init();
             GUIUtil.renderDirLight(directLight);
             this.scene.addChild(this.lightObj3D);
+
+            atmospheric.relativeTransform = this.lightObj3D.transform;
         }
 
         {

samples/material/Sample_PBR.ts

@@ -17,7 +17,7 @@ class Sample_PBR {
         GUIHelp.init();
 
         this.scene = new Scene3D();
-        this.scene.addComponent(AtmosphericComponent);
+        let sky = this.scene.addComponent(AtmosphericComponent);
         let camera = CameraUtil.createCamera3DObject(this.scene);
         camera.perspective(60, Engine3D.aspect, 1, 5000.0);
 
@@ -30,6 +30,7 @@ class Sample_PBR {
         Engine3D.startRenderView(view);
 
         await this.initScene();
+        sky.relativeTransform = this.lightObj3D.transform;
     }
 
     async initScene() {