前端渲染webp为色斑图

const vertexShaderSource = `
        attribute vec2 a_position;
        varying vec2 v_texCoord;
        void main(void) {
            gl_Position = vec4(a_position, 0.0, 1.0);
            v_texCoord = (a_position + 1.0) / 2.0; // 将坐标从[-1,1]映射到[0,1]
        }`;
// 适宜度着色器
const fragmentShaderSuitable = `
        precision mediump float;
        varying vec2 v_texCoord;
        uniform sampler2D u_texture;
        void main(void) {
            vec4 color = texture2D(u_texture, vec2(v_texCoord.x, 1.0 - v_texCoord.y));
            if (color.g > 0.0 || color.b > 0.0 || color.a > 0.0) {
              float value = (color.g * 255.0*255.0 + color.b*255.0) / 10.0;
                if (value >= -15.0 && value <= 15.0) {
                    // 次适宜
                    color = vec4(255.0/255.0,166.0/255.0,210.0/255.0,1.0);
                } else if (value > 15.0 && value <= 30.0) {
                    // 适宜
                    color = vec4(132.0/255.0,255.0/255.0,132.0/255.0, 1.0);
                } else {
                    // 不适宜
                    color = vec4(255.0 / 255.0, 0.0, 0.0, 1.0);
                }
            } else {
                color = vec4(1.0, 0.0, 0.0, 0);
            }
            gl_FragColor = color;
        }`;

 在vue data外声明