索引绘图
引绘图是一种在绘制大网格(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-索引绘制旋转的金字塔+纹理
网友评论