Когда происходит интерполяция между вершинным и фрагментным шейдерами в этой программе WebGL?

Question

Фон

Я смотрю на этот пример кода из библиотеки 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 для пикселей между вершинами?Если да, то как выполняется интерполяция?

Answer 1

Да, 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.wкогда изменение было установлено на a, а bW - это W, которое было установлено на gl_Position.w, когда изменение было установлено на b.

Сайт, связанный выше, показываеткак эта формула генерирует перспективных правильных координат отображения текстуры при интерполяции вариаций

Также показывает анимацию изменения вариаций

Answer 2

В khronos opengl wiki есть ответ.А именно:

Каждый фрагмент имеет позицию Window Space, несколько других значений и содержит все интерполированные выходные значения для каждой вершины из последнего этапа обработки вершин .

(Акцент мой)