示例1
示例图1金字塔，由6个三角形面组成，共有18个顶点。从图中可以看出三角形的顶点有重叠在一起的。最终可见的顶点为5个。可以理解为这个5个顶点通过其中3个顶点的不同组合，最终组合成金字塔6个三角形面的18个顶点。其中5个顶点都在不断的重复利用。
索引绘图就是通过索引的方式表示顶点之间的连接，将重复顶点复用进行图形绘制的一种技巧。
案例.gif
金字塔案例demo
添加纹理demo
纹理.gif
案例解析
1、GLSL自定义着色器
顶点着色器
attribute vec4 position;//顶点坐标
attribute vec4 positionColor;//顶点坐标颜色
uniform mat4 projectionMartix;//投影矩阵
uniform mat4 modelViewMartix;//模型视图矩阵
varying lowp vec4 varyColor;//顶点颜色--与片元着色器桥接
void main(){
//顶点颜色数据赋值给桥接变量
varyColor = positionColor;
//顶点坐标变换
vec4 vPos;
//4*4 * 4*4 * 4*1
//投影矩阵 * 模型视图矩阵 * 顶点向量
vPos = projectionMartix * modelViewMartix * position;
//将变换后顶点坐标赋值给内建变量
gl_Position = vPos;
}
片元着色器
//桥接的顶点颜色
varying lowp vec4 varyColor;
void main(){
//将桥接的顶点颜色数据赋值给内建变量
gl_FragColor = varyColor;
}
注意：
如果顶点的颜色少于顶点个数。其他部分会进行颜色插值，类似于渐变色。
如果不想进行插值，指定面颜色，不指定顶点颜色即可。
2、顶点数据处理和加载
顶点数据数组、顶点索引数组
//顶点数据数组
//顶点数据数组中前3位是顶点数据(x,y,z)，后3位为顶点颜色数据RGB
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,
};
顶点数据和索引数组的组合可对照开头示例图1理解。
加载顶点数据
1、申请顶点缓存标识符，将顶点数据绑定到GL_ARRAY_BUFFER标识符上
//(3).判断顶点缓存区是否为空，如果为空则申请一个缓存区标识符
if (self.myVertices == 0) {
glGenBuffers(1, &_myVertices);
}
//处理顶点数据
//将myVertices绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
2、将顶点数据从CPU内存中复制GPU
//把顶点数据从CPU复制到GPU
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
3、将顶点数据通过myProgram传递到自定义的顶点着色器程序的position
/**
* 1、glGetAttribLocation(<#GLuint program#>, <#const GLchar *name#>用来获取vertex attribute的入口的
* 2、告诉OpenGL ES，通过glEnableVertexAttribArray
* 3、最后数据通过glVertexAttribPointer传递过去
*/
//注意第二个参数字符串必须和shader.vsh中的position保持一致
GLuint position = glGetAttribLocation(self.myProgram, "position");
4、打开position(打开attribute通道,苹果默认attribute通道是关闭的)
//打开position
glEnableVertexAttribArray(position);
5、设置读取方式
/**
* glVertexAttribPointer(<#GLuint indx#>, <#GLint size#>, <#GLenum type#>, <#GLboolean normalized#>, <#GLsizei stride#>, <#const GLvoid *ptr#>)
* 参数
* 1、index 顶点数据索引
* 2、size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
* 3、type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
* 4、normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
* 5、stride,连续顶点属性之间的偏移量，默认为0；
* 6、指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
*/
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, NULL);
6、加载顶点的颜色数据(3、4、5步骤一样)
//(1).glGetAttribLocation,用来获取vertex attribute的入口的.
//注意：第二参数字符串必须和shaderv.glsl中的输入变量：positionColor保持一致
GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
//(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(positionColor);
//(3).设置读取方式
//参数1：index,顶点数据的索引
//参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
//参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
//参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
//参数5：stride,连续顶点属性之间的偏移量，默认为0；
//参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (float *)NULL + 3);
3、矩阵变换处理
获取myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址，如果找到则返回地址，否则返回-1，表示没有找到2个对象
GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
创建投影矩阵
//创建4 * 4投影矩阵
KSMatrix4 _projectionMatrix;
//获取单元矩阵
ksMatrixLoadIdentity(&_projectionMatrix);
//获取透视矩阵
/*
参数1：矩阵
参数2：视角，度数为单位
参数3：纵横比
参数4：近平面距离
参数5：远平面距离
*/
//透视变换，视角30°，aspect:宽、高纵横比
ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f);
将投影矩阵传递到顶点着色器
//将投影矩阵传递到顶点着色器
/*
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 矩阵，模型视图矩阵
KSMatrix4 _modelViewMatrix;
//获取单元矩阵
ksMatrixLoadIdentity(&_modelViewMatrix);
//平移，z轴平移-10
ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
创建4 * 4旋转矩阵
KSMatrix4 _rotationMatrix;
//(4)初始化为单元矩阵
ksMatrixLoadIdentity(&_rotationMatrix);
//(5)旋转
ksRotate(&_rotationMatrix, xDegree, 1.0, 0.0, 0.0); //绕X轴
ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //绕Y轴
ksRotate(&_rotationMatrix, zDegree, 0.0, 0.0, 1.0); //绕Z轴
把变换矩阵相乘(_modelViewMatrix矩阵与_rotationMatrix矩阵相乘)结合到模型视图
ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
将模型视图矩阵传递到顶点着色器
//将模型视图矩阵传递到顶点着色器
/*
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]);
4、使用索引绘图
//使用索引绘图
/*
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);
代码中顶点数据处理流程
索引绘图.png
5、在此基础上添加纹理图片
顶点着色器、片元着色器
attribute vec4 position;//顶点坐标
attribute vec4 positionColor;//顶点颜色
attribute vec2 textCoor;//新添纹理坐标数据
uniform mat4 projectionMartix;//投影矩阵
uniform mat4 modelViewMartix;//模型视图矩阵
varying lowp vec2 vTextCoor;//新添 纹理坐标数据 -- 与片元着色器桥接
varying lowp vec4 varyColor;//顶点颜色--与片元着色器桥接
void main(){
vTextCoor = textCoor;//纹理坐标数据赋值桥接变量
varyColor = positionColor;
vec4 vPos;
vPos = projectionMartix * modelViewMartix * position;
gl_Position = vPos;
}
precision highp float;//精度
varying lowp vec4 varyColor; //桥接的顶点颜色
varying lowp vec2 vTextCoor;//桥接的纹理坐标数据
uniform sampler2D colorMap;//纹理
void main(){
//获取纹素 纹理颜色
vec4 weakMask = texture2D(colorMap, vTextCoor);
vec4 mask = varyColor;//顶点颜色
float alpha = 0.3;
//顶点颜色、纹理颜色混合
vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
gl_FragColor = tempColor;
}
顶点数据
//顶点数据数组中前3位是顶点数据(x,y,z)，中间3位为顶点颜色数据RGB ，后两位纹理坐标(s,t)
GLfloat attrArr[] =
{
-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,//顶点
};
处理纹理坐标
//1、获取纹理坐标
GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoor");
//2、开启纹理attribute通道
glEnableVertexAttribArray(textCoor);
//3、设置读取方式
//注意sizeof(GLfloat) * 8 步长的修改(顶点、颜色读取方式步长一致修改)
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (float *)NULL + 6);
加载纹理(纹理解压)
-(GLuint)setupTexture:(NSString *)imgName{
//将UIImage图片转换成CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:imgName].CGImage;
if (!spriteImage) {
return 0;
}
//读取图片的宽、高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
//获取图片字节数
GLubyte *spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
//创建上下文
/*
参数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);
//在CGContextRef上下文中将图像绘制出来
/*
CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
CGContextDrawImage
参数1：绘图上下文
参数2：rect坐标
参数3：绘制的图片
*/
CGRect rect = CGRectMake(0, 0, width, height);
//使用默认绘制方式
CGContextDrawImage(spriteContext, rect, spriteImage);
//绘制完毕释放空间
CGContextRelease(spriteContext);
//绑定纹理到默认的纹理id
glBindTexture(GL_TEXTURE_2D, 0);
//设置纹理属性
/*
参数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;
}
设置纹理采样器 sampler2D
//设置纹理采样器 sampler2D
//将纹理数据传入着色器glUniform1i(<#GLint location#>, <#GLint x#>)
// <#GLint x#> 纹理层数。默认0。还有其他层。设置0层完成，在依次设置1、2...层
//从program中获取纹理glGetUniformLocation(<#GLuint program#>, <#const GLchar *name#>)
glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);
屏幕快照 2020-08-10 11.13.36.png