如何在iPhone上的OpenGL ES 2.0中混合具有不同坐标的两种纹理?

如何在iPhone上的OpenGL ES 2.0中混合具有不同坐标的两种纹理?,iphone,ios,opengl-es,opengl-es-2.0,textures,Iphone,Ios,Opengl Es,Opengl Es 2.0,Textures,当两个纹理覆盖相同的矩形时,我可以在片段着色器中使用不同的混合模式混合两个纹理。但现在我的问题是,一个纹理是一个没有旋转的普通矩形,另一个纹理是另一个有旋转/缩放和平移的矩形。如何以我想要的方式合并这些纹理?(图中) 我知道怎么做 但不知道怎么做 为了在一个矩形(第一个图像)中混合纹理,我使用了以下代码 目标C代码 - (void) display { [EAGLContext setCurrentContext:context]; glBindFramebuffer(GL

当两个纹理覆盖相同的矩形时,我可以在片段着色器中使用不同的混合模式混合两个纹理。但现在我的问题是,一个纹理是一个没有旋转的普通矩形,另一个纹理是另一个有旋转/缩放和平移的矩形。如何以我想要的方式合并这些纹理?(图中)

我知道怎么做

但不知道怎么做

为了在一个矩形(第一个图像)中混合纹理,我使用了以下代码

目标C代码

- (void) display {
    [EAGLContext setCurrentContext:context];

    glBindFramebuffer(GL_FRAMEBUFFER, targetFBO);

    glUseProgram(program);

    glActiveTexture(GL_TEXTURE2);
    glBindTexture(GL_TEXTURE_2D, textureTop);

    glActiveTexture(GL_TEXTURE3);
    glBindTexture(GL_TEXTURE_2D, textureBot);

    glUniform1i(inputTextureTop, 2);
    glUniform1i(inputTextureBot, 3);

    glUniform1f(alphaTop, alpha);

    glEnable (GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    glVertexAttribPointer(position, 2, GL_FLOAT, 0, 0, imageVertices);
    glVertexAttribPointer(inputTextureCoordinate, 2, GL_FLOAT, 0, 0, textureCoordinates);

    glClearColor(0.0, 0.0, 0.0, 0.0);
    glClear(GL_COLOR_BUFFER_BIT);

    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    glBindRenderbuffer(GL_RENDERBUFFER, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER];
}
顶点着色器

 attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 varying vec2 textureCoordinate;

 void main()
 {
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
 }
varying highp vec2 textureCoordinate;

uniform sampler2D inputTextureTop;
uniform sampler2D inputTextureBot;

uniform highp float alphaTop;

void main()
{
    lowp vec4 pixelTop = texture2D(inputTextureTop, textureCoordinate);
    lowp vec4 pixelBot = texture2D(inputTextureBot, textureCoordinate);

    gl_FragColor = someBlendOperation(pixelTop, pixelBot);
}
片段着色器

 attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 varying vec2 textureCoordinate;

 void main()
 {
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
 }
varying highp vec2 textureCoordinate;

uniform sampler2D inputTextureTop;
uniform sampler2D inputTextureBot;

uniform highp float alphaTop;

void main()
{
    lowp vec4 pixelTop = texture2D(inputTextureTop, textureCoordinate);
    lowp vec4 pixelBot = texture2D(inputTextureBot, textureCoordinate);

    gl_FragColor = someBlendOperation(pixelTop, pixelBot);
}

如果在同一个基本体上混合两个纹理,则可以在着色器中混合颜色

然而,如果您想要混合两个不同的原语,那么您真正想要使用的是硬件混合(GL_混合)

自行绘制底部图片,然后启用混合并绘制顶部图片。顶部图片的alpha值控制其透明度


您并不想尝试在同一个绘制调用中绘制两个四边形,因为它们不使用相同的坐标。

您必须将两个纹理坐标传递给着色器并修改着色器

添加到ObjectiveC

glVertexAttribPointer(inputTextureCoordinate2, 2, GL_FLOAT, 0, 0, textureCoordinates2);
顶点着色器

attribute vec4 position;
attribute vec4 inputTextureCoordinate;
attribute vec4 inputTextureCoordinate2;

varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;

void main()
{
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
    textureCoordinate2 = inputTextureCoordinate2.xy;
}
Frag着色器

varying highp vec2 textureCoordinate;
varying highp vec2 textureCoordinate2;

uniform sampler2D inputTextureTop;
uniform sampler2D inputTextureBot;

uniform highp float alphaTop;

void main()
{
    lowp vec4 pixelTop = texture2D(inputTextureTop, textureCoordinate);
    lowp vec4 pixelBot = texture2D(inputTextureBot, textureCoordinate2);

    gl_FragColor = someBlendOperation(pixelTop, pixelBot);
}

顺便说一句,inputTextureCoordinate不一定是vec4,但可能是vec2

可能是我可以在片段着色器中执行一些几何操作以获得顶部像素的XY。嗨,我也有同样的问题,@Max solution不需要处理以不同于背景图像的大小和旋转绘制顶部图像的需要,你是怎么做到的?是的,我能做到。但是使用GL_混合,我只能做一定数量的混合操作。我真正想做的是自己定义混合公式(如Photoshop混合模式…乘法、叠加、屏幕等)。我在想,在将TextureCoordination.xy传递给texture2D(inputTextureTop,TextureCoordination)函数之前,是否可以对其进行一些2D变换,以使其旋转、平移和缩放?abix我有一些opencl代码,我们用来对目标像素的源坐标进行反向变换查找这里有一个要点链接,谢谢Max!工作得很有魅力@麦克斯,我有一个类似的问题,你能帮我吗。谢谢。你把它贴在什么地方了吗?我也遇到了同样的问题,@Max你的解决方案如何处理以不同于背景图像的大小和旋转来绘制顶部图像的需要?我建议你发布问题并描述一切。您可以在屏幕上绘制一个图像并在其上绘制第二个图像,也可以在着色器中混合两个纹理。当你们想到着色器时,你们应该明白你们画的是一个三角形,而整个图像有很多三角形。所以第一个解决方案对您来说可能更简单。