OpenGL ES GLSL综合案例：三角形变换
2020-08-05 本文已影响0人
奉灬孝
效果图如下：
三角形变换.gif
1.引入工具类
首先，引入相关工具类
工具类.png
2.构建着色器
然后，构建顶点着色器shaderv.glsl和片元着色器shaderf.glsl
- 顶点着色器（
shaderv.vsh）
顶点着色器的各个属性在OpenGL ES GLSL自定义着色器加载图片中已经介绍过了，在此不再赘述。
因为需要旋转变换，所以加入了投影模型视图矩阵，至于顶点着色器内建变量gl_Position（顶点着色器计算之后的顶点结果）的矩阵相乘顺序projectionMatrix * modelViewMatrix * position，可以查看OpenGL向量、矩阵中的做的相关阐述。
attribute vec4 position;
attribute vec4 positionColor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying lowp vec4 varyColor;
void main()
{
varyColor = positionColor;
vec4 vPos;
vPos = projectionMatrix * modelViewMatrix * position;
gl_Position = vPos;
}
- 片元着色器（
shaderf.fsh）
varying lowp vec4 varyColor;
void main()
{
gl_FragColor = varyColor;
}
3.绘制
GLSL三角形变换绘制思路：
- 设置图层
- 设置上下文
- 清空缓存区
- 设置renderBuffer;
- 设置frameBuffer
- 绘制
前5步和OpenGL ES GLSL自定义着色器加载图片中相同，这里着重讲解一下第6步。
- 因为要做旋转平移变换，所以加上了投影模型视图矩阵
- 绘制方式也发生了变化，这里使用的是索引绘图。这样就节省了顶点绘图中不断重复添加顶点数据的麻烦。
//6.绘制
-(void)render
{
//1.清屏颜色
glClearColor(0, 0.0, 0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
CGFloat scale = [[UIScreen mainScreen] scale];
//2.设置视口
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
//3.获取顶点着色程序、片元着色器程序文件位置
NSString* vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"glsl"];
NSString* fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"glsl"];
//4.判断self.myProgram是否存在，存在则清空其文件
if (self.myProgram) {
glDeleteProgram(self.myProgram);
self.myProgram = 0;
}
//5.加载程序到myProgram中来。
self.myProgram = [self loadShader:vertFile frag:fragFile];
//6.链接
glLinkProgram(self.myProgram);
GLint linkSuccess;
//7.获取链接状态
glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
if (linkSuccess == GL_FALSE) {
GLchar messages[256];
glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
NSString *messageString = [NSString stringWithUTF8String:messages];
NSLog(@"error%@", messageString);
return ;
}else {
glUseProgram(self.myProgram);
}
//8.创建顶点数组 & 索引数组
//(1)顶点数组 前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,
};
//(3).判断顶点缓存区是否为空，如果为空则申请一个缓存区标识符
if (self.myVertices == 0) {
glGenBuffers(1, &_myVertices);
}
//9.-----处理顶点数据-------
//(1).将_myVertices绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
//(2).把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//(3).将顶点数据通过myPrograme中的传递到顶点着色程序的position
//1.glGetAttribLocation,用来获取vertex attribute的入口的.
//2.告诉OpenGL ES,通过glEnableVertexAttribArray，
//3.最后数据是通过glVertexAttribPointer传递过去的。
//注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
GLuint position = glGetAttribLocation(self.myProgram, "position");
//(4).打开position
glEnableVertexAttribArray(position);
//(5).设置读取方式
//参数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);
//10.--------处理顶点颜色值-------
//(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);
//11.找到myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址。如果找到则返回地址，否则返回-1，表示没有找到2个对象。
GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
float width = self.frame.size.width;
float height = self.frame.size.height;
//12.创建4 * 4投影矩阵
KSMatrix4 _projectionMatrix;
//(1)获取单元矩阵
ksMatrixLoadIdentity(&_projectionMatrix);
//(2)计算纵横比例 = 长/宽
float aspect = width / height; //长宽比
//(3)获取透视矩阵
/*
参数1：矩阵
参数2：视角，度数为单位
参数3：纵横比
参数4：近平面距离
参数5：远平面距离
参考PPT
*/
ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f); //透视变换，视角30°
//(4)将投影矩阵传递到顶点着色器
/*
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]);
//13.创建一个4 * 4 矩阵，模型视图矩阵
KSMatrix4 _modelViewMatrix;
//(1)获取单元矩阵
ksMatrixLoadIdentity(&_modelViewMatrix);
//(2)平移，z轴平移-10
ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
//(3)创建一个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轴
//(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]);
//14.开启剔除操作效果
glEnable(GL_CULL_FACE);
//15.使用索引绘图
/*
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);
//16.要求本地窗口系统显示OpenGL ES渲染<目标>
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
4.结构体拓展
因为要手动控制旋转角度，所以我们定义了如下成员变量来记录旋转状态。这里需要拓展一下结构体的相关知识，我们都知道，OC是一门动态语言，有一套运行时机制，会把OC中的类动态构造为C语言的结构体。OC类中定义的属性顺序会在编译时进行优化调整，其调整的规则就是先按数据类型的尺寸从小到大进行排列，相同尺寸的数据成员则按字母顺序进行排列。但是我们的成员变量，编译器是不会对这些成员变量的顺序进行优化，而是按定义的顺序在内存中进行排列，并且是优先于属性数据成员进行排列。至于排列顺序还是不懂的，可以参考iOS中编写高效能结构体的7个要点
{
NSTimer* myTimer;
float xDegree;
float yDegree;
float zDegree;
BOOL bX;
BOOL bY;
BOOL bZ;
}
然后定义我们的旋转方法即可
#pragma mark - XYClick
- (IBAction)XClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bX = !bX;
}
- (IBAction)YClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bY = !bY;
}
- (IBAction)ZClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bZ = !bZ;
}
-(void)reDegree
{
//如果停止X轴旋转，X = 0则度数就停留在暂停前的度数.
//更新度数
xDegree += bX * 5;
yDegree += bY * 5;
zDegree += bZ * 5;
//重新渲染
[self render];
}
纹理与颜色混合
1.修改纹理坐标
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,//顶点
};
Demo:
GLSLTriangleDemo
