在 OpenGL ES 中混合两个精灵而不影响背景答案

【问题标题】：Blending two sprites in OpenGL ES without affecting background在 OpenGL ES 中混合两个精灵而不影响背景
【发布时间】：2014-11-20 00:27:49
【问题描述】：

基本上我想要实现的是如下图所示的精灵高亮动画效果。

这个想法是白色半透明渐变精灵移动到另一个精灵的顶部（从左到右），使用像叠加（Photoshop）这样的混合模式。困难的部分是顶部渐变精灵应该只绘制在下面精灵的可见像素上。应丢弃渐变叠加层的其他部分，以免影响背景或下方的其他精灵（如最右侧的图像上）。

是否可以通过巧妙地组合 OpenGL 混合模式以及如何实现这种效果，或者我是否必须创建自定义着色器来组合这些精灵？

背景：我正在使用带有 OpenGL ES 2.0 的 libgdx，该应用在桌面、Android 和 iOS 上运行。

【问题讨论】：

【解决方案1】：

有很多方法可以做到这一点。最简单的一个：

您应该一次性渲染按钮和高亮。在片段着色器中，在对按钮纹理和高光纹理进行采样后，计算输出颜色作为混合（可以是 mix(c1,c2,c2.a)），而 alpha 仅作为按钮纹理 alpha。当然以通常的方式启用混合：(srcalpha,1-srcalpha)

【讨论】：