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

本文将在基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)的基础之上,添加纹理贴图支持。最后,本文会把纹理贴图扩展至3D立方体上面。

基本方法

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

  • 首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去;

  • 然后,把内存里面的纹理传给GPU(glTexImage2D,可通过glBindTexture将纹理绑定到纹理对象上,这样就不用每一次都加载纹理,提高效率)

  • 最后,在fragment shader里面通过采样器,就可以根据vertex shader传递过来的纹理坐标把纹理上面的颜色值用插值的方式映射到每一个像素上去。

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

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

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

typedef struct {
float Position[];
float Color[];
float TexCoord[];
} Vertex;

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

Vertex data[] =
{
{{-,-},{,,,},{,}},
{{,-},{,,,},{,}},
{ {-,},{,,,},{,}},
{{,},{,,,},{,}}
};

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

生成纹理

纹理的使用与之前的VBO使用方式差不多,都是先glGenXXX,然后glBindXXX,然后再把绑定数据。

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

GLuint textureId;

然后是生成纹理:

glGenTextures(, &textureId);

绑定纹理

一旦纹理生成好以后,我们就需要把实际的纹理数据通过这个id传递给GPU。在传递纹理到GPU之前,

我们首先要把一张图片读到内存里面来。因为GPU是不认识png图片的,它只认识二进制的图像数组:

Image *image = new Image;
std::string imagePath = FileUtils::getInstance()->fullPathForFilename("HelloWorld.png");
image->initWithImageFile(imagePath);

然后,我们需要设置纹理在放大或者缩小的时候的插值方法(filter)以及在指定的纹理坐标超出(0-1)的范围的时候应该采用的策略(Wrap):

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE );

最后,我们把纹理数据传递给GPU。

unsigned char *imageData = image->getData();
int width = image->getWidth();
int height = image->getHeight();
//调用此方法把imageData的图像数据传递给GPU
glTexImage2D(GL_TEXTURE_2D, , GL_RGB, width, height, , GL_RGB,
GL_UNSIGNED_BYTE,//must be GL_UNSIGNED_BYTE
imageData);
//别忘了释放image内存
CC_SAFE_DELETE(image);

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

修改Shader

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

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,,);
v_fragmentColor = a_color;
v_coord = a_coord;
}

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

接下来是fragment shader的代码:

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方法之前调用下列方法就可以了:

GL::bindTexture2D(textureId);

运行结果

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

让立方体不再裸奔

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

#define TEX_COORD_MAX   1
Vertex Vertices[] = {
// Front
{{, -, }, {, , , }, {TEX_COORD_MAX, }},
{{, , }, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{-, , }, {, , , }, {, TEX_COORD_MAX}},
{{-, -, }, {, , , }, {, }},
// Back
{{, , -}, {, , , }, {TEX_COORD_MAX, }},
{{-, -, -}, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{, -, -}, {, , , }, {, TEX_COORD_MAX}},
{{-, , -}, {, , , }, {, }},
// Left
{{-, -, }, {, , , }, {TEX_COORD_MAX, }},
{{-, , }, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{-, , -}, {, , , }, {, TEX_COORD_MAX}},
{{-, -, -}, {, , , }, {, }},
// Right
{{, -, -}, {, , , }, {TEX_COORD_MAX, }},
{{, , -}, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{, , }, {, , , }, {, TEX_COORD_MAX}},
{{, -, }, {, , , }, {, }},
// Top
{{, , }, {, , , }, {TEX_COORD_MAX, }},
{{, , -}, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{-, , -}, {, , , }, {, TEX_COORD_MAX}},
{{-, , }, {, , , }, {, }},
// Bottom
{{, -, -}, {, , , }, {TEX_COORD_MAX, }},
{{, -, }, {, , , }, {TEX_COORD_MAX, TEX_COORD_MAX}},
{{-, -, }, {, , , }, {, TEX_COORD_MAX}},
{{-, -, -}, {, , , }, {, }}
};

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

结语

其实我们在生成纹理的时候,还可以使用下面两种简化的方法:

//method2: the easier way
Texture2D *texture = new Texture2D;
texture->initWithImage(image);
textureId = texture->getName();
//method3: the easiest way
Sprite *sprite = Sprite::create("HelloWorld.png");
textureId = sprite->getTexture()->getName();

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

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

Reference

http://open.gl/textures

纹理立方体

来源网址:http://4gamers.cn/archives/551

基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)的更多相关文章

  1. 基于Cocos2d-x学习OpenGL ES 2.0系列——使用VBO索引(4)

    在上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了.在这篇文章中,我们不再画三角形了,改为画四边形.下篇教程,我们就可以画立方体了, ...

  2. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个三角形(1)

    前言 在本系列教程中,我会以当下最流行的2D引擎Cocos2d-x为基础,介绍OpenGL ES 2.0的一些基本用法.本系列教程的宗旨是OpenGL扫盲,让大家在使用Cocos2d-x过程中,知其然 ...

  3. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之Shader准备(7)

    Cocos2d-x底层图形绘制是使用OpenGL ES协议的.OpenGL ES是什么呢? OpenGL ES(OpenGl for Embedded System)是OpenGL三维图形API的子集 ...

  4. 基于Cocos2d-x学习OpenGL ES 2.0系列——编写自己的shader(2)

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

  5. 基于Cocos2d-x学习OpenGL ES 2.0系列——OpenGL ES渲染之LayerColor(8)

    在前面文章中讲述了Cocos2d-x引擎OpenGL渲染准备Shader方面,本文主要讲解使用LayerColor来讲述OpenGL的渲染过程. 1.LayerColor对象创建 添加LayerCol ...

  6. 基于Cocos2d-x学习OpenGL ES 2.0系列——你的第一个立方体(5)

    在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率. 本教程将带领大家一起走进3D--绘制一个立方体.其实画立方体本质上和画三角形没什么区别,所有的 ...

  7. 基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP(3)

    在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如 ...

  8. 基于Cocos2d-x学习OpenGL ES 2.0之多纹理

    没想到原文出了那么多错别字,实在对不起观众了.介绍opengl es 2.0的不多.相信介绍基于Cocos2d-x学习OpenGL ES 2.0之多纹理的,我是独此一家吧.~~ 子龙山人出了一个系列: ...

  9. OpenGL ES课程VI之纹理贴图(原文对照)

    http://www.educity.cn/wenda/92368.html OpenGL ES教程VI之纹理贴图(原文对照) OpenGL ES Tutorial for Android – Par ...

随机推荐

  1. dvwa 源码分析(二) --- dvwaPage.inc.php分析

    在setup.php中,包含了这个文件,所以这里分析这个文件. <?php if( !defined( 'DVWA_WEB_PAGE_TO_ROOT' ) ) { define( 'DVWA S ...

  2. ios NSString format 保留小数点 float double

    self.orderCost.text = [NSStringstringWithFormat:@"%.1f元",self.order.cost.floatValue]; %.1f ...

  3. C语言 · 输出日历

    算法提高 输出日历   时间限制:1.0s   内存限制:512.0MB      按照下述格式打印2006年12月日历: Calendar 2006-12---------------------- ...

  4. sql server 查找主键、外键、索引、约束

    主键约束 SELECT   tab.name AS [表名],   idx.name AS [主键名称],   col.name AS [主键列名] FROM   sys.indexes idx    ...

  5. 存储过程中得到新增数据的ID

    数据库中有自增字段UID 存储过程如下: CREATE     PROCEDURE   AddUser   (   @Username           nvarchar(50),   @Email ...

  6. USB 之传输编码格式 NRZI 介绍

    记录NRZI (Non-Return-to-Zero Inerted code) 非归零翻转编码,之前,我先稍微记录一下他的前身. RZ 编码(Return- to - zero coding) RZ ...

  7. buildroot 使用本地交叉编译器记录

    继上一次glibc bug 事件后,剑锋就说文件系统要用统一的交叉编译器.所以今天就试了一下,便记录一下 在官网下载干净的 buildroot 进入解压后的 buildroot 目录 步骤: make ...

  8. JVM 详谈

    JVM 详谈 本来这次应该讲讲ORM 的几个框架,但是笔者还没有完全总结出来,所以这里先插入一次学习JVM的心得.作为一个Java程序员,如果不了解JVM的工作原理,就很难从底层去把 握Java语言和 ...

  9. python中time类型,datetime类型的关系与互相转换

    一.time模块 time模块提供各种操作时间的函数       一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一 ...

  10. MySql: ”Commands out of sync“Error (Connect/C++)

    使用 Connector/C++ 查询 Mysql , 连续调用存储过程时 会出现如下: Commands out of sync; you can't run this command now,st ...