OpenGL ES学习之路(3.2) GLSL语法介绍修饰符与渲
2019-03-05 本文已影响0人
velue
GLSL 语法介绍修饰符
常用修饰符有三个：
- uniform
- attribute
- varying
uniform
- unifom 是外部Application传递给vertex/fragment shader 变量修饰
- 通过glUniform**() 为当前程序对象指定Uniform变量的值
- 在veterx，fragment shader 程序内部，Unifom 和contst表示它不能被shader修改。
- 注意⚠️
- 1.被unifom 修饰的变量，只能被shader使用read，不能使用write
- 2.如果unifom 在vertex/fragment 两者的声明方式一样，则它们可以被vertex和fragment共享。理解为：vertex与fragment的全局变量
- 使用场景
- 1.变换矩阵
- 2.材质
- 3.光照和颜色等
使用:
//unifom 修饰符 mat4 类型 viewProjMatrix 变量名
uniform mat4 viewProjMatrix; 投影与模型视图矩阵
uniform mat4 viewMatrix; //模型视图矩阵
uniform mat4 lightPosition; //光源位置
attribute
- attribute变量，只能在vertex Shader中使用.(不能在fragment shader 中使用以及声明)
- 在Application中，通过glBindAttribLocation()函数 来绑定每变量的位置，然后在使用glVertextAttribPointer()为变量赋值，可以使用glGetAttribLocation()来获取变量
- 使用场景：
- 顶点坐标、法线、纹理坐标、顶点颜色等等
- 如何使用？
attribute vec4 a_position;
gl_position = viewProjMatrix * a_position;
varying
- varying, 是vertex与fragment shader 之间左数据传递使用，如果需要做传递，则需要保证vertex shader 与 fragment shader 中两者的声明必须保持一致(修饰符，类型，类型，变量名)否则，不可实现数据传递。
- 使用场景：
- 纹理坐标、顶点颜色等等
渲染图片实例
-
效果
image.png
实现源码案例，总共分为七个大步骤
-
前期准备
-
首先创建一个控制器名为GLViewController和GLView并在storyBoard当中修改配置
image.png
image.png
image.png
-
创建两个
empty的文件，分别名shaderv.vsh和shaderf.fsh
image.png
-
然后在GLViewController当中设置
#import "GLViewController.h" #import "GLView.h" @interface GLViewController () @property (nonatomic,strong) GLView *myView; @end @implementation GLViewController - (void)viewDidLoad { [super viewDidLoad]; self.myView = (GLView *)self.view; } -
-
接下来步骤在GLView.m当中设置
#import "GLView.h"
#import <OpenGLES/ES2/gl.h>
@interface GLView ()
@property (nonatomic,strong) CAEAGLLayer *myEagLayer;
@property (nonatomic,strong) EAGLContext *myContext;
@property (nonatomic, assign) GLuint myColorRederBuffer;
@property (nonatomic, assign) GLuint myColorFrameBuffer;
@property (nonatomic, assign) GLuint myPrograme;
@end
@implementation GLView
- (void)layoutSubviews {
//1.创建图层
[self createLayer];
//2.设置上下文
[self setupContext];
//3.清空缓存区
[self deleteRederAndFrameBuffer];
//4.设置RederBuffer
[self setupRederBuffer];
//5.设置FrameBuffer
[self setupFrameBuffer];
//6.开始渲染
[self rederLayer];
}
- 创建图层
//1.创建图层
- (void)createLayer {
//绘图层开辟空间
/**
重写layerClass，将GLView返回的图层从CALayer替换成CAEAGLLayer
*/
self.myEagLayer = (CAEAGLLayer *)self.layer;
//设置放大倍数
[self setContentScaleFactor:[[UIScreen mainScreen]scale]];
//设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
/*
kEAGLDrawablePropertyRetainedBacking 表示绘图表面显示后，是否保留其内容。这个key的值，是一个通过NSNumber包装的bool值。如果是false，则显示内容后不能依赖于相同的内容，ture表示显示后内容不变。一般只有在需要内容保存不变的情况下，才建议设置使用,因为会导致性能降低、内存使用量增减。一般设置为flase.
kEAGLDrawablePropertyColorFormat
可绘制表面的内部颜色缓存区格式，这个key对应的值是一个NSString指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA8；
kEAGLColorFormatRGBA8：32位RGBA的颜色，4*8=32位
kEAGLColorFormatRGB565：16位RGB的颜色，
kEAGLColorFormatSRGBA8：sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响。
*/
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:NO],kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
}
//1.1
+ (Class)layerClass {
//需要修改父类
return [CAEAGLLayer class];
}
- 2.设置上下文
//2.设置上下文
- (void)setupContext {
//1.指定OpenGL ES 渲染API版本，我们使用2.0
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.将局部context 变成全局的
self.myContext = context;
}
- 3.请空缓存区
//3.请空缓存区
- (void)deleteRederAndFrameBuffer {
//1.导入框架#import <OpenGLES/ES2/gl.h>
/*
2.创建2个帧缓存区，渲染缓存区，帧缓存区
@property (nonatomic , assign) GLuint myColorRenderBuffer;
@property (nonatomic , assign) GLuint myColorFrameBuffer;
buffer分为frame buffer 和 render buffer2个大类。其中frame buffer 相当于render buffer的管理者。frame buffer object即称FBO，常用于离屏渲染缓存等。render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
//绑定buffer标识符
glGenRenderbuffers(GLsizei n, GLuint *renderbuffers)
glGenFramebuffers(GLsizei n, GLuint *framebuffers)
//绑定空间
glBindRenderbuffer(GLenum target, GLuint renderbuffer)
glBindFramebuffer(GLenum target, GLuint framebuffer)
*/
glDeleteBuffers(1, &_myColorRederBuffer);
self.myColorRederBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
- 4.设置RederBuffer
//4.设置RederBuffer
- (void)setupRederBuffer {
//1.定义一个缓存区
GLuint buffer;
//2.申请一个缓存区标志
glGenBuffers(1, &buffer);
//3.强引用
self.myColorRederBuffer = buffer;
//4.将表示绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRederBuffer);
//frame buffer仅仅是管理者，不需要分配空间；render buffer的存储空间的分配，对于不同的render buffer，使用不同的API进行分配，而只有分配空间的时候，render buffer句柄才确定其类型
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
- 5.设置FrameBuffer
//5.设置FrameBuffer
- (void)setupFrameBuffer {
//1.定义一个缓存区
GLuint buffer;
//2.申请一个缓存区标志
glGenBuffers(1, &buffer);
//3.强引用
self.myColorFrameBuffer = buffer;
//4.将表示绑定到GL_FRAMEBUFFER
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
//生成空间之后，则需要将renderbuffer跟framebuffer进行绑定，调用glFramebufferRenderbuffer函数进行绑定，后面的绘制才能起作用
//5.将_myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRederBuffer);
//接下来，可以调用OpenGL ES进行绘制处理，最后则需要在EGALContext的OC方法进行最终的渲染绘制。这里渲染的color buffer,这个方法会将buffer渲染到CALayer上。- (BOOL)presentRenderbuffer:(NSUInteger)target;
}
- 6.开始渲染
//6.开始渲染
- (void)rederLayer {
//设置清屏颜色
glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
//清除屏幕
glClear(GL_COLOR_BUFFER_BIT);
//1.设置屏幕大小
GLfloat 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.读取顶点、片元着色器程序
NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
//3.加载shader
self.myPrograme = [self loadShaders:vertFile withFrag:fragFile];
//4.连接
glLinkProgram(self.myPrograme);
GLint linkStatus;
//获取链接状态
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE) {
GLchar message[512];
glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
NSString *messageString = [NSString stringWithUTF8String:message];
NSLog(@"Program Link Error:%@", messageString);
return;
}
NSLog(@"Program Link Success!");
//5.使用program
glUseProgram(self.myPrograme);
//6.设置顶点、纹理坐标
//前3个是顶点坐标，后2个是纹理坐标
GLfloat attrArr[] =
{
0.5f, -0.5f, -1.0f, 1.0f, 0.0f, // 右下
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f, // 左上
-0.5f, -0.5f, -1.0f, 0.0f, 0.0f, // 左下
0.5f, 0.5f, -1.0f, 1.0f, 1.0f, //右上
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f, //左上
0.5f, -0.5, -1.0f, 1.0f, 0.0f, //右下
};
/*
// 解决渲染图片倒置解决方案一、
//修改为以下坐标，并且在获取渲染弧度radians 将10改为0 即可
//1.解决渲染图片倒置问题：
GLfloat attrArr[] =
{
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, //右下
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // 右上
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // 右下
};
*/
//顶点缓存区
GLuint attrBuffer;
//申请一个缓存区标识符
glGenBuffers(1, &attrBuffer);
//将atrrBuffer绑定到GL_ARRAY_BUFFER 标识符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//把顶点数据从GPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//将顶点数据通过myPrograme中的传递到顶点着色程序的position
//1.glGetAttribLocation,用来获取vertex attribute的入口的.2.告诉OpenGL ES,通过glEnableVertexAttribArray，3.最后数据是通过glVertexAttribPointer传递过去的。
//注意：第二参数字符串必须和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, (GLfloat *)NULL + 0);
//------处理纹理数据
//1.glGetAttribLocation,用来获取vertex attribute的入口的.
//注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
GLuint textColor = glGetAttribLocation(self.myPrograme, "textCoordinate");
//2.设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(textColor);
//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(textColor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
//加载纹理
GLuint t = [self setupTexture:@"timg"];
if (t == 0) {
NSLog(@"loaded Texture Failer");
return;
}
//注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
/*
一个一致变量在一个图元的绘制过程中是不会改变的，所以其值不能在glBegin/glEnd中设置。一致变量适合描述在一个图元中、一帧中甚至一个场景中都不变的值。一致变量在顶点shader和片断shader中都是只读的。首先你需要获得变量在内存中的位置，这个信息只有在连接程序之后才可获得
*/
//rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
// 解决渲染图片倒置解决方案二
// 直接将10 改为180
//获取渲染得弧度
float radians = 10 * 3.14159f / 180.0f;
//求得弧度对于的sin/cos值
float s = sinf(radians);
float c = cosf(radians);
//z轴旋转矩阵 参考3D数学第二节课的围绕z轴渲染矩阵公式
//为什么和公式不一样？因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
GLfloat zRotation[16] = {
c, -s, 0, 0,
s, c, 0 , 0,
0, 0, 1.0, 0,
0, 0, 0, 1.0,
};
//设置旋转矩阵
glUniformMatrix4fv(rotate, 1, GL_FALSE, &zRotation[0]);
glDrawArrays(GL_TRIANGLES, 0, 6);
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
#pragma mark - loadShader
//加载shader
- (GLuint)loadShaders:(NSString *)vert withFrag:(NSString *)frag {
//定义2个临时着色器对象
GLuint verShader, fragShader;
//创建program
GLint program = glCreateProgram();
//编译顶点着色程序、片元着色程序
//参数1: 编译完存储的底层地址
//参数2: 编译的类型，GL_VERTEX_SHADER(顶点)、
//参数3: 文件路径
[self complieShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self complieShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
//创建最终的程序
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
//连接shader
- (void)complieShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
//读取文件路径字符串
NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar *source = (GLchar *)[content UTF8String];
//创建一个shader（根据type类型)
*shader = glCreateShader(type);
//将顶点着色器源码附加到着色器对象上。
//参数1：shader,要编译的着色器对象 *shader
//参数2：numOfStrings,传递的源码字符串数量 1个
//参数3：strings,着色器程序的源码（真正的着色器程序源码）
//参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
glShaderSource(*shader, 1, &source, NULL);
//把着色器源码编译成目标代码
glCompileShader(*shader);
}
- (GLuint)setupTexture:(NSString *)fileName {
//1.获取图片的CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判断图片是否获取成功
if (!spriteImage) {
NSLog(@"Fail to Load image %@", fileName);
return 0;
}
//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上使用的颜色空间
参数7: 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);
//使用默认方式绘制，发现图片是到的
CGContextDrawImage(spriteContext, rect, spriteImage);
/*
解决图片倒置的方法三:
CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage);
*/
//6.画图完毕就释放上下文
CGContextRelease(spriteContext);
//5.绑定纹理到默认的纹理ID（这里只有一张图片，故而相当于默认于片元着色器里面的colorMap，如果有多张图不可以这么做）
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_NEAREST);
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;
//载入纹理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);
//绑定纹理
/**
参数1: 纹理维度
参数2: 纹理ID，因为只有一个纹理，给0就可以了。
*/
glBindTexture(GL_TEXTURE_2D, 0);
//释放spriteData
free(spriteData);
return 1;
}
案例中遇到的问题与解决方案
- 在案例当中会遇到图片倒置的问题，那么如何解决呢？
- 解决方法一：调整坐标并且在获取渲染弧度radians 将10改为0 即可
/*
//修改为以下坐标，并且在获取渲染弧度radians 将10改为0 即可
//1.解决渲染图片倒置问题：
GLfloat attrArr[] =
{
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, //右下
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // 右上
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // 右下
};
- 解决方法二： 直接将10度 改为180度
// 解决渲染图片倒置解决方案二
// 直接将10 改为180
//获取渲染得弧度
float radians = 10 * 3.14159f / 180.0f;
- 解决方法三：通过对图形的旋转调整，不过不建议这种使用方法，太麻烦
/*
解决图片倒置的方法三:
CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage);
*/
image.png
image.png
image.png
image.png
image.png
image.png
image.png
