什么是GLSL? 概念問題這里直接轉載百度百科
OpenGL著色語言（OpenGL Shading Language）是用來在OpenGL中著色編程的語言，也即開發人員寫的短小的自定義程序，他們是在圖形卡的GPU （Graphic Processor Unit圖形處理單元）上執行的，代替了固定的渲染管線的一部分，使渲染管線中不同層次具有可編程性。比如：視圖轉換、投影轉換等。GLSL（GL Shading Language）的著色器代碼分成2個部分：Vertex Shader（頂點著色器）和Fragment（片斷著色器），有時還會有Geometry Shader（幾何著色器）。負責運行頂點著色的是頂點著色器。它可以得到當前OpenGL 中的狀態，GLSL內置變量進行傳遞。GLSL其使用C語言作為基礎高階著色語言，避免了使用匯編語言或硬件規格語言的復雜性。
總結: 通過使用GLSL, 我們可以對頂點著色器和片元著色器進行編程.
話不多說直接上代碼, 代碼中有注釋.
一. 創建一個類繼承于UIView, 作為我們繪制圖片的載體.
/*
不采樣GLKBaseEffect，使用編譯鏈接自定義的著色器（shader）。用簡單的glsl語言來實現頂點、片元著色器，并圖形進行簡單的變換。
思路：
1.創建圖層
2.創建上下文
3.清空緩存區
4.設置RenderBuffer
5.設置FrameBuffer
6.開始繪制
*/
#import <OpenGLES/ES2/gl.h>
#import "AMView.h"
@interface AMView()
//在iOS和tvOS上繪制OpenGL ES內容的圖層，繼承與CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;
@property(nonatomic,strong)EAGLContext *myContext;
@property(nonatomic,assign)GLuint myColorRenderBuffer;
@property(nonatomic,assign)GLuint myColorFrameBuffer;
@property(nonatomic,assign)GLuint myPrograme;
@end
@implementation CCView
-(void)layoutSubviews
{
//1.設置圖層
[self setupLayer];
//2.設置圖形上下文
[self setupContext];
//3.清空緩存區
[self deleteRenderAndFrameBuffer];
//4.設置RenderBuffer
[self setupRenderBuffer];
//5.設置FrameBuffer
[self setupFrameBuffer];
//6.開始繪制
[self renderLayer];
}
//6.開始繪制
-(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.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.5f, -1.0f, 1.0f, 0.0f,
};
//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:@"kunkun"];
//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;
}
//5.設置FrameBuffer
-(void)setupFrameBuffer
{
//1.定義一個緩存區ID
GLuint buffer;
//2.申請一個緩存區標志
glGenRenderbuffers(1, &buffer);
//3.
self.myColorFrameBuffer = buffer;
//4.
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
/*生成幀緩存區之后，則需要將renderbuffer跟framebuffer進行綁定，
調用glFramebufferRenderbuffer函數進行綁定到對應的附著點上，后面的繪制才能起作用
*/
//5.將渲染緩存區myColorRenderBuffer 通過glFramebufferRenderbuffer函數綁定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
//4.設置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's CAEAGLLayer的存儲綁定到OpenGL ES renderBuffer對象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
//3.清空緩存區
-(void)deleteRenderAndFrameBuffer
{
/*
buffer分為frame buffer 和 render buffer2個大類。
其中frame buffer 相當于render buffer的管理者。
frame buffer object即稱FBO。
render buffer則又可分為3類。colorBuffer、depthBuffer、stencilBuffer。
*/
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
//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;
}
//1.設置圖層
-(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的色彩空間基于獨立的色彩坐標，可以使色彩在不同的設備使用傳輸中對應于同一個色彩坐標體系，而不受這些設備各自具有的不同色彩坐標的影響。
*/
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
+(Class)layerClass
{
return [CAEAGLLayer class];
}
#pragma mark --shader
//加載shader
-(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];
//3.創建最終的程序
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 = (GLchar *)[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.把著色器源代碼編譯成目標代碼
glCompileShader(*shader);
}
@end
使用empty, 創建頂點著色器和片元著色器
//頂點著色器
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
//varyTextCoord = textCoordinate;
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
//片元著色器
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
