0

在某些情况下，当用户放大图像直到最短的边缘填满整个屏幕（如标准画廊所示）时，需要扩展纹理。但是，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;
    }

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

在通过用户交互更新纹理大小之前 更新纹理大小后

宽度似乎保持不变，因此它向我表明，标准范围之外的值可能会发生某些事情，但我不确定要尝试什么。

4

1 回答 1

2

发生这种条纹是因为您将纹理包裹设置为夹到边缘。你有类似的东西：

    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 边界之外的纹理坐标数，并且可能进入 <0 区域或 >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 调用可能略有不同，它可能是浮点数而不是 GLfloat。

于 2013-10-06T10:55:05.067 回答