OpenGL ES 学习教程(四) 买来墙纸，给立方体贴上！

上一篇制作了一个 彩色的旋转的 Cube ，丑爆了！

我不喜欢这种纯色的界面，想象一下，上图如果是纯色的，嗯。高大的武士，蓝色的。敏捷的女刺客，红色的。感觉不好。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn
如果想实现上图中的效果，那就要把 图片 贴到 人物模型上。这个一般是由美术同事们来完成 。

我们就来给昨天做好的 Cube ，贴上一张图片吧 ，就像给墙壁贴上墙纸。

首先来了解下 纹理坐标 和 顶点坐标



转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn
学术上，把一张图片 贴到 一个平面上，叫做纹理映射。

怎么映射呢？

看上图中，左边是顶点坐标(-1,1) 右边是纹理坐标 (0,1)

我们只要把纹理坐标的 (0,1) 对应到 顶点的 (-1,1) 就好了。

Tips：纹理坐标又称为 UV 坐标。

好，我搞来一张图片，把这个图片贴到 Cube上。



1、先来添加 Cube 对应 的 UV坐标。

glm::vec3 pos[] =
{
//Front
glm::vec3(-1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, 1.0f),

glm::vec3(-1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, 1.0f),
glm::vec3(-1.0f, 1.0f, 1.0f),

//back
glm::vec3(-1.0f, -1.0f, -1.0f),
glm::vec3(1.0f, -1.0f, -1.0f),
glm::vec3(1.0f, 1.0f, -1.0f),

glm::vec3(-1.0f, -1.0f, -1.0f),
glm::vec3(1.0f, 1.0f, -1.0f),
glm::vec3(-1.0f, 1.0f, -1.0f),

//left
glm::vec3(-1.0f, -1.0f, -1.0f),
glm::vec3(-1.0f, -1.0f, 1.0f),
glm::vec3(-1.0f, 1.0f, 1.0f),

glm::vec3(-1.0f, -1.0f, -1.0f),
glm::vec3(-1.0f, 1.0f, 1.0f),
glm::vec3(-1.0f, 1.0f, -1.0f),

//right
glm::vec3(1.0f, -1.0f, -1.0f),
glm::vec3(1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, 1.0f),

glm::vec3(1.0f, -1.0f, -1.0f),
glm::vec3(1.0f, 1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, -1.0f),

//up
glm::vec3(-1.0f, 1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, -1.0f),

glm::vec3(-1.0f, 1.0f, 1.0f),
glm::vec3(1.0f, 1.0f, -1.0f),
glm::vec3(-1.0f, 1.0f, -1.0f),

//down
glm::vec3(-1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, -1.0f, -1.0f),

glm::vec3(-1.0f, -1.0f, 1.0f),
glm::vec3(1.0f, -1.0f, -1.0f),
glm::vec3(-1.0f, -1.0f, -1.0f),
};

glm::vec2 uv[] =
{
//front
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1),

//back
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1),

//left
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1),

//right
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1),

//top
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1),

//down
glm::vec2(0, 0),
glm::vec2(1, 0),
glm::vec2(1, 1),

glm::vec2(0, 0),
glm::vec2(1, 1),
glm::vec2(0, 1)
};转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn
2、使用FreeImage读取图片的RGBA数据。
我写了一个 Texture2D 类，来读取图片数据。

void Texture2D::LoadTexture(const char* filename)
{
m_imageFilePath = std::string(filename);

//1、获取图片格式;
FREE_IMAGE_FORMAT imageformat = FreeImage_GetFileType(filename, 0);

//2、根据获取到的格式来加载图片;
FIBITMAP *bitmap = FreeImage_Load(imageformat, filename, 0);

//3、转化为rag 24色;
bitmap = FreeImage_ConvertTo32Bits(bitmap);

//4、获取数据指针;
BYTE *pixels = (BYTE*)FreeImage_GetBits(bitmap);

//5、使用;
int width = FreeImage_GetWidth(bitmap);
int height = FreeImage_GetHeight(bitmap);

//6、交换数据，获得正确的颜色 交换1和3 RGB 原来存储的是 BGR?;
for (int i = 0; i < width * height * 4; i += 4)
{
BYTE r = pixels[i];
pixels[i] = pixels[i + 2];
pixels[i + 2] = r;
}

//1、产生一个纹理ID;
glGenTextures(1, &m_textureId);

//2、关联绑定这个纹理ID;
glBindTexture(GL_TEXTURE_2D, m_textureId);

//3、指定放大，缩小滤波方式，线性滤波，即放大缩小的插值方式;
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

//将图片rgb数据上传到OpenGL,在这一步才把数据从内存Copy到显存;
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixels);

//释放内存;
FreeImage_Unload(bitmap);
}

3、在Shader 中添加 图片纹理变量。我们要在C++代码中把 读取出来的图片RGBA数据设置到Shader中。在GLProgram_Texture.h 文件中。
virtual bool Initialize()
{
const char* vertexShader=
{
"precision lowp float;"
"uniform mat4 m_mvp;"
"attribute vec3 m_position;"
"attribute vec4 m_color;"
"attribute vec2 m_uv;"

"varying vec4 m_outColor;"
"varying vec2 m_outUV;"

"void main()"
"{"
" vec4 pos=vec4(m_position,1);"
" gl_Position=m_mvp*pos;"
" m_outColor=m_color;"
" m_outUV=m_uv;"
"}"
};

const char* fragmentShader =
{
"precision lowp float;"
"uniform sampler2D m_texture;"

"varying vec4 m_outColor;"
"varying vec2 m_outUV;"

"void main()"
"{"
" gl_FragColor=m_outColor*texture2D(m_texture,m_outUV);"
"}"
};

bool ret = createProgram(vertexShader, fragmentShader);
if (ret)
{
m_position = glGetAttribLocation(m_programId, "m_position");
m_color = glGetAttribLocation(m_programId, "m_color");
m_mvp = glGetUniformLocation(m_programId, "m_mvp");

m_uv = glGetAttribLocation(m_programId, "m_uv");
m_texture = glGetUniformLocation(m_programId, "m_texture");
}
return ret;
}

大概就是这样，然后如果要实现透明效果，不要忘记开启 Blend 。
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);



示例工程下载:
http://pan.baidu.com/s/1gdsIcpH