如何在iPhone上的OpenGL ES 2.0中混合使用不同坐标的两个纹理？

I can blend two textures with different blending modes in the fragment shader when both the textures covers the same rectangles. But now my problem is, one texture is a plain rectangle with no rotation and the other texture is another rectangle with a rotation/scale and translation. How do I merge these textures in the way I want? (In the picture)

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

I know how to do this...

我知道怎么做......

But not sure how to do this...

但不知道该怎么做......

For blending textures in one rectangle (the first image), I used the following code..

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

Objective C code...

目标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];
}

Vertex shader...

 attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 varying vec2 textureCoordinate;

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

Fragment shader...

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

2 个解决方案

#1

You have to pass 2 texture coordinates to shader and modify shader

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

Add to ObjectiveC

添加到ObjectiveC

glVertexAttribPointer(inputTextureCoordinate2, 2, GL_FLOAT, 0, 0, textureCoordinates2);

Vertex Shader

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 Shader

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

BTW inputTextureCoordinate is not necessary to be vec4 but it could be vec2

BTW inputTextureCoordinate不一定是vec4,但可能是vec2

#2

If you're blending two textures on the same primitive, then you can mix the colors in the shader.

如果要在同一个图元上混合两个纹理,则可以在着色器中混合颜色。

However if you want to blend two different primitives, then what you really just want to use is hardware blending (GL_BLEND).

但是,如果要混合两个不同的基元,那么您真正想要使用的是硬件混合(GL_BLEND)。

Draw the bottom picture by itself, then enable blending and draw the top picture. The alpha value of the top picture controls how transparent it will be.

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

You don't really want to try to draw both quads in the same draw call, since they don't use the same coordinates.

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