fix(AtmosphericComponent): fix AtmosphericComponent Update (#99)

fix AtmosphericComponent Update fix sky light color use gamma fix timeInterpolator add remove use list fix engine pause and resume
Orillusion · May 5, 2023 · d70bba0 · d70bba0
1 parent 04b9f1a
commit d70bba0
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 37 deletions.
diff --git a/src/Engine3D.ts b/src/Engine3D.ts
@@ -49,6 +49,7 @@ export class Engine3D {
     private static _beforeRender: Function;
     private static _renderLoop: Function;
     private static _lateRender: Function;
+    private static _requestAnimationFrameID: number = 0;
 
     /**
      * set engine render frameRate 24/30/60/114/120/144/240/360 fps or other
@@ -326,14 +327,17 @@ export class Engine3D {
      * Pause the engine render
      */
     public static pause() {
-        requestAnimationFrame(null);
+        if (this._requestAnimationFrameID != 0) {
+            cancelAnimationFrame(this._requestAnimationFrameID);
+            this._requestAnimationFrameID = 0;
+        }
     }
 
     /**
      * Resume the engine render
      */
     public static resume() {
-        requestAnimationFrame((t) => this.render(t));
+        this._requestAnimationFrameID = requestAnimationFrame((t) => this.render(t));
     }
 
     /**

diff --git a/src/assets/shader/lighting/BxDF_frag.ts b/src/assets/shader/lighting/BxDF_frag.ts
@@ -97,7 +97,7 @@ export let BxDF_frag: string = /*wgsl*/ `
       #if USEGI
           irradiance += getIrradiance().rgb ;
       #else
-          irradiance += globalUniform.skyExposure * LinearToGammaSpace(textureSampleLevel(prefilterMap, prefilterMapSampler, fragData.N.xyz, 0.8 * (MAX_REFLECTION_LOD) ).rgb);
+          irradiance += LinearToGammaSpace(globalUniform.skyExposure * textureSampleLevel(prefilterMap, prefilterMapSampler, fragData.N.xyz, 0.8 * (MAX_REFLECTION_LOD) ).rgb);
       #endif
 
       fragData.Irradiance = irradiance;

diff --git a/src/assets/shader/sky/AtmosphericScatteringSky_shader.ts b/src/assets/shader/sky/AtmosphericScatteringSky_shader.ts
@@ -2,7 +2,8 @@
  * @internal
  */
 export class AtmosphericScatteringSky_shader {
-    public static cs: string = /* wgsl */ `
+  public static cs: string = /* wgsl */ `
+    #include 'ColorUtil'
     struct UniformData {
         width: f32,
         height: f32,
@@ -15,6 +16,7 @@ export class AtmosphericScatteringSky_shader {
         mieHeight: f32,         // = 1200;
         sunBrightness: f32,     // = 1.0;
         displaySun: f32,        // > 0.5: true
+        skyColor: vec4<f32>,        // sky color
       };
 
       @group(0) @binding(0) var<uniform> uniformBuffer: UniformData;
@@ -252,7 +254,7 @@ export class AtmosphericScatteringSky_shader {
 
           var limbDarkening: vec3<f32> = GetTransmittance(setting, -L, V);
           limbDarkening *= pow(vec3<f32>(cosAngle), vec3<f32>(0.420, 0.503, 0.652)) * mix(vec3<f32>(1.0), vec3<f32>(1.2,0.9,0.5), edge) * intersectionTest;
-          sky += limbDarkening * uniformBuffer.sunBrightness;
+          sky += limbDarkening * uniformBuffer.sunBrightness; 
         }
         return vec4<f32>(sky, phaseNight * intersectionTest);
       }
@@ -294,17 +296,16 @@ export class AtmosphericScatteringSky_shader {
         setting.waveLambdaRayleigh = ComputeWaveLambdaRayleigh(vec3<f32>(0.000000680, 0.000000550, 0.000000450));
 
         // see https://www.shadertoy.com/view/MllBR2
-        setting.waveLambdaOzone = vec3<f32>(1.36820899679147, 3.31405330400124, 0.13601728252538) * 0.0000006 * 2.504;
+        setting.waveLambdaOzone = vec3<f32>(1.36820899679147, 3.31405330400124, 0.13601728252538)* 0.0000006 * 2.504;
 
         var eye:vec3<f32> = vec3<f32>(0,eyePosition,0);
         var sky0:vec4<f32> = ComputeSkyInscattering(setting, eye, V, L);
         var sky = vec3<f32>(sky0.rgb);
 
         // sky = TonemapACES(sky.rgb * 2.0);
-        // sky = pow(sky.rgb, vec3<f32>(2.4)); // gamma
-        // sky.rgb += noise(uv*iTime) / 255.0; // dither
+        sky = pow(sky.rgb, vec3<f32>(1.0/1.2)); // gamma
 
-        var fragColor:vec4<f32> = vec4<f32>(sky, 1.0);
+        var fragColor:vec4<f32> = vec4<f32>((sky.rgb  ), 1.0);
         return fragColor;
       }
     `;

diff --git a/src/components/AtmosphericComponent.ts b/src/components/AtmosphericComponent.ts
@@ -1,3 +1,4 @@
+import { Color, View3D } from "..";
 import { AtmosphericScatteringSky, AtmosphericScatteringSkySetting } from "../textures/AtmosphericScatteringSky";
 import { SkyRenderer } from "./renderer/SkyRenderer";
 
@@ -9,70 +10,94 @@ import { SkyRenderer } from "./renderer/SkyRenderer";
 export class AtmosphericComponent extends SkyRenderer {
 
     private _atmosphericScatteringSky: AtmosphericScatteringSky;
+    private _onChange: boolean = true;
 
     public get sunX() {
         return this._atmosphericScatteringSky.setting.sunX;
     }
 
     public set sunX(value) {
-        this._atmosphericScatteringSky.setting.sunX = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.sunX != value) {
+            this._atmosphericScatteringSky.setting.sunX = value;
+            this._onChange = true;
+        }
     }
 
     public get sunY() {
         return this._atmosphericScatteringSky.setting.sunY;
     }
 
     public set sunY(value) {
-        this._atmosphericScatteringSky.setting.sunY = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.sunY != value) {
+            this._atmosphericScatteringSky.setting.sunY = value;
+            this._onChange = true;
+        }
     }
 
     public get eyePos() {
         return this._atmosphericScatteringSky.setting.eyePos;
     }
 
     public set eyePos(value) {
-        this._atmosphericScatteringSky.setting.eyePos = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.eyePos != value) {
+            this._atmosphericScatteringSky.setting.eyePos = value;
+            this._onChange = true;
+        }
     }
 
     public get sunRadius() {
         return this._atmosphericScatteringSky.setting.sunRadius;
     }
 
     public set sunRadius(value) {
-        this._atmosphericScatteringSky.setting.sunRadius = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.sunRadius != value) {
+            this._atmosphericScatteringSky.setting.sunRadius = value;
+            this._onChange = true;
+        }
     }
 
     public get sunRadiance() {
         return this._atmosphericScatteringSky.setting.sunRadiance;
     }
 
     public set sunRadiance(value) {
-        this._atmosphericScatteringSky.setting.sunRadiance = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.sunRadiance != value) {
+            this._atmosphericScatteringSky.setting.sunRadiance = value;
+            this._onChange = true;
+        }
     }
 
     public get sunBrightness() {
         return this._atmosphericScatteringSky.setting.sunBrightness;
     }
 
     public set sunBrightness(value) {
-        this._atmosphericScatteringSky.setting.sunBrightness = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.sunBrightness != value) {
+            this._atmosphericScatteringSky.setting.sunBrightness = value;
+            this._onChange = true;
+        }
     }
 
     public get displaySun() {
         return this._atmosphericScatteringSky.setting.displaySun;
     }
 
     public set displaySun(value) {
-        this._atmosphericScatteringSky.setting.displaySun = value;
-        this._atmosphericScatteringSky.apply();
+        if (this._atmosphericScatteringSky.setting.displaySun != value) {
+            this._atmosphericScatteringSky.setting.displaySun = value;
+            this._onChange = true;
+        }
     }
 
+    // public get skyColor(): Color {
+    //     return this._atmosphericScatteringSky.setting.skyColor;
+    // }
+
+    // public set skyColor(value: Color) {
+    //     this._atmosphericScatteringSky.setting.skyColor = value;
+    //     this._onChange = true;
+    // }
+
     public init(): void {
         super.init();
         this._atmosphericScatteringSky = new AtmosphericScatteringSky(new AtmosphericScatteringSkySetting());
@@ -85,14 +110,12 @@ export class AtmosphericComponent extends SkyRenderer {
         super.start();
     }
 
-    public onEnable(): void {
-
-    }
-
-    public onDisable(): void {
-
-    }
+    public onUpdate(view?: View3D) {
+        if (this._onChange) {
+            console.log("change sky");
 
-    public debug() {
+            this._onChange = false;
+            this._atmosphericScatteringSky.apply();
+        }
     }
 }
diff --git a/src/components/renderer/MeshRenderer.ts b/src/components/renderer/MeshRenderer.ts
@@ -52,8 +52,11 @@ export class MeshRenderer extends RenderNode {
             this.addRendererMask(RendererMask.MorphTarget);
         } else {
             this.removeRendererMask(RendererMask.MorphTarget);
+            this.onCompute = null;
         }
 
+        this.object3D.bound = this._geometry.bounds;
+
         if (this._readyPipeline) {
             this.initPipeline();
         }

diff --git a/src/core/entities/Entity.ts b/src/core/entities/Entity.ts
@@ -76,7 +76,8 @@ export class Entity extends CEventDispatcher {
      *
      * The bounding box of an object
      */
-    public bound: IBound;
+    private _bound: IBound;
+
 
     protected waitDisposeComponents: IComponent[];
 
@@ -313,20 +314,31 @@ export class Entity extends CEventDispatcher {
         }
     }
 
+    public get bound(): IBound {
+        if (!this._bound) {
+            this.genBounds();
+        }
+        return this._bound;
+    }
+
+    public set bound(value: IBound) {
+        this._bound = value;
+    }
+
     /**
      * Returns a bounding box that defines the display area of the specified layer.
      * @returns
      */
     public genBounds() {
-        if (!this.bound) {
-            this.bound = new BoundingBox(Vector3.ZERO.clone(), Vector3.ONE.clone());
+        if (!this._bound) {
+            this._bound = new BoundingBox(Vector3.ZERO.clone(), Vector3.ONE.clone());
         }
         for (const children of this.entityChildren) {
-            if (children.bound) {
-                this.bound.merge(children.bound);
+            if (children._bound) {
+                this._bound.merge(children._bound);
             }
         }
-        return this.bound;
+        return this._bound;
     }
 
 

diff --git a/src/math/TimeInterpolator.ts b/src/math/TimeInterpolator.ts
@@ -448,6 +448,12 @@ export class Interpolator {
         if (dispose) interpolator.dispose();
     }
 
+    public static removeList(interpolators: Interpolator[], dispose?: boolean) {
+        interpolators.forEach((v) => {
+            this.remove(v, dispose);
+        })
+    }
+
     /**
      * @internal
      */

diff --git a/src/textures/AtmosphericScatteringSky.ts b/src/textures/AtmosphericScatteringSky.ts
@@ -1,3 +1,4 @@
+import { Color } from '..';
 import { AtmosphericScatteringSky_shader } from '../assets/shader/sky/AtmosphericScatteringSky_shader';
 import { UniformGPUBuffer } from '../gfx/graphics/webGpu/core/buffer/UniformGPUBuffer';
 import { Texture } from '../gfx/graphics/webGpu/core/texture/Texture';
@@ -22,6 +23,7 @@ export class AtmosphericScatteringSkySetting {
     public displaySun: boolean = true;
     public defaultTextureCubeSize: number = 512;
     public defaultTexture2DSize: number = 1024;
+    public skyColor: Color = new Color(1, 1, 1, 1);
 }
 
 /**
@@ -63,6 +65,7 @@ export class AtmosphericScatteringSky extends HDRTextureCube {
         return this;
     }
 
+
 }
 
 /**
@@ -100,6 +103,7 @@ class AtmosphericTexture2D extends VirtualTexture {
         this._uniformBuffer.setFloat('mieHeight', setting.mieHeight);
         this._uniformBuffer.setFloat('sunBrightness', setting.sunBrightness);
         this._uniformBuffer.setFloat('displaySun', setting.displaySun ? 1 : 0);
+        this._uniformBuffer.setColor('skyColor', setting.skyColor);
         this._uniformBuffer.apply();
 
         let command = GPUContext.beginCommandEncoder();