OpenGL贴图保持原比例的一种方法

 例如我创建了一个全屏的纹理顶点，但图片不一定是刚好符合屏幕比例的，这样纹理贴图一贴上去，一拉伸就不符合图片比例了，会比较难看，那么对顶点做怎样的临时变换可以维持渲染的图片保持比例呢？

      我的基本环境设置如下：

glViewport(0, 0, w, h);//设置视口
float ratio = (float) h / w;    
frustumM(mProjMatrix, 0, -1, 1, -ratio, ratio, 1, 50);//设置投影矩阵

投影矩阵设置方法：

void frustumM(float *m, int offset, float left, float right, float bottom, float top, float near, float far)
{
    const float r_width = 1.0f / (right - left);
    const float r_height = 1.0f / (top - bottom);
    const float r_depth = 1.0f / (near - far);
    const float x = 2.0f * (near * r_width);
    const float y = 2.0f * (near * r_height);
    const float A = 2.0f * ((right + left) * r_width);
    const float B = (top + bottom) * r_height;
    const float C = (far + near) * r_depth;
    const float D = 2.0f * (far * near * r_depth);
    m[offset + 0] = x;
    m[offset + 5] = y;
    m[offset + 8] = A;
    m[offset + 9] = B;
    m[offset + 10] = C;
    m[offset + 14] = D;
    m[offset + 11] = -1.0f;
    m[offset + 1] = 0.0f;
    m[offset + 2] = 0.0f;
    m[offset + 3] = 0.0f;
    m[offset + 4] = 0.0f;
    m[offset + 6] = 0.0f;
    m[offset + 7] = 0.0f;
    m[offset + 12] = 0.0f;
    m[offset + 13] = 0.0f;
    m[offset + 15] = 0.0f;
}

使用的顶点配置如下：

createRender(-1, -ratio, 0, 2, ratio * 2, w, h);
void RenderProgramImage::createRender(float x, float y, float z, float w, float h, int windowW,int windowH) {
    //...
    mWindowW = windowW;
    mWindowH = windowH;
    initObjMatrix(); //使物体矩阵初始化为单位矩阵，否则接下来的矩阵操作因为都是乘以0而无效
    float vertxData[] = {
            x + w, y, z,
            x, y, z,
            x + w, y + h, z,
            x, y + h, z,
    };
    memcpy(mVertxData, vertxData, sizeof(vertxData));
   //...
}

就是典型的跨过全屏的顶点坐标。    

 直接贴图效果是这样的：

 

 

我们知道OpenGL使用的是归一化的坐标系：

所以我们通过以下步骤变换顶点使得其符合图片原来的比例：

0、首先我们假定视口是个正方形，大小一比一。备份现在的顶点变换矩阵。

1、通过图片宽高分别除以视口宽高，得到两个比值。

2、比值较大的边所对应的轴的顶点坐标不需要变换，另外比值较小的边所对应的缩放值乘以 （较小边/较大边）的比值即可在较长边充满顶点的同时，另外一轴的顶点缩放到符合图片比例的长度，具体矩阵操作如下：

3、上面一步的比例是假定视口长宽为1:1的计算，但实际我们还要乘以视口设置的比例，才能最终在投影到视口时比例依然符合我们的目标。

4、绘制完成后还原变换矩阵。

变换过程如图：

 

 实现代码如下：

//保留物体缩放现场
    float objMatrixClone[16];
    memcpy(objMatrixClone, mObjectMatrix, sizeof(objMatrixClone));
float ratio =
                mWindowW > mWindowH ? ((float) mWindowH / (float) mWindowW) : ((float) mWindowW /
                                                                               (float) mWindowH); //计算当前视口的短边/长边比例，从而得知X轴和Y轴的-1～1的归一化长度之间的实际长度的比例
        //确定图片哪一边更能覆盖对应轴的视口长度，哪一边就让其充满空间，另一边则按OpenGL视口的短边/长边比缩放，此时任意长宽比的图片都会变成矩形，再乘以图片本身的比例转换为图片本身宽高比，即可在纹理渲染时还原图片本身比例
        float widthPercentage = (float) mRenderSrcData.width / (float) mWindowW;
        float heightPercentage = (float) mRenderSrcData.height / (float) mWindowH;
        if (widthPercentage > heightPercentage) { //如果宽占比更多，宽拉伸到尽，高按照视口比例重新调整为统一密度的单位，然后再根据图片高对宽的比例调整物体的高的边的缩放
            scale(1.0, ratio * ((float) mRenderSrcData.height / mRenderSrcData.width), 1.0); //SCALEY为图片高占宽的比例 * 视口比例
        } else {
            scale(ratio * ((float) mRenderSrcData.width / mRenderSrcData.height), 1.0, 1.0);
        }

void Layer::scale(float sx, float sy, float sz) {
    scaleM(mObjectMatrix, 0, sx, sy, sz);
}

void scaleM(float *m, int mOffset, float x, float y, float z)
{
    float sm[16];
    setIdentityM(sm, 0);
    sm[0] = x;
    sm[5] = y;
    sm[10] = z;
    sm[15] = 1;
    float tm[16];
    multiplyMM(tm, 0, m, 0, sm, 0);
    for (int i = 0; i < 16; i++)
    {
        m[i] = tm[i];
    }
}

 绘制时，物体顶点矩阵先乘以摄像机矩阵和投影矩阵确定其在三维空间的真实位置和投影到平面的二维位置和大小。

void Layer::locationTrans(float cameraMatrix[], float projMatrix[], int muMVPMatrixPointer) {
    multiplyMM(mMVPMatrix, 0, cameraMatrix, 0, mObjectMatrix, 0);         //将摄像机矩阵乘以物体矩阵
    multiplyMM(mMVPMatrix, 0, projMatrix, 0, mMVPMatrix, 0);         //将投影矩阵乘以上一步的结果矩阵
    glUniformMatrix4fv(muMVPMatrixPointer, 1, false, mMVPMatrix);        //将最终变换关系传入渲染管线
}

最后传到GLSL脚本种的uMVPMatrix矩阵，再把上面计算的值乘以该变换矩阵：

#version 300 es\n
            uniform mat4 uMVPMatrix; //旋转平移缩放 总变换矩阵。物体矩阵乘以它即可产生变换
            in vec3 objectPosition; //物体位置向量，参与运算但不输出给片源

            in vec4 objectColor; //物理颜色向量
            in vec2 vTexCoord; //纹理内坐标
            out vec4 fragObjectColor;//输出处理后的颜色值给片元程序
            out vec2 fragVTexCoord;//输出处理后的纹理内坐标给片元程序

            void main() {
                gl_Position = uMVPMatrix * vec4(objectPosition, 1.0); //设置物体位置
                fragVTexCoord = vTexCoord; //默认无任何处理，直接输出物理内采样坐标
                fragObjectColor = objectColor; //默认无任何处理，输出颜色值到片源
            }

便实现了符合图片比例的顶点临时变换。无论顶点初始化时是何种比例都能按照图片原比例贴上。

最后效果如下：

 

 

 

 

 

 可以看到无论容器比例如何，照片比例都可以保持一致。