函數介紹
- 創建著?器
GLuint glCreateShader(GLenum type)
type
— 創建著?器的類型,GL_VERTEX_SHADER
或者GL_FRAGMENT_SHADER
返回值
— 是指向新著?器對象的句柄 - 刪除著?器對象句柄
void glDeleteShader(GLuint shader)
shader
— 要刪除的著?器對象句柄 - 將著色器源碼附加到著色器上
void glShaderSource(GLuint shader , GLSizei count ,const GLChar * const *string, const GLint *length)
shader
— 指向著?器對象的句柄
count
— 著?器源字符串的數量,著?器可以由多個源字符串組成,但是每個著?器只有?個main函數
string
— 指向保存數量的count 的著?器源字符串的數組指針
length
— 指向保存每個著?器字符串??且元素數量為count 的整數數組指針 - 編譯著色器源代碼
void glCompileShader(GLuint shader)
shader
— 需要編譯的著?器對象句柄
void glGetShaderiv(GLuint shader , GLenum pname , GLint *params )
shader
— 需要編譯的著?器對象句柄
pname
— 獲取的信息參數,可以為GL_COMPILE_STATUS
、GL_DELETE_STATUS
、GL_INFO_LOG_LENGTH
、GL_SHADER_SOURCE_LENGTH
、GL_SHADER_TYPE
params
— 指向查詢結果的整數存儲位置的指針 - 獲取著?器的信息?志
void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog)
shader
— 需要獲取信息?志的著?器對象句柄
maxLength
— 保存信息?志的緩存區??
length
— 寫?的信息?志的?長度(減去null 終?符);如果不需要知道?長度。 這個參數可以為Null
infoLog
— 指向保存信息?志的字符緩存區的指針 - 創建程序對象
GLUint glCreateProgram( )
返回值
返回?個執?新程序對象的句柄 - 刪除程序對象
void glDeleteProgram( GLuint program )
program
指向需要刪除的程序對象句柄 - 鏈接著色器對象
void glAttachShader( GLuint program , GLuint shader )
program
指向程序對象的句柄
shader
指向程序連接的著?器對象的句柄 - 斷開連接
void glDetachShader(GLuint program)
program
指向程序對象的句柄
shader
指向程序斷開連接的著?器對象句柄 - 鏈接程序
glLinkProgram(GLuint program)
program
指向程序對象句柄 - 檢查鏈接狀態
void glGetProgramiv (GLuint program,GLenum pname, GLint *params)
program
需要獲取信息的程序對象句柄
params
指向查詢結果整數存儲位置的指針
pname
獲取信息的參數包括:
GL_ACTIVE_ATTRIBUTES
GL_ACTIVE_ATTRIBUTES_MAX_LENGTH
GL_ACTIVE_UNIFORM_BLOCK
GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH
GL_ACTIVE_UNIFROMS
GL_ACTIVE_UNIFORM_MAX_LENGTH
GL_ATTACHED_SHADERS
GL_DELETE_STATUS
GL_INFO_LOG_LENGTH
GL_LINK_STATUS
GL_PROGRAM_BINARY_RETRIEVABLE_HINT
GL_TRANSFORM_FEEDBACK_BUFFER_MODE
GL_TRANSFORM_FEEDBACK_VARYINGS
GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH
GL_VALIDATE_STATUS
- 從程序信息?志中獲取信息
void glGetPorgramInfoLog( GLuint program ,GLSizei maxLength, GLSizei *length , GLChar *infoLog )
program
指向需要獲取信息的程序對象句柄
maxLength
存儲信息?志的緩存區??
ength
寫?的信息?志?長度(減去null 終?符),如果不需要知道?長度,這個參數可以為Null
infoLog
指向存儲信息?志的字符緩存區的指針 - 使用程序對象
void glUseProgram(GLuint program)
program: 設置為活動程序的程序對象句柄
GLSL 加載圖片的完整流程
GLSL 加載圖片的完整流程
完整代碼
- LLView.h
#import "LLView.h"
#import <OpenGLES/ES3/gl.h>
@interface LLView()
//在iOS和tvOS上繪制OpenGL ES內容的圖層,繼承于CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@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
- LLView.m
- 初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self loadSubViews];
}
return self;
}
//自定義方法
- (void)loadSubViews {
//1.設置圖層
[self setupLayer];
//2.設置圖形上下文
[self setupContext];
//3.清空緩存區
[self clearRenderAndFrameBuffer];
//4.設置RenderBuffer
[self setupRenderBuffer];
//5.設置FrameBuffer
[self setupFrameBuffer];
//6.開始繪制
[self renderLayer];
}
- 設置圖層
- (void)setupLayer {
//1.創建特殊圖層
/*
重寫layerClass,將CCView返回的圖層從CALayer替換成CAEAGLLayer
*/
self.myEagLayer = (CAEAGLLayer *)self.layer;
//2.設置scale
[self setContentScaleFactor:[[UIScreen mainScreen] scale]];
//3.設置描述屬性,這里設置不維持渲染內容以及顏色格式為RGBA8
/*
kEAGLDrawablePropertyRetainedBacking 表示繪圖表面顯示后,是否保留其內容。
kEAGLDrawablePropertyColorFormat
可繪制表面的內部顏色緩存區格式,這個key對應的值是一個NSString指定特定顏色緩存區對象。默認是kEAGLColorFormatRGBA8;
kEAGLColorFormatRGBA8:32位RGBA的顏色,4*8=32位
kEAGLColorFormatRGB565:16位RGB的顏色,
kEAGLColorFormatSRGBA8:sRGB代表了標準的紅、綠、藍,即CRT顯示器、LCD顯示器、投影機、打印機以及其他設備中色彩再現所使用的三個基本色素。
sRGB的色彩空間基于獨立的色彩坐標,可以使色彩在不同的設備使用傳輸中對應于同一個色彩坐標體系,而不受這些設備各自具有的不同色彩坐標的影響。
*/
NSDictionary *properyies = [[NSDictionary alloc]initWithObjectsAndKeys:@NO,kEAGLDrawablePropertyRetainedBacking,kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
self.myEagLayer.drawableProperties = properyies;
}
- 重寫layerClass
//重寫layerClass
+ (Class)layerClass {
return [CAEAGLLayer class];
}
- 設置上下文
- (void)setupContext {
//1.創建圖形上下文 ,指定OpenGL ES 渲染API版本,我們使用3.0
EAGLContext *context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES3];
//2.判斷是否創建成功
if (!context) {
NSLog(@"Create context failed");
return;
}
//3.設置圖形上下文
if (![EAGLContext setCurrentContext:context]) {
NSLog(@"setCurrentContext failed!");
}
//4.將局部context,變成全局的
self.myContext = context;
}
- 清空緩沖區
//3.清空緩存區
- (void)clearRenderAndFrameBuffer {
/*
buffer分為frame buffer 和 render buffer2個大類。
其中frame buffer 相當于render buffer的管理者。
frame buffer object即稱FBO。
render buffer則又可分為3類。colorBuffer、depthBuffer、stencilBuffer。
*/
glDeleteBuffers(1, &_myColorRederBuffer);
self.myColorRederBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
- 設置RenderBuffer
//4.設置RenderBuffer
- (void)setupRenderBuffer {
//1.定義一個緩存區ID
GLuint buffer;
//2.申請一個緩存區標志
glGenRenderbuffers(1, &buffer);
//3.賦值給全局
self.myColorRederBuffer = buffer;
//4.將標識符綁定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRederBuffer);
//5.將可繪制對象drawable object's CAEAGLLayer的存儲綁定到OpenGL ES renderBuffer對象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
- 設置FrameBuffer
//5.設置FrameBuffer
- (void)setupFrameBuffer {
//1.定義一個緩存區ID
GLuint buffer;
//2.申請一個緩存區標志
glGenFramebuffers(1, &buffer);
//3.賦值給全局
self.myColorFrameBuffer = buffer;
//4.將標識符綁定到GL_RENDERBUFFER
glBindFramebuffer(GL_FRAMEBUFFER, buffer);
//5.將渲染緩存區myColorRenderBuffer 通過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRederBuffer);
}
- 開始繪制
-(void)renderLayer
{
//設置清屏顏色
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.讀取頂點著色程序、片元著色程序
NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
NSLog(@"vertFile:%@",vertFile);
NSLog(@"fragFile:%@",fragFile);
//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,1
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,//1,0
-0.5f, -0.5f, -1.0f, 0.0f, 0.0f,//1,1
0.5f, 0.5f, -1.0f, 1.0f, 1.0f,//0,0
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,//1,0
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,//0,1
};
//7.-----處理頂點數據--------
//(1)頂點緩存區
GLuint attrBuffer;
//(2)申請一個緩存區標識符
glGenBuffers(1, &attrBuffer);
//(3)將attrBuffer綁定到GL_ARRAY_BUFFER標識符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//(4)把頂點數據從CPU內存復制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//8.將頂點數據通過myPrograme中的傳遞到頂點著色程序的position
//1.glGetAttribLocation,用來獲取vertex attribute的入口的.
//2.告訴OpenGL ES,通過glEnableVertexAttribArray,
//3.最后數據是通過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保持一致
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
//(2).設置合適的格式從buffer里面讀取數據
glEnableVertexAttribArray(textCoor);
//(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(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
//10.加載紋理
[self setupTexture:@"xxx"];
//11. 設置紋理采樣器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
//12.繪圖
glDrawArrays(GL_TRIANGLES, 0, 6);
//13.從渲染緩存區顯示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
- 加載紋理
- (GLuint)setupTexture:(NSString *)fileName {
//1、將 UIImage 轉換為 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判斷圖片是否獲取成功
if (!spriteImage) {
NSLog(@"Failed to load image %@", fileName);
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;
}
- 加載 shader
- (GLuint)loadShaders:(NSString *)vert withfrag:(NSString *)frag {
//1.定義2個k臨時著色器對象
GLuint verShader, fragShader;
//創建program
GLuint 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];
//3.把shader加載到program
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//4.釋放shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
- 編譯shader
- (void)compileShader:(GLuint *)shader type:(GLenum )type file:(NSString *)file {
//1.讀取文件路徑字符串
NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar *source = [content UTF8String];
//2.創建一個shader(根據type類型)
*shader = glCreateShader(type);
//3.將著色器源碼附加到著色器對象上。
//參數1:shader,要編譯的著色器對象 *shader
//參數2:numOfStrings,傳遞的源碼字符串數量 1個
//參數3:strings,著色器程序的源碼(真正的著色器程序源碼)
//參數4:lenOfStrings,長度,具有每個字符串長度的數組,或NULL,這意味著字符串是NULL終止的
glShaderSource(*shader, 1, &source, NULL);
//4.編譯shader
glCompileShader(*shader);
}
- vertexShader 代碼
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
gl_Position = position;
}
- fragShader 代碼
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
加載紋理的代碼到此結束,此時我們運行會發現我們加載的紋理是顛倒的。下篇介紹加載紋理顛倒的解決方案。