c++ - OpenGL GLSL 按任意形状混合两个纹理

Question

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

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

例如，首先四边形是 100% texture0，而 texture1 是透明的。

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

没有被圆包围的区域应该还是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;
}

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

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

我的方法正确吗？你能给我指点 sample 吗？

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

但我想在我的程序中动态创建 mask 纹理，并且我想在 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)); 

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

Answer 1

这是一种方法和示例。

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

然后混合(我通过 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;
}

查看此处运行的示例: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;
}