重新调整纹理大小后意外撕裂

Question

在某些情况下，当用户放大图像直到最短边填满整个屏幕（如标准图库中所见）时，需要扩展纹理。但是，OpenGL 着色器的输入是来自 ImageView 的矩阵，因此需要进行某些转换以及针对不同空间的校正计算。

编辑：

顶点着色器代码比较简单，如下：

private final String vertexShader_ =
        "attribute vec4 a_position;\n" +
        "attribute vec4 a_texCoord;\n" +
        "varying vec2 v_texCoord;\n" +
        "void main() {\n" +
        "  gl_Position = a_position;\n" +
        "  v_texCoord = a_texCoord.xy;\n" +
        "}\n";

其中 a_position 引用下面的 verticesData_。加载到屏幕上时，图像的位置是根据显示宽度和所占用的屏幕部分计算得出的准确位置。

另外，我有以下片段着色器代码：

private final String fragmentShader_ =
        "precision mediump float;\n" +
        "varying vec2 v_texCoord;\n" +
        "uniform sampler2D texture;\n" +
        "uniform mat3 transform;\n" +
        "void main() {\n" +
        "  vec2 uv = (transform * vec3(v_texCoord, 1.0)).xy;\n" +
        "  gl_FragColor = texture2D( texture, uv );\n" +
        "}\n";

mat3 转换的输入是来自 ImageView 的输入。本质上，OpenGLSurfaceView 下面有一个 ImageView。这是一个分辨率低得多的图像，当用户滑动时，SurfaceView 被隐藏，ImageView 位于其下方，与用户在 SurfaceView 中的位置相同。

但是，稍后当我想扩展此纹理时，我发现自己会得到意想不到的结果。

来回平移时，屏幕会移动到预期移动的位置。因此，矩阵中 x 和 y 坐标的平移正常。但是，放大时，图像会撕裂。只有当纹理的边界超出屏幕尺寸时才会撕裂。如下图所示，高度在增长时并没有引入额外的像素，但宽度在增长时会撕裂。

为了传递适当的矩阵，从 ImageView 到 OpenGL SurfaceView 的值被反转和转置，因为空间需要它进行适当的转换。将比例因子传递给 Activity 正在侦听的侦听器。

@Override
public void onTranslation(float imageScaleF, float[] matrixTranslationF)
{   
    currentScaleForImage_ = imageScaleF;
    //If we are currently using the entire screen, then there is not need anymore to resize the texture itself.
    if(surfaceViewWidth_ * imageScaleF > displayViewWidth_ && surfaceViewHeight_ * imageScaleF > displayViewHeight_)
    {

    }
    else //Expand the size of the texture to be displayed on the screen.
    {
        maximumScaleForImage_ = imageScaleF;
        photoViewRenderer_.updateTextureSize(imageScaleF);
        photoSurfaceView_.requestRender();
    }
    matrixTranslationF = updateTranslationBasedOnTextureSize(matrixTranslationF);
    photoViewRenderer_.updateTranslationOfTexture(matrixTranslationF);
    photoSurfaceView_.requestRender();
}

但是，使用上面的以下代码，滚动的图像部分总是被剪短，如果我试图通过取消注释更新翻译的行来根据比例更正它，它会导致眼泪。所以，似乎在这一点上，下面的用户通过他们的输入让我处于一个更好的位置，但我仍然只有一步之遥，我认为它在这个函数中。以下现在更新的代码进行了必要的更正，以便在 ImageView 中的矩阵和 OpenGL 纹理/坐标之间提供适当的转换。

private float[] updateTranslationBasedOnTextureSize(float[] matrixTranslationsF)
    { 
        if(scaleDirection_ == ScaleDirection.WIDTH)
        {
            matrixTranslationsF[0] = matrixTranslationsF[0] * maximumScaleForImage_;
        }
        else if(scaleDirection_ == ScaleDirection.HEIGHT)
        {
            matrixTranslationsF[4] = matrixTranslationsF[4] * maximumScaleForImage_;
        }

        return matrixTranslationsF;
    }

我在第一次迭代中导致照片撕裂，如下所示。或者由于两个空间之间的不正确转换，它正在剪裁照片。

宽度似乎保持不变，所以它暗示我可能会在标准范围之外的值发生某些事情，但我不确定要尝试什么。

Answer 1

出现这种条纹是因为您将纹理环绕设置为夹到边缘。你有类似的东西：

    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE );

GL_REPEAT 是默认值，将重复图像。但是您希望在底部没有任何“影响”。由于您的数学，这个底部正在发生。你只在底部而不是侧面得到条纹。正如有人在评论中所说，您的顶点范围不正确。最小值和最大值是 0 和 1 .. 不是 -1 和 1。所以在图片的底部它是条纹的，因为您正在计算 0-1 边界之外的纹理坐标数，并且可能进入 1 区域。当 texture2D(u_textureSampler, v_fragmentTexCoord0) 获得 0-1 范围之外的纹理坐标时，它将落在 WRAP_S / WRAP_T 设置上以知道要给出什么值。它正在重复边缘像素，因为您有 GL_CLAMP_TO_EDGE。

你的实际问题不是这个设置。那是您正在计算超出范围的 S 或 T。这不是好的形式，因为即使您在那里写黑色，它也会浪费片段着色器上的周期，并且会减慢您的应用程序。基本上，你的公式是错误的。

至于你放大数学......这是数学。无论你想做什么，你都必须解决它。 （或寻求帮助。）您可以这样做，这是我在新照片编辑应用中所做的简化版本：

    GLfloat aspect = photo.width / photo.height;
    if (aspect > 1) {
      displayWidth = panelWidth;
      displayHeight = panelWidth/aspect;
    }
    else {
      displayHeight = panelHeight;
      displayWidth = panelHeight*destAspect;
    }

其中 panelWidth 和 panelHeight 是您正在显示照片的区域的大小 - 可以是全屏或更小。然后根据显示的高度和宽度构建您的顶点。如果您放大到超出面板的大小，则需要进行裁剪以将图像保留在面板内，既可以通过减小显示宽度或高度（哪个太大），也可以将纹理坐标更改为匹配。这很粗略，但是是这样的：

GLfloat sSize = (destSMax-destSMin) / panelZoom;
GLfloat tSize = (destTMax-destTMin) / panelZoom;

displaySMin = destSMin + panelPanX/coreTextureSize;
displayTMin = destTMin + panelPanY/coreTextureSize;

displaySMax = displaySMin + sSize;
displayTMax = displayTMin + tSize;

然后当然构建您的顶点数据，使用矩阵数学将正方形移动到您想要的位置，然后绘制它。

我建议您重新考虑使用类似于我上面所做的方法的方法。当照片离开屏幕时，不要删除照片的一部分。而是计算将要看到的内容并以此为基础构建数据。

编辑 - 另外，我意识到我的代码是 ios 代码，这是一个 android 问题。但同样的概念也适用。 glTexParameteri 调用可能略有不同，它可能是 float 而不是 GLfloat。