Существует два способа, но я не знаю, что имеет смысл для вашего приложения. На очень высоком уровне:
Карта текстуры к треугольнику. Поскольку градиент очень плавный, он не должен иметь очень высокое разрешение, и вы можете позволить линейной фильтрации выполнять работу за вас.
Используйте шейдер. Больше работы по настройке, но также более гибкой и дает вам «идеальный» результат при любом масштабе/разрешении.
Обновление: если вы собираетесь использовать затенение, идея заключается в следующем.
Передайте 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
выполняет именно это.
Поскольку треугольник будет меняться динамически, кажется, что первый вариант вряд ли подходит. Что касается шейдеров, следует ли использовать вершинный шейдер для передачи переменной в вершину фрагмента? До сих пор я использовал только вершинный шейдер, и после поиска какого-то урока я еще не могу понять, как работают переменные значения из вершинного шадлера. – Leo
Он все еще может: текстура будет растягиваться вместе с вашей геометрией. – Thomas
Извините за быстрое редактирование. Не понял, что нажать enter, чтобы загрузить комментарий. – Leo