Android OpenGL ES 纹理

OpenGL ES 系列

之前我们一直都是在绘制简单的图形与颜色，如果是一张图片该如何通过OpenGL ES进行渲染出来呢？

OpenGL ES的渲染方式是通过纹理来绘制出图片，通过纹理将图片像素值传递到对应位置，最终渲染出来。

着色器源码

还是老规矩，首先定义顶点与片段着色器源代码

private const val VERTEX_SHADER_SOURCE =
    "attribute vec4 a_Position;\n" +
            "attribute vec2 a_textureCoordinate;\n" +
            "varying vec2 v_textureCoordinate;\n" +
            "void main() {\n" +
            "   v_textureCoordinate = a_textureCoordinate;\n" +
            "   gl_Position = a_Position;\n" +
            "}"
 
private const val FRAGMENT_SHADER_SOURCE =
    "precision mediump float;\n" +
            "uniform sampler2D u_texture;\n" +
            "varying vec2 v_textureCoordinate;\n" +
            "void main() {\n" +
            "   gl_FragColor = texture2D(u_texture, v_textureCoordinate);\n" +
            "}"

这里我们定义了a_textureCoordinate纹理的坐标，这个与之前颜色同理；然后是u_texture，代表二维纹理句柄，通过外界将纹理传递给GL程序，最终通过texture2D来转化成对应的颜色值。

纹理坐标

要绘制纹理，自然要有纹理坐标，要知道在哪些位置进行绘制。所以我们来定义纹理的坐标

// 整个视图
private val mVertexData = floatArrayOf(
    -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f,
    -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f
)
 
// 整个纹理
private val mTextureData = floatArrayOf(
    0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
    0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f
)
 
private const val TEXTURE_DIMENSION_SIZE = 2

之前我们提到顶点的坐标原点是在中心，且坐标范围是-1~1。而纹理的坐标原点是在左下角，且坐标范围是0~1。

所以你会发现顶点坐标与纹理坐标是上下颠倒的。

那么有的同学可能会有疑问，为什么要颠倒呢？都颠倒了绘制出来的图片不是也是颠倒的吗？

我可以很明确的说，不会的。让我先买个关子，原因后面再说。

有了坐标数据，接下来是干什么呢？如果你看了前面几篇文章就不陌生了。

将数据填充到Buffer中，并传递到GL程序中。

填充纹理坐标数据

// 加载纹理数据
val textureBuffer = ByteBuffer.allocateDirect(mTextureData.size * Float.SIZE_BYTES)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer()
textureBuffer.put(mTextureData)
textureBuffer.position(0)
  
// 获取对应纹理参数位置
val textureCoordinateLocation = GLES20.glGetAttribLocation(programId, "a_textureCoordinate")
  
// 启动对应纹理参数位置
GLES20.glEnableVertexAttribArray(textureCoordinateLocation)
  
// 填充对应顶点处纹理位置数据
GLES20.glVertexAttribPointer(textureCoordinateLocation, TEXTURE_DIMENSION_SIZE, GLES20.GL_FLOAT, false, 0, textureBuffer)

这样我们的纹理绘制区域就确定了。这一点跟顶点与颜色的数据填充完全相同，其实我们看它们在源码中的变量定义就能明白这一点。因为最终目的都是向GL程序进行填充数据。掌握到这一点以后任何数据的填充都是类似的，这就是GL程序的套路所在。

创建纹理

既然纹理区域确定了，现在我们就要来创建纹理。

// 创建纹理
val textures = IntArray(1)
GLES20.glGenTextures(textures.size, textures, 0)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[0])

我们需要获得的是纹理句柄，所以我们将创建的纹理句柄保存到textures中，同时指定该纹理在GL程序中的通道索引，这里为0。

为什么要指定通道，因为纹理可以有多个，当你去绘制的时候需要选择指定的通道，才能绘制出自己想要的纹理。另外因为我们需要绘制的是二维图片，所以我们将纹理指定为GL_TEXTURE_2D二维。

纹理参数

创建纹理之后，我们继续设置纹理的参数。

// 设置纹理参数
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE)

其中GL_TEXTURE_MIN_FILTER与GL_TEXTURE_MAG_FILTER是纹理的过滤参数，作用是当纹理渲染时比原理的纹理小或者大时要如何处理，GL_LINEAR是线性处理方式，展示的效果是更平滑；还有一种是GL_NEAREST，它会选择与最近的像素，所以展示的效果有锯齿感。

下面我们将顶点坐标扩大5倍看下两种处理方式的效果。

GL_TEXTURE_WRAP_T与GL_TEXTURE_WRAP_S是纹理坐标超出纹理范围的处理参数。

GL_CLAMP_TO_EDGE以填充的方式进行处理。

GL_REPEAT以重复的方式进行处理。

下面我们将纹理坐标扩大5倍看下两种方式的处理效果。

填充与绑定纹理

我们通过加载本地的一种图片，将其通过OpenGL 进行渲染出来。

首先我们将本地的图片转化成Bitmap。

1 2	// 将资源图片解码成bitmap val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.yaodaoji)

然后将Bitmap填充到Buffer中

// 将bitmap填充到纹理中
val bitmapBuffer = ByteBuffer.allocateDirect(bitmap.width * bitmap.height * 4)
    .order(ByteOrder.nativeOrder())
bitmap.copyPixelsToBuffer(bitmapBuffer)
bitmapBuffer.position(0)
GLES20.glTexImage2D(
    GLES20.GL_TEXTURE_2D,
    0,
    GLES20.GL_RGBA,
    bitmap.width,
    bitmap.height,
    0,
    GLES20.GL_RGBA,
    GLES20.GL_UNSIGNED_BYTE,
    bitmapBuffer
)

这一步再熟悉不过了，将Bitmap数据填充到Buffer中，然后通过glTexImage2D将其填充到纹理中。

之前我们说到纹理坐标与顶点坐标上下颠倒的问题，为什么不会造成渲染出来的图片上下颠倒。

答案就在这里，我们渲染图片使用的是Bitmap的数据，而Bitmap的数据坐标是在左上角，所以此时加载的Bitmap数据是与纹理进行了上下颠倒的。而纹理又与顶点上下颠倒，这一来一回就刚好拨正了，所以我们真正渲染出来的图片就刚好是正确的方向。

纹理数据有了，再来将其绑定到对应的纹理上。

1
2
3

// 绑定特定索引纹理
val textureLocation = GLES20.glGetUniformLocation(programId, "u_texture")
GLES20.glUniform1i(textureLocation, 0)

注意这里的0，就是之前我们创建纹理时指定的通道，这样我们就能将其绑定到对应的纹理通道上。

渲染

// 设置清屏颜色
GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f)
// 清屏处理
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
// 设置视图大小
GLES20.glViewport(0, 0, mSurfaceViewWidth, mSurfaceViewHeight)
// 渲染
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, mVertexData.size / VERTEX_DIMENSION_SIZE)

来看下渲染出来的效果

优化

有几个点我们可以进行优化。

减少数据

其中一个是我们使用的是GL_TRIANGLES方式进行渲染，在之前的文章我们知道这种渲染方式是不会共用顶点的，会导致顶点数量过多，占用的内存过大。

为了减少内存，我们可以使用GL_TRIANGLE_STRIP方式。这样我们就需要调整顶点与纹理坐标了

// 整个视图
// --->
//  \
//   \
// --->
private val mVertexData = floatArrayOf(
    -1.0f, -1.0f,
    1.0f, -1.0f,
    -1.0f, 1.0f,
    1.0f, 1.0f
)
 
// 整个纹理
// --->
//   /
//  /
// --->
private val mTextureData = floatArrayOf(
    0.0f, 1.0f,
    1.0f, 1.0f,
    0.0f, 0.0f,
    1.0f, 0.0f
)

之前都是6个顶点，现在将它们都修改成4个即可。

通过GL_TRIANGLE_STRIP的特性，合理定义四个顶点的数据，就可以完全覆盖整个屏幕，即四个顶点绘制两个三角形，而这两个三角形刚好能够组合成屏幕的全部内容。

注意视图与纹理的坐标颠倒性，还有绘制的方向性。

运行之后，效果还是一致的，这里就不再展示了。

防止变形

而另一个是我们发现效果图片变形了。

这是由于原图片的宽高尺寸比例与展示的屏幕宽高尺寸比例不一致。

知道原因解决方案就有了，我们将图片纹理与渲染的屏幕进行一个宽高缩放，这样就能保证渲染出来的图片能够不变形展示。这一点与我们正常为一个ImageView设置不变形的做法一致。只不过是ImageView内部提供了设置ScaleType的方式。

具体的缩放处理方式就不贴源代码了，感兴趣的可以自己去查看源码。

我这里只说一下最终的处理位置，我们只需将Bitmap加载到纹理的时候，进行纹理缩放处理即可。

// 加载纹理数据
val textureBuffer = ByteBuffer.allocateDirect(mTextureData.size * Float.SIZE_BYTES)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer()
// textureBuffer.put(mTextureData)
textureBuffer.put(
    // 根据图片进行纹理缩放
    Utils.adapterCoordinate(
        mTextureData,
        glSurfaceView.width,
        glSurfaceView.height,
        bitmap.width,
        bitmap.height,
        ScaleType.CENTER_FIT
    )
)
textureBuffer.position(0)

这里使用的是居中等比缩放，再来看下处理后的效果。

纹理处理的方式也并不难，相信一路走下来的同学都有所体会

这也进一步说明OpenGL ES也没有很难，只是我们开始对它的使用方式不熟悉，因为它与我们正常的展示一张图片的方式完全不同，但明白它的处理方式之后，就会发现它也是有规律可循的，毕竟对应的API是不会出现太多的差异的。也希望能够帮助大家对OpenGL ES有一个全面的了解。

最后附上源码地址：OpenGL ES