第一篇笔记 iOS OpenGL ES菜鸟学习笔记（1）——画一个简单的三角形 其实已经写了很久了，其实研究OpenGL ES是为了在iOS原生App中使用AR。最近一直比较忙，也没有那么时间去鼓捣这个笔记，终于研究得差不多了，也就回来这里继续行骗了。（ps：菜鸟学习笔记，如有不对，大神请指教）

一、准备

从我们第一篇笔记上进行更改
准备一张图，什么图都可以（不要是白色，白色的东西在白色的背景下还能看见吗）
我这里用的一个郁金香的图片

什么是纹理这个我在文章末尾稍微介绍一下，有兴趣的可以看看。

二、修改vertices

因为要绘制纹理上去，所以我们必须在vertices上加上纹理坐标

// 这个数据类型用于存储每一个顶点数据
typedef struct {
    GLKVector3 positionCoords;  // 顶点数据
    GLKVector2 textureCoords;   // 纹理坐标
} SceneVertex;


// 创建本例中要用到的三角形顶点数据
// 这里的数据比上一个例子新增了纹理数据
static const SceneVertex vertices[] =
{
    {{-0.5, -0.5, 0.0}, {0.0, 0.0}},  // 左下
    {{ 0.5, -0.5, 0.0}, {1.0, 0.0}},  // 右下
    {{-0.5,  0.5, 0.0}, {0.0, 1.0}}  // 左上
};

三、- (void)viewDidLoad()

在这里我们要将图片实现读入到缓存中（如果在- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect中读入，那么将会浪费很多资源，毕竟绘制一次读入一次）

在第一篇文章的- (void)viewDidLoad()的末尾追加

    // 读入需要绘制的图片的CGImageRef内容
    // 毕竟OpenGL是基于C++的嘛，你直接给一个UIImage人怎么识别
    CGImageRef imageRefTulip = [UIImage imageNamed:@"tulip"].CGImage;
    
    // 使用GLKTextureLoader（纹理读取）从上边得到的imageRefTulip读取纹理信息
    GLKTextureInfo *textureInfoTulip = [GLKTextureLoader textureWithCGImage:imageRefTulip
                                                               options:nil
                                                                 error:nil];
    
    // 将读取到的纹理信息缓存到baseEffec的texture2d0中
    self.baseEffect.texture2d0.name = textureInfoTulip.name;
    self.baseEffect.texture2d0.target = textureInfoTulip.target;

从代码备注中直接可以看书每句代码干的事情。

GLKTextureInfo封装了刚创建的纹理缓存相关的信息，包括他的尺寸以及是否包含MIP贴图。我们这里只需要OpenGL ES标识符、名字和用于纹理的OpenGL ES目标。

GLKTextureLoader会自动调用glTexParameteri()方法来为创建的纹理缓存设置OpenGL ES取样模式和循环模式。其实就是告诉OpenGL ES怎么处理可用纹素的数量与需要被着色的片源的数量不匹配的情况（基本不存在两者相同的情况）。我们将在本文最后对此稍微介绍一下。

四、- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect

这里做的事情跟第一篇笔记其实没什么差别，只是多了一个纹理的绘制。

在执行绘制操作之前加入如下代码

    // 绘制纹理数据准备
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);     // 启用纹理
    glVertexAttribPointer(GLKVertexAttribTexCoord0,
                          2,
                          GL_FLOAT,
                          GL_FALSE,
                          sizeof(SceneVertex),
                          NULL + offsetof(SceneVertex, textureCoords));

其实到这里代码就没了，是不是很少。

五、运行

没有源码的博客不是好的示例
https://github.com/JunesYin/LyOpenGLES/tree/master/LyOpenGLES_02

六、一点纹理知识

说了要介绍就要介绍，一个字都不能少。

1、什么是纹理

纹理是一个用来保存图像的颜色元素值的OpenGL ES缓存。简单来说，渲染场景其实渲染很多个像素点，这些像素点都有各自的颜色。如果我们在渲染时针对每一个像素点指定颜色，这将会是一个非常庞大的工程量，试想一个像素点有多大，而iPhone的屏幕又有多少像素点，就算我们渲染10x10的一个正方形图像，这都需要指定100个像素点了。所以需要纹理贴图，使用纹理贴图使我们只需要关注渲染多大的场景，然后将需要呈现的图像绘制进这个场景就可以了（以上观点仅个人理解，如有错误，欢迎评论指正）。上边的例子就是将郁金香作为纹理贴图贴在我们绘制的三角形中。

2、纹理坐标系

纹理坐标系有一个命名为S和T的2D轴。如下图，一个纹理中无论有多少个纹素，纹理的尺寸永远在S轴上从0.0到1.0，T轴也是从0.0到1.0。从一个宽为2像素宽为16像素的图像初始化来的纹理，整个S轴有2像素，T轴有16像素。

3、如何对齐纹理

虽然我们给OpenGL ES提供了一个纹理贴图，但是它还是不知道要怎么利用我们给定的纹理对几何图形进行着色。咱们先来看几个名词：

• 视口（viewport）：帧缓存中的像素位置叫做视口。渲染时，GPU会转换纯数学的OpenGL ES坐标系中的X、Y、Z坐标为帧缓存中所对应真实的像素位置。
• 点阵化（rasterizing）：转换几何形状数据为帧缓存中的颜色像素的渲染步骤叫做点阵化。
• 片元（fragment）：每个颜色像素叫做片元。
  映射（mapping）：指定怎么对其纹理和顶点，以便让GPU知道每个片元的颜色由哪些纹素决定。这通过扩展为每个顶点保存的数据来实现：除了X、Y、Z坐标，每个顶点还给出了U和V坐标值。U坐标映射到S轴的位置，V坐标映射到T轴。不同的是{U，V}坐标可能会超出0.0到1.0的这个范围。

在每个顶点的X、Y、Z坐标被转换为视口坐标后，GPU会设置转换生成的三角形内的每个像素的颜色。当OpenGL ES没有使用纹理时，GPU会根据包含该片元的对象的顶点的颜色来计算每个片元的颜色。使用纹理时，GPU会根据当前绑定的纹理缓存中的纹素来计算每个片元的颜色。

Note：我们在上述例子中使用{-0.5, -0.5, 0.0}、{ 0.5, -0.5, 0.0}、{-0.5, 0.5, 0.0}这三个坐标点指定了一个三角形的三个顶点，这个三角形的宽度和高度在纯数学的OpenGL ES坐标系中是相等的。但是我们在绘制三角形时，帧缓存是按照像素来匹配屏幕坐标的。将坐标点转换为视口坐标，这使得所有绘制的几何图形都被拉伸以适合屏幕大小，iPhone屏幕的比例均为高大于宽，所以我们的例子中看起来高都大于宽。如果要控制这个转换，需要做一点操作，这个我们在后续文章会慢慢了解的。

4、取样模式

每个顶点的U和V坐标会附加到每个顶点在视口坐标中的最终位置。GPU会根据计算出来的每个片元的U、V位置从绑定的纹理中选择纹素，这个过程叫做取样。取样会把纹理的S和T坐标系与每个渲染的三角形的顶点的U、V坐标匹配起来。

如上图所示，在S和T坐标系中与{0.0，0.0}位置最近的纹素会被映射到拥有{0.0， 0.0}的顶点U、V坐标的顶点所对应的片元上。每个随后的片元位置对应于一个沿着S和T轴的与该片元在U、V坐标中的位置等比例的位置。例如，一个U、V坐标为{0.5， 0.5}的片元会被当前绑定的纹理中最接近中间位置的纹素所着色。

OpenGL ES支持多个不同的取样模式。当一个三角形生成的片元少于绑定的纹理的可用纹素时会发生什么。一个含有大量纹素的纹理被映射到帧缓存内一个只覆盖几个像素的三角形中，这种情况是很常见的，相反的情况也很常见。到底是怎么才能比较好的将片元与纹素对应起来呢？

先看看如下几个函数调用

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

4.1 GL_TEXTURE_MIN_FILTER

GL_TEXTURE_MIN_FILTER 参数适用于纹素过多的情况

• 使用GL_LINEAR 指定这种情况时，出现多个纹素对应一个片元时，从相配的多个纹素中取样颜色，使用线性内插法来混着这些颜色从而得到这个片元的颜色，简
  单来说就是混合与当前片元相配的所有纹素的颜色。这很可能出现一个纹理中不存在的颜色。
• 使用GL_NEAREST指定时，与该片元的U、V坐标最接近的纹素的颜色将被作为片元的颜色。例如，一个纹理是由交替的黑色纹素和白色纹素组成，GL_NEAREST会拾取与相近的一个纹素或另一个纹素，此时最终片元的颜色要么是黑色，要么是白色。

4.2 GL_TEXTURE_MAG_FILTER

GL_TEXTURE_MAG_FILTER 参数适用于纹素不足的情况，此时将唯一地映射一个或多个纹素到每个片元上时配置取样。

• 使用GL_LINEAR指定这种情况时，OpenGL ES将混合附近纹素的颜色来计算片元的颜色。GL_LINEAR有一个放大纹理的效果并将其模糊地出现在渲染的三角形片元上。
• 使用GL_NEAREST指定时，OpenGL ES仅仅拾取与片元的U、V位置接近的纹素的颜色，并放大纹理，这让纹素像素化地出现在渲染的三角形片元上。

Note：GLKTextureLoader会自动设置GL_TEXTURE_MIN_FILTER为GL_LINEAR。

5、循环模式

除了减小和放大过滤选项，当U、V坐标的值小于0或者大于1时，程序会指定发生什么。这里有两个选择：

· 尽可能多地重复纹理以填满映射到整个结合图形的U、V坐标区域；
· 每当片元的U、V坐标值超出纹理的S、T坐标系范围时，从纹理边缘取样纹素。

纹理的循环模式需要为S轴与T轴分开设置，来看看这几句代码

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

第一句代码：S轴，若片元的U坐标超出纹理的S坐标系范围，取样纹理边缘的纹素；
第二句代码：S轴，若片元的U坐标超出纹理的S坐标系范围，重复纹理；
第三局代码：T轴，若片元的V坐标超出纹理的T坐标系范围，取样纹理边缘的纹素；
第四局代码：T轴，若片元的V坐标超出纹理的T坐标系范围，重复纹理。

Note：GL_TEXTURE_WRAP_S和GL_TEXTURE_WRAP_T都会自动被设置为GL_CLAMP_TO_EDGE。

系列源码传送门：https://github.com/JunesYin/LyOpenGLES