时间戳

首页 > 解决方案 > 这个 WebGL 程序中的顶点着色器和片段着色器之间的插值何时发生？

opengl-es - 这个 WebGL 程序中的顶点着色器和片段着色器之间的插值何时发生？

问题描述

背景

我正在查看来自 WebGL2 库PicoGL.js的示例代码。

它描述了一个三角形（三个顶点：(-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-esglslwebglshaderwebgl2

解决方案

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

从本站复制

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

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.wabWWgl_Position.wb

上面链接的站点显示了该公式在插值变化时如何生成透视正确的纹理映射坐标

它还显示了变化的动画

推荐阅读