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

之前咱们提到极点的坐标原点是在中心,且坐标规模是-11。而纹路的坐标原点是在左下角,且坐标规模是01。

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

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

我能够很明确的说,不会的。让我先买个关子,原因后面再说。

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

将数据填充到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倍看下两种处理方法的作用。

Android OpenGL ES 纹理
Android OpenGL ES 纹理

GL_TEXTURE_WRAP_T与GL_TEXTURE_WRAP_S是纹路坐标超出纹路规模的处理参数。

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

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

下面咱们将纹路坐标扩展5倍看下两种方法的处理作用。

Android OpenGL ES 纹理
Android OpenGL ES 纹理

填充与绑定纹路

咱们经过加载本地的一种图片,将其经过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)

来看下烘托出来的作用

Android OpenGL ES 纹理

优化

有几个点咱们能够进行优化。

减少数据

其中一个是咱们运用的是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)

这儿运用的是居中等比缩放,再来看下处理后的作用。

Android OpenGL ES 纹理

纹路处理的方法也并不难,信任一路走下来的同学都有所领会

这也进一步说明OpenGL ES也没有很难,仅仅咱们开始对它的运用方法不了解,由于它与咱们正常的展现一张图片的方法完全不同,但明白它的处理方法之后,就会发现它也是有规律可循的,究竟对应的API是不会出现太多的差异的。也期望能够协助我们对OpenGL ES有一个全面的了解。

最终附上源码地址:OpenGL ES

推荐

android_startup: 供给一种在应用发动时能够更加简略、高效的方法来初始化组件,优化发动速度。不仅支撑Jetpack App Startup的悉数功能,还供给额外的同步与异步等待、线程操控与多进程支撑等功能。

AwesomeGithub: 根据Github的客户端,纯操练项目,支撑组件化开发,支撑账户密码与认证登陆。运用Kotlin言语进行开发,项目架构是根据JetPack&DataBinding的MVVM;项目中运用了Arouter、Retrofit、Coroutine、Glide、Dagger与Hilt等流行开源技能。

flutter_github: 根据Flutter的跨平台版别Github客户端,与AwesomeGithub相对应。

android-api-analysis: 结合详细的Demo来全面解析Android相关的知识点, 协助读者能够更快的把握与理解所论述的关键。

daily_algorithm: 每日一算法,由浅入深,欢迎加入一同共勉。