Я пытаюсь сделать простую сцену WebGL2 с низкополигональной местностью. Все работает, как и ожидалось, когда я позволяю шейдеру интерполировать между тремя цветами вершин. Но как только я добавляю тип flat
, все ломается и каждый треугольник начинает "мигать".
Вершинный шейдер
#version 300 es
precision mediump float;
in vec3 in_vertexPosition;
in vec3 in_color;
uniform mat4 u_projectionMatrix;
uniform mat4 u_viewMatrix;
flat out vec3 pass_fragColor;
void main() {
gl_Position = u_projectionMatrix * u_viewMatrix * vec4(in_vertexPosition, 1.0);
pass_fragColor = in_color;
}
Фрагментный шейдер
#version 300 es
precision mediump float;
flat in vec3 pass_fragColor;
out vec4 out_fragColor;
void main() {
out_fragColor = vec4(pass_fragColor, 1.0);
}
Вершины, индексы и цвета:
const vertices = [
0, 0, 0, // bottom left
1, 0, 0, // bottom right
1, 1, 0, // top right
0, 1, 0 // top left
];
const colors = [
0.3, 0.3, 0.8, // bottom left
0.3, 0.3, 0.6, // bottom right
0.3, 0.3, 0.4, // top right
0.3, 0.3, 0.2 // top left
];
const indices = [
0, 1, 3, // bl, br, tl
3, 1, 2 // tl, br, tr
];
Я пробовал разные способы, используя индексы и другие типы вершин, но ничего не работает. Использование VBO для лучшей структуры.
Я заметил, что когда все три вершины треугольника имеют одинаковый цвет, мигание, очевидно, прекращается. Я читал, что тип flat
заставляет все три вершины в треугольнике использовать цвет провоцирующей вершины (по умолчанию последняя вершина в треугольнике). К сожалению, это заставляет треугольники «мигать», и я не понимаю, почему.
Используя мою видеокарту NVIDIA GTX 1060.
GIF, показывающий "мигание": https://gyazo.com/7d3ba42afe1ba1458cd2820729490e47