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

Question

我有一个带有两个纹理的全屏四边形。

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

例如，四边形最初是 100% 纹理 0，而纹理 1 是透明的。

如果用户通过在四边形上拖动鼠标来选择一个区域，例如一个圆形，那么 圆形区域应将纹理 0 和纹理 1 显示为半透明。

没有被圆圈包围的区域应该仍然是texture0。

请看示例图片，纹理被简化为颜色。

目前，我已经实现了在四边形上混合两个纹理，但是混合区域只能是垂直切片，因为我使用了 step() 函数。

我的碎片着色器：

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;
}

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

然后我将该纹理传递给碎片着色器以检查值，如果值为 0，则为纹理 0，如果值为 1，则混合纹理 0 和纹理 1。

我的方法正确吗？你能指出我的任何样本吗？

我想要OpenGL - mask with multiple textures这样的效果

但我想在我的程序中动态创建蒙版纹理，并且我想在 GLSL 中实现混合

我已经开始使用黑白蒙版纹理进行混合

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)); 

现在蒙版纹理是从磁盘上的图像静态加载的，现在我只需要在 opengl 中动态创建蒙版纹理

Answer 1

这是一种方法和示例。

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

然后混合（我通过两种颜色的加权相加混合）。

（注意：我没有在这个示例中使用纹理坐标，所以我使用屏幕分辨率来确定圆的位置）。

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;
}

在此处查看运行示例：http://glsl.heroku.com/e#18231.0

（试图发布我的示例图片，但我没有足够的代表）抱歉：/

更新：

这是另一个使用鼠标位置确定混合区域位置的示例。 要运行，请将代码粘贴到此沙盒站点：https://www.shadertoy.com/new 只要您的鼠标数据设置正确，这个应该适用于任何形状的对象。

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;
}