Смешивание двух спрайтов в OpenGL ES без ущерба для фона

Question

В основном, что я хочу достичь, это эффект анимации спрайта, как показано ниже.

Идея заключается в том, что белые полупрозрачные-градиент спрайтовая перемещается по верхней части другого спрайта (слева направо), используя режим смешивания, как Перекрытие (Photoshop). Трудная часть заключается в том, что верхний градиентный спрайт должен быть нанесен только на видимые пиксели спрайта внизу. Другая часть наложения градиента должна быть отброшена, чтобы не повлиять на фон или другие спрайты внизу (например, на изображении справа).

Возможно ли достичь этого эффекта с помощью умной комбинации режимов наложения на OpenGL и как, или мне нужно создать собственный шейдер для объединения этих спрайтов?

Фон: Я использую libgdx с OpenGL ES 2.0, и приложение работает на настольных ПК, Android и iOS.

Answer 1

Существует много способов сделать это. Самый простой:

Вы должны отображать кнопку и hilight за один проход. В фрагментном шейдере, после того, как текстура кнопки выборки и текстура hilight вычисляют выходной цвет, как для смешивания (может быть mix (c1, c2, c2.a)) и alpha как только текстура кнопки alpha. Конечно, можно смешивать обычным способом: (srcalpha, 1-srcalpha)