我该如何在iPhone上的OpenGL ES 2.0中混合具有不同坐标的两个纹理？

Question

我该如何在iPhone上的OpenGL ES 2.0中混合具有不同坐标的两个纹理？

iphoneiosopengl-esopengl-es-2.0textures

9

当两个纹理覆盖相同的矩形时，我可以在片段着色器中使用不同的混合模式混合两个纹理。但是现在我的问题是，一个纹理是没有旋转的普通矩形，而另一个纹理是旋转/缩放和平移的另一个矩形。我该如何按照想要的方式合并这些纹理？（如下图所示）

我知道如何做到这一点...

enter image description here

但不确定如何做到这一点...

enter image description here

为了混合第一张图片中的纹理，我使用了以下代码...

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

- abix

也许我可以在片段着色器中进行一些几何操作，以获取顶部像素的XY。 - abix

3

你好，我遇到了同样的问题，@Max的解决方案似乎不能满足需要以不同的大小和旋转角度绘制顶部图片和背景图片的要求，你是如何处理的呢？ - Eyal

2个回答

5

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

但是，如果您想混合两个不同的图元，则真正需要使用的是硬件混合（GL_BLEND）。

首先单独绘制底部图片，然后启用混合并绘制顶部图片。顶部图片的透明度值控制其透明度。

由于两个四边形不使用相同的坐标，因此您不需要尝试在同一个绘制调用中绘制它们。

- Tim

1

是的，我可以做到。但是使用GL_BLEND，我只能进行一定数量的混合操作。我真正想做的是自己定义混合公式（就像Photoshop混合模式...乘法、叠加、屏幕等）。我在想如果我可以在将其传递给texture2D(inputTextureTop，textureCoordinate)函数之前对textureCoordinate.xy进行一些二维变换，使其旋转、平移和缩放呢？ - abix

abix，我有一些OpenCL代码，用于对目标像素进行源坐标的反向转换查找。这里是一个Gist链接：https://gist.github.com/victusfate/bdbed266a73a19f81a94 - Mark Essel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Max · Accepted Answer

您需要向着色器传递2个纹理坐标并修改着色器。请将以下内容添加到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;
}

片段着色器

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。