Opengl es 此WebGL程序中的顶点和片段着色器之间何时发生插值？ 背景

我正在从WebGL2库中查看

它描述一个三角形（三个顶点：

（-0.5，-0.5）、（0.5，-0.5）、（0.0,0.5）

），每个顶点都由顶点着色器指定颜色（红色、绿色、蓝色）：

    #version 300 es

    layout(location=0) in vec4 position;
    layout(location=1) in vec3 color;

    out vec3 vColor; 
    void main() {
        vColor = color;
        gl_Position = position;
    }

vColor

输出被传递到片段着色器：

    #version 300 es
    precision highp float;

    in vec3 vColor;

    out vec4 fragColor;
    void main() {
        fragColor = vec4(vColor, 1.0);
    }

它们一起呈现以下图像：

问题: 我的理解是顶点着色器称为逐顶点一次，而片段着色器称为逐像素一次

但是，片段着色器引用

vColor

变量，该变量在每次调用每个顶点时仅指定一次，但像素比顶点多得多

生成的图像清楚地显示了颜色渐变-为什么？ WebGL是否为顶点之间的像素自动插值

vColor

？如果是这样，插值是如何完成的？

有答案。即：

每个片段都有一个窗口空间位置和一些其他值，并且它包含上一个顶点处理阶段的所有逐顶点插值输出值

---

（Emphasis mine）

是的，WebGL会在提供给3个顶点的值之间自动插值

抄袭

从一个值到另一个值的线性插值就是这样 公式

result = (1 - t) * a + t * b

其中，

t

是0到1之间的值，表示

a

和

b

之间的某个位置。0在

a

处，1在

b

处

尽管WebGL使用此公式，但对于变量

result = (1 - t) * a + t * b

result = (1 - t) * a / aW + t * b / bW
         -----------------------------
            (1 - t) / aW + t / bW

其中，

aW

是当变量为 设置为

a

和

bW

的是当 变量设置为

b

上面链接的网站显示了该公式是如何生成的

它也