索引绘图

引绘图是一种在绘制大网格(mesh)时的一种可以高效绘图的一种方式，普通的绘制三角形需要为每个三角形在array_buffer里面分配三个顶点的位置，每个顶点至少需要sizeof(glfloat)*3的内存。

其实在网格里面很多顶点都是共享的，也就是说不需要为重复的顶点再分配内存，需要找到一种方法为 GPU 指定绘图时绘制哪一个点，这就是索引的用处。

使用索引绘图，array_buffer 里面的顶点会默认的根据顶点再定点数组里面的位置设置索引，我们在绘图之前指定绘图的索引顺序，当绘图时调用 glDrawElements() ,GPU 就可以按照我们指定的顶点顺序绘图。

使用 GLSL 索引绘制可旋转的金字塔

实现最终的效果如下：

准备工作

创建一个空工程，导入第三方库以及变量的定义

自定义着色器

包含顶点着色器、片元着色器

顶点着色器

由于涉及到金字塔的旋转、矩阵变换，需要定义投影矩阵以及模型视图矩阵
main 函数中，因为 OpenGL ES 是以列向量为主，position 是列向量。而投影矩阵、模型视图矩阵是4*4矩阵，顶点变换的本质是矩阵叉乘（满足左边矩阵的列数等于右边矩阵的行数），所以 position 相乘的书序为 projectionMatrix * modelViewMatrix * position

//顶点坐标
attribute vec4 position;
//顶点颜色
attribute vec4 positionColor;
//投影矩阵
uniform mat4 projectionMatrix;
//模型视图矩阵
uniform mat4 modelViewMatrix;
//顶点颜色--用于与片元着色器桥接
varying lowp vec4 varyColor;

void main(){
    //将顶点颜色赋值给桥接的顶点颜色变量
    varyColor = positionColor;
    
    vec4 vPos;
    //顶点坐标变换： 4*4 x 4*4 x 4*1
    vPos = projectionMatrix * modelViewMatrix * position;
    //将变换后的顶点坐标赋值给内建变量
    gl_Position = vPos;
}

片元着色器

将顶点着色器中传过来的顶点颜色值赋值给内建变量 gl_FragColor
如果顶点颜色少于顶点个数，例如只有【红色，蓝色】，其他部分会进行颜色插值，类似于渐变色
如果不想进行插值，就需要指定面颜色，不指定顶点颜色

//桥接的顶点颜色
varying lowp vec4 varyColor;

void main(){
    //顶点颜色赋值给内建变量
    gl_FragColor = varyColor;
}

layoutSubviews 绘制图形

主要是绘制前的准备工作和使用索引绘制图形，主要包含以下 6 步

1.创建图层：创建绘制内容显示的载体

2.创建上下文：记录状态

3.清除缓存区：避免之前的缓存，对本次绘制造成影响

4.设置 RenderBuffer：用于实际存储颜色、顶点等的缓存区

5.设置 FrameBuffer：用于管理renderBuffer

6. 绘制

其中第六步主要包含以下步骤：

初始化
编译，加载自定义着色器程序
设置顶点数据
构建投影矩阵、模型视图矩阵传递到顶点着色器
索引绘图

编译，加载着色器及以上部分不做解释，在上一篇使用 GLSL 语言自定义着色器加载图片中有介绍，文末完整 demo 也有详细的注释，主要看设置顶点数据后的部分

设置顶点数组&索引数组

顶点数组中包含5个顶点，每个顶点有6个数据，前三位表示顶点坐标(x, y, z)，后三位表示颜色值GGB（透明度默认为1）
索引数组中每三个数表示一个三角形，其中的数据为顶点的标识符，表示三角形由这三个顶点构成

    //(1)顶点数组
    GLfloat attrArr[] = {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 1.0f, //左上0
        0.5f, 0.5f, 0.0f,       1.0f, 0.0f, 1.0f, //右上1
        -0.5f, -0.5f, 0.0f,     1.0f, 1.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,       0.0f, 1.0f, 0.0f, //顶点4
    };
    
    //(2).索引数组
    GLuint indices[] = {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };

开辟缓存区，将顶点数据从 CPU 拷贝到 GPU
处理顶点坐标数据：打开 attribute 通道，将顶点坐标传入顶点着色器
处理顶点颜色数据：打开 attribute 通道，将顶点颜色传入顶点着色器

以上部分在使用 GLSL 语言自定义着色器加载图片有提及，不再过多补充。

构建矩阵

主要是构建 mvp 矩阵（包含旋转矩阵）

获取顶点着色器中 uniform 修饰的投影矩阵、模型视图矩阵的入口

GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");

获取屏幕纵横比，用于设置透视投影

float width = self.frame.size.width;
float height = self.frame.size.height;
//获取纵横比
float aspect = width / height;

创建透视投影
- 定义一个4*4的投影矩阵
- 通过 ksMatrixLoadIdentity 将投影矩阵初始化为单元矩阵
- 通过 ksPerspective 方法，设置透视投影
- 通过 glUniformMatrix4fv 方法，将投影矩阵传递到 vertex shader

KSMatrix4 _projectionMatrix;

//(1)获取单元矩阵
ksMatrixLoadIdentity(&_projectionMatrix);

//(2)获取透视矩阵
/*
 参数1：矩阵
 参数2：视角，度数为单位
 参数3：纵横比
 参数4：近平面距离
 参数5：远平面距离
 参考PPT
 */
ksPerspective(&_projectionMatrix, 30.0f, aspect, 5.0f, 20.0f);

//(3)将投影矩阵传递到顶点着色器
/*
 void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
 参数列表：
 location:指要更改的uniform变量的位置
 count:更改矩阵的个数
 transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
 value:执行count个元素的指针，用来更新指定uniform变量
 */
glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat *)&_projectionMatrix.m[0][0]);

创建模型视图矩阵
- 定义一个4*4的模型视图矩阵
- 载入一个单元矩阵
- 将图形往屏幕里平移，即 z 轴平移-10，为了方便观察图形
- 定义一个4*4的旋转矩阵
- 载入一个单元矩阵
- 分别设置x、y、z相对应的旋转
- 将旋转矩阵与模型视图矩阵相乘，将结果存储到模型视图矩阵
- 将模型视图矩阵传递到vertex shader

KSMatrix4 _modelViewMatrix;

//(1)获取单元矩阵
ksMatrixLoadIdentity(&_modelViewMatrix);

//(2)平移，z轴平移-10
ksTranslate(&_modelViewMatrix, 0.0f, 0.0f, -10.0f);

//(3)创建一个4 * 4 旋转矩阵
KSMatrix4 _rotationMatrix;

//(4)初始化为单元矩阵
ksMatrixLoadIdentity(&_rotationMatrix);

//(5)旋转
ksRotate(&_rotationMatrix, xDegree, 1.0f, 0.0f, 0.0f);//绕X轴
ksRotate(&_rotationMatrix, yDegree, 0.0f, 1.0f, 0.0f);//绕Y轴
ksRotate(&_rotationMatrix, zDegree, 0.0f, 0.0f, 1.0f);//绕Z轴

//(6)把变换矩阵相乘.将_modelViewMatrix矩阵与_rotationMatrix矩阵相乘，结合到模型视图
ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);

//(7)将模型视图矩阵传递到顶点着色器
/*
 void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
 参数列表：
 location:指要更改的uniform变量的位置
 count:更改矩阵的个数
 transpose:是否要转置矩阵，并将它作为uniform变量的值。必须为GL_FALSE
 value:执行count个元素的指针，用来更新指定uniform变量
 */
glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, (GLfloat *)&_modelViewMatrix.m[0][0]);

开启正背面剔除

glEnable(GL_CULL_FACE);

索引绘图

    /*
     void glDrawElements(GLenum mode,GLsizei count,GLenum type,const GLvoid * indices);
     参数列表：
     mode:要呈现的画图的模型
                GL_POINTS
                GL_LINES
                GL_LINE_LOOP
                GL_LINE_STRIP
                GL_TRIANGLES
                GL_TRIANGLE_STRIP
                GL_TRIANGLE_FAN
     count:绘图个数
     type:类型
             GL_BYTE
             GL_UNSIGNED_BYTE
             GL_SHORT
             GL_UNSIGNED_SHORT
             GL_INT
             GL_UNSIGNED_INT
     indices：绘制索引数组

     */
    glDrawElements(GL_TRIANGLES, sizeof(indices) / sizeof(indices[0]), GL_UNSIGNED_INT, indices);
    
    //9.要求本地窗口系统显示OpenGL ES渲染<目标>
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];

按钮点击事件

主要用来更新角度、重新渲染

开启定时器
执行定时器方法

完整代码见 GitHubGLSL-索引绘制旋转的金字塔

纹理颜色混合

最终实现效果如下：

如何实现呢？在上面的基础上，添加纹理，主要针对以下部分做修改

顶点着色器

需要添加 attribute 修饰的纹理坐标& varying 修饰的桥接纹理坐标

attribute vec2 textCoor;
varying lowp vec2 vTextCoor;

在 main 函数中将纹理坐标桥接

vTextCoor = textCoor;

片元着色器

添加跟顶点着色器中一致的桥接纹理坐标，添加纹理采样器

varying lowp vec2 vTextCoor;
uniform sampler2D colorMap;

main 函数中，计算每个像素的纹素并与顶点颜色混合，将最终的颜色值赋值给gl_FragColor

vec4 weakMask = texture2D(colorMap,vTextCoor);
vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
gl_FragColor = tempColor;

render -> setupVertexs 修改顶点数组

增加顶点的纹理坐标

    //(1)顶点数组 前3顶点值（x,y,z），中间3位颜色值(RGB)，后面两位是纹理坐标
    GLfloat attrArray[] = {
        -0.5f, 0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       0.0f, 1.0f,//左上
        0.5f, 0.5f, 0.0f,       0.0f, 0.5f, 0.0f,       1.0f, 1.0f,//右上
        -0.5f, -0.5f, 0.0f,     0.5f, 0.0f, 1.0f,       0.0f, 0.0f,//左下
        0.5f, -0.5f, 0.0f,      0.0f, 0.0f, 0.5f,       1.0f, 0.0f,//右下
        0.0f, 0.0f, 1.0f,       1.0f, 1.0f, 1.0f,       0.5f, 0.5f,//顶点
    };
    
    //(2)索引数组
    GLuint indices[] = {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };

添加纹理相关操作

处理纹理数据

GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoor");
glEnableVertexAttribArray(textCoor);
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);
    
//加载纹理;-> 纹理解压
[self setupTexture];
    
glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);

setupTexture 将png/jpg 图片解压成位图，然后绑定、加载

- (GLuint)setupTexture
{
    //1、将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:@"timg.png"].CGImage;
    if (!spriteImage) {
        NSLog(@"Failed to load image");
        exit(1);
    }
    
    //2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.读取图片字节数 宽*高*4（RGBA）
    GLubyte *spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    /**
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
    //5、在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
    
    //6.使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //8、绑定纹理到默认的纹理ID
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.设置纹理属性
    /*
     参数1：纹理维度
     参数2：线性过滤、为s,t坐标设置模式
     参数3：wrapMode,环绕模式
     */
    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);
    
    float fw = width, fh = height;
    
    //10.载入纹理2D数据
    /**
     参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     参数2：加载的层次，一般设置为0
     参数3：纹理的颜色值GL_RGBA
     参数4：宽
     参数5：高
     参数6：border，边界宽度
     参数7：format
     参数8：type
     参数9：纹理数据
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);
    return 0;
}

完整代码见GitHub GLSL-索引绘制旋转的金字塔+纹理

使用 GLSL 索引绘制可旋转的金字塔+纹理

使用 GLSL 索引绘制可旋转的金字塔+纹理

索引绘图

使用 GLSL 索引绘制可旋转的金字塔

准备工作

自定义着色器

顶点着色器

片元着色器

layoutSubviews 绘制图形

1.创建图层：创建绘制内容显示的载体

2.创建上下文：记录状态

3.清除缓存区：避免之前的缓存，对本次绘制造成影响

4.设置 RenderBuffer：用于实际存储颜色、顶点等的缓存区

5.设置 FrameBuffer：用于管理renderBuffer

6. 绘制

按钮点击事件

纹理颜色混合

顶点着色器

片元着色器

render -> setupVertexs 修改顶点数组

添加纹理相关操作