【问题标题】：When does interpolation happen between the vertex and fragment shaders in this WebGL program?这个 WebGL 程序中的顶点着色器和片段着色器之间的插值何时发生？
【发布时间】：2020-01-21 13:44:36
【问题描述】：

背景

我正在查看来自 WebGL2 库 PicoGL.js 的 this example code。

它描述了一个三角形（三个顶点：(-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 的值？如果有，插值是怎么做的？

【问题讨论】：

标签： opengl-es glsl webgl shader webgl2

【解决方案1】：

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

复制自this site

从一个值到另一个值的线性插值是这样的公式
result = (1 - t) * a + t * b
其中t 是一个介于0 到1 之间的值，代表a 和b 之间的某个位置。 0 a 和 1 b。

尽管 WebGL 使用这个公式，但对于变化
result = (1 - t) * a / aW + t * b / bW
         -----------------------------
            (1 - t) / aW + t / bW
aW 是 W，在变化时在 gl_Position.w 上设置设置为a 和bW 是在gl_Position.w 上设置的W，当变化被设置为b。

上面链接的网站显示了该公式如何生成perspective correct texture mapping coordinates when interpolating varyings

还有shows an animation of the varyings changing

【讨论】：

【解决方案2】：

khronos OpenGL wiki - Fragment Shader 有答案。即：

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

（强调我的）

【讨论】：