Android OpenGL ES 六.纹理绘制（转载）

作者: 有心人2021 | 来源:发表于2021-09-21 10:35 被阅读0次

基本原理

与渐变色接近，但有些区别：
渐变色：光栅化过程中，计算出颜色值，然后在片段着色器的时候可以直接赋值
纹理：光栅化过程中，计算出当前片段在纹理上的坐标位置，然后在片段着色器的中，根据这个纹理上的坐标，去纹理中取出相应的颜色值。

纹理坐标

OpenGL中，2D纹理也有自己的坐标体系，取值范围在(0,0)到(1,1)内，两个维度分别是S、T，所以一般称为ST纹理坐标。而有些时候也叫UV坐标。
纹理坐标方向性在Android上与我们平时熟悉的Bitmap、canvas等一致，都是顶点在左上角，如下图。

ST纹理坐标

其实OpenGL中的纹理坐标是没有内在方向性的，所以我们可以随意定义。但由于大多数计算机图像都有默认方向，所以我们只要按照上图取理解即可。

纹理尺寸

OpenGL ES 2.0中规定，纹理的每个维度必须是2次幂，也就是2、4、8 ... 128、256、512等等。而纹理也有最大值上限，通常比较大，比如2048*2048。

文件读取

OpenGL不能直接加载JPG或者PNG这类被编码为特定的压缩格式，需要加载原始数据，也就是Bitmap。我们在内置图片到工程中，应该讲图片放在drawable-nodpi目录下，避免读取的时候被压缩处理了。通过BtimapFactory解码读取图片的时候，要设置为非缩放的方式，即options.isScaled = false。

纹理坐标与顶点坐标的关系

纹理上的每个顶点与定点坐标上的顶点一一对应。如下图，左边是顶点坐标，右边是纹理坐标，只要两个坐标的ABCD定义顺序一致，就可以正常地映射出对应的图形。顶点坐标内光栅化后的每个片段，都会在纹理坐标内取得对应的颜色值。

顶点坐标与纹理坐标映射

纹理过滤

当我们通过光栅化将图形处理成一个个小片段的时候，再讲纹理采样，渲染到指定位置上时，通常会遇到纹理元素和小片段并非一一对应。这时候，会出现纹理的压缩或者放大。那么在这两种情况下，就会有不同的处理方案，这就是纹理过滤了。

之后再仔细补充每种过滤方式的效果，不过一般情况下，可以采取通用的方案即可满足需求。
详情可以参考LearnOpenGL-CN。

加载纹理

下面是一个工具类方法，相对通用，能解决大部分需求，只要调用TextureHelper.loadTexture(mContextContext context, int resourceId);这个方法即可将内置的图片资源加载出对应的纹理ID。

/**
 * 纹理加载助手类
 */
public class TextureHelper {
private static final String TAG = "TextureHelper";

/**
 * 根据资源ID获取相应的OpenGL纹理ID，若加载失败则返回0
 * <br>必须在GL线程中调用
 */
public static TextureBean loadTexture(Context context, int resourceId) {
    TextureBean bean = new TextureBean();
    final int[] textureObjectIds = new int[1];
    // 1\. 创建纹理对象
    GLES20.glGenTextures(1, textureObjectIds, 0);

    if (textureObjectIds[0] == 0) {
        if (LoggerConfig.ON) {
            Log.w(TAG, "Could not generate a new OpenGL texture object.");
        }
        return bean;
    }

    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inScaled = false;

    final Bitmap bitmap = BitmapFactory.decodeResource(
            context.getResources(), resourceId, options);

    if (bitmap == null) {
        if (LoggerConfig.ON) {
            Log.w(TAG, "Resource ID " + resourceId + " could not be decoded.");
        }
        // 加载Bitmap资源失败，删除纹理Id
        GLES20.glDeleteTextures(1, textureObjectIds, 0);
        return bean;
    }
    // 2\. 将纹理绑定到OpenGL对象上
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureObjectIds[0]);

    // 3\. 设置纹理过滤参数:解决纹理缩放过程中的锯齿问题。若不设置，则会导致纹理为黑色
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR_MIPMAP_LINEAR);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
    // 4\. 通过OpenGL对象读取Bitmap数据，并且绑定到纹理对象上，之后就可以回收Bitmap对象
    GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

    // Note: Following code may cause an error to be reported in the
    // ADB log as follows: E/IMGSRV(20095): :0: HardwareMipGen:
    // Failed to generate texture mipmap levels (error=3)
    // No OpenGL error will be encountered (glGetError() will return
    // 0). If this happens, just squash the source image to be
    // square. It will look the same because of texture coordinates,
    // and mipmap generation will work.
    // 5\. 生成Mip位图
    GLES20.glGenerateMipmap(GLES20.GL_TEXTURE_2D);

    // 6\. 回收Bitmap对象
    bean.setWidth(bitmap.getWidth());
    bean.setHeight(bitmap.getHeight());
    bitmap.recycle();

    // 7\. 将纹理从OpenGL对象上解绑
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

    // 所以整个流程中，OpenGL对象类似一个容器或者中间者的方式，将Bitmap数据转移到OpenGL纹理上
    bean.setTextureId(textureObjectIds[0]);
    return bean;
}

/**
 * 纹理数据
 */
public static class TextureBean {
    private int mTextureId;
    private int mWidth;
    private int mHeight;

    public int getTextureId() {
        return mTextureId;
    }

    void setTextureId(int textureId) {
        mTextureId = textureId;
    }

    public int getWidth() {
        return mWidth;
    }

    public void setWidth(int width) {
        mWidth = width;
    }

    public int getHeight() {
        return mHeight;
    }

    public void setHeight(int height) {
        mHeight = height;
    }
}
}

这个工具类要求图片必须是2次幂的尺寸，不过大部分情况下不会有问题，兼容性没经过测试。若需要处理，则是在加载出Bitmap的时候，再生成对应的最接近的2次幂Bitmap。

代码实现

1. GLSL

private static final String VERTEX_SHADER = "" +
        "uniform mat4 u_Matrix;\n" +
        "attribute vec4 a_Position;\n" +
        // 纹理坐标：2个分量，S和T坐标
        "attribute vec2 a_TexCoord;\n" +
        "varying vec2 v_TexCoord;\n" +
        "void main()\n" +
        "{\n" +
        "    v_TexCoord = a_TexCoord;\n" +
        "    gl_Position = u_Matrix * a_Position;\n" +
        "}";
private static final String FRAGMENT_SHADER = "" +
        "precision mediump float;\n" +
        "varying vec2 v_TexCoord;\n" +
        "uniform sampler2D u_TextureUnit;\n" +
        "void main()\n" +
        "{\n" +
        "    gl_FragColor = texture2D(u_TextureUnit, v_TexCoord);\n" +
        "}";

这里多了2个新的知识点。

一个是纹理坐标，varying类型，对应到《渐变色》的章节去理解，非常简单，渐变色在片段着色器中传进来的是每个片段的颜色，而本次传进来的是每个片段在纹理中的位置。

另外一个是sampler2D的类型，其实就是纹理数据。另外还有个方法texture2D，第一个参数是纹理数据，第二个是纹理坐标，那么这个方法就是在纹理数据中取出当前片段对应在纹理数据中位置上的数据颜色。

2. 定义顶点坐标

/**
 * 顶点坐标
 */
private static final float[] POINT_DATA = {
        -0.5f, -0.5f,
        -0.5f, 0.5f,
        0.5f, 0.5f,
        0.5f, -0.5f,
};

/**
 * 纹理坐标
 */
private static final float[] TEX_VERTEX = {
        0, 1,
        0, 0,
        1, 0,
        1, 1,
};

这两个坐标体系上的每个顶点是相互对应的，改变两个坐标内部的顶点顺序，会发现绘制的效果和之前的不一样。

根据这一点，我们可以绘制多边形的纹理。

3. 获取纹理ID

mTextureBean = TextureHelper.loadTexture(mContext, R.drawable.tuzki);

4. 绘制纹理

@Override
public void onDrawFrame(GL10 glUnused) {
    GLES20.glClear(GL10.GL_COLOR_BUFFER_BIT);

    // 设置当前活动的纹理单元为纹理单元0
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    // 将纹理ID绑定到当前活动的纹理单元上
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureBean.getTextureId());
    // 将纹理单元传递片段着色器的u_TextureUnit
    GLES20.glUniform1i(uTextureUnitLocation, 0);

    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, POINT_DATA.length / POSITION_COMPONENT_COUNT);
}

纹理绘制.png

纹理、纹理ID和纹理单元、纹理目标

纹理：在OpenGL中简单理解就是一张图片
纹理Id：纹理的直接引用
纹理单元：纹理的操作容器，有GL_TEXTURE0、GL_TEXTURE1、GL_TEXTURE2等，纹理单元的数量是有限的，最多16个。所以在最多只能同时操作16个纹理。在切换使用纹理单元的时候，使用glActiveTexture方法。
纹理目标：一个纹理单元中包含了多个类型的纹理目标，有GL_TEXTURE_1D、GL_TEXTURE_2D、CUBE_MAP等。本章中，将纹理ID绑定到纹理单元0的GL_TEXTURE_2D纹理目标上，之后对纹理目标的操作都是对纹理Id对应的数据进行操作。
纹理相关概念.jpg

纹理ID与纹理单元的关系

OpenGL要操作一个纹理，那么是将纹理ID装进纹理单元这个容器里，然后再通过操作纹理单元的方式去实现的。这样的话，我们可以加载出很多很多个纹理ID(但要注意爆内存问题)，但只有16个纹理单元，在Fragment Shader里最多同时能操作16个单元。

读取当前的画面

在OpenGL开发过程中，经常会需要一些调试的场景，想知道当前绘制的某一帧具体效果。那么可以通过下面的代码+Debug模式下进行处理。

static void sendImage(int width, int height) {
    ByteBuffer rgbaBuf = ByteBuffer.allocateDirect(width * height * 4);
    rgbaBuf.position(0);
    long start = System.nanoTime();
    GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE,
            rgbaBuf);
    long end = System.nanoTime();
    Log.d("TryOpenGL", "glReadPixels: " + (end - start));
    saveRgb2Bitmap(rgbaBuf, Environment.getExternalStorageDirectory().getAbsolutePath()
            + "/gl_dump_" + width + "_" + height + ".png", width, height);
}

static void saveRgb2Bitmap(Buffer buf, String filename, int width, int height) {
    Log.d("TryOpenGL", "Creating " + filename);
    BufferedOutputStream bos = null;
    try {
        bos = new BufferedOutputStream(new FileOutputStream(filename));
        Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        bmp.copyPixelsFromBuffer(buf);
        bmp.compress(Bitmap.CompressFormat.PNG, 90, bos);
        bmp.recycle();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        if (bos != null) {
            try {
                bos.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

拓展阅读

参考

见Android OpenGL ES学习资料所列举的博客、资料。

GitHub代码工程

本系列课程所有相关代码请参考我的GitHub项目GLStudio。

课程目录

本系列课程目录详见简书 - Android OpenGL ES教程规划

作者：Benhero
链接：https://www.jianshu.com/p/3659f4649f98
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。