Three.js-绘制矩形shader

绘制图中的嵌套矩形框

方法：

vec3 drawRect(
    vec2 st,
    vec2 center,
    float width,
    float height,
    float thickness,
    vec3 fillColor, 
    vec3 strokeColor
    )
{
    vec3 color = vec3(0);
    
    float halfWidth = width * .5;
    float halfHeight = height * .5;
    float halfTickness = thickness * .5;
    
    vec2 bottomLeft = vec2(center.x - halfWidth, center.y - halfHeight);
    vec2 topRight = vec2(center.x + halfWidth, center.y + halfHeight);
    
    //STROKE
    vec2 stroke = vec2(0.0);
    stroke += step(bottomLeft-halfTickness, st) * (1.0 - step(bottomLeft+halfTickness, st));
    stroke += step(topRight-halfTickness, st) * (1.0 - step(topRight+halfTickness, st));
    vec2 strokeLimit = step(bottomLeft-halfTickness, st) * (1.0 - step(topRight+halfTickness, st));
    stroke *= strokeLimit.x * strokeLimit.y;

    color = mix (color, strokeColor, min(stroke.x + stroke.y, 1.0));
    //
    
    //FILL
    vec2 fill = vec2(0.0);
    fill += step(bottomLeft+halfTickness, st) * (1.0 - step(topRight-halfTickness, st));
    vec2 fillLimit = step(bottomLeft+halfTickness, st) * (1.0 - step(topRight-halfTickness, st));
    fill *=  fillLimit.x * fillLimit.y;
    
    color = mix (color, fillColor, min(fill.x + fill.y, 1.0));

    return color;
}
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
39

	color += drawRect(uv,vec2(0.5),0.9,0.9,0.03,vec3(1),vec3(0));
1

封装自定义shader

/*
 * @Author: hongbin
 * @Date: 2023-09-02 19:16:55
 * @LastEditors: hongbin
 * @LastEditTime: 2023-09-11 12:18:54
 * @Description:根据音频频域数据 绘制矩形
 */
import * as THREE from "three";
import { autoUpdateUniform } from "./AudioMaterial";

const drawRect = `
vec3 drawRect(
    vec2 st,
    vec2 center,
    float width,
    float height,
    float thickness,
    vec3 fillColor, 
    vec3 strokeColor
    )
{
    vec3 color = vec3(0);
    
    float halfWidth = width * .5;
    float halfHeight = height * .5;
    float halfTickness = thickness * .5;
    
    vec2 bottomLeft = vec2(center.x - halfWidth, center.y - halfHeight);
    vec2 topRight = vec2(center.x + halfWidth, center.y + halfHeight);
    
    //STROKE
    vec2 stroke = vec2(0.0);
    stroke += step(bottomLeft-halfTickness, st) * (1.0 - step(bottomLeft+halfTickness, st));
    stroke += step(topRight-halfTickness, st) * (1.0 - step(topRight+halfTickness, st));
    vec2 strokeLimit = step(bottomLeft-halfTickness, st) * (1.0 - step(topRight+halfTickness, st));
    stroke *= strokeLimit.x * strokeLimit.y;

    color = mix (color, strokeColor, min(stroke.x + stroke.y, 1.0));
    //
    
    //FILL
    vec2 fill = vec2(0.0);
    fill += step(bottomLeft+halfTickness, st) * (1.0 - step(topRight-halfTickness, st));
    vec2 fillLimit = step(bottomLeft+halfTickness, st) * (1.0 - step(topRight-halfTickness, st));
    fill *=  fillLimit.x * fillLimit.y;
    
    color = mix (color, fillColor, min(fill.x + fill.y, 1.0));

    return color;
}
`;

const defaultParams = {
    /** 采用固定值0.3 还是跟随音频数据 默认矩形框一整个显示 */
    ttf: false,
    /** 线条的宽度
     * @default '0.001 + 0.001* float(i)' */
    lineWidth: "0.001 + 0.001* float(i)",
    /** 矩形框的数量 */
    count: 10,
    lightColor: new THREE.Color("#fff"),
    brightness: 1,
    transparent: false,
    sampling: 0.6,
    side: THREE.FrontSide as THREE.Side,
    columnar: false,
    columnHeight: 0.1,
    columnMargin: 0,
};
export class AudioRectMaterial extends THREE.ShaderMaterial {
    @autoUpdateUniform
    static audioTexture: THREE.DataTexture;
    static audioTextureUniforms: Array<Record<string, THREE.IUniform>> = [];

    constructor(p?: Partial<typeof defaultParams>) {
        const params = { ...defaultParams, ...p };
        const floatCount = 1 / params.count;
        params.count = Math.floor(10 / params.count);

        const uniforms = {
            iChannel0: { value: AudioRectMaterial.audioTexture },
            lightColor: {
                value: p?.lightColor || params.lightColor.clone(),
            },
            brightness: { value: params.brightness },
        };

        AudioRectMaterial.audioTextureUniforms.push(uniforms);

        const rectFrame = `
        float f =  float(i+1) * 0.${params.count} ;
        color += drawRect(uv,vec2(0.5),f,f,${params.lineWidth},back,white); `;

        const columnar = `
        color += drawRect(uv,vec2(0.5,float(${
            params.columnMargin
        }) + float(i) * float(${floatCount}) + ${
            params.columnHeight / 2
        }),1.,0.,${params.columnHeight},back,white);
        `;

        super({
            uniforms,
            vertexShader: ` 
            varying vec2 vUv;
            
            void main() {
                vUv = uv;
                vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
                gl_Position = projectionMatrix * modelViewPosition;
            }`,
            fragmentShader: `
            varying vec2 vUv;
            uniform sampler2D iChannel0;
            uniform vec3 lightColor;
            uniform float brightness;
            const vec3 back = vec3(0);
            const vec3 white = vec3(1);
            
            ${drawRect}
            
            void main()
            {
                ${
                    params.ttf
                        ? "float fft  = texture( iChannel0, vUv).x;"
                        : `float fft  = texture( iChannel0, vec2(${params.sampling})).x * 1.2;`
                }
                // fft = 1.;

                vec2 uv = vUv;

                int stepCount = int(fft * 10.) / ${params.count};

                vec3 color;
                for (int i = 0; i < stepCount; i++) {
                    ${params.columnar ? columnar : rectFrame}
                }
             
                gl_FragColor = vec4(color * lightColor * brightness, ${
                    params.transparent ? `color.r` : "1."
                });
            }
            `,
            transparent: params.transparent,
            side: params.side,
        });
    }
}

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

./AudioMaterial音频纹理 请见three.js shadertoy使用手册 - 使用音频Channel和图片Channel/将音频传入glsl shader