three+shader 使用自定着色器检测边缘，并且描边，使用自定着色器定义色块边缘。

准备

检测色块之间的颜色差，识别边缘。
素材
原始图：能分辨出色块的图

=>检测添加边缘后
开始
检测色块边缘的shader
资源地址：添加链接描述

// 顶
const vertexShader = `
        varying vec2 vUv;
        void main () {
            vUv = uv;
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            gl_Position = projectionMatrix * mvPosition;
        }
        `;
// 片元
const fragmentShader = `
        uniform sampler2D u_texture;
        uniform float u_width;
        uniform float u_height;
        uniform float u_isBorder;
        uniform float u_opacity;
        uniform float u_border;
        uniform vec3 u_color;
        varying vec2 vUv;
        bool isBorder(vec4 wColor,vec4 hColor){
            return abs(wColor.r-hColor.r)<0.00001;
        }
        void main() {
            vec4 vTexture = texture2D(u_texture, vUv);
            gl_FragColor = vTexture;
            // 边缘检测 设置边框颜色
            if (u_isBorder == 1.0) {
                vec4 nerWDisColor = texture2D(u_texture, vec2(vUv.x + u_border / u_width, vUv.y));
                vec4 nerWDisColorDown = texture2D(u_texture, vec2(vUv.x - u_border / u_width, vUv.y));
                vec4 nerHDisColor = texture2D(u_texture, vec2(vUv.x, vUv.y + u_border / u_height));
                vec4 nerHDisColorDown = texture2D(u_texture, vec2(vUv.x, vUv.y - u_border / u_height));
                if (!isBorder(nerWDisColor, nerWDisColorDown) || !isBorder(nerHDisColor, nerHDisColorDown)) {
                    gl_FragColor = vec4(u_color, u_opacity);
                }
            }
        }
        `;