Cocos2dx-OpenGL ES2.0教程:纹理贴图(6)

转载 2015年11月18日 17:41:58

上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object)、IBO(Index Buffer Object)和MVP(Modile-View-Projection)变换。

本文将在教程4的基础之上,添加纹理贴图支持。最后,本文会把纹理贴图扩展至3D立方体上面。

基本方法

当我们把一张图片加载到内存里面之后,它是不能直接被GPU绘制出来的,纹理贴图过程如下:

首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去,然后把内存里面的纹理传给GPU,最后,在fragment shader里面通过采样器,就可以根据vertex shader传递过来的纹理坐标把纹理上面的颜色值用插值的方式映射到每一个像素上去。

接下来,让我们看看具体怎么做。

准备纹理坐标(纹理坐标也叫UV坐标)

首先,我们需要修改我们的顶点属性结构体,添加一个纹理坐标属性(TexCoord):

1
2
3
4
5
typedef struct {
    float Position[2];
    float Color[4];
    float TexCoord[2];
} Vertex;

接下来,需要修改顶点数组的值,主要就是添加UV坐标:

1
2
3
4
5
6
7
Vertex data[] =
  {
      { {-1,-1},{0,1,0,1},{0,1}},
      { {1,-1},{0,1,0,1},{1,1}},
      { {-1,1},{0,1,0,1},{0,0}},
      { {1,1},{0,1,0,1},{1,0}}
  };

注意,我们的纹理坐标的(0,0)点在图片的左上角,这个与OpenGL里面的左下角是(0,0)有所区别。所以为了让我们的图片显示正常,我们在指定左下角顶点(-1,-1)的时候,它对应的纹理坐标应该是(0,1)。其它的坐标点以此类推。



GLuint TexCoordLocation = glGetAttribLocation(glProgram->getProgram(), "a_coord");

    glEnableVertexAttribArray(TexCoordLocation);

    glVertexAttribPointer(TexCoordLocation,

                          2,

                          GL_FLOAT,

                          GL_FALSE,

                          sizeof(Vertex),

                          (GLvoid*)offsetof(Vertex,TexCoord));




生成纹理

首先,我们在头文件里面定义一个纹理的句柄:

1
GLuint textureId;

然后是生成纹理:

1

textureIdDirector::getInstance()->getTextureCache()->addImage("HelloWorld.png")->getName();


接下来,我需要处理Shader了。

修改Shader

首先,修改vertex shader,添加纹理坐标属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

attribute vec2 a_position;
attribute vec4 a_color;
attribute vec2 a_coord;

varying vec4 v_fragmentColor;
varying vec2 v_coord;

void main()
{
    gl_Position = CC_MVPMatrix * vec4(a_position.xy,0,1);
    v_fragmentColor = a_color;
    v_coord = a_coord;
}

因为纹理坐标最终要传递到fragment shader里面去,所以需要定义一个varing vec2 v_coord变量。

接下来是fragment shader的代码:

1
2
3
4
5
6
7
8
9
10

varying vec4 v_fragmentColor;
varying vec2 v_coord;

uniform vec4 u_color;

void main()
{
    gl_FragColor = v_fragmentColor * texture2D(CC_Texture0,v_coord);
}

这边也定义了一个同样的varing变量,同时我们看到有一个texture2D函数,它可以通过CC_Texture0这个采样器和纹理坐标(v_coord)计算出对应的颜色值。

修改draw call

在调用draw call之前,我们需要绑定纹理。我们只需要在glDrawElements方法之前调用下列方法就可以了:

1
GL::bindTexture2D(textureId);

运行结果

texturingtexturing

接下来,我们需要把立方体的六个面都添加这张纹理。

让立方体不再裸奔

这个过程大部分代码都是一样的,惟一的区别就是顶点数组的修改,我们需要为每一个面的顶点都指定UV坐标:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#define TEX_COORD_MAX   1
    Vertex Vertices[] = {
        // Front
        { {1, -1, 0}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {1, 1, 0}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {-1, 1, 0}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}},
        { {-1, -1, 0}, {0, 0, 0, 1}, {0, 0}},
        // Back
        { {1, 1, -2}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {-1, -1, -2}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {1, -1, -2}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}},
        { {-1, 1, -2}, {0, 0, 0, 1}, {0, 0}},
        // Left
        { {-1, -1, 0}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {-1, 1, 0}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {-1, 1, -2}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}},
        { {-1, -1, -2}, {0, 0, 0, 1}, {0, 0}},
        // Right
        { {1, -1, -2}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {1, 1, -2}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {1, 1, 0}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}},
        { {1, -1, 0}, {0, 0, 0, 1}, {0, 0}},
        // Top
        { {1, 1, 0}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {1, 1, -2}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {-1, 1, -2}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}},
        { {-1, 1, 0}, {0, 0, 0, 1}, {0, 0}},
        // Bottom
        { {1, -1, -2}, {1, 0, 0, 1}, {TEX_COORD_MAX, 0}},
        { {1, -1, 0}, {0, 1, 0, 1}, {TEX_COORD_MAX, TEX_COORD_MAX}},
        { {-1, -1, 0}, {0, 0, 1, 1}, {0, TEX_COORD_MAX}}, 
        { {-1, -1, -2}, {0, 0, 0, 1}, {0, 0}}
    };

下面是立方体的六个面贴上纹理之后的效果:

3dtexturing3dtexturing

结语

3D旋转立方体(带纹理贴图)源代码下载 master分支

单个图片的纹理贴图源码下载

Reference

相关文章推荐

cocos2dx 多重纹理贴图

myshader.vert attribute vec4 a_position; attribute vec4 a_color; attribute vec2 TextureCoord; vary...

关于cocos2dx下,图片数据的操作

在flash下,针对于图片的操作都是对位图数据的操作,读取改都很方便。 最近做一个小游戏,吃饼干, 大概内容就是一个完整的圆,点击到哪个点,那个点的附近都变成透明的。 对于这个功能,在fla...

cocos2dx 自带shader 创建一个三角形

HelloWorld.h #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" USI...

Cocos2dx-OpenGL ES2.0教程:编写自己的shader(2)

在上篇文章中,我给大家介绍了如何在cocos2d-x里面绘制一个三角形,当时我们使用的是cocos2d-x引擎自带的shader和一些辅助函数。在本文中,我将演示一下如何编写自己的shader,同时,...

DataWindow如何彻底禁止鼠标滚轮滚动到下一条或上一条记录

DataWindow如何彻底禁止鼠标滚轮滚动到下一条或上一条记录:方法一:other事件写    if  message.number  =  522  then  return  1方法二:(个人觉...

Cocos-x 3.2:从C++过渡到Lua

原文总结的非常好,都是我们学cocos2d-x以来摸索过的东西,如果早有这篇文章就能少走不少弯路了,特此截屏保存。原文链接:http://shahdza.blog.51cto.com/2410787/...

【ShaderToy】开篇

写在前面呜呼,好久没有写博客了,好惭愧。题外话,感觉越大就越想家,希望可以一直和家人在一起,哪怕只是坐在一起不说话也觉得很温暖,一想到要分开眼睛就开始酸,哎。开学还是爬上来老实更新博客学习吧~今天爬上...

六 cocos2dx(3.X)中使用shader

原文链接:http://blog.csdn.net/xufeng0991/article/details/47256583一 shader的基本概念1 什么是shadershader即着色器,就是专门...

肛门瘙痒,忌用热水反复烫洗

昨天,他难受得受不了了,来到武汉博仕肛肠医院肛肠科就诊,肛肠科的廖秀军博士说,最近肛门瘙痒患者明显增多,平时一天也就两三名患者,最近多至十余名。  检查发现,李先生同时患有内痔、外痔,过度的搔抓已经使...

Cocos2dx-OpenGL ES2.0教程:初识MVP(3)

在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix。它其实是一个uniform,每一个cocos2d-x预定义的shader都包含有这个uniform, ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)