边界的 WebGL 片段着色器正在变形（Three.js）

Question

背景

我正在开发一款基于省份的大战略游戏。我使用位图来定义那些省份，就像 Paradox 游戏一样。

我让位图部分正常工作，所以我决定制作着色器来定义各省的边界。着色器通过定义边界来工作，但它定位错误并根据相机的位置扭曲（我正在使用 Three.js btw）。

问题

如何防止它变形并确保它的位置正确。 Three.js 素材的代码如下

this.Material = new ShaderMaterial( {
    uniforms: {
        resolution: { value: new Vector2( window.innerWidth, window.innerHeight ) },
        backbuffer: { value: this.Texture }
    },
    fragmentShader: `
        uniform vec2 resolution;
        uniform sampler2D backbuffer;

        varying vec2 vUv;

        vec4 getNeighborColor( float ox, float oy ) {
            float px = gl_FragCoord.x + ox;
            float py = gl_FragCoord.y + oy;

            vec2 p = vec2( px, py );
            vec2 position = ( p.xy / resolution.xy ) * vUv.xy;

            vec4 color = texture2D(backbuffer, position);

            return color;
        }
            
        void main( void ) {
            vec2 position = ( gl_FragCoord.xy / resolution.xy ) * vUv.xy;
            vec4 color = texture2D(backbuffer, position);
                    
            vec4 nc = getNeighborColor( 0., -1. );
            vec4 ec = getNeighborColor( 1., 0. );
            vec4 sc = getNeighborColor( 0., 1. );
            vec4 wc = getNeighborColor( -1., 0. );

            if ( color != nc || color != ec || color != sc || color != wc ) {
                gl_FragColor = vec4(0.,0.,0.,1.);
            } else {
                gl_FragColor = vec4(1.,1.,1.,1.);
            }
        }
    `,
    vertexShader: `
        varying vec2 vUv;

        void main() {
            vUv = uv;
        
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    `
} )