feat(All):Initial

2025-10-04 23:36:07 +08:00
commit 2b4e5d2668
1321 changed files with 415958 additions and 0 deletions
@@ -0,0 +1,146 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/5/18 13:49
+ * @description 圆网格着色器材质
+ * @from https://www.shadertoy.com/view/7dG3zy
+ */
+import {DoubleSide, ShaderMaterial} from "three";
+import {useDispatchSignal} from "@/hooks";
+
+const vertex = `
+varying vec2 vUv;
+
+void main () {
+    vUv = uv;
+    
+    // 从贴图中采样颜色值
+    // vec3 newPosition = normal*vec3(0,0,0)+position;
+    //gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+    `;
+
+const fragment = /*glsl*/`
+// 片元着色器中所有浮点数精度为中精度
+precision mediump float;
+
+varying vec2 vUv;
+uniform float uTime;
+
+vec3 palette( float t ) {
+ vec3 a = vec3(0.5, 0.5, 0.5);
+ vec3 b = vec3(0.5, 0.5, 0.5);
+ vec3 c = vec3(1.0, 1.0, 1.0);
+ vec3 d = vec3(0.263,0.416,0.557);
+
+ return a + b*cos( 6.28318*(c*t+d) );
+}
+
+void main() {
+    vec2 uv = vUv;
+    uv-=.5;  // 使坐标范围从-0.5到0.5
+    uv*=3.;  // 使坐标范围从-1.5到1.5
+    vec2 uv0 = uv;
+    vec3 finalColor = vec3(0.0);
+    
+    for (float i = 0.0; i < 4.0; i++) {
+        uv = fract(uv * 1.5) - 0.5;
+        float d = length(uv) * exp(-length(uv0));
+
+        vec3 col = palette(length(uv0) + i*.4 + uTime*.4);
+
+        d = sin(d*8. + uTime)/8.;
+        d = abs(d);
+
+        d = pow(0.01 / d, 1.2);
+
+        finalColor += col * d;
+    }
+ 
+  gl_FragColor = vec4(finalColor,1.);
+}
+    `;
+
+export class CircleGridShaderMaterial {
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "CircleGridShaderMaterial";
+
+    static get Material() {
+        if (!CircleGridShaderMaterial._ShaderMaterial) {
+            CircleGridShaderMaterial.Init();
+        }
+        return CircleGridShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value: ShaderMaterial) {
+        CircleGridShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return CircleGridShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static InstanceShaderMaterial(){
+        const material = new ShaderMaterial({
+            uniforms: {
+                uTime: {value: 1.0},
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: true,
+        });
+        material.name = CircleGridShaderMaterial.Name;
+        return material;
+    }
+
+    static Init() {
+        CircleGridShaderMaterial._ShaderMaterial = CircleGridShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial",CircleGridShaderMaterial);
+
+        return CircleGridShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if(!CircleGridShaderMaterial._ShaderMaterial) return;
+
+        CircleGridShaderMaterial._ShaderMaterial.uniforms.uTime.value += .01
+    }
+
+    static UpdatePreview(previewMaterial: ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .01
+    }
+}
+
+// export class  CircleGridShaderMaterial {
+//     static Instance: CircleGridShaderMaterial | null = null;
+//     shaderMaterial: ShaderMaterial | undefined;
+//     name = "CircleGridShaderMaterial";
+//
+//     constructor(reuse = true) {
+//         if(reuse && CircleGridShaderMaterial.Instance){
+//             return CircleGridShaderMaterial.Instance;
+//         }
+//
+//         this.shaderMaterial = new ShaderMaterial({
+//             uniforms: {
+//                 uTime: {value: 1.0},
+//             },
+//             vertexShader: vertex,
+//             fragmentShader: fragment,
+//             side: DoubleSide,
+//             transparent: true,
+//         });
+//
+//         useDispatchSignal("instantiateShaderMaterial",this)
+//     }
+//
+//     update() {
+//         (this.shaderMaterial as ShaderMaterial).uniforms.uTime.value += .0001
+//     }
+// }
+
+
@@ -0,0 +1,102 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/5/18 13:49
+ * @description 动态棋盘着色器材质
+ * @from  https://glslsandbox.com/e#109552.0
+ */
+import {DoubleSide, ShaderMaterial} from "three";
+import {useDispatchSignal} from "@/hooks";
+
+const vertex = `
+varying vec2 vUv;
+
+void main () {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+    `;
+
+const fragment = /*glsl*/`
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+varying vec2 vUv;
+uniform float uTime;
+
+void main() {
+ vec2 uv = vUv;
+
+ float cycle = fract(uTime);
+
+ vec2 grid = vec2(10, 10);
+ vec2 position = (uv * grid) - vec2(cycle,0);
+
+ float color = 0.0;
+ 
+ if (mod(position.y,2.0) < 1.0) {
+  if (fract(position.x) < cycle) color = 1.0;
+ } else {
+  if (fract(position.x) > cycle) color = 1.0;
+ }
+ 
+ if (mod(floor(uTime), 2.0) < 1.0) color = 1.0 - color;
+  
+ gl_FragColor = vec4( color, color, color, 1.0 );
+}`;
+
+export class DynamicCheckerboardShaderMaterial {
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "DynamicCheckerboardShaderMaterial";
+
+    static get Material() {
+        if (!DynamicCheckerboardShaderMaterial._ShaderMaterial) {
+            DynamicCheckerboardShaderMaterial.Init();
+        }
+        return DynamicCheckerboardShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value: ShaderMaterial) {
+        DynamicCheckerboardShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return DynamicCheckerboardShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static InstanceShaderMaterial() {
+        const material = new ShaderMaterial({
+            uniforms:{
+                uTime: {
+                    value: 1.0
+                }
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: true,
+        });
+        material.name = DynamicCheckerboardShaderMaterial.Name;
+        return material;
+    }
+
+    static Init() {
+        DynamicCheckerboardShaderMaterial._ShaderMaterial = DynamicCheckerboardShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial", DynamicCheckerboardShaderMaterial);
+
+        return DynamicCheckerboardShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if(!DynamicCheckerboardShaderMaterial._ShaderMaterial) return;
+
+        DynamicCheckerboardShaderMaterial._ShaderMaterial.uniforms.uTime.value += .01
+    }
+
+    static UpdatePreview(previewMaterial : ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .01
+    }
+}
+
@@ -0,0 +1,92 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/5/18 13:49
+ * @description 闪烁着色器材质
+ */
+import {DoubleSide, ShaderMaterial,Color} from "three";
+import {useDispatchSignal} from "@/hooks";
+
+const vertex = `
+     uniform float uTime;
+     uniform float uHeight;
+     varying float vOpacity;
+
+     void main() {
+         vec3 vPosition = position;
+         vOpacity = mix(1.0, 0.0, position.y / uHeight * 1.0) * (1.0 + sin(uTime) * 0.5);
+         gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1);
+     }
+`;
+
+const fragment = /*glsl*/`
+    uniform vec3 uColor;
+    uniform float uOpacity;
+    varying float vOpacity;
+    void main() {
+        gl_FragColor = vec4(uColor, vOpacity * uOpacity);
+    }
+`;
+
+export class FlickerShaderMaterial{
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "FlickerShaderMaterial";
+
+    static get Material() {
+        if (!FlickerShaderMaterial._ShaderMaterial) {
+            FlickerShaderMaterial.Init();
+        }
+        return FlickerShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value: ShaderMaterial) {
+        FlickerShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return FlickerShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static InstanceShaderMaterial(){
+        const material = new ShaderMaterial({
+            uniforms: {
+                uTime: {value: 1.0},
+                uHeight: {
+                    value: 10,
+                },
+                uOpacity: {
+                    value: 0.5,
+                },
+                uColor: {
+                    value: new Color("#00ffff"),
+                }
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: true
+        });
+        material.name = FlickerShaderMaterial.Name;
+        return material
+    }
+
+    static Init() {
+        FlickerShaderMaterial._ShaderMaterial = FlickerShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial",FlickerShaderMaterial);
+
+        return FlickerShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if(!FlickerShaderMaterial._ShaderMaterial) return;
+
+        FlickerShaderMaterial._ShaderMaterial.uniforms.uTime.value += .02
+    }
+
+    static UpdatePreview(previewMaterial: ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .02
+    }
+}
+
+
@@ -0,0 +1,193 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/5/18 13:49
+ * @description 动态烟着色器材质
+ * @from https://glslsandbox.com/e#109550.0
+ */
+import {DoubleSide, ShaderMaterial, Vector2} from "three";
+import {useDispatchSignal} from "@/hooks";
+
+const vertex = `
+varying vec2 vUv;
+
+void main () {
+    vUv = uv;
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+
+const fragment = /*glsl*/`
+#ifdef GL_ES
+precision highp float;
+#endif
+
+#define NUM_OCTAVES 6
+
+varying vec2 vUv;
+uniform float uTime;
+uniform vec2 uResolution;
+
+mat3 rotX(float a) {
+    float c = cos(a);
+    float s = sin(a);
+    return mat3(
+        1, 0, 0,
+        0, c, -s,
+        0, s, c
+    );
+}
+
+mat3 rotY(float a) {
+    float c = cos(a);
+    float s = sin(a);
+    return mat3(
+        c, 0, -s,
+        0, 1, 0,
+        s, 0, c
+    );
+}
+
+float random(vec2 pos) {
+    return fract(sin(dot(pos.xy, vec2(13.9898, 78.233))) * 43758.5453123);
+}
+
+float noise(vec2 pos) {
+    vec2 i = floor(pos);
+    vec2 f = fract(pos);
+    float a = random(i + vec2(0.0, 0.0));
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+float fbm(vec2 pos) {
+    float v = 0.0;
+    float a = 0.5;
+    vec2 shift = vec2(100.0);
+    mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));
+    for (int i = 0; i < NUM_OCTAVES; i++) {
+        float dir = mod(float(i), 2.0) > 0.5 ? 1.0 : -1.0;
+        v += a * noise(pos - 0.05 * dir * uTime);
+
+        pos = rot * pos * 2.0 + shift;
+        a *= 0.5;
+    }
+    return v;
+}
+
+void main(void) {
+    vec2 uv = vUv;
+    vec2 p = (uv * 3.0 - 1.0) * 0.5;
+    // 屏幕适配
+    if (uResolution.x > uResolution.y) {
+        p.x *= uResolution.x / uResolution.y;
+    } else {
+        p.y *= uResolution.y / uResolution.x;
+    }
+    
+    p -= vec2(12.0, 0.0);
+
+    float t = 0.0, d;
+
+    float time2 = 1.0;
+
+    vec2 q = vec2(0.0);
+    q.x = fbm(p + 0.00 * time2);
+    q.y = fbm(p + vec2(1.0));
+    vec2 r = vec2(0.0);
+    r.x = fbm(p + 1.0 * q + vec2(1.7, 1.2) + 0.15 * time2);
+    r.y = fbm(p + 1.0 * q + vec2(8.3, 2.8) + 0.126 * time2);
+    float f = fbm(p + r);
+
+    vec3 color = mix(
+        vec3(1.0, 1.0, 2.0),
+        vec3(1.0, 1.0, 1.0),
+        clamp((f * f) * 5.5, 1.2, 15.5)
+    );
+
+    color = mix(
+        color,
+        vec3(1.0, 1.0, 1.0),
+        clamp(length(q), 2.0, 2.0)
+    );
+
+    color = mix(
+        color,
+        vec3(0.3, 0.2, 1.0),
+        clamp(length(r.x), 0.0, 5.0)
+    );
+
+    color = (f * f * f * 1.0 + 0.5 * 1.7 * 0.0 + 0.9 * f) * color;
+
+    float alpha = 50.0 - max(pow(100.0 * distance(uv.x, -1.0), 0.0), pow(2.0 * distance(uv.y, 0.5), 5.0));
+    gl_FragColor = vec4(color * 100.0, color.r);
+    gl_FragColor = vec4(color, alpha * color.r);
+}
+    `;
+
+export class SlowSmokeShaderMaterial {
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "SlowSmokeShaderMaterial";
+
+    static get Material() {
+        if (!SlowSmokeShaderMaterial._ShaderMaterial) {
+            SlowSmokeShaderMaterial.Init();
+        }
+        return SlowSmokeShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value: ShaderMaterial) {
+        SlowSmokeShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return SlowSmokeShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static get Resolution() {
+        const viewportDom = document.getElementById("viewport") as HTMLCanvasElement;
+        return new Vector2(viewportDom.offsetWidth || window.innerWidth, viewportDom.offsetHeight || window.innerHeight);
+    }
+
+    static set Resolution(value: Vector2) {
+        SlowSmokeShaderMaterial._ShaderMaterial.uniforms.uResolution.value.set(value.x, value.y);
+    }
+
+    static InstanceShaderMaterial() {
+        const material = new ShaderMaterial({
+            uniforms: {
+                uTime: {value: 1.0},
+                uResolution: {value: SlowSmokeShaderMaterial.Resolution},
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: true,
+        });
+        material.name = SlowSmokeShaderMaterial.Name;
+        return material;
+    }
+
+    static Init() {
+        SlowSmokeShaderMaterial._ShaderMaterial = SlowSmokeShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial", SlowSmokeShaderMaterial);
+
+        return SlowSmokeShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if(!SlowSmokeShaderMaterial._ShaderMaterial) return;
+
+        SlowSmokeShaderMaterial._ShaderMaterial.uniforms.uTime.value += .01
+    }
+
+    static UpdatePreview(previewMaterial: ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .01
+    }
+}
+
+
@@ -0,0 +1,190 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @description 下雪特效着色器
+ */
+import { ShaderChunk, ShaderMaterial, Vector2, Vector4, TextureLoader, RepeatWrapping, DoubleSide } from "three";
+import { useDispatchSignal } from "@/hooks";
+
+const vertex = `
+${ShaderChunk.common}
+${ShaderChunk.logdepthbuf_pars_vertex}
+
+varying vec2 vUv;
+varying vec3 vNormal;
+
+void main () {
+    vUv = uv;
+    vNormal = normalize(normalMatrix * normal);
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    
+    ${ShaderChunk.logdepthbuf_vertex}
+}`;
+
+const fragment = /*glsl*/`
+${ShaderChunk.logdepthbuf_pars_fragment}
+
+varying vec2 vUv;
+varying vec3 vNormal;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform float uHasTexture;
+uniform vec4 uColor;
+uniform sampler2D uTexture;
+uniform sampler2D uNoiseMap;
+
+vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
+
+float snoise(vec2 v){
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+           -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+  m = m*m ;
+  m = m*m ;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+
+float fbm(vec3 uv,float _amp,float _min) {
+    float amp = _amp; 
+    float f = 0.; 
+    for(int x=0;x<3;x++) {
+      f+=(snoise(uv.xz)*0.5+0.5)*.25+.75 * amp; 
+      amp*=_amp; 
+      uv*=2.7; 
+    }
+    return max(f,_min); 
+}
+
+void main(void) {
+   vec2 uv = vUv;
+   
+   float _noise = fbm(vec3(uv.x*100.,0.0,uv.y*100.),0.47,0.2); // 噪声
+   
+   vec3 norm = vec3(0.0,1.0,0.0); 
+    vec3 normalDistribution = vec3(1.0/_noise,_noise,1.0-_noise); 
+    normalDistribution=normalDistribution*2.-1.; 
+    vec3 newnorm = norm * normalDistribution; 
+    newnorm = dot(newnorm,norm) < 0.0 ? -newnorm : newnorm; 
+    
+    vec3 color = mix(vec3(_noise),vec3(0.529411765,0.8,1.0)*vec3(_noise),1.0-dot(newnorm,vec3(0.0,1.0,0.0))); 
+    
+    // 面法线与Y轴的角度进行点乘
+    vec4 yAxis = normalize(viewMatrix * vec4(0.0, 1.0, 0.0, 0.0));
+    // 法线与y轴垂直时点积为0,snowThickness为0
+    float snowThickness = smoothstep(0.5, 1.0, abs(dot(vNormal, yAxis.xyz)));
+    
+    if(uHasTexture > 0.5) {
+      gl_FragColor = texture2D(uTexture,uv);
+     } else {
+      gl_FragColor = uColor;
+     }
+    
+    // snowScale 雪覆盖区域大小
+    // snowThickness *= 1.0 - clamp(texture2D(uNoiseMap, uv).r, 0.0, 1.0 - snowScale);
+    snowThickness *= 1.0 - clamp(texture2D(uNoiseMap, uv).r, 0.0, 1.0 - 0.8);
+    vec4 noiseColor = snowThickness * uTime * vec4(1.0, 1.0, 1.0, 1.0);
+    
+    if(snowThickness > 0.1) {
+      gl_FragColor = mix(noiseColor,gl_FragColor,clamp(fbm(vec3(uv.x*10.,0.0,uv.y*10.)*.5+.5,0.47,0.0)-sin(uTime*.5),0.0,1.0));
+    }else{
+      gl_FragColor += noiseColor; 
+    }
+    
+    ${ShaderChunk.logdepthbuf_fragment}
+}`;
+
+export class SnowingShaderMaterial {
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "SnowingShaderMaterial";
+
+    static get Material() {
+        if (!SnowingShaderMaterial._ShaderMaterial) {
+            SnowingShaderMaterial.Init();
+        }
+        return SnowingShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value) {
+        SnowingShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return SnowingShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static get Resolution() {
+        return new Vector2(window.innerWidth, window.innerHeight);
+    }
+
+    static set Resolution(value) {
+        SnowingShaderMaterial._ShaderMaterial.uniforms.uResolution.value.set(value.x, value.y);
+    }
+
+    static InstanceShaderMaterial() {
+        const textureLoader = new TextureLoader();
+
+        const material = new ShaderMaterial({
+            uniforms: {
+                uTime: { value: 0.1 },
+                uResolution: { value: SnowingShaderMaterial.Resolution },
+                uNoiseMap: { value: null },
+                uTexture: { value: null },
+                uHasTexture: { value: 0.0 },
+                uColor: { value: new Vector4(1.0,1.0,1.0,1.0) }
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: false,
+            depthTest: true,
+            depthWrite: true,
+            lights: false
+        });
+        material.name = SnowingShaderMaterial.Name;
+
+        textureLoader.load(new URL(import.meta.env.BASE_URL + 'resource/textures/noise.png', import.meta.url).href, (texture) => {
+            texture.wrapS = texture.wrapT = RepeatWrapping;
+            texture.repeat.set(1, 1);
+            material.uniforms.uNoiseMap.value = texture;
+        });
+
+        return material;
+    }
+
+    static Init() {
+        SnowingShaderMaterial._ShaderMaterial = SnowingShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial", SnowingShaderMaterial);
+
+        return SnowingShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if (!SnowingShaderMaterial._ShaderMaterial) return;
+
+        SnowingShaderMaterial._ShaderMaterial.uniforms.uTime.value += .01;
+    }
+
+    static UpdatePreview(previewMaterial: ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .01
+    }
+}
+
@@ -0,0 +1,96 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/5/18 13:49
+ * @description 流光墙着色器材质
+ * @from http://t.csdnimg.cn/zSxq0
+ */
+import {DoubleSide, ShaderMaterial,RepeatWrapping,TextureLoader} from "three";
+import {useDispatchSignal} from "@/hooks";
+
+const vertex = `
+     varying vec2 vUv;
+     varying vec3 vPosition;
+     void main(){
+           vUv = uv;
+           vPosition = position;
+           vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+           gl_Position = projectionMatrix * mvPosition;
+     }
+`;
+
+const fragment = /*glsl*/`
+    varying vec2 vUv;
+    uniform float uTime;
+    uniform sampler2D uFlowTexture;
+    uniform sampler2D uBgTexture;
+    void main( void ) {
+         vec2 position = vUv;
+         vec4 colorA = texture2D(uFlowTexture, vec2(vUv.x, fract(vUv.y - uTime)));
+         vec4 colorB = texture2D(uBgTexture, position.xy);
+         gl_FragColor = colorB + colorB * colorA;
+    }
+`;
+
+export class StreamerWallShaderMaterial{
+    static _ShaderMaterial: ShaderMaterial;
+    static Name = "StreamerWallShaderMaterial";
+
+    static get Material() {
+        if (!StreamerWallShaderMaterial._ShaderMaterial) {
+            StreamerWallShaderMaterial.Init();
+        }
+        return StreamerWallShaderMaterial._ShaderMaterial;
+    }
+
+    static set Material(value: ShaderMaterial) {
+        StreamerWallShaderMaterial._ShaderMaterial = value;
+    }
+
+    static get PreviewMaterial() {
+        return StreamerWallShaderMaterial.InstanceShaderMaterial();
+    }
+
+    static InstanceShaderMaterial(){
+        const bgTexture = new TextureLoader().load("/static/images/resource/material/shader/texture2D/GradationBlue.png");
+
+        const flowTexture = new TextureLoader().load("/static/images/resource/material/shader/texture2D/FlowTexture.png");
+        flowTexture.wrapS = RepeatWrapping;
+
+        const material = new ShaderMaterial({
+            uniforms: {
+                uTime: {value: 0.0},
+                uFlowTexture: {value: flowTexture},
+                uBgTexture: {value: bgTexture}
+            },
+            vertexShader: vertex,
+            fragmentShader: fragment,
+            side: DoubleSide,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false
+        });
+        material.name = StreamerWallShaderMaterial.Name;
+        return material;
+    }
+
+    static Init() {
+        StreamerWallShaderMaterial._ShaderMaterial = StreamerWallShaderMaterial.InstanceShaderMaterial();
+
+        useDispatchSignal("instantiateShaderMaterial",StreamerWallShaderMaterial);
+
+        return StreamerWallShaderMaterial._ShaderMaterial;
+    }
+
+    static Update() {
+        if(!StreamerWallShaderMaterial._ShaderMaterial) return;
+
+        StreamerWallShaderMaterial._ShaderMaterial.uniforms.uTime.value += .01
+    }
+
+    static UpdatePreview(previewMaterial: ShaderMaterial) {
+        previewMaterial.uniforms.uTime.value += .01
+    }
+}
+
+
@@ -0,0 +1,6 @@
+export {CircleGridShaderMaterial} from "./CircleGridShaderMaterial";
+export {DynamicCheckerboardShaderMaterial} from "./DynamicCheckerboardShaderMaterial";
+export {FlickerShaderMaterial} from "./FlickerShaderMaterial";
+export {SlowSmokeShaderMaterial} from "./SlowSmokeShaderMaterial";
+export {SnowingShaderMaterial} from "./SnowingShaderMaterial";
+export {StreamerWallShaderMaterial} from "./StreamerWallShaderMaterial";