OpenGL GLSL通过任意形状混合两种纹理

Question

我有一个有两个纹理的全屏四块。

我想根据用户选择混合任意形状的两个纹理。

例如，quad一开始是100%texture0，而texture1是透明的。

uniform sampler2D Texture0;
uniform sampler2D Texture1;
uniform float alpha;
uniform float leftBlend;
uniform float rightBlend;
varying vec4 oColor;
varying vec2 oTexCoord;
void main()
{
vec4 first_sample = texture2D(Texture0, oTexCoord);
vec4 second_sample = texture2D(Texture1, oTexCoord);

float stepLeft = step(leftBlend, oTexCoord.x);
float stepRight = step(rightBlend, 1.0 - oTexCoord.x);
if(stepLeft == 1.0 && stepRight == 1.0)
    gl_FragColor = oColor * first_sample;
else
    gl_FragColor = oColor * (first_sample * alpha + second_sample * (1.0-alpha)); 

if (gl_FragColor.a < 0.4)
   discard;
}

为了实现任意形状，我假设我需要创建一个与texture0和texture1大小相同的alpha mask纹理？

然后我把纹理传递给frag shader来检查值，如果值是0，那么texture0，如果值是1，那么混合texture0和texture1。

我的做法正确吗？你能给我指些样品吗？

uniform sampler2D TextureMask;
vec4 mask_sample = texture2D(TextureMask, oTexCoord);
if(mask_sample.r == 0)
  gl_FragColor = first_sample;
else
  gl_FragColor =  (first_sample * alpha + second_sample * (1.0-alpha)); 

Answer 1

这里有一个方法和示例。

为是否要混合创建布尔测试。在我的示例中，我使用一个方程式来表示以屏幕为中心的圆。

然后混合（我混合加权相加的2个颜色）。

uniform vec2 resolution;

void main( void ) {

    vec2 position = gl_FragCoord.xy / resolution;

    // test if we're "in" or "out" of the blended region
    // lets use a circle of radius 0.5, but you can make this mroe complex and/or pass this value in from the user
    bool isBlended = (position.x - 0.5) * (position.x - 0.5) +
        (position.y - 0.5) * (position.y - 0.5) > 0.25;

    vec4 color1 = vec4(1,0,0,1); // this could come from texture 1
    vec4 color2 = vec4(0,1,0,1); // this could come from texture 2
    vec4 finalColor;

    if (isBlended)
    {
        // blend
        finalColor = color1 * 0.5 + color2 * 0.5;
    }
    else
    {
        // don't blend
        finalColor = color1;
    }
    gl_FragColor = finalColor;
}

void main(void)
{
vec2 position = gl_FragCoord.xy;

// test if we're "in" or "out" of the blended region
// lets use a circle of radius 10px, but you can make this mroe complex and/or pass this value in from the user
float diffX = position.x - iMouse.x;
float diffY = position.y - iMouse.y;
bool isBlended = (diffX * diffX) + (diffY * diffY) < 100.0;

vec4 color1 = vec4(1,0,0,1); // this could come from texture 1
vec4 color2 = vec4(0,1,0,1); // this could come from texture 2
vec4 finalColor;

if (isBlended)
{
    // blend
    finalColor = color1 * 0.5 + color2 * 0.5;
}
else
{
    // don't blend
    finalColor = color1;
}
gl_FragColor = finalColor;
}