如何理解WebGL中顶点数据在片元着色器中的映射关系？

Question

我想知道顶点经过一些处理后在片元着色器中的使用方式和映射关系，目前我梳理了以下知识，但是我不能肯定其中的一部分，详情见如下：

// 顶点数据
            const positions = [
                -0.5, -0.5,
                0.0, -0.5,
                0.0, 0.0
            ];
            ....
            gl.enableVertexAttribArray(vertexPositionAttribute);
            gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
            // 绘制三角形
            gl.drawArrays(gl.TRIANGLES, 0, 3);

着色器的代码如下：

 <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 aVertexPosition;
        varying vec2 vColor; 
        void main() {
            gl_Position = aVertexPosition;
            vColor = (aVertexPosition.xy + vec2(1.0)) / 2.0;
        }
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        varying vec2 vColor; 
        void main() {
            //这里解释了vColor顶点数据不仅仅只有传入的三个，而是顶点数据本身已经被插值了，变成了每个像素的位置
            if(vColor.x>0.475)
                gl_FragColor=vec4(vColor.x, 0.0, 0.0, 1.0);    
            else if(vColor.x>0.4)
                gl_FragColor=vec4(0.0, vColor.x, 0.0, 1.0);    
            else      
                gl_FragColor=vec4(1, 0.0, 0.0, 1.0); 
        }
    </script>

问题是这个着色器中的这一行解释，如果说vColor只是从上面着色器传递了3个顶点数据过来，那么这三个值肯定不能产生如下图的分割效果，只有当vColor是实时的每个像素的位置，产生分割，所以我不理解这其中到底是一种什么样的变更。因为直觉给我的感觉就是vColor传递了几个数据就是几个数据...

下面是我对上面代码的一个分析：

我期望能够解答其中的vColor值是 顶点偏移后并在图元中插值后的数据 还是 只是顶点偏移后的数据。