three分裂格子shader可模拟骨骼动画粒子

const uniforms = {
            uSize: { value: 100 },
            uSpace: { value: 0.5 },
        }

mesh.material.onBeforeCompile = (shader) => {
            // console.log(shader.vertexShader)
            // console.log(shader.fragmentShader)
            Object.assign(shader.uniforms, uniforms)
            shader.vertexShader = shader.vertexShader.replace('#include ',
                `
                #include 
                varying vec2 vUv;
            `
            )
            shader.vertexShader = shader.vertexShader.replace('#include ',
                `
                #include 
                vUv = uv;
            `
            )
            shader.fragmentShader = shader.fragmentShader.replace('#include ',
                `
                #include 
                varying vec2 vUv;
                uniform float uSize;
                uniform float uSpace;
            `
            )
            shader.fragmentShader = shader.fragmentShader.replace('#include ',
                `
                #include 
                float sx =float(fract(uSize * vUv.x) > uSpace);	
                float sy =float(fract(uSize * vUv.y) > uSpace);	
                if(sx*sy == 0.0) discard;
            `
            )
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38