GLSL
GLSL语言就是编写自定义着色器的语言，Xcode并不支持编译和链接，需要开发者手动去设置。GLSL语言编写的着色器其本质就是一个字符串，一般用.vsh和.fsh做后缀区分顶点着色器和片元着色器。
*在着色器中，尽可能不要用中文注释，否则可能会报错
GLSL语言常用的API
- 向量数据类型（vec2,vec3,vec4比较常用）
| 类型 | 描述 |
|---|---|
| vec2,vec3,vec4 | 2分量、3分量、4分量浮点向量 |
| ivec2,ivec3,ivec4 | 2分量、3分量、4分量整型向量 |
| uvec2,uvec3,uvec4 | 2分量、3分量、4分量无符号整型向量 |
| bvec2,bvec3,bvec4 | 2分量、3分量、4分量bool型向量 |
- 矩阵数据类型
| 类型（mat列×行） | 描述 |
|---|---|
| mat2,mat2x2 | 两⾏两列 |
| mat3,mat3x3 | 三行三列 |
| mat4,mat4x4 | 四行四列 |
| mat2x3 | 三行两列 |
| mat2x4 | 四行两列 |
| mat3x2 | 两行三列 |
| mat3x4 | 四行三列 |
| mat4x2 | 两行四列 |
| mat4x3 | 三行四列 |
- 变量存储限定符
varying：当片元着色器中用到顶点着色器中的某个变量时，只需要在片元着色器中定义一样的变量名然后用该限定符修饰即可。
attribute：该修饰符主要用于客户端想顶点着色器传递顶点、纹理、颜色、法线等数据。
uniform：在着色器中该修饰符常用来修饰常量，在着色器中该修饰符修饰的属性一般不建议修改，在客户端传入数据的时候修改。（例如视图矩阵，投影矩阵，投影视图矩阵等）
常用限定符
| 限定符 | 描述 |
|---|---|
| <none> | 只是普通的本地变量，外部不见，外部不可访问 |
| const | ⼀个编译常量，或者说是⼀个对函数来说为只读的参数 |
| in/varying | 从以前阶段传递过来的变量 |
| in/varying centroid | ⼀个从以前的阶段传递过来的变量，使⽤质⼼插值 |
| out/attribute | 传递到下⼀个处理阶段或者在⼀个函数中指定⼀个返回值 |
| out/attribute centroid | 传递到下⼀个处理阶段，质心插值 |
| uniform | ⼀个从客户端代码传递过来的变量，在顶点之间不做改变 |
自定义着色器创建及使用流程
一、创建
顶点着色器
- 创建顶点坐标和纹理坐标的变量，用attribute修饰
- 创建一个用varying修饰的纹理坐标，使得片元着色器能够从顶点着色器获取纹理坐标
- 创建内建变量gl_Position（用于存放顶点着色器处理后的结构）
- 创建main函数，用于顶点坐标的转换处理及处理结果的赋值
//顶点坐标
attribute vec4 position;
纹理坐标
attribute vec2 textCoordinate;
//纹理坐标
varying lowp vec2 varyTextCoord;
void main(){
//通过varying 修饰的varyTextCoord,将纹理坐标传递到片元着色器
varyTextCoord = textCoordinate;
//给内江变量gl_Position赋值
gl_Position = position;
}
片元着色器
- 设置片元着色器float类型数据的默认精度
- 定义纹理坐标变量，用varying修饰，变量名必须跟顶点着色器中的纹理坐标变量名相同，否则获取不到数据。
- 定义纹理采样器，用unifom修饰，用于获取纹理坐标每个像素点的纹素（纹理坐标点的像素）
- 创建内建变量gl_FragColor（用于存放顶点着色器处理后的结构）
- 创建main函数，用于处理纹理的填充，并将处理后的颜色值赋值
//指定float的默认精度
precision highp float;
//纹理坐标
varying lowp vec2 varyTextCoord;
//纹理采样器（获取对应的纹理ID）
uniform sampler2D colorMap;
void main(){
//texture2D(纹理采样器，纹理坐标)，获取对应坐标纹素
//纹理坐标添加到对应像素点上，即将读取的纹素赋值给内建变量 gl_FragColor
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
二、初始化
1、 创建图层setupLayer
//1、创建图层
- (void)setupLayer{
// 1、创建特殊图层
self.myEagLayer = (CAEAGLLayer*)self.layer;
// 2、设置scale
[self setContentScaleFactor:[[UIScreen mainScreen] scale]];
// 3、设置描述属性
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false, kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];
}
+ (Class)layerClass{
return [CAEAGLLayer class];
}
参数说明
| 属性 | 说明 | 默认值 |
|---|---|---|
| kEAGLDrawablePropertyRetainedBacking | 表示绘图表面显示后，是否保留其内容 | false |
| kEAGLDrawablePropertyColorFormat | 可绘制表面的内部颜色缓存区格式 | kEAGLColorFormatRGBA8 |
2、 创建上下文setupContext
上下文主要是用于保存OpenGL ES中的状态，是一个状态机，不论是GLKIt还是GLSL，都是需要context的
//2、创建上下文
- (void)setupContext{
// 1、指定OpenGL ES 渲染API版本
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
// 2、创建图形上下文
EAGLContext *context = [[EAGLContext alloc] initWithAPI:api];
// 3、判断是否创建成功
if (!context) {
NSLog(@"Create context failed!");
return;
}
// 4、设置图形上下文
if (![EAGLContext setCurrentContext:context]) {
NSLog(@"setCurrentContext failed");
return;
}
// 5、将局部变量赋值给全局变量
self.myContext = context;
}
3、 清理缓冲区deleteRenderAndFrameBuffer
//3、清空缓存区
- (void)deleteRenderAndFrameBuffer{
// 清空渲染缓存区
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
// 清空帧缓存区
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
4、 申请标识符并绑定到缓冲区
- RenderBuffer：是一个通过应用分配的2D图像缓冲区，需要附着在FrameBuffer上
- FrameBuffer：是一个收集颜色、深度和模板缓存区的附着点，简称FBO，即是一个管理者，用来管理RenderBuffer，且FrameBuffer没有实际的存储功能，真正实现存储的是RenderBuffer
FrameBuffer有3个附着点
- 颜色附着点（Color Attachment）：管理纹理、颜色缓冲区
- 深度附着点（depth Attachment）：会影响颜色缓冲区，管理深度缓冲区（Depth Buffer）
- 模板附着点（Stencil Attachment）：管理模板缓冲区（Stencil Buffer）
RenderBuffer有3种缓存区 - 深度缓存区（Depth Buffer）：存储深度值等
- 纹理缓存区：存储纹理坐标中对应的纹素、颜色值等
- 模板缓存区（Stencil Buffer）：存储模板
设置RenderBuffer
- (void)setupRenderBuffer{
// 1、定义一个缓存区ID
GLuint buffer;
// 2、申请一个缓存区标识符
glGenRenderbuffers(1, &buffer);
// 3、赋值给全局变量
self.myColorRenderBuffer = buffer;
// 4、将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
// 5、将可绘制对象drawable object的CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
设置FrameBuffer，将RenderBuffer通过glFramebufferRenderbuffer函数绑定到FrameBuffer中的GL_COLOR_ATTACHMENT0附着点上，通过FrameBuffer来管理RenderBuffer，RenderBuffer存储相关数据到相应缓存区
//5、设置FrameBuffer
- (void)setupFrameBuffer{
// 1、定义一个ID
GLuint buffer;
// 2、申请一个缓存区标识符
glGenBuffers(1, &buffer);
// 3、赋值给全局变量
self.myColorFrameBuffer = buffer;
// 4、将标识符绑定到GL_FRAMEBUFFER
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
// 5、将渲染缓存区的myColorRenderBuffer 通过 glFramebufferRenderbuffer函数绑定到GL_COLOR_ATTACHMENT0上
/*
glFramebufferRenderbuffer (GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer)
参数1：绑定到的目标
参数2：FrameBuffer的附着点
参数3：需要绑定的渲染缓冲区目标
参数4：渲染缓冲区
*/
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
二、着色器的链接
1、初始化
初始化背景颜色，清理缓存，需要将视口大小设置为屏幕大小
// 设置清屏颜色 & 清除屏幕
glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
// 1、设置视口大小
CGFloat scale = [[UIScreen mainScreen] scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
2、加载自定义着色器
自定义着色器的加载流程.png
- 读取自定义着色器文件的前提是需要获得文件的路径，将其传入loadShaders函数进行加载
NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
3、编译shader
- 根据文件路径读取着色器文件中的源码字符串，并将其转换为c中的字符串，类型为GLchar
- 根据传入的着色器类型type，调用glCreateShader函数创建一个带有唯一标识ID的着色器，此时着色器中并没有附加相对应的源码
- 将读取的着色器源码通过glShaderSource函数附加到创建的shader上，并将shader的ID返回给loadShaders函数中shader，以ID来获取并使用对应的着色器
- 通过glCompileShader函数将shader上附加的源码编译成目标代码
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
//1.读取文件路径字符串
NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar* source = (GLchar *)[content UTF8String];
NSLog(@"content %@， source %s", content, source);
//2.创建一个shader（根据type类型）
*shader = glCreateShader(type);
//3.将着色器源码附加到着色器对象上。
//参数1：shader,要编译的着色器对象 *shader
//参数2：numOfStrings,传递的源码字符串数量 1个
//参数3：strings,着色器程序的源码（真正的着色器程序源码）
//参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
glShaderSource(*shader, 1, &source,NULL);
NSLog(@"shader %d", *shader);
//4.把着色器源代码编译成目标代码
glCompileShader(*shader);
}
4、加载着色器
分别将顶点着色器和片元着色器编译完成后，并返回着色器对应的ID，然后通过glAttachShader函数将顶点和片元的shader分别附着到program上，然后释放不再使用的shader，并赋值给全局的program。
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
//1.定义2个零时着色器对象
GLuint verShader, fragShader;
//创建program
GLint program = glCreateProgram();
//2.编译顶点着色程序、片元着色器程序
//参数1：编译完存储的底层地址
//参数2：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
//参数3：文件路径
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
NSLog(@"verShader %d, fragShader: %d", verShader, fragShader);
//3.创建最终的程序
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//4.释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
5、链接program
- 通过glLinkProgram函数链接program
- 可以通过glGetProgramiv函数通过制定值GL_LINK_STATUS获取链接的状态，判断链接是成功还是失败
- 如果链接失败，可以通过glGetProgramIngoLog函数获取错误信息日志，根据错误信息一致去排查问题
6、使用链接成功的program
glUseProgram(self.myPrograme);
三、设置参数
1、处理顶点数据
- 设置顶点数据：主要是初始化顶点坐标和纹理坐标
- 开辟顶点缓存区：用于将顶点数据从CPU拷贝至GPU
- 打开顶点/片元的通道
2、开辟顶点缓冲区 - 通过GLuint定义一个顶点缓存区ID
- 通过glGenBuffers函数，申请一个顶点缓存区标识符
- 通过glBindBuffers函数，将缓存区的标识符绑定到GL_ARRAY_BUFFER
- 通过glBufferData函数，将顶点数据copy到GPU中
GLuint attrBuffer;
glGenBuffers(1, &attrBuffer);
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
3、打开顶点、片元通道
- 通过glGetAttribLocation函数，获取vertex attribute的入口，需要传入两个参数，一个是program，一个是自定义着色器文件中变量名字符串，这里着重强调下！！！第二个参数的字符串必须与着色器文件中对应的变量名保持一致！
- 通过glEnableVertexAttribArray函数，设置合适的格式从buffer里读取数据，即设置读取入口
- 通过glVertexAttribPointer函数，设置读取方式
// (1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
GLuint position = glGetAttribLocation(self.myPrograme, "position");
// (2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(position);
// (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(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, NULL);
// 9、处理纹理数据
// (1).glGetAttribLocation,用来获取vertex attribute的入口的.
// 注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
// (2).设置合适的格式从buffer里面读取数据
// (3).设置读取方式
GLuint textColor = glGetAttribLocation(self.myPrograme, "textCoordinate");
glEnableVertexAttribArray(textColor);
4、加载纹理
将png/jpg图片解压成位图，并通过自定义着色器读取纹理每个像素点的纹素
- 纹理解压缩：将UIImage转换为CGImageRef
- 图片重绘：使用CGContextRef常见的上下文，调用CGContextDrawImage函数使用默认方式进行绘制，再绘制之前，需要获取图片的大小、宽、高等数据，因为绘制时需要使用这些数据
- 绑定纹理：通过glBindTexture函数绑定，当只有一个纹理的时候，默认的纹理ID是0，且0一直是激活状态，因此是可以省略glGenTexture的
- 设置纹理属性：通过glTexParameteri函数分别设置 放大/缩小的过滤方式 和 S/T的环绕模式
- 载入纹理：通过glTexImage2D函数载入纹理，载入完成后，释放指向纹理数据的指针
5、设置纹理采样器
主要是获取纹理中对应像素点的的颜色值，即纹素 - 通过glGetUniformLocation函数，获取fragment uniform的入口，需要传入两个参数，一个是program，一个是自定义片元着色器文件中变量名字符串colorMap，这里着重强调下！！！第二个参数的字符串必须与着色器文件中对应的变量名保持一致！
- 通过glUniform1i函数获取纹素，有两个参数，第一个参数是 fragment uniform的入口，本质也是一个ID，第二个参数是纹理的ID，使用的是默认的ID 0
四、绘制
- 调用glDrawArrays函数指定图元连接方式进行绘制
- context调用presentRenderbuffer函数将绘制好的图片渲染到屏幕上进行显示
网友评论