Треугольный градиент на OpenGL

Есть два способа, но я не знаю, какой из них наиболее подходит для вашего приложения. На очень высоком уровне:

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

2. Используйте шейдер. Больше работы по настройке, но и больше гибкости, и дает вам «идеальный» результат в любом масштабе/разрешении.

Обновление: если вы собираетесь использовать шейдер, идея следующая.

Передайте varying vec2 coords из вершинного шейдера во фрагментный шейдер. Установите значение для точки 1 на 0,0, для точки 2 на 1,0 и для точки C на 0,1. Чтобы передать эти значения в вершинный шейдер, используйте файл attribute. Различные значения будут интерполированы по всему треугольнику, подобно координатам текстуры и цветам. Таким образом, переменная coords сопоставляется с вашим треугольником следующим образом:

y
1 +-----+
  |\    |
  |#\   |
  |##\  |
  |###\ |
  |####\|
0 +-----+ x
  0     1

Фрагментный шейдер получает значение coords где-то внутри хешированной области. Чтобы выяснить, сколько каждого цвета вам нужно смешать, вычислите линию, проходящую через coords и 0,1, и найдите ее пересечение с осью x. Благодаря системе координат coords это простая операция: просто разделите coords.x на coords.y. Назовите это f. (Обратите внимание, что это даст деление на ноль в точке C, но это ожидаемо, поскольку вы никогда не определяли там цвет. Если хотите, вы можете явно проверить это в шейдере.)

Обозначая coords с помощью c и представляя строку с . символами, f заканчивается где-то между 0 и 1:

y
1 +-----+
  |\    |
  |.\   |
  |#c\  |
  |#.#\ |
  |##.#\|
0 +--f--+ x
  0     1

Теперь предположим, что у вас есть uniform vec4 colour1 и uniform vec4 colour2 для определения цвета в точках 1 и 2 соответственно. Затем их просто смешать: взять f часть colour2 и 1-f часть colour1 и сложить их вместе. Функция GLSL mix делает именно это.