OpenGL Android课程四:介绍纹理基础

翻译文

原文标题:Android Lesson Four: Introducing Basic Texturing
原文链接:http://www.learnopengles.com/android-lesson-four-introducing-basic-texturing/


介绍纹理基础

这是我们Android系列的第四个课程。
在本课中,我们将添加我们在第三课
中学到的内容,并学习如何添加纹理。
我们来看看如何从应用资源中获取一张
图片加载到OpenGLES中,并展示到
屏幕上。

跟着我一起来,你将马上明白纹理的
基本使用方式。
screenshot
screenshot

前提条件

本系列每个课程构建都是以前一个课程为基础,这节课是第三课的扩展,因此请务必在继续之前复习该课程。

已下是本系列课程的前几课:

纹理基础

纹理映射的艺术(以及照明)是构建逼真的3D世界最重要的部分。没有纹理映射,一切都是平滑的阴影,看起来很人工,就像是90年代的老式控制台游戏。

第一个开始大量使用纹理的游戏,如Doom和Duke Nukem 3D,通过增加视觉冲击力,大大提升了游戏的真实感——如果在晚上玩可能会真的吓唬到我们。

这里我们来看有纹理和没有纹理的场景

pre-fragment lighting
pre-fragment lighting

每片段照明;
正方形四个顶点中心位置
added texture
added texture

添加了纹理;
正方形四个顶点中心位置
看左边的图片,这个场景通过每像
素照明和着色点亮。这个场景看起
来非常平滑,现实生活中我们走进
一个房间有充满了光滑阴影的东西
就像是这个立方体。

在看右边的图片,同样的场景现在
纹理化了。环境光也增加了,因为
纹理的使用使整个场景变暗,也可
以看到纹理对侧面立方体的影响。
立方体具有和以前相同数量的多边
形,但它们有新纹理看起来更加详
细。

满足于那些好奇的人,这个纹理的
资源来自于公共领域的资源

纹理坐标

在OpengGL中,纹理坐标时常使用坐标(s,t)代替(x,y)。(s,t)表示纹理上的一个纹理元素,然后映射到多边形。另外需要注意这些纹理坐标和其他OpengGL坐标相似:t(或y)轴指向上方,所以值越高您走的越远。

大多数计算机图形,y轴指向下方。这意味着左上角是图片的原点(0,0),并且y值向下递增。换句话说,OpenGL的坐标系和大多数计算机图形相反,这是您需要考虑到的。

OpenGL的纹理坐标系
coordiante
coordiante

纹理映射基础

在本课中,我们将来看看常规2D纹理(GL_TEXTURE_2D)和红,绿,蓝颜色信息(GL_RGB)。OpenGL ES 也提供其他纹理模式让你做更多不同的特殊效果。我们将使用GL_NEAREST查看点采样,GL_LINEAR和MIP-映射将在后面的课程中讲解。

让我们一起来到代码部分,看看怎样开始在Android中使用基本的纹理。

顶点着色器

我们将采用上节课中的每像素照明着色器,并添加纹理支持。

这儿是新的变化:

attribute vec2 a_TexCoordinate;// 我们将要传入的每个顶点的纹理坐标信息
...
varying vec2 v_TexCoordinate;  // 这将会传入到片段着色器

void main()
{
   // 传入纹理坐标
   v_TexCoordinate = a_TexCoordinate;
   ...
}

在顶点着色器中,我们添加一个新的属性类型vec2(一个包含两个元素的数组),将用来放入纹理坐标信息。这将是每个顶点都有,同位置,颜色,法线数据一样。我们也添加了一个新的变量,它将通过三角形表面上的线性插值将数据传入片段着色器。

片段着色器

uniform sampler2D u_Texture;" +  // 传入纹理
...
varying vec2 v_TexCoordinate;" + // 插入的纹理坐标
void main()
{
   ...
   // 计算光线矢量和顶点法线的点积,如果法线和光线矢量指向相同的方向,那么它将获得最大的照明
   float diffuse = max(dot(v_Normal, lightVector), 0.1);" +
   // 根据距离哀减光线
   diffuse = diffuse * (1.0 / (1.0 + (0.10 * distance * distance)));" +
   // 添加环境照明
   diffuse = diffuse + 0.3;" +
   // 颜色乘以亮度哀减和纹理值得到最终的颜色
   gl_FragColor = v_Color * diffuse * texture2D(u_Texture, v_TexCoordinate);" +
}

我们添加了一个新的常量类型sampler2D来表示实际纹理数据(与纹理坐标对应),
由定点着色器插值传入纹理坐标,我们再调用texture2D(texture, textureCoordinate)
得到纹理在当前坐标的值,我们得到这个值后再乘以其他项得到最终输出的颜色。

这种方式添加纹理会使整个场景变暗,因此我们还会稍微增强环境光照并减少光照哀减。

将一个图片加载到纹理

public static int loadTexture(final Context context, final int resourceId) {
    final int[] textureHandle = new int[1];

    GLES20.glGenTextures(1, textureHandle, 0);

    if (textureHandle[0] != 0) {
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inScaled = false; // 没有预先缩放

        // 得到图片资源
        final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

        // 在OpenGL中绑定纹理
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]);

        // 设置过滤
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);

        // 将位图加载到已绑定的纹理中
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

        // 回收位图,因为它的数据已加载到OpenGL中
        bitmap.recycle();
    }

    if (textureHandle[0] == 0) {
        throw new RuntimeException("Error loading texture.");
    }
    return textureHandle[0];
}

这段代码将Androidres文件夹中的图形文件读取并加载到OpenGL中,我会解释每一部分的作用。

我们首先需要告诉OpenGL去为我们创建一个新的handle,这个handle作为一个唯一标识,我们想在OpenGL中引用纹理时就会使用它。

final int[] textureHandle = new int[1];
GLES20.glGenTextures(1, textureHandle, 0);

这个OpenGL方法可以用来同时生成多个handle,这里我们仅生成一个。

因为我们这里只需要一个handle去加载纹理。首先,我们需要得到OpenGL能理解的纹理格式。
我们不能只从PNG或JPG提供原始数据,因为它不会理解。我们需要做的第一步是将图像文件解码为Android Bitmap对象:

final BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false; // 没有预先缩放
// 得到图片资源
final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

默认情况下,Android会根据设备的分辨率和你放置图片的资源文件目录而预先缩放位图。我们不希望Android根据我们的情况对位图进行缩放,因此我们将inScaled设置为false

// 在OpenGL中绑定纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]);

// 设置过滤
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);

然后我们绑定纹理,并设置几个参数,绑定一个纹理,并告诉OpenGL后续OpenGL调用需要这样过滤这个纹理。我们将默认过滤器设置为GL_NEAREST,这是最快,也是最粗糙的过滤形式。它所做的就是在屏幕的每个点选择最近的纹素,这可能导致图像伪像和锯齿。

  • GL_TEXTURE_MIN_FILTER 这是告诉OpenGL在绘制小于原始大小(以像素为单位)的纹理时要应用哪种类型的过滤。
  • GL_TEXTURE_MAG_FILTER 这是告诉OpenGL在放大纹理到原始大小时要应用哪种类型的过滤。
// 将位图加载到已绑定的纹理中
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

// 回收位图,因为它的数据已加载到OpenGL中
bitmap.recycle();

安卓有一个非常实用的功能可以直接将位图加载到OpenGL中。一旦您将资源读入Bitmap对象GLUtils.texImage2D()将负责其他事情,这个方法的签名:

public static void texImage2D (int target, int level, Bitmap bitmap, int border)

我们想要一个常规的2D位图,因此我们传入GL_TEXTURE_2D作为第一个参数。第二个参数用于MIP-映射,并允许您指定要在哪个级别使用的图像。我们这里没有使用MIP-映射,因此我们将传入0设置为默认级别。我们传入位图,由于我们没有使用边框,所以我们传入0。

然后原始位图对象调用recycle(),这提醒Android可以回收这部分内存。由于纹理已被加载到OpenGL,我们不需要继续保留这个副本。
是的,Android应用程序在执行垃圾收集的Dalvik VM下运行,但Bitmap对象包含驻留在native内存中的数据,如果你不明确的回收它们,它们需要几个周期来进行垃圾收集。
这意味着如果您忘记执行此操作,实际上可能会因内存不足错误而崩溃,即使您不再持有对位图的任何引用。

将纹理应用到我们的场景

首先,我们需要添加各种成员变量来持有我们纹理所需要的东西:

// 存放我们的模型数据在浮点缓冲区
private final FloatBuffer mCubeTextureCoordinates;

// 用来传入纹理
private int mTextureUniformHandle;

// 用来传入模型纹理坐标
private int mTextureCoordinateHandle;

// 每个数据元素的纹理坐标大小
private final int mTextureCoordinateDataSize = 2;

// 纹理数据
private int mTextureDataHandle;

我们基本上是需要添加新成员变量来跟踪我们添加到着色器的内容,以及保持对纹理的引用。

定义纹理坐标

我们在构造方法中定义我们的纹理坐标

// S, T (或 X, Y)
// 纹理坐标数据
// 因为图像Y轴指向下方(向下移动图片时值会增加),OpenGL的Y轴指向上方
// 我们通过翻转Y轴来调整它
// 每个面的纹理坐标都是相同的
final float[] cubeTextureCoordinateData =
        {
                // 正面
                0.0F, 0.0F,
                0.0F, 1.0F,
                1.0F, 0.0F,
                0.0F, 1.0F,
                1.0F, 1.1F,
                1.0F, 0.0F,
        };
...

这坐标数据看起来可能有点混乱。如果您返回去看第三课中点的位置是如何定义的,您将会发现我们为正方体每个面都定义了两个三角形。点的定义方式像下面这样:

(三角形1)
左上,
左下,
右上
(三角形2)
左下,
右下,
右上

纹理坐标和正面的位置坐标对应,但是由于Y轴翻转,Y轴指向和OpenGL的Y轴相反的方向。

看下图,实线坐标表示在OpenGL中正方体正面X,Y坐标。虚线表示翻转后的坐标,可以看出和上面定义的纹理坐标是一一对应的

纹理坐标对应
纹理坐标对应

设置纹理

我们在onSurfaceCreated()方法中加载纹理

@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    ...
    mProgramHandle = ShaderHelper.createAndLinkProgram(vertexShaderHandle, fragmentShaderHandle, "a_Position", "a_Color", "a_Normal", "a_TexCoordinate");
    ...
    // 加载纹理
    mTextureDataHandle = TextureHelper.loadTexture(mActivityContext, R.drawable.bumpy_bricks_public_domain);

我们传入一个新的属性a_TexCoordinate绑定到我们的着色器中,并且我们通过之前创建的loadTexture()方法加载着色器。

使用纹理

我们也需要在onDrawFrame(GL10 gl)方法中添加一些代码。

@Override
public void onDrawFrame(GL10 gl) {
    ...
    mTextureUniformHandle = GLES20.glGetUniformLocation(mProgramHandle, "u_Texture");
    mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgramHandle, "a_TexCoordinate");

    // 将纹理单元设置为纹理单元0
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

    // 将纹理绑定到这个单元
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle);

    // 通过绑定到纹理单元0,告诉纹理标准采样器在着色器中使用此纹理
    GLES20.glUniform1i(mTextureUniformHandle, 0);

我们得到着色器中的纹理数据和纹理坐标句柄。在OpenGL中,纹理能在着色之前,需要绑定到纹理单元。纹理单元是读取纹理并实际将它传入着色器的中,因此可以再屏幕上显示。不同的图形芯片有不同数量的纹理单元,因此在使用它们之前,您需要检查是否存在其他纹理单元。

首先,我们告诉OpenGL我们想设置使用的纹理单元到第一个单元,纹理单元0。然后自动绑定纹理到第一个单元,通过调用glBindTexture()。最后,我们告诉OpenGL,我们想将mTextureUniformHandle绑定到第一个纹理单元,它引用了片段着色器中u_Texture属性。

简而言之:

  1. 设置纹理单元
  2. 绑定纹理到这个单元
  3. 将此单元指定给片段着色器中的纹理标准

根据需要重复多个纹理。

进一步练习

一旦您做到这儿,您就完成的差不多了!当然这这并没有您预期的那么糟糕...或者确实糟糕?😉作为下一个练习,尝试通过加载另一个纹理,将其绑定到另一个单元,并在着色器中使用它。

回顾

现在我们回顾一下所有的着色器代码,以及我们添加了一个新的帮助功能用来从资源目录读取着色器代码,而不是存储在java字符串中:

顶点着色器 all

uniform mat4 u_MVPMatrix;                      // 一个表示组合model、view、projection矩阵的常量
uniform mat4 u_MVMatrix;                       // 一个表示组合model、view矩阵的常量

attribute vec4 a_Position;                     // 我们将要传入的每个顶点的位置信息
attribute vec4 a_Color;                        // 我们将要传入的每个顶点的颜色信息
attribute vec3 a_Normal;                       // 我们将要传入的每个顶点的法线信息
attribute vec2 a_TexCoordinate;                // 我们将要传入的每个顶点的纹理坐标信息

varying vec3 v_Position;
varying vec4 v_Color;
varying vec3 v_Normal;
varying vec2 v_TexCoordinate;                  // 这将会传入到片段着色器

// 顶点着色器入口点
void main()
{
   // 传入纹理坐标
   v_TexCoordinate = a_TexCoordinate;
   // 将顶点位置转换成眼睛空间的位置
   v_Position = vec3(u_MVMatrix * a_Position);
   // 传入颜色
   v_Color = a_Color;
   // 将法线的方向转换在眼睛空间
   v_Normal = vec3(u_MVMatrix * vec4(a_Normal, 0.0));
   // gl_Position是一个特殊的变量用来存储最终的位置
   // 将顶点乘以矩阵得到标准化屏幕坐标的最终点
   gl_Position = u_MVPMatrix * a_Position;
}

片段着色器 all

precision mediump float; //我们将默认精度设置为中等,我们不需要片段着色器中的高精度
uniform sampler2D u_Texture;  // 传入纹理
uniform vec3 u_LightPos; // 光源在眼睛空间的位置
varying vec3 v_Position; // 插入的位置
varying vec4 v_Color; // 插入的位置颜色
varying vec3 v_Normal; // 插入的位置法线
varying vec2 v_TexCoordinate; // 插入的纹理坐标
void main()  // 片段着色器入口
{
   // 将用于哀减
   float distance = length(u_LightPos - v_Position);
   // 获取从光源到顶点方向的光线向量
   vec3 lightVector = normalize(u_LightPos - v_Position);
   // 计算光线矢量和顶点法线的点积,如果法线和光线矢量指向相同的方向,那么它将获得最大的照明
   float diffuse = max(dot(v_Normal, lightVector), 0.1);
   // 根据距离哀减光线
   diffuse = diffuse * (1.0 / (1.0 + (0.25 * distance * distance)));
   // 添加环境照明
   diffuse = diffuse + 0.3;
   // 颜色乘以亮度哀减和纹理值得到最终的颜色
   gl_FragColor = v_Color * diffuse * texture2D(u_Texture, v_TexCoordinate);
}

怎样从raw资源目录中读取文本?

public class RawResourceReader {
    public static String readTextFileFromRawResource(final Context context, final int resurceId) {
        final InputStream inputStream = context.getResources().openRawResource(resurceId);
        final InputStreamReader inputStreamReader = new InputStreamReader(inputStream);
        final BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

        String nextLine;

        final StringBuilder body = new StringBuilder();

        try {
            while ((nextLine = bufferedReader.readLine()) != null) {
                body.append(nextLine).append('\n');
            }
        } catch (IOException e) {
            return null;
        } finally {
            try {
                bufferedReader.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return body.toString();
    }
}

教程目录

打包教材

可以在Github下载本课程源代码:下载项目
本课的编译版本也可以再Android市场下:google play 下载apk
“我”也编译了个apk,方便大家下载:github download

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容