[Android] OpenGL ES 图像纹理的裁剪

由于笔者工作是进行音视频方面的开发,所以也未过多去了解关于 3D 方面的东西,这篇文章过后加上读取显存从 GPU/纹理 读取图像 RGB 数据之后基本可掌握一部分音视频方面对 OpenGL ES 有关的开发工作了。本篇文章跟大家聊聊关于 OpenGL ES 中二维图像的裁剪。

关于顶点坐标与纹理坐标

上篇文章提到过,图像的绘制就不过是在矩形中颜色以纹理的形式表示,那么就是说矩形的顶点坐标(世界坐标)就已经说明了纹理需要绘制在什么地方,可以说作是图片的“容器”吧。然后我们要知道哪部分需要展示在界面上,那么就有纹理坐标的概念了。纹理坐标以纹理左下角为坐标原点,向右为x正轴方向,向上为y轴正轴方向。他的总长度是1,我们可以通过一些计算对纹理进行裁剪。

粗略画了个图,这表示了顶点坐标与纹理坐标的关系,又由纹理坐标与 Android 的屏幕坐标可见,纹理坐标与 Android 的屏幕坐标是完全相反的,这点需要注意。纹理的原点位于纹理图像的左下角。

裁剪

说完纹理坐标,那么要裁剪图像就很简单了。我们仅需要修改纹理坐标即可达成裁剪的目的,我们把上一篇文章的纹理坐标改为如下:

    private static final float[] sCoord = {
            0.0f, 0.0f,
            0.0f, 1.0f,
            0.5f, 0.0f,
            0.5f, 1.0f,
    };

此时原图与其的对比即为原来图片的左边一半了。当然有个小坑,就是裁剪上下的时候其传入的顶点是相反的,在网上资料中我得到一张图:

从这张图中我了解了,即使纹理坐标是向上为正的,但计算机中都是向下为正,所以实际上依然是原点在左上角,x轴向右,y轴向下。

那么就是要取下半部分的话纹理坐标为:

    private static final float[] sCoord = {
            0.0f, 0.5f,
            0.0f, 1.0f,
            1.0f, 0.5f,
            1.0f, 1.0f,
    };

 

扩展

除了裁剪,我们经常还需要将图像进行缩放、旋转、镜像等操作,我们均可以改变顶点坐标和纹理坐标来进行操作,对旋转、镜像等操作,我建议选择使用 glDrawElement 来绘制图片,以便我们更改绘制顺序,这样我们对镜像的操作只需要对调纹理坐标即可,旋转的话更改绘制顺序即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注