diff --git a/packages/media-extention/ChromaKeyMaterial.ts b/packages/media-extention/ChromaKeyMaterial.ts
index 73f3b7a5..75815bf7 100644
--- a/packages/media-extention/ChromaKeyMaterial.ts
+++ b/packages/media-extention/ChromaKeyMaterial.ts
@@ -1,5 +1,5 @@
 import { Engine3D, ShaderLib, Vector4, Color, BlendMode, registerMaterial, Material, RenderShader } from "@orillusion/core";
-import ChromaKeyShader from "./ChromaKeyShader.wgsl?raw";
+import { ChromaKeyShader } from "./ChromaKeyShader";
 
 /**
  * ChromaKey Material
diff --git a/packages/media-extention/ChromaKeyShader.wgsl b/packages/media-extention/ChromaKeyShader.ts
similarity index 98%
rename from packages/media-extention/ChromaKeyShader.wgsl
rename to packages/media-extention/ChromaKeyShader.ts
index f2cf609d..dcf5a9fa 100644
--- a/packages/media-extention/ChromaKeyShader.wgsl
+++ b/packages/media-extention/ChromaKeyShader.ts
@@ -1,3 +1,4 @@
+export let ChromaKeyShader = /*wgsl*/`
 #include "Common_vert"
 #include "Common_frag"
 #include "UnLit_frag"
@@ -106,3 +107,5 @@ fn maskedTex2D(uv: vec2<f32>, texSize: vec2<u32>, key_cb: f32, key_cr: f32) -> f
     let pix_cr = rgb2cr(color.rgb);
     return colorclose(pix_cb, pix_cr, key_cb, key_cr, materialUniform.colorCutoff, materialUniform.colorFeathering);
 }
+
+`
\ No newline at end of file
diff --git a/packages/media-extention/VideoMaterial.ts b/packages/media-extention/VideoMaterial.ts
index 185ea910..45ad7362 100644
--- a/packages/media-extention/VideoMaterial.ts
+++ b/packages/media-extention/VideoMaterial.ts
@@ -1,6 +1,6 @@
 
 import { Color, Engine3D, Material, RenderShader, ShaderLib, Texture, Vector4, registerMaterial } from '@orillusion/core';
-import VideoShader from "./VideoShader.wgsl?raw";
+import { VideoShader } from './VideoShader';
 
 /**
  * Video Material
@@ -15,6 +15,8 @@ export class VideoMaterial extends Material {
     constructor() {
         super();
 
+        ShaderLib.register("VideoShader", VideoShader);
+
         this.defaultPass = new RenderShader(`VideoShader`, `VideoShader`);
         this.defaultPass.setShaderEntry(`VertMain`, `FragMain`)
 
@@ -51,6 +53,14 @@ export class VideoMaterial extends Material {
         return this.defaultPass.uniforms[`rectClip`].vector4;
     }
 
+    public get baseMap(): Texture {
+        return this.defaultPass.getTexture(`baseMap`);
+    }
+
+    public set baseMap(value: Texture) {
+        this.defaultPass.setTexture(`baseMap`, value);
+    }
+
     /**
      * Set no envMap
      */
diff --git a/packages/media-extention/VideoShader.ts b/packages/media-extention/VideoShader.ts
new file mode 100644
index 00000000..ed8d6cc5
--- /dev/null
+++ b/packages/media-extention/VideoShader.ts
@@ -0,0 +1,37 @@
+export let VideoShader = /*wgsl*/`
+    #include "Common_vert"
+    #include "Common_frag"
+    #include "UnLit_frag"
+    #include "VideoUniform_frag"
+
+    @group(1) @binding(auto)
+    var baseMapSampler: sampler;
+    @group(1) @binding(auto)
+    var baseMap: texture_external;
+
+    fn vert(inputData:VertexAttributes) -> VertexOutput {
+        ORI_Vert(inputData) ;
+        return ORI_VertexOut ;
+    }
+
+    fn frag(){
+        var transformUV1 = materialUniform.transformUV1;
+        var transformUV2 = materialUniform.transformUV2;
+
+        var uv = transformUV1.zw * ORI_VertexVarying.fragUV0 + transformUV1.xy; 
+
+        if(uv.x < materialUniform.rectClip.x || uv.x > (1.0-materialUniform.rectClip.z)){
+            discard;
+        }
+        if(uv.y < materialUniform.rectClip.y || uv.y > (1.0-materialUniform.rectClip.w)){
+            discard;
+        }
+        
+        let size = textureDimensions(baseMap).xy - 1;
+        let iuv = vec2<i32>(uv * vec2<f32>(size));
+        let videoColor = textureLoad(baseMap, iuv) ;
+
+        ORI_ShadingInput.BaseColor = videoColor * materialUniform.baseColor ;
+        UnLit();
+    }
+`
\ No newline at end of file
diff --git a/packages/media-extention/VideoShader.wgsl b/packages/media-extention/VideoShader.wgsl
deleted file mode 100644
index 192987f9..00000000
--- a/packages/media-extention/VideoShader.wgsl
+++ /dev/null
@@ -1,35 +0,0 @@
-#include "Common_vert"
-#include "Common_frag"
-#include "UnLit_frag"
-#include "VideoUniform_frag"
-
-@group(1) @binding(auto)
-var baseMapSampler: sampler;
-@group(1) @binding(auto)
-var baseMap: texture_external;
-
-fn vert(inputData:VertexAttributes) -> VertexOutput {
-    ORI_Vert(inputData) ;
-    return ORI_VertexOut ;
-}
-
-fn frag(){
-    var transformUV1 = materialUniform.transformUV1;
-    var transformUV2 = materialUniform.transformUV2;
-
-    var uv = transformUV1.zw * ORI_VertexVarying.fragUV0 + transformUV1.xy; 
-
-    if(uv.x < materialUniform.rectClip.x || uv.x > (1.0-materialUniform.rectClip.z)){
-        discard;
-    }
-    if(uv.y < materialUniform.rectClip.y || uv.y > (1.0-materialUniform.rectClip.w)){
-        discard;
-    }
-    
-    let size = textureDimensions(baseMap).xy - 1;
-    let iuv = vec2<i32>(uv * vec2<f32>(size));
-    let videoColor = textureLoad(baseMap, iuv) ;
-
-    ORI_ShadingInput.BaseColor = videoColor * materialUniform.baseColor ;
-    UnLit();
-}
\ No newline at end of file
diff --git a/packages/particle/material/ParticleMaterial.ts b/packages/particle/material/ParticleMaterial.ts
index 311e5e5e..7b5ffd23 100644
--- a/packages/particle/material/ParticleMaterial.ts
+++ b/packages/particle/material/ParticleMaterial.ts
@@ -30,7 +30,7 @@ export class ParticleMaterial extends Material {
         // default value
         this.baseMap = Engine3D.res.whiteTexture;
         this.blendMode = BlendMode.ADD;
-        this.defaultPass.shaderState.renderOrder = 3001;
+        this.defaultPass.renderOrder = 3001;
         this.defaultPass.shaderState.transparent = true;
         this.defaultPass.shaderState.depthWriteEnabled = false;
         this.defaultPass.shaderState.depthCompare = GPUCompareFunction.less;
diff --git a/samples/lights/Sample_ClusterLight.ts b/samples/lights/Sample_ClusterLight.ts
deleted file mode 100644
index bfd25e7b..00000000
--- a/samples/lights/Sample_ClusterLight.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { Scene3D, Engine3D, AtmosphericComponent, CameraUtil, HoverCameraController, Vector3, View3D, SphereGeometry, Object3D, MeshRenderer, LitMaterial, PointLight, BoxGeometry, Object3DUtil, DirectLight, KelvinUtil } from "@orillusion/core";
-import { GUIUtil } from "@samples/utils/GUIUtil";
-
-// sample of point light shadow
-class Sample_ClusterLight {
-    scene: Scene3D;
-    lightObj: Object3D;
-    async run() {
-
-        Engine3D.setting.render.zPrePass = true;
-        Engine3D.setting.shadow.enable = true;
-        Engine3D.setting.shadow.debug = true;
-
-        await Engine3D.init({});
-
-        this.scene = new Scene3D();
-        let sky = this.scene.addComponent(AtmosphericComponent);
-
-        // init camera3D
-        let mainCamera = CameraUtil.createCamera3D(null, this.scene);
-        mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
-        //set camera data
-        mainCamera.object3D.addComponent(HoverCameraController).setCamera(0, -45, 100);
-
-        await this.initScene(this.scene);
-        // sky.relativeTransform = this.lightObj.transform;
-
-        let view = new View3D();
-        view.scene = this.scene;
-        view.camera = mainCamera;
-
-        Engine3D.startRenderView(view);
-    }
-
-    async initScene(scene: Scene3D) {
-        {
-            let lightObj3D = new Object3D();
-            lightObj3D.name = "asd";
-            lightObj3D.rotationX = 46;
-            lightObj3D.rotationY = 62;
-            lightObj3D.rotationZ = 0;
-            let sunLight = lightObj3D.addComponent(DirectLight);
-            sunLight.intensity = 65;
-            sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(6553);
-            sunLight.castShadow = true;
-            GUIUtil.renderDirLight(sunLight);
-            scene.addChild(lightObj3D);
-        }
-        //show gui
-        GUIHelp.init()
-
-
-        //create floor
-        let floor = Object3DUtil.GetSingleCube(100, 1, 100, 0.5, 0.5, 0.5);
-        scene.addChild(floor);
-    }
-}
-
-new Sample_ClusterLight().run();
\ No newline at end of file
diff --git a/samples/lights/Sample_ShadowAlpha.ts b/samples/lights/Sample_ShadowAlpha.ts
new file mode 100644
index 00000000..3097546f
--- /dev/null
+++ b/samples/lights/Sample_ShadowAlpha.ts
@@ -0,0 +1,85 @@
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
+import { Scene3D, HoverCameraController, Engine3D, AtmosphericComponent, Object3D, Camera3D, Vector3, View3D, DirectLight, KelvinUtil, LitMaterial, MeshRenderer, BoxGeometry, CameraUtil, SphereGeometry, Color, Object3DUtil, BlendMode, Vector4 } from "@orillusion/core";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+
+//sample of direction light
+class Sample_ShadowAlpha {
+    scene: Scene3D;
+    async run() {
+        Engine3D.setting.shadow.enable = true;
+        // Engine3D.setting.render.zPrePass = true;
+        Engine3D.setting.shadow.autoUpdate = true;
+        Engine3D.setting.shadow.shadowSize = 1024;
+        Engine3D.setting.render.debug = true;
+        Engine3D.setting.render.useLogDepth = false;
+        Engine3D.setting.occlusionQuery.octree = { width: 1000, height: 1000, depth: 1000, x: 0, y: 0, z: 0 }
+        await Engine3D.init({});
+
+        GUIHelp.init();
+
+        this.scene = new Scene3D();
+        let sky = this.scene.addComponent(AtmosphericComponent);
+
+        // init camera3D
+        let mainCamera = CameraUtil.createCamera3D(null, this.scene);
+        // mainCamera.enableCSM = true;
+        mainCamera.perspective(60, Engine3D.aspect, 1, 5000.0);
+        //set camera data
+        mainCamera.object3D.z = -15;
+        mainCamera.object3D.addComponent(HoverCameraController).setCamera(-15, -35, 200);
+
+        sky.relativeTransform = this.initLight();
+        await this.initScene();
+
+        let view = new View3D();
+        view.scene = this.scene;
+        view.camera = mainCamera;
+
+        Engine3D.startRenderView(view);
+        GUIUtil.renderDebug();
+    }
+
+    // create direction light
+    private initLight() {
+        // add a direction light
+        let lightObj3D = new Object3D();
+        lightObj3D.rotationX = 46;
+        lightObj3D.rotationY = 62;
+        lightObj3D.rotationZ = 0;
+        let sunLight = lightObj3D.addComponent(DirectLight);
+        sunLight.intensity = 15;
+        sunLight.lightColor = KelvinUtil.color_temperature_to_rgb(6553);
+        sunLight.castShadow = true;
+
+        GUIUtil.renderDirLight(sunLight);
+        this.scene.addChild(lightObj3D);
+        return sunLight.transform;
+    }
+
+    async initScene() {
+        let tex = await Engine3D.res.loadTexture("textures/grid.jpg");
+
+        {
+            let geometry = new BoxGeometry(20, 100, 20);
+            let material = new LitMaterial();
+            let obj = new Object3D();
+            let mr = obj.addComponent(MeshRenderer);
+            mr.geometry = geometry;
+            mr.material = material;
+            this.scene.addChild(obj);
+        }
+        {
+            let mat = new LitMaterial();
+            // mat.baseMap = Engine3D.res.grayTexture;
+            mat.uvTransform_1 = new Vector4(0, 0, 100, 100);
+            let floor = new Object3D();
+            let mr = floor.addComponent(MeshRenderer);
+            mr.geometry = new BoxGeometry(10000, 1, 10000);
+            mr.material = mat;
+            mat.baseMap = tex;
+            this.scene.addChild(floor);
+        }
+    }
+}
+
+new Sample_ShadowAlpha().run();
diff --git a/src/assets/shader/ShaderLib.ts b/src/assets/shader/ShaderLib.ts
index 0daf495c..94575115 100644
--- a/src/assets/shader/ShaderLib.ts
+++ b/src/assets/shader/ShaderLib.ts
@@ -34,7 +34,7 @@ import { BxdfDebug_frag } from './materials/program/BxdfDebug_frag';
 import { Quad_depth2d_frag_wgsl, Quad_depthCube_frag_wgsl, Quad_frag_wgsl, Quad_vert_wgsl } from './quad/Quad_shader';
 import { ColorUtil } from './utils/ColorUtil';
 import { GenerayRandomDir } from './utils/GenerayRandomDir';
-import { ClusterLight, GBuffer_pass, LambertShader, MatrixShader, QuadGlsl_fs, QuadGlsl_vs, SkyGBuffer_pass, UnLit, ZPassShader_fs, ZPassShader_vs, castPointShadowMap_vert, shadowCastMap_frag, shadowCastMap_vert } from '../..';
+import { ClusterLight, GBuffer_pass, LambertShader, MatrixShader, QuadGlsl_fs, QuadGlsl_vs, SkyGBuffer_pass, UnLit, ZPassShader_fs, ZPassShader_vs, castPointShadowMap_vert, directionShadowCastMap_frag, shadowCastMap_frag, shadowCastMap_vert } from '../..';
 
 /**
  * @internal
@@ -112,7 +112,7 @@ export class ShaderLib {
         ShaderLib.register("shadowCastMap_frag", shadowCastMap_frag);
 
         ShaderLib.register("shadowCastMap_vert", shadowCastMap_vert);
-        ShaderLib.register("shadowCastMap_frag", shadowCastMap_frag);
+        ShaderLib.register("directionShadowCastMap_frag", directionShadowCastMap_frag);
 
         ShaderLib.register("ZPass_shader_vs", ZPassShader_vs);
         ShaderLib.register("ZPass_shader_fs", ZPassShader_fs);
diff --git a/src/assets/shader/core/pass/CastShadow_pass.ts b/src/assets/shader/core/pass/CastShadow_pass.ts
index 56b0c752..cd43c7bb 100644
--- a/src/assets/shader/core/pass/CastShadow_pass.ts
+++ b/src/assets/shader/core/pass/CastShadow_pass.ts
@@ -50,6 +50,8 @@ struct VertexAttributes{
   #endif
 }
 
+
+
 @vertex
 fn main(vertex:VertexAttributes) -> VertexOutput {
     worldMatrix = models.matrix[vertex.index];
@@ -71,6 +73,7 @@ fn main(vertex:VertexAttributes) -> VertexOutput {
 
     var worldPos = worldMatrix * vec4<f32>(vertexPosition, 1.0) ;
     var vPos = shadowMatrix * worldPos;
+
     return VertexOutput(vertex.uv, vPos );  
 }
 `
@@ -217,14 +220,14 @@ export let directionShadowCastMap_frag: string = /*wgsl*/ `
         // distance = distance / materialUniform.cameraFar ;
         var fragOut:FragmentOutput; 
 
-      #if USE_ALPHACUT
-        let Albedo = textureSample(baseMap,baseMapSampler,fragUV);
-        if(Albedo.w > 0.5){
-          fragOut = FragmentOutput(vec4<f32>(0.0),distance);
-        }
-      #else
-        fragOut = FragmentOutput(vec4<f32>(0.0),distance);
-      #endif
+      // #if USE_ALPHACUT
+      //   let Albedo = textureSample(baseMap,baseMapSampler,fragUV);
+      //   if(Albedo.w > 0.5){
+      //     fragOut = FragmentOutput(vec4<f32>(0.0),distance);
+      //   }
+      // #else
+      //   fragOut = FragmentOutput(vec4<f32>(0.0),distance);
+      // #endif
       
         return fragOut ;
     }
diff --git a/src/components/renderer/RenderNode.ts b/src/components/renderer/RenderNode.ts
index 6bdb15f4..e4ff1797 100644
--- a/src/components/renderer/RenderNode.ts
+++ b/src/components/renderer/RenderNode.ts
@@ -185,10 +185,11 @@ export class RenderNode extends ComponentBase {
             const pass = passArray[0];
             if (pass.shaderState.transparent) {
                 transparent = true;
-                sort = sort > pass.shaderState.renderOrder ? sort : pass.shaderState.renderOrder;
+                sort = sort > pass.renderOrder ? sort : pass.renderOrder;
             }
         }
-        this.renderOrder = transparent ? this.renderOrder : sort;
+        // this.renderOrder = transparent ? this.renderOrder : sort;
+        this.renderOrder = sort;
 
         if (!this._readyPipeline) {
             this.initPipeline();
@@ -254,8 +255,8 @@ export class RenderNode extends ComponentBase {
                 const element = this.materials[i];
                 const passArray = element.getPass(RendererType.COLOR);
                 const pass = passArray[0];
-                if (pass.shaderState.transparent) {
-                    sort = sort > pass.shaderState.renderOrder ? sort : pass.shaderState.renderOrder;
+                if (pass.renderOrder >= 3000) {
+                    sort = sort > pass.renderOrder ? sort : pass.renderOrder;
                 } else {
                     sort = Math.max(sort - 3000, 0);
                 }
diff --git a/src/gfx/graphics/webGpu/shader/RenderShader.ts b/src/gfx/graphics/webGpu/shader/RenderShader.ts
index cd6f6754..9b18e170 100644
--- a/src/gfx/graphics/webGpu/shader/RenderShader.ts
+++ b/src/gfx/graphics/webGpu/shader/RenderShader.ts
@@ -112,6 +112,21 @@ export class RenderShader extends ShaderBase {
         this._bufferDic.set(`materialUniform`, this.materialDataUniformBuffer);
     }
 
+
+    /**
+     * Blend mode
+     */
+    public get renderOrder(): number {
+        return this.shaderState.renderOrder;
+    }
+
+    public set renderOrder(value: number) {
+        if (this.shaderState.renderOrder != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.renderOrder = value;
+    }
+
     /**
         * Cull mode
         */
@@ -201,6 +216,9 @@ export class RenderShader extends ShaderBase {
     public set blendMode(value: BlendMode) {
         if (this.shaderState.blendMode != value) {
             this._valueChange = true;
+            if (value != BlendMode.NORMAL && value != BlendMode.NONE) {
+                this.renderOrder = 3000;
+            }
         }
         this.shaderState.blendMode = value;
     }
@@ -721,9 +739,7 @@ export class RenderShader extends ShaderBase {
             if (Engine3D.setting.render.zPrePass && renderPassState.zPreTexture && shaderState.useZ) {
                 renderPipelineDescriptor[`depthStencil`] = {
                     depthWriteEnabled: false,
-                    // depthWriteEnabled: shaderState.depthWriteEnabled,
                     depthCompare: GPUCompareFunction.less,
-                    // depthCompare: shaderState.depthCompare,
                     format: renderPassState.zPreTexture.format,
                 };
             } else {
@@ -731,13 +747,8 @@ export class RenderShader extends ShaderBase {
                     depthWriteEnabled: shaderState.depthWriteEnabled,
                     depthCompare: shaderState.depthCompare,
                     format: renderPassState.depthTexture.format,
-                    // depthBias: Math.random() * 1,
-                    // depthBiasSlopeScale: Math.random() * 1,
                 };
 
-                if (this.useRz) {
-                    // tmpDes[`depthStencil`].depthCompare = GPUCompareFunction.less ;
-                }
             }
         }
 
@@ -905,7 +916,6 @@ export class RenderShader extends ShaderBase {
             }
         }
 
-
         this.bindGroups.length = 0;
         this.shaderState = null;
         this.textures = null;
diff --git a/src/materials/multiPass/CastShadowMaterialPass.ts b/src/materials/multiPass/CastShadowMaterialPass.ts
index e69044f3..9bd72546 100644
--- a/src/materials/multiPass/CastShadowMaterialPass.ts
+++ b/src/materials/multiPass/CastShadowMaterialPass.ts
@@ -1,4 +1,4 @@
-import { RenderShader } from '../..';
+import { RenderShader, Texture } from '../..';
 import { Vector3 } from '../../math/Vector3';
 
 /**
@@ -8,7 +8,7 @@ import { Vector3 } from '../../math/Vector3';
  */
 export class CastShadowMaterialPass extends RenderShader {
     constructor() {
-        super(`shadowCastMap_vert`, `shadowCastMap_frag`);
+        super(`shadowCastMap_vert`, `directionShadowCastMap_frag`);
         this.setShaderEntry("main");
         this.setUniformFloat("cameraFar", 5000);
         this.setUniformVector3("lightWorldPos", Vector3.ZERO);
@@ -20,4 +20,9 @@ export class CastShadowMaterialPass extends RenderShader {
         this.setDefine(`USE_ALPHACUT`, true);
         // this.alphaCutoff = 0.5 ;
     }
+
+    public setTexture(name: string, texture: Texture) {
+        texture.visibility = GPUShaderStage.COMPUTE | GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+        super.setTexture(name, texture);
+    }
 }
diff --git a/src/textures/BitmapTexture2D.ts b/src/textures/BitmapTexture2D.ts
index e41451dc..6f6af61c 100644
--- a/src/textures/BitmapTexture2D.ts
+++ b/src/textures/BitmapTexture2D.ts
@@ -18,6 +18,7 @@ export class BitmapTexture2D extends Texture {
     constructor(useMipmap: boolean = true) {
         super();
         this.useMipmap = useMipmap;
+        this.visibility = GPUShaderStage.COMPUTE | GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
     }
 
     /**