@rings-webgpu/core 1.0.1 → 1.0.2

package/dist/rings.es.max.js

@@ -3993,511 +3993,559 @@ let ClusterDebug_frag = `
 `;
 
 class CubeSky_Shader {
-  static sky_vs_frag_wgsl = `
-        #include "WorldMatrixUniform"
-        #include "GlobalUniform"
+  static sky_vs_frag_wgsl = (
+    /* wgsl */
+    `
+    #include "WorldMatrixUniform"
+    #include "GlobalUniform"
 
-        struct VertexOutput {
-            @location(auto) fragUV: vec2<f32>,
-            @location(auto) vClipPos: vec4<f32>,
-            @location(auto) vWorldPos: vec4<f32>,
-            @location(auto) vWorldNormal: vec3<f32>,
-            @builtin(position) member: vec4<f32>
-        };
+    struct VertexOutput {
+      @location(auto) fragUV: vec2<f32>,
+      @location(auto) vClipPos: vec4<f32>,
+      @location(auto) vWorldPos: vec4<f32>,
+      @location(auto) vWorldNormal: vec3<f32>,
+      @builtin(position) member: vec4<f32>
+    };
 
-        var<private> ORI_VertexOut: VertexOutput;
+    var<private> ORI_VertexOut: VertexOutput ;
 
-        @vertex
-        fn main {
-            @builtin(instance_index) index: u32,
-            @location(auto) position: vec3<f32>,
-            @location(auto) normal: vec3<f32>,
-            @location(auto) uv: vec2<f32>
-        } -> VertexOutput {
-            ORI_VertexOut.fragUV = uv;
-            let modelMat = models.matrix[u32(index)];
-            let vm = modelMat;
-            let normalMatrix = mat3x3<f32>(vm[0].xyz,vm[1].xyz,vm[2].xyz);
-            ORI_VertexOut.vWorldNormal = normalize(normalMatrix * normal);
-            ORI_VertexOut.vWorldPos = modelMat * vec4<f32>(position.xyz, 1.0);
-            
-            var fixProjMat = globalUniform.projMat;
-            fixProjMat[2].z = 1.0;
-            fixProjMat[3].z = -1.0;
+    @vertex
+    fn main( 
+      @builtin(instance_index) index : u32,
+      @location(auto) position: vec3<f32>,
+      @location(auto) normal: vec3<f32>,
+      @location(auto) uv: vec2<f32>
+    ) -> VertexOutput {
+      ORI_VertexOut.fragUV = uv;
+      let modelMat = models.matrix[u32(index)];
+      let vm = modelMat;
+      let normalMatrix = mat3x3<f32>(vm[0].xyz,vm[1].xyz,vm[2].xyz);
+	    ORI_VertexOut.vWorldNormal = normalize( normalMatrix * normal );
+      ORI_VertexOut.vWorldPos = modelMat * vec4<f32>(position.xyz,1.0) ;
+      
+      var fixProjMat = globalUniform.projMat ;
+      fixProjMat[2].z = 1.0 ;//99999.0 / (99999.0 - 1.0) ;
+      fixProjMat[3].z = -1.0 ;//(-1.0 * 99999.0) / (99999.0 - 1.0) ;
 
-            var fixViewMat = globalUniform.viewMat;
-            fixViewMat[3].x = 0.0;
-            fixViewMat[3].y = 0.0;
-            fixViewMat[3].z = 0.0;
+      var fixViewMat = globalUniform.viewMat ;
+      fixViewMat[3].x = 0.0 ;
+      fixViewMat[3].y = 0.0 ;
+      fixViewMat[3].z = 0.0 ;
 
-            var clipPos = fixProjMat * fixViewMat * ORI_VertexOut.vWorldPos;
-            ORI_VertexOut.vClipPos = clipPos;
-            ORI_VertexOut.member = clipPos;
-            return ORI_VertexOut;
-        }
-    `;
-  static sky_fs_frag_wgsl = `
-        #include "GlobalUniform"
-        #include "MathShader"
-        #include "BitUtil"
-        #include "ColorUtil_frag"
-        #include "FragmentOutput"
+      var clipPos = fixProjMat * fixViewMat * ORI_VertexOut.vWorldPos;
+      ORI_VertexOut.vClipPos = clipPos ;
+      ORI_VertexOut.member = clipPos;
+      return ORI_VertexOut;
+    }
+  `
+  );
+  static sky_fs_frag_wgsl = (
+    /* wgsl */
+    `
+    #include "GlobalUniform"
+    #include "MathShader"
+    #include "BitUtil"
+    #include "ColorUtil_frag"
+    #include "FragmentOutput"
 
-        struct uniformData {
-            exposure: f32,
-            roughness: f32
-        }
+    struct uniformData {
+        exposure: f32,
+        roughness: f32
+    };
 
-        @group(1) @binding(0)
-        var baseMapSampler: sampler;
-        @group(1) @binding(1)
-        var baseMap: texture_cube<f32>;
+    @group(1) @binding(0)
+    var baseMapSampler: sampler;
+    @group(1) @binding(1)
+    var baseMap: texture_cube<f32>;
 
-        @group(2) @binding(0)
-        var<uniform> global: uniformData;
+    @group(2) @binding(0)
+    var<uniform> global: uniformData;
 
-        @fragment
-        fn main(@location(auto) fragUV: vec2<f32>,@location(auto) vClipPos: vec4<f32>, @location(auto) vWorldPos: vec4<f32>, @location(auto) vWorldNormal: vec3<f32>, @builtin(position) fragCoord: vec4<f32>) ->FragmentOutPut {
-            let maxLevel: u32 = textureNumLevels(baseMap);
-            let dir = normalize(vWorldPos.xyz);
-            var textureColor: vec3<f32> = textureSampleLevel(baseMap, baseMapSampler, normalize(dir.xyz), global.roughness * f32(maxLevel)).xyz;
-            #if IS_HDR_SKY
-                textureColor = LinearToGammaSpace(textureColor);
-            #endif
+    @fragment
+    fn main(@location(auto) fragUV: vec2<f32>,@location(auto) vClipPos: vec4<f32>, @location(auto) vWorldPos: vec4<f32>, @location(auto) vWorldNormal: vec3<f32> , @builtin(position) fragCoord : vec4<f32> ) -> FragmentOutput {
+        let maxLevel: u32 = textureNumLevels(baseMap);
+        let dir = normalize(vWorldPos.xyz);
+        var textureColor:vec3<f32> = textureSampleLevel(baseMap, baseMapSampler, normalize(dir.xyz), global.roughness * f32(maxLevel) ).xyz;
+        #if IS_HDR_SKY
+          textureColor = LinearToGammaSpace(textureColor);
+        #endif
+
+        // 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 ;
+        let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,finalMatrix[2].xyz) ;
+        let ORI_NORMALMATRIX = transpose(inverse( nMat ));
+       
+        var vNormal = (ORI_NORMALMATRIX * -vWorldNormal );
+        var gBuffer = packGBuffer(
+          -globalUniform.far,
+          vec3f(0.0),
+          o_Target.rgb,
+          vec3f(0.0),
+          vNormal
+        ) ;
+      var fragmentOutput:FragmentOutput;
+      #if USE_CASTREFLECTION
+        fragmentOutput.gBuffer = gBuffer ;
+      #else
+        fragmentOutput.color = o_Target ;
+        fragmentOutput.gBuffer = gBuffer ;
+      #endif
+      return fragmentOutput;
+    }
 
-            let o_Target: vec4<f32> = vec4<f32>(textureColor, 1.0) * globalUniform.skyExposure;
-            let finalMatrix = globalUniform.projMat * globalUniform.viewMat;
-            let nMat = mat3x3<f32>(finalMatrix[0].xyz, finalMatrix[1].xyz, finalMatrix[2].xyz);
-            let ORI_NORMALMATRIX = transpose(inverse(nMat));
+    fn packGBuffer(depth:f32, albedo:vec3f,hdrLighting:vec3f,rmao:vec3f,normal:vec3f) -> vec4f{
+        var gBuffer : vec4f ;
+        var octUVNormal = (octEncode(normalize(normal)) + 1.0) * 0.5 ;
 
-            var vNormal = (ORI_NORMALMATRIX - vWorldNormal);
-            var gBuffer = packGBuffer(
-                -globalUniform.far,
-                vec3f(0.0),
-                o_Target.rgb,
-                vec3f(0.0),
-                vNormal
-            );
+        var yc = f32(r11g11b9_to_float(vec3f(octUVNormal,0.0))) ;
+        #if USE_CASTREFLECTION
+          var rgbm = EncodeRGBM(hdrLighting);
+          var zc = f32(pack4x8unorm(vec4f(rgbm.rgb,0.0))) ;
+          var wc = f32(pack4x8unorm(vec4f(rmao.rg,rgbm.a,0.0)));
+        #else
+          var zc = f32(vec4fToFloat_7bits(vec4f(albedo.rgb,0.0)));
+          var wc = f32(r22g8_to_float(vec2f(f32(0.0),rmao.g)));
+        #endif
+    
+        gBuffer.x = depth  ;
+        gBuffer.y = yc ;
+        gBuffer.z = zc ;
+        gBuffer.w = wc ;
+        return gBuffer ;
+    }
+    `
+  );
+}
 
-            var fragmentOutput: FragmentOutput;
-            #if USE_CASTREFLECTION
-                fragmentOutput.gBuffer = gBuffer;
-            #else
-                fragmentOutput.color = o_Target;
-                fragmentOutput.gBuffer = gBuffer;
-            #endif
-            return fragmentOutput;
-        }
+let LightingFunction_frag = (
+  /*wgsl*/
+  `
+#include "BRDF_frag"
+#include "ClusterLight"
+#include "ShadowMapping_frag"
 
-        fn packGBuffer(depth:f32, albedo:vec3f, hdrLighting:vec3f, ramo:vec3f, normal:vec3f) -> vec4f{
-            var gBuffer: vec4f;
-            var octUVNormal = (octEncode(normalize(normal)) + 1.0) * 0.5;
-            var yc = f32(r11g11b9_to_float(vec3f(octUVNormal,0.0)));
-            
-            #if USE_CASTREFLECTION
-                var rgbm = EncodeRGBM(hdrLighting);
-                var zc = f32(pack4x8unorm(vec4f(rgbm.rgb,0.0)));
-                var wc = f32(pack4x8unorm(vec4f(rmao.rg,rgbm.a,0.0)));
-            #else
-                var zc = f32(vec4ToFloat_7bits(vec4f(albedo.rgb,0.0)));
-                var wc = f32(r22g8_to_float(vec2f(f32(0.0),rmao.g)))
-            #endif
+#if USE_IES_PROFILE
+  #include "IESProfiles_frag"
+#endif
 
-            gBuffer.x = depth;
-            gBuffer.y = yc;
-            gBuffer.z = zc;
-            gBuffer.w = wc;
-            return gBuffer;
-        }
-    `;
-}
+const PI2 = 3.1415926 * 3.1415926 ;
 
-let LightingFunction_frag = `
-    #include "BRDF_frag"
-    #include "ClusterLight"
-    #include "ShadowMapping_frag"
+fn sampleLighting(light:LightData,direction:vec3f,iblSpecularResult:vec3f , intensity :f32 , shadow:f32 ) -> vec3f{
+  var ret = vec3f(0.0);
+  var normalDir  = fragData.N;
+  var viewDir    = fragData.V;
 
-    #if USE_IES_PROFILE
-        #include "IESProfiles_frag"
-    #endif
+  var lightDir   = normalize(-direction.xyz);
+  var halfDir    = normalize(lightDir + viewDir);
+  var reflectDir = normalize(reflect(-viewDir,normalDir));
 
-    const PI2 = 3.1415926 * 3.1415926;
-
-    fn sampleLighting(light:LightData, direction:vec3f, iblSpecularResult:vec3f, intensity: f32, shadow: f32) -> vec3f {
-        var ret = vec3f(0.0);
-        var normalDir = fragData.N;
-        var viewDir = fragData.V;
-        var lightDir = normalize(-direction.xyz);
-        var halfDir    = normalize(lightDir + viewDir);
-        var reflectDir = normalize(reflect(-viewDir,normalDir));
-        var NdotH = max(0.00001,dot(normalDir,halfDir));
-        var NdotL = max(0.00001,dot(normalDir,lightDir));
-        var NdotV = max(0.00001,dot(normalDir,viewDir));
-        var HdotL = max(0.00001,dot(halfDir,lightDir));
-        var baseColor = fragData.Albedo.rgb ; 
-        var metallic = fragData.Metallic;
-        var roughness = fragData.Roughness;
-        var lightColor = getHDRColor( light.lightColor.rgb , light.linear )  ;
-        var att = max(0.0,intensity);
-        var lighting:vec3f = lightContribution(NdotH,NdotL,NdotV,HdotL,fragData.Roughness,fragData.Albedo.rgb / 3.14, metallic ,shadow,fragData.F0,lightColor.rgb);
-        lighting = ACESToneMapping(lighting,att);
-        return lighting;
-    }
-
-    fn directLighting(light: LightData, ibSpecularResult: vec3f) -> vec3f<f32> {
-        var color = vec3<f32>(0.0);
-        #if USE_LIGHT
-            var L = normalize(light.direction.xyz);
-            #if USE_BRDF
-                var shadow = directShadowVisibility[(light.castShadow)];
-                var att = light.intensity;
-                color = sampleLighting(light,L,iblSpecularResult,att,shadow);
-            #endif
+  var NdotH = max(0.00001,dot(normalDir,halfDir));
+  var NdotL = max(0.00001,dot(normalDir,lightDir));
+  var NdotV = max(0.00001,dot(normalDir,viewDir));
+  var HdotL = max(0.00001,dot(halfDir,lightDir));
+
+  var baseColor = fragData.Albedo.rgb ; 
+  var metallic = fragData.Metallic ;
+  var roughness = fragData.Roughness ;
+
+  var lightColor = getHDRColor( light.lightColor.rgb , light.linear )  ;
+  var att = max(0.0,intensity);
+  
+  var lighting:vec3f = lightContribution(NdotH,NdotL,NdotV,HdotL,fragData.Roughness,fragData.Albedo.rgb / 3.14, metallic ,shadow,fragData.F0,lightColor.rgb);
+
+  lighting = ACESToneMapping(lighting,att);
+  return lighting ;
+}
+
+fn directLighting( light:LightData , iblSpecularResult : vec3f) -> vec3<f32> {
+    var color = vec3<f32>(0.0) ;
+    #if USE_LIGHT
+      var L = normalize(light.direction.xyz) ;
+      #if USE_BRDF
+        var shadow = directShadowVisibility[(light.castShadow)] ;
+        var att = light.intensity;
+        color = sampleLighting(light,L,iblSpecularResult,att, shadow);
+      #endif 
+    #endif 
+    return color;
+}
+
+fn directDulLighting( albedo:vec3<f32>, N:vec3<f32>, V:vec3<f32>,  roughness:f32 , metallic:f32 , light:LightData , shadowBias:f32 ) -> vec3<f32> {
+  var color = vec3<f32>(0.0) ;
+  #if USE_LIGHT
+    var L = -normalize(light.direction.xyz) ;
+    let lightCC = pow( light.lightColor.rgb,vec3<f32>(2.2));
+    var lightColor = getHDRColor( lightCC.rgb , light.linear )  ;
+    var att = light.intensity;
+    if(light.castShadow>=0){
+        #if USE_SHADOWMAPING
+          for (var j: i32 = 0; j < 8; j += 1) {
+              if(j == light.castShadow){
+                att *= directShadowVisibility[j] ; 
+              }
+          }
         #endif
-        return color;
     }
+    #if USE_LAMBERT
+      color = vec3<f32>(1.0,1.0,1.0) ;
+    #endif 
+    
+    #if USE_BRDF
+      color = 0.85 * simpleBRDF(albedo,N,V,L,att,lightColor,0.85 * roughness,metallic) ;
+      color += 0.15 * simpleBRDF(albedo,N,V,L,att,lightColor,0.15 * roughness,metallic) ;
+    #endif 
+  #endif 
+  return color;
+}
 
-    fn directDulLighting(albedo:vec3<f32>, N:vec3<f32>, V:vec3<f32>,  roughness:f32 , metallic:f32 , light:LightData , shadowBias:f32) -> vec3<f32> {
-        var color = vec3<f32>(0.0);
-        #if USE_LIGHT
-            var L = -normalize(light.direction.xyz);
-            let lightCC = pow(light.lightColor.rgb, vec3<f32>(2.2));
-            var lightColor = getHDRColor(lightCC.rgb, light.linear);
-            var att = light.intensity;
-            if(light.castShadow>=0){
-                #if USE_SHADOWMAPING
-                    for(var j: i32 = 0; j < 8; j+=1){
-                        if(j == light.castShadow){
-                            att *= directShadowVisibility[j];
-                        }
-                    }
-                #endif
-            }
-        #if USE_LAMBERT
-            color = vec3<f32>(1.0,1.0,1.0);
+fn directHairLighting( albedo:vec3<f32>, N:vec3<f32>, V:vec3<f32>,  roughness:f32 , metallic:f32 , light:LightData , shadowBias:f32 ) -> vec3<f32> {
+  var color = vec3<f32>(0.0) ;
+  #if USE_LIGHT
+    var L = -normalize(light.direction.xyz) ;
+    let lightCC = pow( light.lightColor.rgb,vec3<f32>(2.2));
+    var lightColor = getHDRColor( lightCC.rgb , light.linear )  ;
+    var att = light.intensity;
+    if(light.castShadow>=0){
+        #if USE_SHADOWMAPING
+          for (var j: i32 = 0; j < 8; j += 1) {
+              if(j == light.castShadow){
+                att *= directShadowVisibility[j] ; 
+              }
+          }
         #endif
+    }
+    #if USE_LAMBERT
+      color = vec3<f32>(1.0,1.0,1.0) ;
+    #endif 
+    
+    #if USE_BRDF
+      color = 0.5 * simpleBRDF(albedo,N,V,L,att,lightColor,0.85 ,metallic) ;
+      color += 0.5 * simpleBRDF(albedo,N,V,L,att,lightColor,0.15 ,metallic) ;
+    #endif 
+  #endif 
+  return color;
+}
 
-        #if USE_BRDF
-            color = 0.85 * simpleBRDF(albedo,N,V,L,att,lightColor,0.85 * roughness,metallic);
-            color += 0.15 * simpleBRDF(albedo,N,V,L,att,lightColor,0.15 * roughness,metallic);
-        #endif
-      #endif
-      return color;
+
+fn pointLighting( WP:vec3<f32>, light:LightData , iblSpecularResult : vec3f ) -> vec3<f32> {
+    var color = vec3<f32>(0.0) ;
+    let lightPos = light.position.xyz;
+    var dir = lightPos.xyz - WP ;
+    let dist = length(dir);
+    if(dist != 0.0){
+      dir *= 1.0 / dist ;
     }
+    if( abs(dist) < light.range ){
+        var L = dir ;
+        var atten = 1.0 ;
+        atten = 1.0 - smoothstep(0.0,light.range,dist) ;
+        atten *= 1.0 / max(light.radius,0.001)  ;
 
-    fn directHairLighting ( albedo:vec3<f32>, N:vec3<f32>, V:vec3<f32>,  roughness:f32 , metallic:f32 , light:LightData , shadowBias:f32 ) -> vec3<f32> {
-        var color = vec3<f32>(0.0);
-        #if USE_LIGHT
-            var L = -normalize(light.direction.xyz);
-            let lightCC = pow( light.lightColor.rgb, vec3<f32>(2.2) );
-            var lightColor = getHDRColor(lightCC.rgb, light.linear);
-            var att = light.intensity;
-            if(light.castShadow>=0){
-                #if USE_SHADOWMAPING
-                    for (var j: i32 = 0; j < 8; j += 1) {
-                        if(j == light.castShadow){
-                            att *= directShadowVisibility[j]; 
-                        }
-                    }
-                    #endif
-            }
-        #if USE_LAMBERT
-            color = vec3<f32>(1.0,1.0,1.0) ;
+        var shadow = pointShadows[i32(light.castShadow)] ;
+
+        #if USE_IES_PROFILE
+            atten *= getLightIESProfileAtt(WP,light);
         #endif
 
-        #if USE_BRDF
-            color = 0.5 * simpleBRDF(albedo,N,V,L,att,lightColor,0.85 ,metallic) ;
-            color += 0.5 * simpleBRDF(albedo,N,V,L,att,lightColor,0.15 ,metallic) ;
-        #endif 
-    #endif 
-    return color
-    }
+        atten *= sphere_unit(light.range,light.intensity) ;
 
-    fn pointLighting ( WP: vec3<f32>, light: LightData, iblSpecularResult: vec3f ) -> vec3f<f32> {
-        var color = vec3<f32>(0.0);
-        let lightPos = light.position.xyz;
-        var dir = lightPos.xyz - WP;
-        let dist = length(dir);
-        if(dist != 0.0){
-            dir *= 1.0 / dist;
-        }
-        if(abs(dist) < light.range){
-            var L = dir;
-            var atten = 1.0;
-            atten = 1.0 - smoothstep(0.0, light.range, dist);
-            atten *= 1.0 / max(light.radius, 0.001);
-            var shadow = pointShadows[i32(light.castShadow)];
-
-            #if USE_IES_PROFILE
-                atten *= getLightIESProfileAtt(WP, light);
-            #endif
+        color = sampleLighting(light,-L,iblSpecularResult,atten,shadow);
+    } 
+    return color ;
+}
 
-            atten *= sphere_unit(light.range, light.intensity);
-            color = sampleLighting(light, -L, iblSpecularResult, atten, shadow);
-        }
-        return color;
-    }
+fn pointAtt( WP:vec3<f32>, light:LightData ) -> f32 {
+  var atten = 0.0 ;
+  let lightPos = light.position.xyz;
+  var dir = lightPos.xyz - WP ;
+  let dist = length(dir);
+  if(dist != 0.0){
+    dir *= 1.0 / dist ;
+  }
+  if( abs(dist) < light.range ){
+      var L = dir ;
+      atten = 1.0 - smoothstep(0.0,light.range,dist) ;
+      atten *= 1.0 / max(light.radius,0.001)  ;
+      var shadow = pointShadows[i32(light.castShadow)] ;
+      #if USE_IES_PROFILE
+          atten *= getLightIESProfileAtt(WP,light);
+      #endif
+      atten *= sphere_unit(light.range,light.intensity) ;
+  } 
+  return atten ;
+}
 
-    fn pointAtt(WP:vec3<f32>, light:LightData) -> f32 {
-        var atten = 0.0;
-        let lightPos = light.position.xyz;
-        var dir = lightPos.xyz - WP;
-        let dist = length(dir);
-        if(dist != 0.0){
-            dir *= 1.0 / dist;
-        }
-        if(abs(dist) < light.range){
-            var L = dir;
-            atten = 1.0 - smoothstep(0.0, light.range, dist);
-            atten *= 1.0 / max(light.radius, 0.001);
-            var shadow = pointShadows[i32(light.castShadow)];
-            #if USE_IES_PROFILE
-                atten *= getLightIESProfileAtt(WP, light);
-            #endif
-            atten *= sphere_unit(light.range, light.intensity);
-        }
-        return atten;
-    }
+fn getDistanceAtten(  light:LightData , dist : f32 ) -> f32 {
+  return 1.0 - smoothstep(0.0,light.range,dist) ;
+}
 
-    fn getDistanceAtten(light:LightData, dist:f32) -> f32 {
-        return 1.0 - smoothstep(0.0, light.range, dist);
+fn spotLighting( WP:vec3<f32>, light:LightData , iblSpecularResult : vec3f) -> vec3<f32> {
+    let lightPos = light.position.xyz;
+    var dir = lightPos.xyz - WP ;
+    let dist = length(dir) ;
+    if(dist != 0.0){
+      dir *= 1.0 / dist ;
     }
 
-    fn spotLighting(WP:vec3<f32>, light:LightData, iblSpecularResult: vec3f) -> vec3f<f32> {
-        let lightPos = light.position.xyz;
-        var dir = lightPos.xyz - WP;
-        let dist = length(dir);
-        if(dist != 0.0){
-            dir *= 1.0 / dist
+    var color = vec3<f32>(0.0) ;
+    if( abs(dist) < light.range * 2.0 ){
+        var L = dir ;
+        let theta = dot(-L, normalize(light.direction));
+        let angle = acos(theta) ;
+        var atten = 1.0 ;
+        var lightColor = light.lightColor.rgb  ;
+
+        atten = 1.0 - smoothstep(0.0,light.range,dist) ;
+        atten *= 1.0 / max(light.radius,0.001) ;
+        if(angle < light.outerCutOff){
+          if(angle > light.innerCutOff){
+            atten *= 1.0 - smoothstep(light.innerCutOff, light.outerCutOff, angle) ;
+          }
+        }else{
+            atten = 0.0 ;
         }
 
-        var color = vec3<f32>(0.0);
-        if(abs(dist) < light.range * 2.0){
-            var L = dir;
-            let theta = dot(-L, normalize(light.direction));
-            let angle = acos(theta);
-            var atten = 1.0;
-            var lightColor = light.lightColor.rgb;
-
-            atten = 1.0 - smoothstep(0.0, light.range, dist);
-            atten *= 1.0 / max(light.radius, 0.001);
-            if(angle < light.outerCutOff){
-                if(angle > light.innerCutOff){
-                    atten *= 1.0 - smoothstep(light.innerCutOff, light.outerCutOff, angle);
-                }
-            }else{
-                atten = 0.0;
-            }
+        var shadow = pointShadows[i32(light.castShadow)] ;
 
-            var shadow = pointShadows[i32(light.castShadow)];
+        #if USE_IES_PROFILE
+            atten *= getLightIESProfileAtt(WP,light);
+        #endif
 
-            #if USE_IES_PROFILE
-                atten *= getLightIESProfileAtt(WP, light);
-            #endif
+        atten *= sphere_unit(light.range, light.intensity) ;
 
-            atten *= sphere_unit(light.range, light.intensity);
-            color = sampleLighting(light, -L, iblSpecularResult, atten, shadow);
-        }
-        return color;
+        color = sampleLighting(light,-L,iblSpecularResult,atten,shadow);
     }
+    return  color ;
+}
 
-    fn sphere_unit( radius:f32, intensity: f32 ) -> f32 {
-        return intensity / (4.0 * PI2 * radius * radius);
-    }
-`;
+fn sphere_unit( radius:f32 , intensity:f32 ) -> f32 {
+  return intensity / (4.0 * PI2 * radius * radius) ;
+}
+`
+);
 
-let MathShader = `
-    #include 'BitUtil'
+let MathShader = (
+  /* wgsl */
+  `
+  #include 'BitUtil'
 
-    struct TBN_ret{
-        tan:vec3f,
-        bit:vec3f,
+  struct TBN_ret{
+    tan:vec3f,
+    bit:vec3f,
+  }
+  
+  fn TBN( N:vec3f) -> mat3x3<f32>{
+    //Returns the simple tangent space matrix
+    var Nb : vec3f;
+    var Nt : vec3f;
+    if (abs(N.y)>0.999) {
+        Nb = vec3f(1.0,0.0,0.0);
+        Nt = vec3f(0.0,0.0,1.0);
+    } else {
+      Nb = normalize(cross(N,vec3f(0.0,1.0,0.0)));
+      Nt = normalize(cross(Nb,N));
     }
 
-    fn TBN(N:vec3f) -> mat3x3<f32>{
-        var Nb: vec3f;
-        var Nt: vec3f;
-        if(abs(N.y)>0.999){
-            Nb = vec3f(1.0,0.0,0.0);
-            Nt = vec3f(0.0,0.0,1.0)
-        }else{
-            Nb = normalize(cross(N,vec3f(0.0,1.0,0.0)));
-            Nt = normalize(cross(Nb,N));
-        }
+    var mat3 = mat3x3<f32>(
+      Nb.x,Nt.x,N.x,
+      Nb.y,Nt.y,N.y,
+      Nb.z,Nt.z,N.z
+    );
 
-        var mat3 = mat3x3<f32>(
-            Nb.x,Nt.x,N.x,
-            Nb.y,Nt.y,N.y,
-            Nb.z,Nt.z,N.z
-        );
+    return mat3;
+  }
 
-        return mat3;
-    }
+  fn TBN_out( N : vec3f ) -> TBN_ret {
+      var tbn_ret : TBN_ret;
+      //Returns the simple tangent space directions
+      if (abs(N.y)>0.999) {
+          tbn_ret.tan = vec3f(1.0,0.0,0.0);
+          tbn_ret.bit = vec3f(0.0,0.0,1.0);
+      } else {
+          tbn_ret.tan = normalize(cross(N,vec3f(0.0,1.0,0.0)));
+          tbn_ret.bit = normalize(cross(tbn_ret.tan,N));
+      }
 
-    fn TBN_out(N:vec3f) -> TBN_ret {
-        var tbn_ret: TBN_ret;
-        if(abs(N.y)>0.999) {
-            tbn_ret.tan = vec3f(1.0,0.0,0.0);
-            tbn_ret.bit = vec3f(0.0,0.0,1.0);
-        }else{
-            tbn_ret.tan = normalize(cross(N,vec3f(0.0,1.0,0.0)));
-            tbn_ret.bit = normalize(cross(tbn_ret.tan,N));
-        }
+      return tbn_ret;
+  }
 
-        return tbn_ret;
-    }
 
-    fn ARand21(uv:vec2f) -> f32 {
-        return fract(sin(uv.x*uv.y)*403.125+cos(dot(uv,vec2f(13.18273,51.2134)))*173.137);
-    }
+  fn ARand21( uv: vec2f) -> f32 {
+      //Returns 1D noise from 2D
+      return fract(sin(uv.x*uv.y)*403.125+cos(dot(uv,vec2f(13.18273,51.2134)))*173.137);
+  }
 
-    fn applyQuaternion(position:vec3<f32>,q:vec4<f32>) -> vec3<f32>{
-        let x:f32 = position.x;
-        let y:f32 = position.y;
-        let z:f32 = position.z;
+fn applyQuaternion(position:vec3<f32>, q:vec4<f32>) -> vec3<f32>{
+  let x:f32 = position.x;
+  let y:f32 = position.y;
+  let z:f32 = position.z;
 
-        let qx:f32 = q.x;
-        let qy:f32 = q.y;
-        let qz:f32 = q.z;
-        let qw:f32 = q.w;
+  let qx:f32 = q.x;
+  let qy:f32 = q.y;
+  let qz:f32 = q.z;
+  let qw:f32 = q.w;
 
-        let ix:f32 = qw*x + qy*z - qz*y;
-        let iy:f32 = qw*y + qz*x - qx*z;
-        let iz:f32 = qw*z + qx*y - qy*x;
-        let iw:f32 = -qx*x - qy*y - qz*z;
+  let ix:f32 = qw * x + qy * z - qz * y;
+  let iy:f32 = qw * y + qz * x - qx * z;
+  let iz:f32 = qw * z + qx * y - qy * x;
+  let iw:f32 = -qx * x - qy * y - qz * z;
 
-        var ret: vec3<f32>;
-        ret.x = ix*qw + iw*-qx + iy*-qz - iz*-qy;
-        ret.y = iy*qw + iw*-qy + iz*-qx - ix*-qz;
-        ret.z = iz*qw + iw*-qz + ix*-qy - iy*-qx;
+  var ret: vec3<f32>;
+  ret.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
+  ret.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
+  ret.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
 
-        return ret;
-    }
+  return ret;
+}
 
-    fn inverse(m:mat3x3<f32>) -> mat3*3<f32>{
-        var a00 = m[0][0];
-        var a01 = m[0][1];
-        var a02 = m[0][2];
-        var a10 = m[1][0];
-        var a11 = m[1][1];
-        var a12 = m[1][2];
-        var a20 = m[2][0];
-        var a21 = m[2][1];
-        var a22 = m[2][2];
-
-        var b01 = a22*a11 - a12*a21;
-        var b11 = -a22*a10 + a12*a20;
-        var b21 = a21*a10 - a11*a20;
-
-        var det =a00*b01 + a01*b11 + a02*b21;
-        return mat3x3<f32>(
-            vec3<f32>(b01/ det, (-a22 * a01 + a02 * a21)/ det, (a12 * a01 - a02 * a11)/ det),
-            vec3<f32>(b11/ det, (a22 * a00 - a02 * a20)/ det, (-a12 * a00 + a02 * a10)/ det),
-            vec3<f32>(b21/ det, (-a21 * a00 + a01 * a20)/ det, (a11 * a00 - a01 * a10)/ det)
-        );
-    }
+fn inverse( m:mat3x3<f32>) -> mat3x3<f32>{
+  var a00 = m[0][0];
+  var a01 = m[0][1];
+  var a02 = m[0][2];
+  var a10 = m[1][0];
+  var a11 = m[1][1];
+  var a12 = m[1][2];
+  var a20 = m[2][0];
+  var a21 = m[2][1];
+  var a22 = m[2][2];
 
-    fn dir_to_faceId(pt:vec3<f32>) -> i32 {
-        var abs_x = abs(pt.x);
-        var abs_y = abs(pt.y);
-        var abs_z = abs(pt.z);
-        var coord = max(max(abs_x, abs_y),abs_z);
-        if(coord == -pt.x){
-            return 0;
-        }
-        if(coord == pt.x){
-            return 1;
-        }
-        if(coord == -pt.y){
-            return 2;
-        }
-        if(coord == pt.y){
-            return 3;
-        }
-        if(coord == -pt.z){
-            return 4;
-        }
-        return 5;
-    }
+  var b01 = a22 * a11 - a12 * a21;
+  var b11 = -a22 * a10 + a12 * a20;
+  var b21 = a21 * a10 - a11 * a20;
 
-    const us = 1.0/6.0;
-    fn uv_2_xyz(u:f32,v:f32) -> vec3f{
-        let face = floor(u/us);
-        var uu = (u - face*us)/us;
-        var uc = 2.0*uu - 1.0;
-        var vc = 2.0*v - 1.0;
-        var xyz = vec3f(0,0,0);
-        if(face == 0.0){
-            xyz = vec3f(1.0,-vc,uc);
-        }else if(face == 1.0){
-            xyz = vec3f(-1.0,-vc,-uc);
-        }else if(face == 2.0){
-            xyz = vec3f(uc,1.0,-vc);
-        }else if(face == 3.0){
-            xyz = vec3f(uc,-1.0,vc);
-        }else if(face == 4.0){
-            xyz = vec3f(-uc,-vc,1.0);
-        }else if(face == 5.0){
-            xyz = vec3f(uc,-vc,-1.0);
-        }
-        return xyz;
-    }
-
-    fn convert_xyz_to_cube_uv(x:f32, y:f32, z:f32) -> vec2f{
-        var dir = vec3f(x,y,z);
-        var absX = abs(dir.x);
-        var absY = abs(dir.y);
-        var absZ = abs(dir.z);
-
-        var isXPositive = 0;
-        if(dir.x > 0.0){isXPositive=1};
-        var isYPositive = 0;
-        if(dir.y > 0.0){isXPositive=1};
-        var isZPositive = 0;
-        if(dir.z > 0.0){isZPositive=1};
-
-        var maxAxis:f32 = 0.0;
-        var uc:f32 = 0.0;
-        var vc:f32 = 0.0;
-
-        if(isXPositive == 1 && absX >= absY && absX >= absZ){
-            maxAxis = absX;
-            uc = -z;
-            vc = y;
-        }
-        if(isXPositive == 0 && absX >= absY && absX >= absZ){
-            maxAxis = absX;
-            uc = z;
-            vc = y;
-        }
-        if(isYPositive == 1 && absY >= absX && absY >= absZ){
-            maxAxis = absY;
-            uc = x;
-            vc = -z;
-        }
-        if(isYPositive == 0 && absY >= absX && absY >= absZ){
-            maxAxis = absY;
-            uc = x;
-            vc = z;
-        }
-        if (isZPositive == 1 && absZ >= absX && absZ >= absY) {
-            maxAxis = absZ;
-            uc = x;
-            vc = y;
-        }
-        if (isZPositive ==0 && absZ >= absX && absZ >= absY) {
-            maxAxis = absZ;
-            uc = -x;
-            vc = y;
-        }
-
-        var u = 0.5f*(uc / maxAxis + 1.0f);
-        var v = 0.5f*(vc / maxAxis + 1.0f);
-
-        return vec2f(u, v);
-    }
-    
-    fn signNotZero(v1:vec2<f32>) -> vec2<f32>{
+  var det = a00 * b01 + a01 * b11 + a02 * b21 ;
+  return mat3x3<f32>(
+      vec3<f32>(b01/ det, (-a22 * a01 + a02 * a21)/ det, (a12 * a01 - a02 * a11)/ det),
+      vec3<f32>(b11/ det, (a22 * a00 - a02 * a20)/ det, (-a12 * a00 + a02 * a10)/ det),
+      vec3<f32>(b21/ det, (-a21 * a00 + a01 * a20)/ det, (a11 * a00 - a01 * a10)/ det)
+  );
+}
+
+fn dir_to_faceId(pt:vec3<f32>) -> i32 {
+    //**** nx px ny py nz pz
+    var abs_x = abs(pt.x);
+    var abs_y = abs(pt.y);
+    var abs_z = abs(pt.z);
+    var coord = max(max(abs_x, abs_y), abs_z);
+    if(coord == -pt.x){  return 0;}
+    if(coord == pt.x) { return 1;}
+
+    if(coord == -pt.y){  return 2;}
+    if(coord == pt.y) { return 3;}
+
+    if(coord == -pt.z) { return 4;}
+    return 5;
+  }
+
+  const us = 1.0 /6.0 ;
+  fn uv_2_xyz(u:f32,v:f32) -> vec3f 
+  {
+    let face = floor(u / us);
+    var uu = (u - face * us) / us ;
+
+    var uc = 2.0 * uu - 1.0;
+    var vc = 2.0 * v - 1.0;
+    var xyz = vec3f(0,0,0);
+
+    if(face == 0.0){
+    // x,y,z = 1.0,vc,-uc
+      xyz = vec3f(1.0,-vc,uc);
+    }else if(face == 1.0){
+    // x,y,z = -1.0,vc,uc
+      xyz = vec3f(-1.0,-vc,-uc);
+    }else if(face == 2.0){
+    // x,y,z = uc,1.0,-vc
+      xyz = vec3f(uc,1.0,-vc);
+    }else if(face == 3.0){
+    // x,y,z = uc,-1.0,vc
+      xyz = vec3f(uc,-1.0,vc);
+    }else if(face == 4.0){
+    // x,y,z = uc,vc,1.0
+      xyz = vec3f(-uc,-vc,1.0);
+    }else if(face == 5.0){
+    // x,y,z = -uc,vc,-1.0
+      xyz = vec3f(uc,-vc,-1.0);
+    }
+    return xyz ;
+  }
+
+  fn convert_xyz_to_cube_uv(x:f32, y:f32, z:f32 ) -> vec2f
+  {
+    var dir = vec3f(x, y, z);
+    var absX = abs(dir.x);
+    var absY = abs(dir.y);
+    var absZ = abs(dir.z);
+
+    var isXPositive = 0;
+    if(dir.x > 0.0){isXPositive = 1;}
+    var isYPositive = 0;
+    if(dir.y > 0.0){isYPositive = 1;}
+    var isZPositive = 0;
+    if(dir.z > 0.0){isZPositive = 1;}
+
+    var maxAxis:f32 = 0.0;
+    var uc:f32 = 0.0;
+    var vc:f32 = 0.0;
+
+    // POSITIVE X
+    if (isXPositive == 1 && absX >= absY && absX >= absZ) {
+      // u (0 to 1) goes from +z to -z
+      // v (0 to 1) goes from -y to +y
+      maxAxis = absX;
+      uc = -z;
+      vc = y;
+    }
+    // NEGATIVE X
+    if (isXPositive ==0 && absX >= absY && absX >= absZ) {
+      // u (0 to 1) goes from -z to +z
+      // v (0 to 1) goes from -y to +y
+      maxAxis = absX;
+      uc = z;
+      vc = y;
+    }
+    // POSITIVE Y
+    if (isYPositive==1 && absY >= absX && absY >= absZ) {
+      // u (0 to 1) goes from -x to +x
+      // v (0 to 1) goes from +z to -z
+      maxAxis = absY;
+      uc = x;
+      vc = -z;
+    }
+    // NEGATIVE Y
+    if (isYPositive ==0 && absY >= absX && absY >= absZ) {
+      // u (0 to 1) goes from -x to +x
+      // v (0 to 1) goes from -z to +z
+      maxAxis = absY;
+      uc = x;
+      vc = z;
+    }
+    // POSITIVE Z
+    if (isZPositive == 1&& absZ >= absX && absZ >= absY) {
+      // u (0 to 1) goes from -x to +x
+      // v (0 to 1) goes from -y to +y
+      maxAxis = absZ;
+      uc = x;
+      vc = y;
+    }
+    // NEGATIVE Z
+    if (isZPositive ==0 && absZ >= absX && absZ >= absY) {
+      // u (0 to 1) goes from +x to -x
+      // v (0 to 1) goes from -y to +y
+      maxAxis = absZ;
+      uc = -x;
+      vc = y;
+    }
+
+    // Convert range from -1 to 1 to 0 to 1
+    var u = 0.5f * (uc / maxAxis + 1.0f);
+    var v = 0.5f * (vc / maxAxis + 1.0f);
+
+    return vec2f(u, v);
+  }
+
+    // Returns ±1
+    fn signNotZero( v1:vec2<f32>) -> vec2<f32> {
         var v:vec2<f32> = v1;
         if(v.x >= 0.0){
             v.x = 1.0;
@@ -4507,118 +4555,123 @@ let MathShader = `
         if(v.y >= 0.0){
             v.y = 1.0;
         }else{
-            v.y = -1.0;
+            v.y= -1.0;
         }
         return v;
     }
 
-    fn octEncode(v:vec3<f32>) -> vec2<f32> {
+    fn octEncode( v:vec3<f32> ) -> vec2<f32> {
         var l1norm = abs(v.x) + abs(v.y) + abs(v.z);
         var result = v.xy * (1.0 / l1norm);
-        if(v.z < 0.0){
+        if (v.z < 0.0) {
             result = (1.0 - abs(result.yx)) * signNotZero(result.xy);
         }
         return result;
     }
 
-    fn octDecode(o:vec2<f32>) -> vec3<f32> {
+    // Returns a unit vector. Argument o is an octahedral vector packed via octEncode,on the [-1, +1] square*/
+    fn octDecode( o:vec2<f32> ) -> vec3<f32> {
         var v = vec3<f32>(o.x, o.y, 1.0 - abs(o.x) - abs(o.y));
-        if(v.z < 0.0) {
-            var tmp = (1.0 -abs(v.yx))*signNotZero(v.xy);
+        if (v.z < 0.0) {
+            var tmp = (1.0 - abs(v.yx)) * signNotZero(v.xy);
             v.x = tmp.x;
             v.y = tmp.y;
         }
         return normalize(v);
     }
 
-    fn Linear01Depth(z:f32,near:f32,far:f32) -> f32{
-        let ZBufferZ = (-1.0+(far/near))/far;
-        let ZBufferW = near/far;
-        return 1.0 / (ZBufferZ * z + ZBufferW);
+    fn Linear01Depth(z:f32,near:f32,far:f32)-> f32{
+        let ZBufferZ = (-1.0+(far/near)) / far;
+        let ZBufferW = near /far ;
+        return 1.0 / (ZBufferZ * z + ZBufferW) ;
     }
 
-    fn LinearizeDepth(depth:f32, nearPlane:f32, farPlane:f32) -> f32 {
-        var z = depth * 2.0 - 1.0;
-        return (2.0 * nearPlane * farPlane) / (farPlane + nearPlane - z * (farPlane - nearPlane));
+    
+    fn LinearizeDepth( depth:f32 , nearPlane:f32 , farPlane:f32 )-> f32 {
+      var z = depth * 2.0 - 1.0;
+      return (2.0 * nearPlane * farPlane) / (farPlane + nearPlane - z * (farPlane - nearPlane));
     }
 
-    fn logDepth(depth:f32, far:f32) -> f32 {
-        return log2(depth + 1.0) * 2.0 / (log(far + 1.0) / 0.6931471805599453) *  0.5;
+    fn logDepth(depth : f32, far:f32) -> f32 {
+      return log2(depth + 1.0) * 2.0 / (log(far + 1.0) / 0.6931471805599453) * 0.5;
     }
 
     fn log2Depth(depth:f32, near:f32, far:f32) -> f32 {
-        let Fcoef:f32 = 2.0 / log2(far + 1.0);
-        var result:f32 = (log2(max(1e-6, 1.0 + depth)) * Fcoef - 1.0);
-        result = (1.0 + result) / 2.0;
-        return result * depth;
+      let Fcoef:f32 = 2.0 / log2(far + 1.0);
+      var result:f32 = (log2(max(1e-6, 1.0 + depth)) * Fcoef - 1.0);
+      result = (1.0 + result) / 2.0;
+      return result * depth;
     }
 
     fn log2DepthFixPersp(depth:f32, near:f32, far:f32) -> f32 {
-        let flogz:f32 = 1.0 + depth;
-        let Fcoef_half:f32 = (2.0 / log2(far + 1.0)) * 0.5;
-        var result:f32 = log2(flogz) * Fcoef_half;
-        result = (1.0 + result) / 2.0;
-        return result;
+      let flogz:f32 = 1.0 + depth;
+      let Fcoef_half:f32 = (2.0 / log2(far + 1.0)) * 0.5;
+      var result:f32 = log2(flogz) * Fcoef_half;
+      result = (1.0 + result) / 2.0;
+      return result;
     }
 
-    fn QuaternionToMatrix(q:vec4<f32>) -> mat4x4<f32> {
-        var result: mat4x4<f32>;
-
-        let x = q.x * 2.0;
-        let y = q.y * 2.0;
-        let z = q.z * 2.0;
-        let xx = q.x * x;
-        let yy = q.y * y;
-        let zz = q.z * z;
-        let xy = q.x * y;
-        let xz = q.x * z;
-        let yz = q.y * z;
-        let wx = q.w * x;
-        let wy = q.w * y;
-        let wz = q.w * z;
-
-        result[0][0] = 1.0 - (yy + zz);
-        result[0][1] = xy + wz;
-        result[0][2] = xz - wy;
-        result[0][3] = 0.0;
-
-        result[1][0] = xy - wz;
-        result[1][1] = 1.0 - (xx + zz);
-        result[1][2] = yz + wx;
-        result[1][3] = 0.0;
-
-        result[2][0] = xz + wy;
-        result[2][1] = yz - wx;
-        result[2][2] = 1.0 - (xx + yy);
-        result[2][3] = 0.0;
-
-        result[3][0] = 0.0;
-        result[3][1] = 0.0;
-        result[3][2] = 0.0;
-        result[3][3] = 1.0;
 
-        return result;
+    fn QuaternionToMatrix(q: vec4<f32>) -> mat4x4<f32> {
+      var result: mat4x4<f32>;
+  
+      // Precalculate coordinate products
+      let x = q.x * 2.0;
+      let y = q.y * 2.0;
+      let z = q.z * 2.0;
+      let xx = q.x * x;
+      let yy = q.y * y;
+      let zz = q.z * z;
+      let xy = q.x * y;
+      let xz = q.x * z;
+      let yz = q.y * z;
+      let wx = q.w * x;
+      let wy = q.w * y;
+      let wz = q.w * z;
+  
+      // Calculate 3x3 matrix from orthonormal basis
+      result[0][0] = 1.0 - (yy + zz);
+      result[0][1] = xy + wz;
+      result[0][2] = xz - wy;
+      result[0][3] = 0.0;
+  
+      result[1][0] = xy - wz;
+      result[1][1] = 1.0 - (xx + zz);
+      result[1][2] = yz + wx;
+      result[1][3] = 0.0;
+  
+      result[2][0] = xz + wy;
+      result[2][1] = yz - wx;
+      result[2][2] = 1.0 - (xx + yy);
+      result[2][3] = 0.0;
+  
+      result[3][0] = 0.0;
+      result[3][1] = 0.0;
+      result[3][2] = 0.0;
+      result[3][3] = 1.0;
+
+      return result;
     }
 
     fn MakeScaleMatrix(scale: vec3<f32>) -> mat4x4<f32> {
         return mat4x4<f32>(
-            scale.x, 0.0, 0.0, 0.0,
-            0.0, scale.y, 0.0, 0.0,
-            0.0, 0.0, scale.z, 0.0,
-            0.0, 0.0, 0.0, 1.0,
+          scale.x, 0.0, 0.0, 0.0,
+          0.0, scale.y, 0.0, 0.0,
+          0.0, 0.0, scale.z, 0.0,
+          0.0, 0.0, 0.0, 1.0,
         );
     }
-    
+
     fn MakeRotationMatrix(rotationQuaternion: vec4<f32>) -> mat4x4<f32> {
-         return QuaternionToMatrix(rotationQuaternion);
+        return QuaternionToMatrix(rotationQuaternion);
     }
 
     fn MakeTranslationMatrix(translation: vec3<f32>) -> mat4x4<f32> {
         return mat4x4<f32>(
-            1.0, 0.0, 0.0, 0.0,
-            0.0, 1.0, 0.0, 0.0,
-            0.0, 0.0, 1.0, 0.0,
-            translation.x, translation.y, translation.z, 1.0, 
+          1.0, 0.0, 0.0, 0.0,
+          0.0, 1.0, 0.0, 0.0,
+          0.0, 0.0, 1.0, 0.0,
+          translation.x, translation.y, translation.z, 1.0,
         );
     }
 
@@ -4630,191 +4683,206 @@ let MathShader = `
     }
 
     fn mixMatrix4x4(a: mat4x4<f32>, b: mat4x4<f32>, t:f32) -> mat4x4<f32> {
-        return a * (1.0 - t) + b * t;
+      return a * (1.0 - t) + b * t;
     }
 
-    fn decodeDepth(color:vec4<f32>) -> f32{
-        var depth = 0.0;
-        const bitShifts = vec4f<f32>(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0);
-        depth = dot(color, bitShifts);
-        return depth;
+    fn decodeDepth( color:vec4<f32> ) -> f32{
+      var depth = 0.0 ;
+      const bitShifts = vec4<f32>(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0); 
+      depth = dot(color, bitShifts);
+      return depth;
     }
 
-    fn encodeDepth(depth:f32) -> vec4<f32>{
-        const bitSh = vec4<f32>(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
-        const bitMsk = vec4<f32>(0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
-        var comp: vec4<f32>;
-        comp = depth * bitSh;
-        comp = fract(comp);
-        comp -= comp.xxyz * bitMsk;
-        return comp;
+    fn encodeDepth( depth:f32 ) -> vec4<f32>{
+      const bitSh  = vec4<f32>(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
+      const bitMsk = vec4<f32>(0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
+      var comp:vec4<f32>;
+      comp  = depth * bitSh;
+      comp  = fract(comp);
+      comp -= comp.xxyz * bitMsk;
+      return comp;
     }
 
-    fn calculateBillboardMatrix2(eye:vec3f, pos:vec3f, up:vec3f) -> mat3x3<f32> {
-        let zAxis: vec3f = -normalize(pos.xyz - eye);
-        var xAxis: vec3f = cross(up, zAxis);
-        xAxis = normalize(cross(zAxis, xAxis));
-        let yAxis = normalize(cross(zAxis, xAxis));
-        return mat3x3<f32>(xAxis, yAxis, zAxis);
+    fn calculateBillboardMatrix2(eye:vec3f,pos:vec3f,up:vec3f) -> mat3x3<f32> {
+      
+      let zAxis: vec3f = -normalize(pos.xyz - eye);
+      var xAxis: vec3f = cross(up,zAxis);
+      xAxis = normalize(cross(zAxis,xAxis));
+      let yAxis = normalize(cross(zAxis, xAxis));
+      return mat3x3<f32>(xAxis, yAxis, zAxis);
     }
 
-    struct SH9Struct {
-        SHAr:vec4f,
-        SHAg:vec4f,
-        SHAb:vec4f,
-        SHBr:vec4f,
-        SHBg:vec4f,
-        SHBb:vec4f,
-        SHC:vec4f,
+    struct SH9Struct{
+      SHAr:vec4f,
+      SHAg:vec4f,
+      SHAb:vec4f,
+      SHBr:vec4f,
+      SHBg:vec4f,
+      SHBb:vec4f,
+      SHC:vec4f,
     }
 
-    fn ShadeSH9(normal: vec4f, sh9: SH9Struct) -> vec3f {
-        var x1:vec3f = vec3f(0.0);
-        var x2:vec3f = vec3f(0.0);
-        var x3:vec3f = vec3f(0.0);
-
-        x1.r = dot(sh9.SHAr,normal);
-        x1.g = dot(sh9.SHAg,normal);
-        x1.b = dot(sh9.SHAb,normal);
-
-        var vB = normal.xyzz * normal.yzzx;
-        x2.r = dot(sh9.SHBr,vB);
-        x2.g = dot(sh9.SHBg,vB);
-        x2.b = dot(sh9.SHBb,vB);
-
-        var vC = normal.x*normal.x - normal.y*normal.y;
-        x3 = sh9.SHC.rgb * vC;
-        return x1 + x2 + x3;
-    }
+    fn ShadeSH9 ( normal:vec4f , sh9:SH9Struct) -> vec3f
+    {
+      var x1:vec3f = vec3f(0.0);
+      var x2:vec3f = vec3f(0.0);
+      var x3:vec3f = vec3f(0.0);
+      
+      // Linear + constant polynomial terms
+      x1.r = dot(sh9.SHAr,normal);
+      x1.g = dot(sh9.SHAg,normal);
+      x1.b = dot(sh9.SHAb,normal);
+      
+      // 4 of the quadratic polynomials
+      var vB = normal.xyzz * normal.yzzx;
+      x2.r = dot(sh9.SHBr,vB);
+      x2.g = dot(sh9.SHBg,vB);
+      x2.b = dot(sh9.SHBb,vB);
+      
+      // Final quadratic polynomial
+      var vC = normal.x*normal.x - normal.y*normal.y;
+      x3 = sh9.SHC.rgb * vC;
+      return x1 + x2 + x3;
+    } 
 
-    fn clipViewUV(viewRectangle:vec4f, size:vec2f, fragCoord:vec2f) -> vec2u {
-        let subViewUV = (fragCoord - viewRectangle.xy) / viewRectangle.zw;
-        return vec2u(subViewUV*size);
+    fn clipViewUV(viewRectangle:vec4f,size:vec2f,fragCoord:vec2f) -> vec2u {
+        let subViewUV = (fragCoord - viewRectangle.xy) / viewRectangle.zw ;
+        return vec2u(subViewUV*size) ;
     }
 
-    fn insideRectangle(point:vec2f, rec:vec4f) -> bool {
-        if( point.x > rec.x &&  point.y > rec.y &&  point.x < (rec.x + rec.z ) &&  point.y < (rec.y + rec.w ) ){
-          return true ;
-        }
-        return false;
+    fn insideRectangle( point:vec2f , rec:vec4f) -> bool {
+      if( point.x > rec.x &&  point.y > rec.y &&  point.x < (rec.x + rec.z ) &&  point.y < (rec.y + rec.w ) ){
+         return true ;
+      }
+      return false;
     }
 
-    fn convert_cube_uv_to_xyz(index:i32, u:f32, v:f32) -> vec3f {
-        var ret: vec3f;
-        var uc = 2.0f * u - 1.0f;
-        var vc = 2.0f * v - 1.0f;
-        switch(index){
-            case 0: {
-                ret.x = 1.0f;
-                ret.y = vc;
-                ret.z = -uc;
-                break;
-            }
-            case 1: {
-                ret.x = -1.0f;
-                ret.y = vc;
-                ret.z = uc;
-                break;
-            }
-            case 2: {
-                ret.x = uc;
-                ret.y = 1.0f;
-                ret.z = -vc;
-                break;
-            }
-            case 3: {
-                ret.x = uc; 
-                ret.y = -1.0f; 
-                ret.z = vc;
-                break;
-            }
-            case 4: {
-                ret.x = uc; 
-                ret.y = vc; 
-                ret.z = 1.0f; 
-                break;
-            }
-            case 5: {
-                ret.x = -uc; 
-                ret.y = vc; 
-                ret.z = -1.0f; 
-                break;
-            }
-            default: {
-                ret = vec3f(0.0);
-            }
+    fn convert_cube_uv_to_xyz( index:i32,  u:f32,  v:f32) -> vec3f
+    {
+      var ret : vec3f ;
+      // convert range 0 to 1 to -1 to 1
+      var uc = 2.0f * u - 1.0f;
+      var vc = 2.0f * v - 1.0f;
+      switch (index)
+      {
+        case 0: {
+          ret.x =  1.0f; 
+          ret.y =    vc; 
+          ret.z =   -uc; 
+          break;
+        }	// POSITIVE X
+        case 1: {
+          ret.x = -1.0f; 
+          ret.y =    vc; 
+          ret.z =    uc; 
+          break;
+        }	// NEGATIVE X
+        case 2: {
+          ret.x =    uc; 
+          ret.y =  1.0f; 
+          ret.z =   -vc; 
+          break;
+        }	// POSITIVE Y
+        case 3: {
+          ret.x =    uc; 
+          ret.y = -1.0f; 
+          ret.z =    vc; 
+          break;
+        }	// NEGATIVE Y
+        case 4: {
+          ret.x =    uc; 
+          ret.y =    vc; 
+          ret.z =  1.0f; 
+          break;
+        }	// POSITIVE Z
+        case 5: {
+          ret.x =   -uc; 
+          ret.y =    vc; 
+          ret.z = -1.0f; 
+          break;
+        }	// NEGATIVE Z
+        default:{
+          ret = vec3f(0.0);
         }
-        return ret;
+      }
+      return ret ;
     }
 
-    fn convert_cube_uv_to_normal(index:i32, u:f32, v:f32) -> vec3f{
-        var ret: vec3f;
-        var uc = 2.0f * u - 1.0f;
-        var vc = 2.0f * v - 1.0f;
-        switch(index){
-            case 0: {
-            ret.x =  1.0f; 
-            ret.y =    vc; 
-            ret.z =   -uc; 
-            break;
-            }	// POSITIVE X
-            case 1: {
-            ret.x = -1.0f; 
-            ret.y =    vc; 
-            ret.z =    uc; 
-            break;
-            }	// NEGATIVE X
-            case 2: {
-            ret.x =    uc; 
-            ret.y =  1.0f; 
-            ret.z =   -vc; 
-            break;
-            }	// POSITIVE Y
-            case 3: {
-            ret.x =    uc; 
-            ret.y = -1.0f; 
-            ret.z =    vc; 
-            break;
-            }	// NEGATIVE Y
-            case 4: {
-            ret.x =    uc; 
-            ret.y =    vc; 
-            ret.z =  1.0f; 
-            break;
-            }	// POSITIVE Z
-            case 5: {
-            ret.x =   -uc; 
-            ret.y =    vc; 
-            ret.z = -1.0f; 
-            break;
-            }	// NEGATIVE Z
-            default:{
-            ret = vec3f(0.0);
-            }
+    fn convert_cube_uv_to_normal( index:i32, u:f32, v:f32) -> vec3f
+    {
+      var ret : vec3f ;
+      // convert range 0 to 1 to -1 to 1
+      var uc = 2.0f * u - 1.0f;
+      var vc = 2.0f * v - 1.0f;
+      switch (index)
+      {
+        case 0: {
+          ret.x =  1.0f; 
+          ret.y =    vc; 
+          ret.z =   -uc; 
+          break;
+        }	// POSITIVE X
+        case 1: {
+          ret.x = -1.0f; 
+          ret.y =    vc; 
+          ret.z =    uc; 
+          break;
+        }	// NEGATIVE X
+        case 2: {
+          ret.x =    uc; 
+          ret.y =  1.0f; 
+          ret.z =   -vc; 
+          break;
+        }	// POSITIVE Y
+        case 3: {
+          ret.x =    uc; 
+          ret.y = -1.0f; 
+          ret.z =    vc; 
+          break;
+        }	// NEGATIVE Y
+        case 4: {
+          ret.x =    uc; 
+          ret.y =    vc; 
+          ret.z =  1.0f; 
+          break;
+        }	// POSITIVE Z
+        case 5: {
+          ret.x =   -uc; 
+          ret.y =    vc; 
+          ret.z = -1.0f; 
+          break;
+        }	// NEGATIVE Z
+        default:{
+          ret = vec3f(0.0);
         }
-        return ret;
+      }
+      return ret ;
     }
 
-    fn UvToDir(uv1:vec2f) -> vec3f{
-        var uv = uv1;
-        uv *= vec2f(2.0*3.1415926535897932384626433832795, 3.1415926535897932384626433832795);
-        var theta = uv.y;
-        var phi = uv.x + 3.1415926535897932384626433832795 * 0.5 ;
-        var dir = vec3f(0.0,0.0,0.0);
-        dir.x = sin(phi) * sin(theta) * -1;
-        dir.y = cos(theta) * -1;
-        dir.z = cos(phi) * sin(theta);
-        return dir;
+    fn UvToDir( uv1:vec2f) -> vec3f{
+      var uv = uv1 ;
+      uv *= vec2f(2.0*3.1415926535897932384626433832795, 3.1415926535897932384626433832795);
+      var theta = uv.y;
+      var phi = uv.x + 3.1415926535897932384626433832795 * 0.5 ;
+      // var phi = uv.x ;
+      var dir = vec3f(0.0,0.0,0.0);
+      dir.x = sin(phi) * sin(theta) * -1;
+      dir.y = cos(theta) * -1;
+      dir.z = cos(phi) * sin(theta);
+      return dir;
     }
 
-    fn DirTOUV(a_coords:vec3f) -> vec2f {
-        var coords = normalize(a_coords);
-        var lon = atan2(coords.z, coords.x);
-        var lat = acos(coords.y);
-        var sphereCoords = vec2f(lon, lat) * (1.0 / 3.1415926535897932384626433832795);
-        return vec2f(sphereCoords.x * 0.5 + 0.5, 1.0 - sphereCoords.y);
+    fn DirTOUV( a_coords:vec3f ) ->vec2f
+    {
+      var coords = normalize(a_coords);
+      var lon = atan2(coords.z, coords.x);
+      var lat = acos(coords.y);
+      var sphereCoords = vec2f(lon, lat) * (1.0 / 3.1415926535897932384626433832795);
+      return vec2f(sphereCoords.x * 0.5 + 0.5 , 1.0 - sphereCoords.y);
     }
-`;
+    
+`
+);
 
 let PhysicMaterialUniform_frag = `
     #if USE_CUSTOMUNIFORM
@@ -5165,7 +5233,9 @@ let IrradianceVolumeData_frag = `
     }
 `;
 
-let Inline_vert = `
+let Inline_vert = (
+  /*wgsl*/
+  `
     #include "MathShader"
     #include "FastMathShader"
     #include "InstanceUniform"
@@ -5186,35 +5256,35 @@ let Inline_vert = `
     }
 
     fn TIME_frame() -> f32 {
-        return globalUniform.frame;
+        return globalUniform.frame ;
     }
 
     fn TIME_time() -> f32 {
-        return globalUniform.time;
+        return globalUniform.time ;
     }
 
     fn TIME_delta() -> f32 {
-        return globalUniform.delta;
+        return globalUniform.delta ;
     }
 
     fn MOUSE() -> vec2f {
-        return vec2f( globalUniform.mouseX, globalUniform.mouseY);
+        return vec2f( globalUniform.mouseX, globalUniform.mouseY) ;
     }
 
     fn SCREEN() -> vec2f {
-        return vec2f( globalUniform.windowWidth, globalUniform.windowHeight);
+        return vec2f( globalUniform.windowWidth, globalUniform.windowHeight) ;
     }
 
     fn ProjectionParams() -> vec3f {
-        return vec3f( globalUniform.near, globalUniform.far,1.0 + 1.0 / globalUniform.far);
+        return vec3f( globalUniform.near, globalUniform.far,1.0 + 1.0 / globalUniform.far) ;
     }
 
     fn vertex_inline(vertex:VertexAttributes){
-        ORI_MATRIX_P = globalUniform.projMat;
-        ORI_MATRIX_V = globalUniform.viewMat;
-        ORI_MATRIX_PV = ORI_MATRIX_P * ORI_MATRIX_V;
-        ORI_MATRIX_PVInv = globalUniform.pvMatrixInv;
-        ORI_CAMERAMATRIX = globalUniform.cameraWorldMatrix;
+        ORI_MATRIX_P = globalUniform.projMat ;
+        ORI_MATRIX_V = globalUniform.viewMat ;
+        ORI_MATRIX_PV = ORI_MATRIX_P * ORI_MATRIX_V ;
+        ORI_MATRIX_PVInv = globalUniform.pvMatrixInv ;
+        ORI_CAMERAMATRIX = globalUniform.cameraWorldMatrix ;
 
         ORI_MATRIX_M = models.matrix[u32(vertex.index)];
             
@@ -5223,7 +5293,8 @@ let Inline_vert = `
             ORI_MATRIX_M = models.matrix[modelID];
         #endif
     }
-`;
+`
+);
 
 let Common_frag = `
     #include "GlobalUniform"
@@ -5288,7 +5359,9 @@ let Common_frag = `
     }
 `;
 
-let Common_vert = `
+let Common_vert = (
+  /*wgsl*/
+  `
     #include "WorldMatrixUniform"
     #include "VertexAttributes_vert"
     #include "GlobalUniform"
@@ -5297,9 +5370,10 @@ let Common_vert = `
     fn VertMain( vertex:VertexAttributes ) -> VertexOutput {
         vertex_inline(vertex);
         vert(vertex);
-        return ORI_VertexOut;
+        return ORI_VertexOut ;
     }
-`;
+`
+);
 
 let BrdfLut_frag = (
   /*wgsl*/
@@ -5329,103 +5403,122 @@ class CSM {
   static Cascades = 4;
 }
 
-let GlobalUniform = `
+let GlobalUniform = (
+  /*wgsl*/
+  `
 
-    #include "MathShader"
+  #include "MathShader"
 
-    struct GlobalUniform {
-
-        projMat: mat4x4<f32>,
-        viewMat: mat4x4<f32>,
-        cameraWorldMatrix: mat4x4<f32>,
-        pvMatrixInv: mat4x4<f32>,
-        viewToWorld: mar4x4<f32>,
-        shadowMatrix: array<mat4x4<f32>, 8u>,
-        csmShadowBias: vec4<f32>,
-        csmMatrix: array<mat4x4<f32>,${CSM.Cascades}>,
-        shadowLights:mat4x4<f32>,
-        reflectionProbeSize:f32,
-        reflectionProbeMaxCount:f32,
-        reflectionMapWidth:f32,
-        reflectionMapHeight:f32,
-        reflectionCount:f32,
-        test2:f32,
-        test3:f32,
-        test4:f32,
-        CameraPos: vec3<f32>,
-        frame: f32,
-        SH: array<vec4f,9u>,
-        time: f32,
-        delta: f32,
-        shadowBias: f32,
-        skyExposure: f32,
-        renderPassState: f32,
-        quadScale: f32,
-        hdrExposure: f32,
-        renderState_left: i32,
-        renderState_right: i32,
-        renderState_split: f32,
-        mouseX: f32,
-        mouseY: f32,
-        windowWidth: f32,
-        windowHeight: f32,
-        near: f32,
-        far: f32,
-        pointShadowBias: f32,
-        shadowMapSize: f32,
-        shadowSoft: f32,
-        enableCSM:f32,
-        csmMargin:f32,
-        nDirShadowStart: i32,
-        nDirShadowEnd: i32,
-        nPointShadowStart: i32,
-        nPointShadowEnd: i32,
-        cameraForward:vec3f,
-        frustumPlanes: array<vec4f, 6u>,
-    };
+  struct GlobalUniform {
 
-    @group(0) @binding(0)
-    var<uniform> globalUniform: GlobalUniform;
+    projMat: mat4x4<f32>,
+    viewMat: mat4x4<f32>,
+    cameraWorldMatrix: mat4x4<f32>,
+    pvMatrixInv : mat4x4<f32>,
+    viewToWorld : mat4x4<f32>,
+    shadowMatrix: array<mat4x4<f32>, 8u>,
 
-    fn getViewPosition(z:f32,uv:vec2f) -> vec3f {
-        let pvMatrixInv = globalUniform.pvMatrixInv;
-        let clip = vec4<f32>((uv * 2.0 - 1.0), z, 1.0);
-        var viewPos = pvMatrixInv * clip;
-        return viewPos.xyz / viewPos.w;
-    }
+    csmShadowBias: vec4<f32>,
 
-    fn getWorldPosition(z:f32,uv:vec2f) -> vec3f {
-        let viewToWorld = globalUniform.viewToWorld;
-        let clip = vec4<f32>((uv * 2.0 -1.0), z, 1.0);
-        var worldPos = viewToWorld * clip;
-        worldPos = worldPos / worldPos.w;
-        return worldPos.xyz;
-    }
+    csmMatrix: array<mat4x4<f32>,${CSM.Cascades}>,
+    
+    shadowLights:mat4x4<f32>,
 
-    var<private> NORMALMATRIX_INV : mat3x3<f32>;
-    var<private> NORMALMATRIX : mat3x3<f32>;
-    fn useNormalMatrix() {
-        let finalMatrix = globalUniform.projMat * globalUniform.viewMat;
-        let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,fianlMatrix[2].xyz);
-        NORMALMATRIX = transpose(inverse(nMat));
-    }
+    reflectionProbeSize:f32,
+    reflectionProbeMaxCount:f32,
+    reflectionMapWidth:f32,
+    reflectionMapHeight:f32,
 
-    fn useNormalMatrixInv() {
-        let finalMatrix = globalUniform.projMat * globalUniform.viewMat;
-        let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,finalMatrix[2].xyz);
-        NORMALMATRIX_INV = transpose((nMat));
-    }
+    reflectionCount:f32,
+    test2:f32,
+    test3:f32,
+    test4:f32,
 
-    fn getWorldNormal(viewNormal:vec3f) -> vec3f {
-        var worldNormal = NORMALMATRIX_INV * viewNormal;
-        return normalize(worldNormal.xyz);
-    }
+    CameraPos: vec3<f32>,
+    frame: f32,
+    SH:  array<vec4f, 9u> ,
 
-    fn getViewNormal(worldNormal:vec3f) -> vec3f {
-        var viewNormal = globalUniform.viewMat * vec4f(worldNormal,0.0);
-        return normalize(viewNormal.xyz);
-    }
-`;
+    time: f32,
+    delta: f32,
+    shadowBias: f32,
+    skyExposure: f32,
+
+    renderPassState:f32,
+    quadScale: f32,
+    hdrExposure: f32,
+    renderState_left: i32,
+
+    renderState_right: i32,
+    renderState_split: f32,
+    mouseX: f32,
+    mouseY: f32,
+
+    windowWidth: f32,
+    windowHeight: f32,
+    near: f32,
+    far: f32,
+
+    pointShadowBias: f32,
+    shadowMapSize: f32,
+    shadowSoft: f32,
+    enableCSM:f32,
+
+
+    csmMargin:f32,
+    nDirShadowStart: i32,
+    nDirShadowEnd: i32,
+    nPointShadowStart: i32,
+
+    nPointShadowEnd: i32,
+    cameraForward:vec3f,
+
+    frustumPlanes: array<vec4f, 6u>,
+
+  };
+
+  @group(0) @binding(0)
+  var<uniform> globalUniform: GlobalUniform;
+
+  fn getViewPosition(z:f32,uv:vec2f) -> vec3f {
+    let pvMatrixInv = globalUniform.pvMatrixInv ;
+    let clip = vec4<f32>((uv * 2.0 - 1.0) , z , 1.0);
+    var viewPos = pvMatrixInv * clip ;
+    return viewPos.xyz / viewPos.w ;
+  }
+
+  fn getWorldPosition(z:f32,uv:vec2f) -> vec3f {
+    let viewToWorld = globalUniform.viewToWorld ;
+    let clip = vec4<f32>((uv * 2.0 - 1.0) , z , 1.0);
+    var worldPos = viewToWorld * clip ;
+    worldPos = worldPos / worldPos.w ;
+    return worldPos.xyz ;
+  }
+
+  var<private> NORMALMATRIX_INV : mat3x3<f32> ;
+  var<private> NORMALMATRIX : mat3x3<f32> ;
+  fn useNormalMatrix()  {
+     let finalMatrix = globalUniform.projMat * globalUniform.viewMat ;
+     let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,finalMatrix[2].xyz) ;
+     NORMALMATRIX = transpose(inverse( nMat ));
+  }
+
+  fn useNormalMatrixInv()  {
+    let finalMatrix = globalUniform.projMat * globalUniform.viewMat ;
+    let nMat = mat3x3<f32>(finalMatrix[0].xyz,finalMatrix[1].xyz,finalMatrix[2].xyz) ;
+    NORMALMATRIX_INV = transpose(( nMat ));
+  }
+
+  fn getWorldNormal(viewNormal:vec3f) -> vec3f {
+    var worldNormal = NORMALMATRIX_INV * viewNormal ;
+    return normalize(worldNormal.xyz);
+  }
+
+  fn getViewNormal(worldNormal:vec3f) -> vec3f {
+    var viewNormal = globalUniform.viewMat * vec4f(worldNormal,0.0) ;
+    return normalize(viewNormal.xyz);
+  }
+`
+);
 
 let InstanceUniform = `
     #if USE_INSTANCEDRAW
@@ -5437,14 +5530,17 @@ let InstanceUniform = `
     #endif
 `;
 
-let WorldMatrixUniform = `
+let WorldMatrixUniform = (
+  /*wgsl*/
+  `
     struct Uniforms {
-        matrix: array<mat4x4<f32>>
+        matrix : array<mat4x4<f32>>
     };
 
-    @group(0) @building(1)
-    var<storage, read> models: Uniforms;
-`;
+    @group(0) @binding(1)
+    var<storage, read> models : Uniforms;
+`
+);
 
 let FastMathShader = `
     fn pow2(x:f32) -> f32 {
@@ -5515,7 +5611,7 @@ let FastMathShader = `
         return res ;
         }else{
         return PI - res ;
-        }
+        };
     }
 
     fn acosFast4( inX : f32 )-> f32
@@ -5534,12 +5630,15 @@ let FastMathShader = `
         return s ;
         }else{
         return PI - s ;
-        }
+        };
     }
 `;
 
-let NormalMap_frag = `
-    fn perturbNormal( worldPos:vec3<f32>, surf_norm:vec3<f32>, mapN:vec3<f32>, normalScale:f32, face:f32 ) -> vec3<f32> {
+let NormalMap_frag = (
+  /*wgsl*/
+  `
+
+    fn perturbNormal(  worldPos:vec3<f32>,  surf_norm:vec3<f32>,  mapN:vec3<f32> , normalScale:f32 , face:f32 ) -> vec3<f32> {
         var q0 = vec3<f32>( dpdx( worldPos.x ), dpdx( worldPos.y ), dpdx( worldPos.z ) );
         var q1 = vec3<f32>( dpdy( worldPos.x ), dpdy( worldPos.y ), dpdy( worldPos.z ) );
         var st0 = dpdx( ORI_VertexVarying.fragUV0.xy );
@@ -5547,12 +5646,17 @@ let NormalMap_frag = `
         var N = surf_norm;
         var q0perp = cross( N, q0 );
         var q1perp = cross( q1, N );
+
+            var T = q1perp * st0.x + q0perp * st1.x;
+        
         var B = q1perp * st0.y + q0perp * st1.y;
+
         var det = max( dot( T, T ), dot( B, B ) );
         var scale = 1.0 ;
         if( det != 0.0 ){
             scale = inverseSqrt( det ) ;
         }
+
         scale *= normalScale;
         return normalize( (T * ( -mapN.x * scale ) + B * ( mapN.y * scale ) + N * mapN.z ) * face ) ;
     }
@@ -5593,7 +5697,8 @@ let NormalMap_frag = `
         var outN = perturbNormal(ORI_VertexVarying.vWorldPos.xyz,ORI_VertexVarying.vWorldNormal,mapNormal,1.0,face) ;
         return outN ;
     }
-`;
+`
+);
 
 let FragmentVarying = `
     struct FragmentVarying {
@@ -5687,7 +5792,7 @@ let IESProfiles_frag = `
                 return textureSampleLevel(iesTextureArrayMap, iesTextureArrayMapSampler, vec2<f32>(normAngle , normTangentAngle) , i32(light.ies) , 0.0).r ;
             }else{
                 return 1.0;
-            }
+            };
         #else 
             return 1.0;
         #endif
@@ -5755,12 +5860,12 @@ let ShadowMapping_frag = `
                                     weight *= 1.0 - totalWeight;
                                     visibility += csmShadowResult.x * weight;
                                     totalWeight += weight;
-                                }
+                                };
 
                                 if(validCount >= 2 || totalWeight >= 0.99){
                                     csmLevel = csm;
                                     break;
-                                }
+                                };
                             }
                         }
 
@@ -5769,7 +5874,7 @@ let ShadowMapping_frag = `
                             visibility = 1.0;
                         }else{
                             visibility = visibility / totalWeight ;
-                        }
+                        };
                     } else {
                         shadowMatrix = globalUniform.shadowMatrix[shadowIndex];
                         if(enableCSM) {
@@ -5818,7 +5923,7 @@ let ShadowMapping_frag = `
                             totalWeight += weight;
                         }else{
                             totalWeight += 1.0;
-                        }
+                        };
                     }
                 }
                 visibility /= totalWeight;
@@ -6631,7 +6736,9 @@ let BRDF_frag = `
      }
 `;
 
-let BxDF_frag = `
+let BxDF_frag = (
+  /*wgsl*/
+  `
   #include "Clearcoat_frag"
   #include "BRDF_frag"
   #include "MathShader"
@@ -6649,7 +6756,9 @@ let BxDF_frag = `
   #include "BxdfDebug_frag"
   #include "ReflectionCG"
  
+  //ORI_ShadingInput
   fn initFragData() {
+      // fragData.Albedo = vec4f(gammaToLiner(ORI_ShadingInput.BaseColor.rgb),ORI_ShadingInput.BaseColor.w) ;
       fragData.Albedo = vec4f((ORI_ShadingInput.BaseColor.rgb),ORI_ShadingInput.BaseColor.w) ;
       fragData.Ao = clamp( pow(ORI_ShadingInput.AmbientOcclusion,materialUniform.ao) , 0.0 , 1.0 ) ; 
       fragData.Roughness = clamp((ORI_ShadingInput.Roughness),0.0001,1.0) * 1.85 ; 
@@ -6665,13 +6774,19 @@ let BxDF_frag = `
  
       let R = 2.0 * dot( fragData.V , fragData.N ) * fragData.N - fragData.V ;
       fragData.R = R ;//reflect( fragData.V , fragData.N ) ;
+
       fragData.NoV = saturate(dot(fragData.N, fragData.V)) ;
+
       fragData.F0 = mix(vec3<f32>(0.04), fragData.Albedo.rgb , fragData.Metallic);
+      // fragData.F0 = gammaToLiner(fragData.F0);
+      
       fragData.F = computeFresnelSchlick(fragData.NoV, fragData.F0);
       fragData.KD = vec3<f32>(fragData.F) ;
       fragData.KS = vec3<f32>(0.0) ;
+
       fragData.Indirect = 0.0 ;
       fragData.Reflectance = 1.0 ;
+
       fragData.ClearcoatRoughness = materialUniform.clearcoatRoughnessFactor ;
       fragData.ClearcoatIor = materialUniform.clearcoatIor ;
       fragData.ClearcoatFactor = materialUniform.clearcoatFactor;
@@ -6684,7 +6799,9 @@ let BxDF_frag = `
 
   fn BxDFShading(){
       initFragData();
+
       let sunLight = lightBuffer[0] ;
+
       var irradiance = vec3<f32>(0.0) ;
       #if USEGI
           irradiance += getIrradiance().rgb ;
@@ -6745,6 +6862,7 @@ let BxDF_frag = `
       }
 
       //***********indirect-ambient part********* 
+      // var kdLast = (1.0 - 0.04) * (1.0 - fragData.Metallic);    
       var iblDiffuseResult : vec3f ;
 
       let MAX_LOD  = i32(textureNumLevels(prefilterMap)) ;
@@ -6758,7 +6876,8 @@ let BxDF_frag = `
         indirectionSpec *= globalUniform.hdrExposure ;
       #endif
 
-      var color = vec3f(iblDiffuseResult + indirectionSpec + specColor);
+      var color = vec3f(iblDiffuseResult + indirectionSpec + specColor)  ;
+      // var color = vec3f(indirectionDiffuse )  ;
 
       var clearCoatColor = vec3<f32>(0.0);
       #if USE_CLEARCOAT
@@ -6783,6 +6902,9 @@ let BxDF_frag = `
                 break;
               }
               case SpotLightType: {
+                // var lightColor = light.lightColor.rgb  ;
+                // var att = pointAtt(ORI_VertexVarying.vWorldPos.xyz, light);
+                // clearCoatColor += ClearCoat_BRDF( color , materialUniform.clearcoatColor.rgb , 1.5 , clearNormal ,  light.direction , fragData.V , clearcoatRoughness , lightColor,  att );
                 break;
               }
               default: {
@@ -6821,7 +6943,9 @@ let BxDF_frag = `
           ORI_FragmentOutput.color = viewColor ;
         #endif
   }
-  `;
+
+  `
+);
 
 let BsDF_frag = `
   #include "Clearcoat_frag"
@@ -7021,7 +7145,9 @@ let Lit_shader = `
     }
 `;
 
-let PBRLItShader = `
+let PBRLItShader = (
+  /*wgsl*/
+  `
     #include "Common_vert"
     #include "Common_frag"
     #include "BxDF_frag"
@@ -7036,10 +7162,10 @@ let PBRLItShader = `
     @group(1) @binding(auto)
     var normalMap: texture_2d<f32>;
 
-    @group(1) @binding(auto)
-    var maskMapSampler: sampler;
-    @group(1) @binding(auto)
-    var maskMap: texture_2d<f32>;
+        @group(1) @binding(auto)
+        var maskMapSampler: sampler;
+        @group(1) @binding(auto)
+        var maskMap: texture_2d<f32>;
 
     #if USE_AOTEX
         @group(1) @binding(auto)
@@ -7053,38 +7179,39 @@ let PBRLItShader = `
     @group(1) @binding(auto)
     var emissiveMap: texture_2d<f32>;
 
-    var<private> debugOut: vec4f = vec4f(0.0);
+    var<private> debugOut : vec4f = vec4f(0.0) ;
 
     fn vert(inputData:VertexAttributes) -> VertexOutput {
-        ORI_Vert(inputData);
-        return ORI_VertextOut;
+        ORI_Vert(inputData) ;
+        return ORI_VertexOut ;
     }
 
     fn frag(){
+   
         let baseMapOffsetSize = materialUniform.baseMapOffsetSize;
-        var uv = transformUV(ORI_VertexVarying.fragUV0, baseMapOffsetSize);
+        var uv = transformUV(ORI_VertexVarying.fragUV0,baseMapOffsetSize) ; 
 
         #if USE_SRGB_ALBEDO
-            ORI_ShadingInput.BaseColor = textureSample(baseMap, baseMapSampler, uv);
-            ORI_ShadingInput.BaseColor = vec4<f32>(ORI_ShadingInput.BaseColor * materialUniform.baseColor.rgb, ORI_ShadingInput.BaseColor.w * materialUniform.baseColor.a);
+            ORI_ShadingInput.BaseColor = textureSample(baseMap, baseMapSampler, uv )  ;
+            ORI_ShadingInput.BaseColor = vec4<f32>( ORI_ShadingInput.BaseColor * materialUniform.baseColor.rgb, ORI_ShadingInput.BaseColor.w * materialUniform.baseColor.a)  ;
         #else
-            ORI_ShadingInput.BaseColor = textureSampler(baseMap, baseMapSampler, uv);
-            ORI_ShadingInput.BaseColor = vec4f(gammaToLiner(ORI_ShadingInput.BaseColor.rgb), ORI_ShadingInput.BaseColor.a);
-            ORI_ShadingInput.BaseColor *= vec4f(materialUniform.baseColor.rgba);
+            ORI_ShadingInput.BaseColor = textureSample(baseMap, baseMapSampler, uv )  ;
+            ORI_ShadingInput.BaseColor = vec4f(gammaToLiner(ORI_ShadingInput.BaseColor.rgb),ORI_ShadingInput.BaseColor.a)  ;
+            ORI_ShadingInput.BaseColor *= vec4f(materialUniform.baseColor.rgba)  ;
         #endif
 
         let roughnessMapOffsetSize = materialUniform.roughnessMapOffsetSize;
-        var uv4 = transformUV(ORI_VertexVarying.fragUV0, roughnessMapOffsetSize);
-        var maskTex = textureSample(maskMap, maskMapSampler, uv4);
-
+        var uv4 = transformUV(ORI_VertexVarying.fragUV0,roughnessMapOffsetSize); 
+        var maskTex = textureSample(maskMap, maskMapSampler, uv4 );
+       
         #if USE_ALPHA_A
-            ORI_ShadingInput.BaseColor.a = ORI_ShadingInput.BaseColor.a * (maskTex.a);
+            ORI_ShadingInput.BaseColor.a =  ORI_ShadingInput.BaseColor.a * (maskTex.a) ;
         #endif
 
-        #if USE_ALPHACUT
+        #if USE_ALPHACUT 
             if( (ORI_ShadingInput.BaseColor.a - materialUniform.alphaCutoff) <= 0.0 ){
                 ORI_FragmentOutput.color = vec4<f32>(0.0,0.0,0.0,1.0);
-
+                
                 #if USEGBUFFER
                     ORI_FragmentOutput.worldPos = vec4<f32>(0.0,0.0,0.0,1.0);
                     ORI_FragmentOutput.worldNormal = vec4<f32>(0.0,0.0,0.0,1.0);
@@ -7097,7 +7224,7 @@ let PBRLItShader = `
 
         useShadow();
 
-        var roughnessChannel: f32 = 1.0;
+        var roughnessChannel:f32 = 1.0 ;
         #if USE_ROUGHNESS_A
             roughnessChannel = maskTex.a ;
         #else if USE_ROUGHNESS_R
@@ -7108,16 +7235,16 @@ let PBRLItShader = `
             roughnessChannel = maskTex.b ;
         #else if USE_ALBEDO_A
             roughnessChannel = ORI_ShadingInput.BaseColor.a ;
-        #endif
+        #endif  
 
         #if USE_SMOOTH
             var roughness = ( 1.0 - roughnessChannel ) * materialUniform.roughness;
-            ORI_ShadingInput.Roughness = clamp(roughness, 0.0001, 1.0);
+            ORI_ShadingInput.Roughness = clamp(roughness , 0.0001 , 1.0);
         #else
-            ORI_ShadingInput.Roughness = clamp(roughness * materialUniform.roughness, 0.0001, 1.0);
-        #endif
+            ORI_ShadingInput.Roughness = clamp(roughnessChannel * materialUniform.roughness ,0.0001,1.0);
+        #endif 
 
-        var metallicChannel:f32 = 1.0;
+        var metallicChannel:f32 = 1.0 ;
         #if USE_METALLIC_A
             metallicChannel = maskTex.a ;
         #else if USE_METALLIC_R
@@ -7126,16 +7253,16 @@ let PBRLItShader = `
             metallicChannel = maskTex.g ;
         #else if USE_METALLIC_B
             metallicChannel = maskTex.b ;
-        #endif
-
-        ORI_ShadingInput.Metallic = metallicChannel * materialUniform.metallic;
+        #endif    
 
-        var aoChannel: f32 = 1.0;
-        #if USE_AOTEX;
+        ORI_ShadingInput.Metallic = metallicChannel * materialUniform.metallic ;
+   
+        var aoChannel:f32 = 1.0 ;
+        #if USE_AOTEX
             let aoMapOffsetSize = materialUniform.aoMapOffsetSize;
             var aoMapOffsetSizeUV = transformUV(ORI_VertexVarying.fragUV0,aoMapOffsetSize); 
             var aoMap = textureSample(aoMap, aoMapSampler, ORI_VertexVarying.fragUV0 );
-            aoChannel = aoMap.g;
+            aoChannel = aoMap.g ;
         #else
             #if USE_AO_A
                 aoChannel = maskTex.a ;
@@ -7148,12 +7275,11 @@ let PBRLItShader = `
             #endif  
         #endif
 
-        ORI_ShadingInput.AmbientOcclusion = aoChannel;
-        ORI_ShadingInput.Specular = 1.0;
+        ORI_ShadingInput.AmbientOcclusion = aoChannel ;
+        ORI_ShadingInput.Specular = 1.0 ;
 
         let emissiveMapOffsetSize = materialUniform.emissiveMapOffsetSize;
-        var emissiveUV = transformUV(ORI_VertexVarying.fragUV0,emissiveMapOffsetSize);
-
+        var emissiveUV = transformUV(ORI_VertexVarying.fragUV0,emissiveMapOffsetSize) ;
         #if USE_EMISSIVEMAP
             var emissiveMapColor = textureSample(emissiveMap, emissiveMapSampler , emissiveUV ) ;
             let emissiveColor = materialUniform.emissiveColor.rgb * emissiveMapColor.rgb * materialUniform.emissiveIntensity ;
@@ -7164,23 +7290,66 @@ let PBRLItShader = `
         #endif
 
         let normalMapOffsetSize = materialUniform.normalMapOffsetSize;
-        var nomralUV = transformUV(ORI_VertexVarying.fragUV0,normalMapOffsetSize);
-        var Normal = textureSample(normalMap,normalMapSampler,nomralUV).rgb;
-        let normal = unPackRGNormal(Normal,1.0,1.0);  
-        ORI_ShadingInput.Normal = normal;
-
+        var nomralUV = transformUV(ORI_VertexVarying.fragUV0,normalMapOffsetSize) ;
+        var Normal = textureSample(normalMap,normalMapSampler,nomralUV).rgb ;
+        let normal = unPackRGNormal(Normal,1.0,1.0) ;  
+        ORI_ShadingInput.Normal = normal ;
+     
         BxDFShading();
+
     }
-`;
+`
+);
 
-let BxdfDebug_frag = `
-    #include "ClusterDebug_frag"
+let BxdfDebug_frag = (
+  /*wgsl*/
+  `
+#include "ClusterDebug_frag" 
+
+        fn debugPosition(){
+        }
 
         fn debugMeshID(){
             let meshIDColor = u32(round(ORI_VertexVarying.vWorldPos.w) ) ;
             let color = colorSet[ meshIDColor % 9u] ;
         }
 
+        fn debugNormal(){
+        }
+
+        fn debugUV(){
+        }
+
+        fn debugColor(){
+        }
+
+        fn debugDiffuse(){
+        }
+
+        fn debugAmbient(){
+        }
+        
+        fn debugEmissive(){
+        }
+
+        fn debugEnvment(){
+        }
+
+        fn debugAo(){
+        }
+
+        fn debugRoughness(){
+        }
+
+        fn debugMetallic(){
+        }
+
+        fn debugIrradiance(){
+        }
+
+        fn debugTangent(){
+        }
+
         fn debugFragmentOut(){
             if(ORI_VertexVarying.fragCoord.x > globalUniform.renderState_split) {
                 switch (globalUniform.renderState_right)
@@ -7310,17 +7479,20 @@ let BxdfDebug_frag = `
                 }
               }
         }
-`;
+`
+);
 
-let FullQuad_vert_wgsl = `
+let FullQuad_vert_wgsl = (
+  /*wgsl*/
+  `
     #include "WorldMatrixUniform"
     #include "GlobalUniform"
 
     struct MaterialUniform {
-        x:f32,
-        y:f32,
-        width:f32,
-        height:f32,
+    x:f32,
+    y:f32,
+    width:f32,
+    height:f32,
     };
 
     struct VertexOutput {
@@ -7329,39 +7501,51 @@ let FullQuad_vert_wgsl = `
     };
 
     @vertex
-    fn main(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) index){
-        const pos = array(vec2(-1.0, -1.0), vec2(-1.0, 1.0), vec2(-1.0, 1.0), vec2(-1.0, 1.0), vec2(1.0, -1.0), vec2(1.0, 1.0));
-        const uv = array(vec2(1.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 1.0), vec2(1.0, 0.0), vec2(0.0, 1.0), vec2(0.0, 0.0));
-        let id = u32(index);
-        var output: VertexOutput;
-        output.fragUV = uv[vertexIndex];
-        output.position = vec4<f32>(pos[vertexIndex] , 0.0, 1.0);
-        return output;
+    fn main(@builtin(vertex_index) vertexIndex : u32, @builtin(instance_index) index : u32 ) -> VertexOutput {
+        const pos = array(
+        vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(-1.0, 1.0),
+        vec2(-1.0, 1.0), vec2(1.0, -1.0), vec2(1.0, 1.0),
+        );
+        const uv = array(
+        vec2(1.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 1.0), 
+        vec2(1.0, 0.0), vec2(0.0, 1.0), vec2(0.0, 0.0),
+        );
+        let id = u32(index) ;
+        var output : VertexOutput;
+        output.fragUV = uv[vertexIndex] ;
+        output.position = vec4<f32>(pos[vertexIndex] , 0.0, 1.0) ;
+        return output ;
     }
-`;
-let Quad_vert_wgsl = `
-    #include "WorldMatrixUniform"
-    #include "GlobalUniform"
-
-    struct MaterialUniform {
-        x: f32,
-        y: f32,
+`
+);
+let Quad_vert_wgsl = (
+  /*wgsl*/
+  `
+#include "WorldMatrixUniform"
+      #include "GlobalUniform"
+   
+      struct MaterialUniform {
+        x:f32,
+        y:f32,
         width:f32,
         height:f32,
-    };
+      };
 
-    struct VertexOutput {
-        @location(auto) fragUV: vec2<f32>,
-        @builtin(position) member: vec4<f32>
-    };
+      struct VertexOutput {
+          @location(auto) fragUV: vec2<f32>,
+          @builtin(position) member: vec4<f32>
+      };
 
-    @vertex
-    fn main(@builtin(instance_index) index: u32, @location(auto) position: vec3<f32>, @location(auto) TEXCOORD_1: vec2<f32>) -> VertexOutput {
-        let uv = vec2(((TEXCOORD_1.xy * 2.0) - vec2<f32>(1.0)));
-        return VertexOutput(TEXCOORD_1, vec4<f32>(uv, 0.0, 1.0));
-    }
-`;
-let Quad_frag_wgsl = `
+      @vertex
+      fn main(@builtin(instance_index) index : u32,@location(auto) position: vec3<f32>, @location(auto) TEXCOORD_1: vec2<f32>) -> VertexOutput {
+          let uv = vec2(((TEXCOORD_1.xy * 2.0) - vec2<f32>(1.0))) ;// / windowSize * size - offset ;
+          return VertexOutput(TEXCOORD_1, vec4<f32>(uv, 0.0, 1.0));
+      }
+`
+);
+let Quad_frag_wgsl = (
+  /*wgsl*/
+  `
     struct FragmentOutput {
         @location(auto) o_Target: vec4<f32>
     };
@@ -7370,22 +7554,25 @@ let Quad_frag_wgsl = `
     var<private> o_Target: vec4<f32>;
     @group(1) @binding(0)
     var baseMapSampler: sampler;
-    @group(1) @binding(0)
+    @group(1) @binding(1)
     var baseMap: texture_2d<f32>;
 
     @fragment
     fn main(@location(auto) fragUV: vec2<f32>) -> FragmentOutput {
-        var uv = fragUV;
-        uv.y = 1.0 -uv.y;
-        var color: vec4<f32> = textureSample(baseMap, baseMapSampler, uv);
+        var uv = fragUV ;
+        uv.y = 1.0 - uv.y ;
+        var color: vec4<f32> = textureSample(baseMap, baseMapSampler, uv );
 
         return FragmentOutput(color);
     }
-`;
-let Quad_depth2d_frag_wgsl = `
+`
+);
+let Quad_depth2d_frag_wgsl = (
+  /*wgsl*/
+  `
     struct FragmentOutput {
         @location(auto) o_Target: vec4<f32>
-    };
+    }; 
 
     var<private> fragUV1: vec2<f32>;
     var<private> o_Target: vec4<f32>;
@@ -7393,21 +7580,25 @@ let Quad_depth2d_frag_wgsl = `
     @group(1) @binding(0)
     var baseMapSampler: sampler;
     @group(1) @binding(1)
-    var baseMap: texture_depth_2d;
+    var baseMap: texture_depth_2d ;
 
-    fn Linear01Depth(z:f32) -> f32 {
+    fn Linear01Depth(  z : f32 ) -> f32
+    {
         return 1.0 / (1.0 * z + 5000.0);
     }
 
     @fragment
     fn main(@location(auto) fragUV: vec2<f32>) -> FragmentOutput {
-        var uv = fragUV;
-        uv.y = 1.0 - uv.y;
-        var depth = textureSample(baseMap, baseMapSampler, uv, vec2<i32>(0));
-        return FragmentOutput(vec4<f32>(depth, 0.0, 0.0, 1.0));
+        var uv = fragUV ;
+        uv.y = 1.0 - uv.y ;
+        var depth = textureSample(baseMap, baseMapSampler, uv , vec2<i32>(0) ) ;
+        return FragmentOutput(vec4<f32>(depth,0.0,0.0,1.0));
     }
-`;
-let Quad_depthCube_frag_wgsl = `
+`
+);
+let Quad_depthCube_frag_wgsl = (
+  /*wgsl*/
+  `
     struct FragmentOutput {
         @location(auto) o_Target: vec4<f32>
     };
@@ -7417,10 +7608,11 @@ let Quad_depthCube_frag_wgsl = `
 
     @group(1) @binding(0)
     var baseMapSampler: sampler;
-    @group(1) @binding(0)
-    var baseMap: texture_depth_cube;
+    @group(1) @binding(1)
+    var baseMap: texture_depth_cube ;
 
-    fn uvToXYZ(face: i32, uv: vec2<f32>) -> vec3<f32> {
+    fn uvToXYZ( face : i32 ,  uv : vec2<f32> ) -> vec3<f32>
+    {
         var out : vec3<f32> ;
         if(face == 0){
             out = vec3<f32>( 1.0, uv.y, -uv.x);
@@ -7440,12 +7632,12 @@ let Quad_depthCube_frag_wgsl = `
 
     @fragment
     fn main(@location(auto) fragUV: vec2<f32>) -> FragmentOutput {
-        var uv = fragUV;
-        uv.y = 1.0 - uv.y;
-        var ii = 0.16;
+        var uv = fragUV ;
+        uv.y = 1.0 - uv.y ;
+        var ii = 0.16 ;
         var ouv = vec3<f32>(0.0);
         if(uv.x < ii * 6.0){
-            ouv = uvToXYZ(5, uv/ii);
+            ouv = uvToXYZ(5,uv/ii);
         }
         if(uv.x < ii * 5.0){
             ouv = uvToXYZ(4,uv/ii);
@@ -7462,15 +7654,19 @@ let Quad_depthCube_frag_wgsl = `
         if(uv.x < ii * 1.0){
             ouv = uvToXYZ(0,uv/ii);
         }
-        var depth = textureSample(baseMap, baseMapSampler, ouv);
-        depth = 1.0 - depth;
-        return FragmentOutput(vec4<f32>(depth, 0.0, 0.0, 1.0));
+        var depth = textureSample(baseMap, baseMapSampler, ouv ) ;
+        depth = 1.0 - depth; 
+
+        return FragmentOutput(vec4<f32>(depth,0.0,0.0,1.0));
     }
-`;
-let Quad_depth2dArray_frag_wgsl = `
+`
+);
+let Quad_depth2dArray_frag_wgsl = (
+  /*wgsl*/
+  `
     struct FragmentOutput {
         @location(auto) o_Target: vec4<f32>
-    }
+    };
 
     var<private> fragUV1: vec2<f32>;
     var<private> o_Target: vec4<f32>;
@@ -7478,7 +7674,7 @@ let Quad_depth2dArray_frag_wgsl = `
     @group(1) @binding(0)
     var baseMapSampler: sampler;
     @group(1) @binding(1)
-    var baseMap: texture_2d_array;
+    var baseMap: texture_2d_array ;
 
     struct MaterialData{
         index:f32;
@@ -7486,15 +7682,16 @@ let Quad_depth2dArray_frag_wgsl = `
 
     @fragment
     fn main(@location(auto) fragUV: vec2<f32>) -> FragmentOutput {
-        var uv = fragUV;
-        uv.y = 1.0 - uv.y;
-
-        var depth = textureSample(baseMap, baseMapSampler, ouv);
-        depth = 1.0 - depth;
+        var uv = fragUV ;
+        uv.y = 1.0 - uv.y ;
+    
+        var depth = textureSample(baseMap, baseMapSampler, ouv ) ;
+        depth = 1.0 - depth; 
 
-        return FragmentOutput(vec4<f32>(depth, 0.0, 0.0, 1.0));
+        return FragmentOutput(vec4<f32>(depth,0.0,0.0,1.0));
     }
-`;
+`
+);
 
 let ColorUtil = `
     fn getHDRColor(color: vec3<f32>, exposure: f32) -> vec3<f32> {
@@ -7641,25 +7838,31 @@ let ColorUtil = `
     }
 `;
 
-let GenerayRandomDir = `
-    fn madfrac(A:f32, B:f32) -> f32 {
-        return A*B-floor(A*B);
+let GenerayRandomDir = (
+  /*wgsl*/
+  `
+    fn madfrac(A:f32, B:f32)-> f32 {
+        return A*B-floor(A*B) ;
     }
 
-    fn sampleRandomDir(count:u32, SAMPLE_COUNT: u32) -> vec3<f32> {
-        var ray_dir = sphericalFibonacci(f32((count)), f32(SAMPLE_COUNT));
-        return normalize(ray_dir);
+    fn sampleRandomDir(count:u32,SAMPLE_COUNT:u32) -> vec3<f32>{
+    var ray_dir = sphericalFibonacci(f32((count)), f32(SAMPLE_COUNT) );
+    return normalize(ray_dir) ;
     }
 
-    fn sphericalFibonacci(i:f32, n:f32) -> vec3<f32> {
-        constPHI = sqrt(5.0) * 0.5 + 0.5;
+    fn sphericalFibonacci( i : f32 ,  n : f32 ) -> vec3<f32>{
+        const PHI = sqrt(5.0) * 0.5 + 0.5;
         let phi = 2.0 * PI * madfrac(i, PHI - 1);
         let cosTheta = 1.0 - (2.0 * i + 1.0) * (1.0 / n);
         let sinTheta = sqrt(saturate(1.0 - cosTheta*cosTheta));
 
-        return vec3<f32>(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);
+        return vec3<f32>(
+            cos(phi) * sinTheta,
+            sin(phi) * sinTheta,
+            cosTheta);
     }
-`;
+`
+);
 
 let MatrixShader = `
     #include "MathShader"
@@ -7914,7 +8117,7 @@ let Hair_frag = `
           face = 1.0 ;
       }else{
           face = -1.0 ;
-      }
+      };
       #if USE_TANGENT
         let T = ORI_VertexVarying.TANGENT.xyz;
         let N = ORI_VertexVarying.vWorldNormal ;
@@ -8781,15 +8984,18 @@ let ZPassShader_fs = `
     }
 `;
 
-let BitUtil = `
+let BitUtil = (
+  /* wgsl */
+  `
+
     const inv256:f32 = 1.0/256.0;
     const inv1024:f32 = 1.0/1024.0;
 
-    const bit7_inv128:f32 = 1.0/128.0;
+    const bit7_inv128:f32 = 1.0 / 128.0;
     const bit7_128:f32 = 128.0;
-
+    
     const r10g10b10 = vec2i(0x3FFFFF,0xFF);
-    fn floatToVec3f(v:f32) -> vec3f {
+    fn floatToVec3f( v:f32 ) -> vec3f {
         var VPInt:i32 = bitcast<i32>(v);
         var VPInt1024:i32 = VPInt%1024;
         var VPInt10241024:i32 = ((VPInt-VPInt1024)/1024)%1024;
@@ -8816,6 +9022,11 @@ let BitUtil = `
         return vec4f(f32(VPInt128),f32(VPInt128128),f32(VPInt128128128),f32(VPInt128128128128))*vec4f(bit7_inv128);
     }
 
+
+
+
+
+
     const i_r11g11b11 = vec3i(0x7FF,0x7FF,0x7FF);
     const f_r11g11b11 = vec3f(f32(0x7FF),f32(0x7FF),f32(0x7FF));
     fn r11g11b11_to_float( v:vec3f) -> f32{
@@ -8864,6 +9075,9 @@ let BitUtil = `
         return vec3f(r,g,b);
     }
 
+
+
+
     fn floatToRGBA(v:f32) -> vec4f{
         var iv = bitcast<u32>(v);
         var color = vec4f(0.0);
@@ -8878,7 +9092,9 @@ let BitUtil = `
         var f = dot(v, bitShift);
         return f;
     }
-`;
+
+`
+);
 
 let GBufferStand = `
     #include "MathShader"
@@ -28033,131 +28249,147 @@ class CubeCamera extends Object3D {
   }
 }
 
-let PreFilteredEnvironment_cs = `
+let PreFilteredEnvironment_cs = (
+  /*wgsl*/
+  `
     #include "GenerayRandomDir"
     #include "BitUtil"
     #include "MathShader"
     #include "ColorUtil_frag"
-
-    struct UniformData {
-        probeSize: f32,
-        probeCount: f32,
-        width: f32,
-        height: f32,
+    
+    struct UniformData{
+        probeSize : f32 ,
+        probeCount : f32 ,
+        width : f32 ,
+        height : f32 ,
     }
 
-    @group(0) @binding(0) var inputTex: texture_2d<f32>;
-    @group(0) @binding(1) var outputTexture: texture_storage_2d<rgba16float,write>;
-    @group(1) @binding(0) var<uniform> uniformData: UniformData;
+    @group(0) @binding(0) var inputTex : texture_2d<f32>;
+    @group(0) @binding(1) var outputTexture : texture_storage_2d<rgba16float, write>;//rgba32float rgba16float
+    @group(1) @binding(0) var<uniform> uniformData:UniformData;//rgba32float
 
-    var<private> reflectionSize: vec2f; 
-    var<private> PROBE_SOURCESIZE: vec2f; 
-    var<private> PROBEMAP_SOURCESIZE: vec2f; 
-    var<private> aspect: vec2f; 
-    var<private> spaceV: f32; 
+    var<private> reflectionSize : vec2f ; 
+    var<private> PROBE_SOURCESIZE : vec2f ; 
+    var<private> PROBEMAP_SOURCESIZE : vec2f ; 
+    var<private> aspect : vec2f ; 
+    var<private> spaceV : f32 ; 
     
     var<private> i32InputFragCoord : vec2i;
     var<private> PI_2 : f32 = 3.1415926 * 2.0 ;
     var<private> PI : f32 = 3.1415926 ;
 
-    var<private> probeSize: f32 = 256.0;
-    var<private> probeCount: f32 = 8.0;
-    var<private> faceCount: f32 = 6.0;
-    var<private> mipCount: f32 = 8.0;
+    var<private> probeSize : f32 = 256.0 ;
+    var<private> probeCount : f32 = 8.0 ;
+    var<private> faceCount : f32 = 6.0 ;
+    var<private> mipCount : f32 = 8.0 ;
 
     const NUM_SAMPLES = 256u;
-    var<private> inputSize: vec2f;
-    var<private> outSize: vec2f;
+    var<private> inputSize : vec2f ; 
+    var<private> outSize : vec2f ; 
 
     fn useSphereReflection(){
-        probeSize = uniformData.probeSize;
+        probeSize = uniformData.probeSize ;
         probeCount = uniformData.probeCount;
         reflectionSize = vec2f(textureDimensions(inputTex).xy);
         PROBE_SOURCESIZE = reflectionSize / vec2f(faceCount,probeCount);
-        PROBEMAP_SOURCESIZE = reflectionSize;
+        PROBEMAP_SOURCESIZE = reflectionSize ;
         aspect = PROBE_SOURCESIZE / PROBEMAP_SOURCESIZE;
-        spaceV = 1.0 / probeCount;
+        spaceV = 1.0 / probeCount ;
     }
 
-    @compute @workgroup_size(16, 16, 1)
-    fn CsMain(@builtin(workgroup_id) workgroup_id: vec3<u32>, @builtin(global_invocation_id) globalInvocation_id: vec3<u32>){
-        var color: vec4f;
+    @compute @workgroup_size( 16 , 16 , 1 )
+    fn CsMain( @builtin(workgroup_id) workgroup_id : vec3<u32> , @builtin(global_invocation_id) globalInvocation_id : vec3<u32>)
+    {
+        var color : vec4f ;
         useSphereReflection();
         inputSize = vec2f(textureDimensions(inputTex).xy);
         outSize = vec2f(textureDimensions(outputTexture).xy);
-        i32InputFragCoord = vec2<i32>(globalInvocation_id.xy);
-        let i = f32(globalInvocation_id.z);
-        let count = floor(i/mipCount);
-        preOneMip(count, floor(i%mipCount));
+        
+        i32InputFragCoord = vec2<i32>( globalInvocation_id.xy ) ;
+
+        let i = f32(globalInvocation_id.z) ;
+        let count = floor(i / mipCount) ;
+        preOneMip(count,floor(i % mipCount));
     }
 
-    fn preOneMip(gid: f32, mip: f32){
-        let isuv = vec2f(i32InputFragCoord);
+    fn preOneMip( gid:f32,mip:f32 ){
+        let isuv = vec2f(i32InputFragCoord) ;
         let suv = isuv * (inputSize/outSize);
         let probeID = i32(floor(suv.y / probeSize));
         let mipID = i32((isuv.x / probeSize));
         if(probeID == i32(gid) && mipID == i32(mip)){
-            let sphereUV = vec2f((isuv.x+0.5)%(probeSize), (isuv.y+0.5)%probeSize/vec2f((probeSize),probeSize));
-            var dir: vec3<f32> = octDecode(sphereUV * 2.0 - 1.0);
-            var preColor = PreFilterEnvMap(mip/mipCount + 0.05, dir, gid);
-            textureStore(outputTexture, vec2i(i32InputFragCoord), preColor);
+
+            let sphereUV = vec2f((isuv.x+0.5) % (probeSize),(isuv.y+0.5) % probeSize) / vec2f( (probeSize), probeSize ) ;
+            var dir: vec3<f32> = octDecode(sphereUV * 2.0 - 1.0) ;
+            var preColor = PreFilterEnvMap(mip/mipCount + 0.05,dir,gid);
+            textureStore(outputTexture,vec2i(i32InputFragCoord),preColor);
         }
     }
 
-    fn PreFilterEnvMap(roughness2:f32,  R:vec3f , gid:f32) -> vec4f {
-        var resColor = vec3f(0.0f);
-        var resDepth = 0.0;
+    fn PreFilterEnvMap( roughness2:f32,  R:vec3f , gid:f32 ) -> vec4f
+    {
+        var resColor = vec3f(0.0f);  
+        var resDepth = 0.0;  
+
         var totalColorWeight = 0.0f;   
         var totalDepthWeight = 0.0f;   
+        
         var normal = normalize(R);
         var toEye = normal;
+        
         var roughness = roughness2;
-
+        
         for(var i=1u;i<=NUM_SAMPLES;i+=1u)
         {
-            var xi:vec2f = hammersley(i, NUM_SAMPLES);             
+            var xi:vec2f = hammersley(i, NUM_SAMPLES) ; 
+            
             var halfway = ImportanceSampleGGX(xi,roughness,normal);
-            var lightVec = 2.0f * dot(toEye,halfway) * halfway - toEye;
-            var NdotL = dot(normal, lightVec);
-            var NdotH = max(0.0,dot( normal, halfway ));
-            var HdotV = max(0.0,dot( halfway, toEye ));
+            var lightVec = 2.0f * dot( toEye,halfway ) * halfway - toEye;
+            
+            var NdotL = dot( normal, lightVec )  ;
+            var NdotH = max(0.0,dot( normal, halfway ))  ;
+            var HdotV = max(0.0,dot( halfway, toEye ))  ;
+            
             if( NdotL > 0.0 )
             {
                 var D = specularD(roughness,NdotH);
-                var pdf = (D * NdotH / (4.0 * HdotV)) + 0.0001f;
+                var pdf = (D * NdotH / (4.0 * HdotV)) + 0.0001f  ;
+
                 var saSample = 1.0f / (f32(NUM_SAMPLES) * pdf + 0.00001f);
                 lightVec = normalize(lightVec);
+
                 var buffer = getReflectionsMap(lightVec,gid); 
                 var rgb = unpack4x8unorm(u32(buffer.z)).rgb;
                 var m = unpack4x8unorm(u32(buffer.w)).z;
                 var rgbmColor = DecodeRGBM(vec4f(rgb,m));
-                resDepth += buffer.x;
+                resDepth += buffer.x ;
                 resColor += rgbmColor * NdotL;
+
                 totalColorWeight += NdotL;
                 totalDepthWeight += 1.0;
             }
         }
-        
+
         resDepth = resDepth / max(totalDepthWeight,0.001f);
         resColor = resColor / max(totalColorWeight,0.001f);
-
+        
         let rgbm = EncodeRGBM(resColor) ; 
         let gBuffer = vec4f(
             resDepth,
             0.0,
             f32(pack4x8unorm(vec4f(rgbm.rgb,0.0))),
             f32(pack4x8unorm(vec4f(0.0,0.0,rgbm.w,0.0))),
-        );
-        return vec4f(resColor, 1.0);
-    }
+        ) ;
+        return vec4f(resColor,1.0) ;
+    } 
 
-    fn getReflectionsMap(n: vec3<f32>,gid: f32) -> vec4f {
+    fn getReflectionsMap(n:vec3<f32>,gid:f32) -> vec4f {
         var uv = getSampleProbeUV(n,gid);
-        let color = textureLoad(inputTex, vec2i(uv*inputSize), 0);
-        return color;
+        let color = textureLoad(inputTex, vec2i(uv*inputSize) , 0);
+        return color ;
     }
 
-    fn getSampleProbeUV(dir: vec3<f32>,gid: f32) -> vec2<f32> {
+    fn getSampleProbeUV(dir:vec3<f32>,gid:f32) -> vec2<f32> {
         let faceId = dir_to_faceId(dir);
         var targetUV:vec2<f32> = convert_xyz_to_cube_uv(dir.x, dir.y, dir.z);
         targetUV.x = 1.0 - targetUV.x;
@@ -28167,17 +28399,18 @@ let PreFilteredEnvironment_cs = `
         let aspect:vec2f = PROBE_SOURCESIZE / PROBEMAP_SOURCESIZE;
         targetUV = targetUV * aspect ;
         targetUV.y = targetUV.y + (spaceV * gid);
-        return targetUV;
-    }
+        return targetUV ;
+     }
 
-    fn radicalInverse_VdC(bits2:u32) -> f32 {
+    fn radicalInverse_VdC( bits2:u32) -> f32
+    {
         var bits = bits2; 
         bits = (bits << 16u) | (bits >> 16u);
         bits = ((bits & 0x55555555u) << 1u) | ((bits & 0xAAAAAAAAu) >> 1u);
         bits = ((bits & 0x33333333u) << 2u) | ((bits & 0xCCCCCCCCu) >> 2u);
         bits = ((bits & 0x0F0F0F0Fu) << 4u) | ((bits & 0xF0F0F0F0u) >> 4u);
         bits = ((bits & 0x00FF00FFu) << 8u) | ((bits & 0xFF00FF00u) >> 8u);
-        return f32(bits) * 2.3283064365386963e-10f;
+        return f32(bits) * 2.3283064365386963e-10f; // / 0x100000000
     }
 
     fn hammersley( i:u32, N:u32) -> vec2f
@@ -28188,21 +28421,25 @@ let PreFilteredEnvironment_cs = `
     fn ImportanceSampleGGX( xi:vec2f,  roughness:f32,  N:vec3f) -> vec3f
     {
         var alpha2 = roughness * roughness * roughness * roughness;
+        
         var phi = 2.0f * 3.1415926 * xi.x  ;
         var cosTheta = sqrt( (1.0f - xi.y) / (1.0f + (alpha2 - 1.0f) * xi.y ));
         var sinTheta = sqrt( 1.0f - cosTheta*cosTheta );
-        var h: vec3f ;
+        
+        var h : vec3f ;
         h.x = sinTheta * cos( phi );
         h.y = sinTheta * sin( phi );
         h.z = cosTheta;
+        
         var up = vec3f(1,0,0) ;
         if(abs(N.z) < 0.9999){
             up = vec3f(0,0,1) ;
         }
+
         var tangentX = normalize( cross( up, N ) );
         var tangentY = cross( N, tangentX );
         return (tangentX * h.x + tangentY * h.y + N * h.z);
-    }
+    } 
 
     fn  specularD( roughness:f32,  NoH:f32) -> f32
     {
@@ -28210,7 +28447,9 @@ let PreFilteredEnvironment_cs = `
         var r2 = roughness * roughness;
         return r2 / pow(NoH2 * (r2 - 1.0) + 1.0, 2.0);
     }
-`;
+    
+`
+);
 
 class ReflectionRenderer extends RendererBase {
   cubeCamera;
@@ -28469,8 +28708,10 @@ class ReflectionRenderer extends RendererBase {
   }
 }
 
-let FXAAShader = `
-    @include 'BitUtil'
+let FXAAShader = (
+  /*wgsl*/
+  `
+    #include 'BitUtil'
     struct FragmentOutput {
         @location(auto) o_Target: vec4<f32>
     };
@@ -28489,6 +28730,7 @@ let FXAAShader = `
     @group(2) @binding(0)
     var<uniform> materialUniform: MaterialUniform;
 
+
     fn LinearToGammaSpace(linRGB0: vec3<f32>) -> vec3<f32> {
         var linRGB = max(linRGB0, vec3(0.0, 0.0, 0.0));
         linRGB.r = pow(linRGB.r,0.416666667);
@@ -28497,30 +28739,35 @@ let FXAAShader = `
         return max(1.055 * linRGB - 0.055, vec3(0.0, 0.0, 0.0));
     }
 
-    fn texture2D(uv:vec2<f32>, offset:vec2<f32>) -> vec4<f32> {
-        let buffer = textureSample(baseMap, baseMapSampler, uv.xy + offset).rgba;
-        return buffer;
+    fn texture2D( uv:vec2<f32> , offset:vec2<f32> ) -> vec4<f32> {
+        let buffer = textureSample(baseMap, baseMapSampler, uv.xy + offset ).rgba ;
+        return buffer ;
     }
 
     @fragment
     fn main(@location(auto) fragUV: vec2<f32>) -> FragmentOutput {
-        var v_vTexcoord = fragUV;
+        var v_vTexcoord = fragUV ;
         v_vTexcoord.y = 1.0 - v_vTexcoord.y ;
+
         var reducemul = 1.0 / 8.0;
         var reducemin = 1.0 / 128.0;
+
         var basecol = texture2D(v_vTexcoord , vec2<f32>(0.0)).rgba;
         var baseNW = texture2D(v_vTexcoord , -materialUniform.u_texel).rgb;
         var baseNE = texture2D(v_vTexcoord , vec2<f32>(materialUniform.u_texel.x, -materialUniform.u_texel.y)).rgb;
         var baseSW = texture2D(v_vTexcoord , vec2<f32>(-materialUniform.u_texel.x, materialUniform.u_texel.y)).rgb;
         var baseSE = texture2D(v_vTexcoord , materialUniform.u_texel ).rgb;
+
         var gray = vec3<f32>(0.213, 0.715, 0.072);
         var monocol = dot(basecol.rgb, gray);
         var monoNW = dot(baseNW, gray);
         var monoNE = dot(baseNE, gray);
         var monoSW = dot(baseSW, gray);
         var monoSE = dot(baseSE, gray);
+
         var monomin = min(monocol, min(min(monoNW, monoNE), min(monoSW, monoSE)));
         var monomax = max(monocol, max(max(monoNW, monoNE), max(monoSW, monoSE)));
+
         var dir = vec2<f32>(-((monoNW + monoNE) - (monoSW + monoSE)), ((monoNW + monoSW) - (monoNE + monoSE)));
         var dirreduce = max((monoNW + monoNE + monoSW + monoSE) * reducemul * 0.25, reducemin);
         var dirmin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirreduce);
@@ -28528,9 +28775,11 @@ let FXAAShader = `
 
         var resultA = 0.5 * (texture2D(v_vTexcoord , dir * -0.166667).rgb  +
                             texture2D(v_vTexcoord , dir * 0.166667).rgb);
+                            
         var resultB = resultA * 0.5 + 0.25 * (texture2D( v_vTexcoord , dir * -0.5).rgb +
                                             texture2D( v_vTexcoord , dir * 0.5).rgb);
         var monoB = dot(resultB.rgb, gray);
+        
         var color:vec3<f32> ;
         if(monoB < monomin || monoB > monomax) {
             color = resultA ;//* v_vColour;
@@ -28539,7 +28788,8 @@ let FXAAShader = `
         }
         return FragmentOutput(vec4<f32>(color.rgb,basecol.a));
     }
-`;
+`
+);
 
 class FXAAPost extends PostBase {
   postQuad;
@@ -28958,12 +29208,12 @@ let DDGIIrradiance_shader = `
                 cornerCoord.x = sideBorderCnt - 1;
             }else{
                 cornerCoord.x = 0;
-            }
+            };
             if(modeXY.y == 0){
                 cornerCoord.y = sideBorderCnt - 1;
             }else{
                 cornerCoord.y = 0;
-            }
+            };
             cornerCoord = indexXY * sideBorderCnt + cornerCoord;
             textureStore(texture, cornerCoord, color);
         }
@@ -29485,7 +29735,7 @@ fn directShadowMaping(P:vec3<f32>, N:vec3<f32>, shadowBias: f32)  {
       }else{
         shadowMatrix = globalUniform.shadowMatrix[shadowIndex];
         visibility = directShadowMapingIndex(light, shadowMatrix, P, N, shadowIndex, shadowBias).x;
-      }
+      };
     }
   shadowStrut.directShadowVisibility = visibility;
 }
@@ -29594,7 +29844,7 @@ fn spotLight( albedo:vec3<f32>,WP:vec3<f32>, N:vec3<f32>, V:vec3<f32>, light:Lig
        }
      }else{
        atten = 0.0 ;
-     }
+     };
      var lightColor = light.lightColor.rgb  ;
      lightColor = getHDRColor(lightColor , light.linear ) * light.intensity / LUMEN * 2.0;
      color = (albedo / PI) * lightColor.rgb * atten ;
@@ -37305,16 +37555,16 @@ let BRDFLUT = `
         return 4.0 * vec2<f32>(A, B) / f32(numSamples);
     }
 
-    @group(0) @binding(0) var brdfluTexture: texture_storage_2d<rgba8unorm, write>;
+    @group(0) @binding(0) var brdflutTexture: texture_storage_2d<rgba8unorm, write>;
     @compute @workgroup_size(8,8,1)
-    fn CsMain(@builtin(global_invocation_id) workgroup_id: vec3<u32>, @builtin(local_invocation_id) local_invocation_id: vec3<u32>){
-        var fragCoord = vec2<u32>(global_invocation_id.x, global_invocation_id.y);
-        var fragColor = vec4<f32>(0,0);
-        var res = integrateBRDF(f32(fragCoord.y + 1u) / 256.0, f32(fragCoord.x + 1u) / 256.0);
-        fragColor = vec4<f32>(res.x, res.y, 0.0, 1.0);
-
-        textureStore(brdflutTexture, vec2<i32>(fragCoord.xy), fragColor);
-    }
+    fn CsMain(@builtin(global_invocation_id) global_invocation_id : vec3<u32>){
+    var fragCoord = vec2<u32>(global_invocation_id.x, global_invocation_id.y);
+    var fragColor = vec4<f32>(0.0);
+    // Output to screen
+    var res = integrateBRDF(f32(fragCoord.y + 1u) / 256.0, f32(fragCoord.x + 1u) / 256.0);
+    fragColor = vec4<f32>(res.x, res.y, 0.0, 1.0);
+    textureStore(brdflutTexture, vec2<i32>(fragCoord.xy), fragColor);
+}
 `;
 
 class BRDFLUTGenerate {
@@ -38159,7 +38409,7 @@ class PostProcessingComponent extends ComponentBase {
   }
 }
 
-const version = "1.0.0";
+const version = "1.0.1";
 
 class Engine3D {
   /**
@@ -39158,7 +39408,7 @@ let GodRay_cs = (
             }else{
                 shadowMatrix = globalUniform.shadowMatrix[shadowIndex];
                 visibility = directShadowMapingIndex(light, shadowMatrix, P, N, shadowIndex, shadowBias).x;
-            }
+            };
         }
         shadowStruct.directShadowVisibility = visibility;
     }
@@ -39363,7 +39613,7 @@ let OutLineBlendColor_cs = (
             blendColor = inColor.xyz + outLineColor.xyz * outLineColor.w;
         }else{
             blendColor = mix(inColor.xyz, outLineColor.xyz, outLineColor.w);
-        }
+        };
         textureStore(outlineTex, fragCoord, vec4<f32>(blendColor, inColor.w));
    }
 `
@@ -40091,7 +40341,7 @@ let SSGI2_cs = (
 
         }else{
             Output = vec4f(wColor.xyz, 1.0);
-        }
+        };
 
         return Output;
     }
@@ -40360,12 +40610,12 @@ struct SSRUniformData {
           }
       }else{
         rayTraceRet.alpha = 0.0;
-      }
+      };
       rayTraceRet.skyColor = getSkyColor();
     }else{
       rayTraceRet.alpha = -1.0;
       rayTraceRet.skyColor = vec3<f32>(0.0);
-    }
+    };
 
     rayTraceRet.roughness = roughness;
     rayTraceRet.fresnel = fresnel;
@@ -40517,7 +40767,7 @@ struct SSRUniformData {
           hitData.hitCoord = uv;
           return 1;
         }
-      }
+      };
     }
     return 0;
   }
@@ -40669,7 +40919,7 @@ fn blendColor() -> vec4<f32>{
             preCoord = vec2<i32>(reProjectionCoord);
         }else{ 
             mixWeight = 1.0;
-        }
+        };
     }
 
     var curUV01 = fragUV;
@@ -40742,7 +40992,7 @@ fn minmax4(coord:vec2<i32>) {
           return vec4<f32>(p_clip, color_avg.w) + v_clip / ma_unit;
       }else{
           return input_texel;
-      }
+      };
   }
 `
 );
@@ -41231,7 +41481,7 @@ fn containsBox( size:vec3<f32> , center:vec3<f32> ) -> f32 {
         return 2.0 ;
     }else{
         return 1.0 ;
-    }
+    };
 }
 
 @compute @workgroup_size(128)
@@ -41986,11 +42236,13 @@ let PBRLitSSSShader = (
 );
 
 let UnLitTextureArray = (
-  /*wgsl */
+  /*wgsl*/
   `
+    // #include "Common_vert"
     #include "Common_frag"
     #include "UnLit_frag"
     #include "UnLitMaterialUniform_frag"
+
     #include "WorldMatrixUniform"
     #include "VertexAttributeIndexShader"
     #include "GlobalUniform"
@@ -41998,8 +42250,8 @@ let UnLitTextureArray = (
     #include "EnvMap_frag"
     #include "ColorUtil_frag"
 
-    const DEGREES_TO_RADIANS: f32 = 3.1415926 / 180.0;
-    const PI: f32 = 3.1415926;
+    const DEGREES_TO_RADIANS : f32 = 3.1415926 / 180.0 ;
+    const PI : f32 = 3.1415926 ;
 
     #if USE_CUSTOMUNIFORM
         struct MaterialUniform {
@@ -42010,15 +42262,19 @@ let UnLitTextureArray = (
         };
     #endif
 
-    @group(1) @binding(0) var baseMapSampler: sampler;
-    @group(1) @binding(1) var baseMap: texture_2d_array<f32>;
-    @group(2) @binding(5) var<storage,read> graphicBuffer: array<GraphicNodeStruct>;
+    @group(1) @binding(0)
+    var baseMapSampler: sampler;
+    @group(1) @binding(1)
+    var baseMap: texture_2d_array<f32>;
 
+    @group(2) @binding(5)
+    var<storage,read> graphicBuffer : array<GraphicNodeStruct>;
+    
     @vertex
-    fn VertMain(vertex: VertexAttributes) -> VertexOutput {
+    fn VertMain( vertex:VertexAttributes ) -> VertexOutput {
         vertex_inline(vertex);
         vert(vertex);
-        return ORI_VertexOut;
+        return ORI_VertexOut ;
     }
 
     fn vert(inputData:VertexAttributes) -> VertexOutput {
@@ -42029,9 +42285,15 @@ let UnLitTextureArray = (
     fn frag(){
         var transformUV1 = materialUniform.transformUV1;
         var transformUV2 = materialUniform.transformUV2;
+
+        // var irradiance = vec3<f32>(0.0) ;
+        // let MAX_REFLECTION_LOD  = f32(textureNumLevels(prefilterMap)) ;
+        // irradiance += (globalUniform.skyExposure * textureSampleLevel(prefilterMap, prefilterMapSampler, ORI_VertexVarying.vWorldNormal.xyz, 0.8 * (MAX_REFLECTION_LOD) ).rgb);
+
         graphicNode = graphicBuffer[u32(round(ORI_VertexVarying.index))];
         
         var uv = transformUV1.zw * ORI_VertexVarying.fragUV0 + transformUV1.xy;
+        //The fragUV1.x is 1.0 when the vertex belongs to line.
         if(ORI_VertexVarying.fragUV1.x > 0.5){
             uv = graphicNode.uvRect2.zw * uv.xy + graphicNode.uvRect2.xy;
             uv += graphicNode.uvSpeed.zw * globalUniform.time;
@@ -42047,7 +42309,7 @@ let UnLitTextureArray = (
                 );
                 uv = (zrot * vec3f(uv, 0.0)).xy;
             }
-        }
+        };
         var graphicTextureID = graphicNode.texIndex;
         var graphicNodeColor = graphicNode.baseColor;
         if(ORI_VertexVarying.fragUV1.x > 0.5){
@@ -42055,12 +42317,23 @@ let UnLitTextureArray = (
             graphicNodeColor = graphicNode.lineColor;
         }
         var color = textureSample(baseMap,baseMapSampler,uv, u32(round(graphicTextureID)) ) * materialUniform.baseColor * graphicNodeColor ;
-        color += graphicNode.emissiveColor;
+        // let color = textureSample(baseMap,baseMapSampler,uv, u32(round(ORI_VertexVarying.index)));
+
+        // ORI_ViewDir = normalize( globalUniform.CameraPos.xyz - ORI_VertexVarying.vWorldPos.xyz);
+        // let att = dot( ORI_ViewDir , ORI_VertexVarying.vWorldNormal.xyz );
+
+        // irradiance = LinearToGammaSpace(irradiance.rgb) * color.rgb ;//* att ;
+
+        color += graphicNode.emissiveColor ;
         if(color.w < materialUniform.alphaCutoff){
-            discard;
+            discard ;
         }
-        let outColor = vec4f( color.rgb , 1.0 ) * materialUniform.baseColor;
-        ORI_ShadingInput.BaseColor = vec4f(outColor.xyz,1.0);
+
+        // let outColor = vec4f( color.rgb * (att * 0.5 + 0.5 ) , 1.0 ) * materialUniform.baseColor ;
+        let outColor = vec4f( color.rgb , 1.0 ) * materialUniform.baseColor ;
+        
+        // ORI_ShadingInput.BaseColor = color  ;
+        ORI_ShadingInput.BaseColor = vec4f(outColor.xyz,1.0)  ;
         UnLit();
     }
 `
@@ -42195,7 +42468,7 @@ let GlobalFog_shader = (
             let sunLight = lightBuffer[0] ;
             var inScatteringValue = inScatterIng(sunLight.direction, texPosition.xyz, sunLight.lightColor);
             opColor += inScatteringValue;
-        }
+        };
 
         textureStore(outTex, fragCoord , vec4<f32>(opColor.xyz, texColor.a));
     }
@@ -47646,7 +47919,7 @@ class GUIShader {
                     s = border.x + (s / centerPartMax) * centerPartMin;
                 }else{
                     s = s - centerPartMax + border.x + centerPartMin;
-                }
+                };
             }
             return s;
         }
@@ -47798,12 +48071,12 @@ class GUIShader {
                 ret.x = quad.x;
             }else{
                 ret.x = quad.z;
-            }
+            };
             if(index == 0 || index == 1){
                 ret.y = quad.w;
             }else{
                 ret.y = quad.y;
-            }
+            };
             return ret;
         }
     `