Android OpenGL ES 纹理-六虎

OpenGL ES 系列

Android OpenGL ES 基础原理

Android 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。

// 将资源图片解码成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数据是与纹路进行了上下颠倒的。而纹路又与极点上下颠倒，这一来一回就刚好拨正了，所以咱们真实烘托出来的图片就刚好是正确的方向。

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

// 绑定特定索引纹路
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

Android OpenGL ES 纹理

OpenGL ES 系列

着色器源码

纹路坐标

填充纹路坐标数据

创立纹路

纹路参数

填充与绑定纹路

烘托

优化

减少数据

避免变形

推荐

作者信息

Android OpenGL ES 纹理

OpenGL ES 系列

着色器源码

纹路坐标

填充纹路坐标数据

创立纹路

纹路参数

填充与绑定纹路

烘托

优化

减少数据

避免变形

推荐

相关文章

依赖注入 – Koin 使用入门

Android ViewStub的使用方法——边走边看边学

Java的LinkedList

Android快捷键切换输入法

作者信息