fix(sky): sky rendering with ortho camera (#467)

src/assets/shader/sky/CubeSky_Shader.ts

@@ -6,6 +6,13 @@ export class CubeSky_Shader {
     #include "WorldMatrixUniform"
     #include "GlobalUniform"
 
+    struct uniformData {
+      fixOrthProj: mat4x4<f32>,
+      enableFixOrthProj: f32,
+      exposure: f32,
+      roughness: f32
+  };
+
     struct VertexOutput {
       @location(auto) fragUV: vec2<f32>,
       @location(auto) vClipPos: vec4<f32>,
@@ -16,6 +23,9 @@ export class CubeSky_Shader {
 
     var<private> ORI_VertexOut: VertexOutput ;
 
+    @group(2) @binding(0)
+    var<uniform> global: uniformData;
+
     @vertex
     fn main( 
       @builtin(instance_index) index : u32,
@@ -31,6 +41,9 @@ export class CubeSky_Shader {
       ORI_VertexOut.vWorldPos = modelMat * vec4<f32>(position.xyz,1.0) ;
       
       var fixProjMat = globalUniform.projMat ;
+      if(global.enableFixOrthProj > 0.5){
+        fixProjMat = global.fixOrthProj;
+      }
       fixProjMat[2].z = 1.0 ;//99999.0 / (99999.0 - 1.0) ;
       fixProjMat[3].z = -1.0 ;//(-1.0 * 99999.0) / (99999.0 - 1.0) ;
 
@@ -55,6 +68,8 @@ export class CubeSky_Shader {
     #include "FragmentOutput"
 
     struct uniformData {
+        fixOrthProj: mat4x4<f32>,
+        enableFixOrthProj: f32,
         exposure: f32,
         roughness: f32
     };
@@ -78,7 +93,11 @@ export class CubeSky_Shader {
 
         // let o_Target: vec4<f32> = globalUniform.hdrExposure * vec4<f32>(textureColor, 1.0) * globalUniform.skyExposure ;
         let o_Target: vec4<f32> = vec4<f32>(textureColor, 1.0) * globalUniform.skyExposure;
-        let finalMatrix = globalUniform.projMat * globalUniform.viewMat ;
+        var fixProjMat = globalUniform.projMat ;
+        if(global.enableFixOrthProj > 0.5){
+          fixProjMat = global.fixOrthProj;
+        }
+        let finalMatrix = fixProjMat * globalUniform.viewMat ;
         let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,finalMatrix[2].xyz) ;
         let ORI_NORMALMATRIX = transpose(inverse( nMat ));
        

src/components/renderer/SkyRenderer.ts

@@ -14,6 +14,7 @@ import { Vector3 } from '../../math/Vector3';
 import { SphereGeometry } from '../../shape/SphereGeometry';
 import { Object3D } from '../../core/entities/Object3D';
 import { SphereReflection } from './SphereReflection';
+import { CameraType } from '../../core/CameraType';
 
 /**
  *
@@ -61,6 +62,8 @@ export class SkyRenderer extends MeshRenderer {
 
     public nodeUpdate(view: View3D, passType: PassType, renderPassState: RendererPassState, clusterLightingBuffer?: ClusterLightingBuffer) {
         super.nodeUpdate(view, passType, renderPassState, clusterLightingBuffer);
+        const { type, aspect, near, far } = view.camera;
+        this.skyMaterial.fixOrthProj(type == CameraType.ortho, aspect, near, far);
     }
 
     public renderPass2(view: View3D, passType: PassType, rendererPassState: RendererPassState, clusterLightingBuffer: ClusterLightingBuffer, encoder: GPURenderPassEncoder, useBundle: boolean = false) {

src/loader/parser/prefab/mats/shader/SkyShader.ts

@@ -1,23 +1,22 @@
 import { GPUCompareFunction, GPUCullMode } from "../../../../../gfx/graphics/webGpu/WebGPUConst";
-import { Texture } from "../../../../../gfx/graphics/webGpu/core/texture/Texture";
 import { RenderShaderPass } from "../../../../../gfx/graphics/webGpu/shader/RenderShaderPass";
-import { BlendMode } from "../../../../../materials/BlendMode";
-import { Color } from "../../../../../math/Color";
-import { Vector3 } from "../../../../../math/Vector3";
-import { Vector4 } from "../../../../../math/Vector4";
 import { RegisterShader } from "../../../../../util/SerializeDecoration";
 import { Shader } from "../../../../../gfx/graphics/webGpu/shader/Shader";
+import { Matrix4 } from "../../../../../math/Matrix4";
 
 
 @RegisterShader
 export class SkyShader extends Shader {
-
+    private readonly _fixOrthMatrix: Matrix4;
+    private _cacheData = { enable: false, aspect: 1.0, near: 1.0, far: 1000.0 };
     constructor() {
         super();
+        this._fixOrthMatrix = new Matrix4();
         let colorShader = new RenderShaderPass('sky_vs_frag_wgsl', 'sky_fs_frag_wgsl');
         this.addRenderPass(colorShader);
 
-        colorShader.setUniformVector3(`eyesPos`, new Vector3());
+        colorShader.setUniform('fixOrthProj', this._fixOrthMatrix.rawData);
+        colorShader.setUniform('enableFixOrthProj', 0);
         colorShader.setUniformFloat(`exposure`, 1.0);
         colorShader.setUniformFloat(`roughness`, 0.0);
 
@@ -27,4 +26,24 @@ export class SkyShader extends Shader {
         shaderState.depthWriteEnabled = false;
         shaderState.depthCompare = GPUCompareFunction.less_equal;
     }
+
+    //fix orth matrix
+    public fixOrthProj(enable: boolean, aspect: number, near: number, far: number) {
+        const cacheData = this._cacheData;
+        if (cacheData.enable != enable
+            || cacheData.aspect != aspect
+            || cacheData.near != near
+            || cacheData.far != far
+        ) {
+            cacheData.enable = enable;
+            cacheData.aspect = aspect;
+            cacheData.near = near;
+            cacheData.far = far;
+
+            this.setUniform('enableFixOrthProj', enable ? 1 : 0);
+            this._fixOrthMatrix.perspective(90, aspect, near, far);
+            this.setUniform('fixOrthProj', this._fixOrthMatrix.rawData);
+        }
+
+    }
 }

src/materials/SkyMaterial.ts

@@ -1,6 +1,5 @@
 import { Engine3D } from "../Engine3D";
 import { Texture } from "../gfx/graphics/webGpu/core/texture/Texture";
-import { PassType } from "../gfx/renderJob/passRenderer/state/PassType";
 import { SkyShader } from "../loader/parser/prefab/mats/shader/SkyShader";
 import { Vector3 } from "../math/Vector3";
 import { Material } from "./Material";
@@ -11,15 +10,20 @@ import { Material } from "./Material";
  */
 export class SkyMaterial extends Material {
 
+    private _skyShader: SkyShader;
     constructor() {
         super();
 
-        this.shader = new SkyShader();
+        this.shader = this._skyShader = new SkyShader();
         this.shader.setUniformVector3(`eyesPos`, new Vector3());
         this.shader.setUniformFloat(`exposure`, 1.0);
         this.shader.setUniformFloat(`roughness`, 0.0);
     }
 
+    public fixOrthProj(enable: boolean, aspect: number, near: number, far: number) {
+        this._skyShader.fixOrthProj(enable, aspect, near, far);
+    }
+
     /**
      *  Set base map(main map)
      */
@@ -61,6 +65,6 @@ export class SkyMaterial extends Material {
     }
     public set roughness(value: number) {
         let defaultShader = this._shader.getDefaultColorShader();
-        if (`roughness` in defaultShader.uniforms) defaultShader.uniforms[`roughness`].value = value;
+        defaultShader.uniforms[`roughness`].value = value;
     }
 }