Blending two sprites in OpenGL ES without affecting background

Question

Basically what I want to achieve is a sprite highlight animation effect as displayed below.

The idea is that the white-translucent gradient sprite moves on top of the other sprite (left-to-right), using a blend mode like Overlay (Photoshop). The difficult part is that the top gradient sprite should only be drawn on the visible pixels of the sprite underneath. The other part of the gradient overlay should be discarded to not affect the background or other sprites underneath (like on the image to the far right).

Is it possible to achieve that effect with a clever combination of OpenGL blend modes and how, or would I have to create a custom shader to combine these sprites?

Background: I'm using libgdx with OpenGL ES 2.0 and the app runs on Desktop, Android and iOS.

Answer 1

There arę many ways to do it. The simplest one:

You should render button and hilight in a single pass. In fragment shader, after sampling button texture and hilight texture calc the output color as for blending (could be mix(c1,c2,c2.a)) and alpha as button texture alpha only. Of course enable blending in usual way: (srcalpha,1-srcalpha)