OpenGL ES通过缩小GLSurfaceView来解决纹理贴图变形的问题

一、概述

　　在使用OpenGL ES做纹理贴图的时候，图片有小有大。默认情况下纹理是撑满整个屏幕的。

　　这就导致大图会被压扁、小图会被拉伸。这种体验相当不好。

　　解决此问题的其中一种方式是：通过缩小GLSurfaceView的宽或高来解决问题。ps：公式可以看做是固定的，直接使用即可。

　　1.根据屏幕及图像的宽高分别计算出宽高比

 var bitmapScaleRadio = bitmapWidth.toFloat() / bitmapHeight.toFloat()//bitmap的宽高比
        var viewScaleRadio = mSurfaceWidth.toFloat() / mSurfaceHeight.toFloat()//视图的宽高比

　　2.根据屏幕及图像宽高比来计算视口的实际使用宽高（即缩小或放大到多少才不会导致图像变形）

if (bitmapScaleRadio > viewScaleRadio) {//需要缩小
            mViewWidth = mSurfaceWidth
            mViewHeight = (mSurfaceWidth / bitmapScaleRadio).toInt()
        } else if (bitmapScaleRadio < viewScaleRadio) {
            mViewHeight = mSurfaceHeight
            mViewWidth = (mSurfaceHeight * bitmapScaleRadio).toInt()
        } else {
            mViewWidth = mSurfaceWidth
            mViewHeight = mSurfaceHeight
        }

　　3.把计算结果交给glViewport

override fun onSurfaceChanged(width: Int, height: Int) {
        mSurfaceWidth = width
        mSurfaceHeight = height
        var mViewBean =
            calculateViewport(mSurfaceWidth, mSurfaceHeight, bitmapSrc.width, bitmapSrc.height)
        //设置最终视口的大小
        var mStartX = (mSurfaceWidth - mViewBean.mViewWidth) / 2
        var mStartY = (mSurfaceHeight - mViewBean.mViewHeight) / 2
        GLES30.glViewport(mStartX, mStartY, mViewBean.mViewWidth, mViewBean.mViewHeight)
    }

二、代码示例（完整代码）

　　1.calculateViewPort方法

/**
     * 通过缩小视口，让视口尽量接近图片宽高，从而使图片不变形
     * @param mSurfaceWidth 屏幕的宽度
     * @param mSurfaceHeight 屏幕宽度
     * @param imageWidth 图片宽度
     * @param imageHeight 图片高度
     * @return 返回视口要缩小到指定值的宽高。也就是最终视口的宽高
     */
    fun calculateViewport(
        mSurfaceWidth: Int,
        mSurfaceHeight: Int,
        imageWidth: Int,
        imageHeight: Int
    ): ViewPortAttribute {
        var mViewWidth: Int = 0
        var mViewHeight: Int = 0
        var bitmapWidth = imageWidth
        var bitmapHeight = imageHeight
        var bitmapScaleRadio = bitmapWidth.toFloat() / bitmapHeight.toFloat()//bitmap的宽高比
        var viewScaleRadio = mSurfaceWidth.toFloat() / mSurfaceHeight.toFloat()//视图的宽高比
        if (bitmapScaleRadio > viewScaleRadio) {//需要缩小
            mViewWidth = mSurfaceWidth
            mViewHeight = (mSurfaceWidth / bitmapScaleRadio).toInt()
        } else if (bitmapScaleRadio < viewScaleRadio) {
            mViewHeight = mSurfaceHeight
            mViewWidth = (mSurfaceHeight * bitmapScaleRadio).toInt()
        } else {
            mViewWidth = mSurfaceWidth
            mViewHeight = mSurfaceHeight
        }
        return ViewPortAttribute(mViewWidth, mViewHeight)
    }

　　2.ScaleViewTextureShader.kt,这是一个shader，将其放入GLSurfaceView的回调方法中即可运行

package com.yw.filter.shader

import android.content.Context
import android.graphics.Bitmap
import android.opengl.GLES30
import com.yw.filter.R
import java.nio.ByteBuffer
import java.nio.ByteOrder
import java.nio.FloatBuffer
import java.nio.IntBuffer

class ScaleViewTextureShader(var context: Context, var bitmapSrc: Bitmap) : BaseShader() {
    private var vertices = floatArrayOf(//在android上纹理坐标需要上下颠倒之后才能够正确显示，否则会出现镜像、颠倒等问题
        //     ---- 位置 ----    - 纹理坐标 -
        1.0f, 1.0f, 0.0f, 1.0f, 0.0f,   // 右上
        1.0f, -1.0f, 0.0f, 1.0f, 1.0f,   // 右下
        -1.0f, -1.0f, 0.0f, 0.0f, 1.0f,   // 左下
        -1.0f, 1.0f, 0.0f, 0.0f, 0.0f    // 左上
    )
    private var indices = intArrayOf(
        0, 1, 3,//第一个三角形
        1, 2, 3 // 第二个三角形
    )
    private var vertexBuffer: FloatBuffer? = null
    private var indicesBuffer: IntBuffer? = null
    private var mSurfaceWidth: Int = 0
    private var mSurfaceHeight: Int = 0

    private var VAO = IntArray(1)
    var textureId: Int = 0
    override fun onSurfaceCreate() {
        //分配空间填充数据
        vertexBuffer = ByteBuffer
            .allocateDirect(vertices.size * 4)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer()
        vertexBuffer?.put(vertices)
        vertexBuffer?.position(0)
        indicesBuffer = ByteBuffer
            .allocateDirect(indices.size * 4)
            .order(ByteOrder.nativeOrder())
            .asIntBuffer()
        indicesBuffer?.put(indices)
        indicesBuffer?.position(0)

        //创建并绑定VAO
        GLES30.glGenVertexArrays(1, VAO, 0)
        GLES30.glBindVertexArray(VAO[0])
        //创建并绑定VBO
        var VBO = IntArray(1)
        GLES30.glGenBuffers(1, VBO, 0)
        GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, VBO[0])
        GLES30.glBufferData(
            GLES30.GL_ARRAY_BUFFER,
            vertices.size * 4,
            vertexBuffer,
            GLES30.GL_STATIC_DRAW
        )

        //创建EBO
        var EBO = IntArray(1)
        GLES30.glGenBuffers(1, EBO, 0)
        GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, EBO[0])
        GLES30.glBufferData(
            GLES30.GL_ELEMENT_ARRAY_BUFFER,
            indices.size * 4,
            indicesBuffer,
            GLES30.GL_STATIC_DRAW
        )

        //告知显卡如何解析顶点数据
        GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 4 * 5, 0)
        GLES30.glEnableVertexAttribArray(0)
        //告知显卡如何解析纹理数据
        GLES30.glVertexAttribPointer(1, 2, GLES30.GL_FLOAT, false, 4 * 5, 4 * 3)
        GLES30.glEnableVertexAttribArray(1)

        //销毁
        GLES30.glBindVertexArray(0)
        GLES30.glBindBuffer(GLES30.GL_ELEMENT_ARRAY_BUFFER, 0)
        GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, 0)

        textureId = getTextureId(bitmapSrc, GLES30.GL_RGBA)
        loadProgram(context, R.raw.texture_vert, R.raw.texture_frag)
    }

    override fun onDrawFrame() {
        GLES30.glClearColor(0.0f, 0.0f, 1.0f, 1.0f)
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        GLES30.glBindVertexArray(VAO[0])
        GLES30.glUseProgram(programId)
        GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId)
        var vTextureLocation = GLES30.glGetUniformLocation(programId, "vTexture")
        GLES30.glUniform1i(vTextureLocation, 0)
        GLES30.glDrawElements(GLES30.GL_TRIANGLES, 6, GLES30.GL_UNSIGNED_INT, 0)

        GLES30.glBindVertexArray(0)
    }

    override fun onSurfaceChanged(width: Int, height: Int) {
        mSurfaceWidth = width
        mSurfaceHeight = height
        var mViewBean =
            calculateViewport(mSurfaceWidth, mSurfaceHeight, bitmapSrc.width, bitmapSrc.height)
        //设置最终视口的大小
        var mStartX = (mSurfaceWidth - mViewBean.mViewWidth) / 2
        var mStartY = (mSurfaceHeight - mViewBean.mViewHeight) / 2
        GLES30.glViewport(mStartX, mStartY, mViewBean.mViewWidth, mViewBean.mViewHeight)
    }

}