一、效果
從這篇文章開(kāi)始潘鲫，我們將學(xué)習(xí)OpenGL和OpenGL ES的核心編程語(yǔ)言--GLSL凡纳。今天我們就利用GLSL編寫(xiě)自定義著色器實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片渲染疏虫。
先上效果圖：
效果圖png
二、代碼
1特石、新建工程
- 新建一個(gè)
view視圖命名為ShaderView - 新建兩個(gè)
Empty文件，分別設(shè)置為shaderv的.vsh文件和shaderf的.fsh文件鳖链。
創(chuàng)建完成后姆蘸，項(xiàng)目結(jié)構(gòu)如下:
項(xiàng)目結(jié)構(gòu).png
2、開(kāi)始編寫(xiě)代碼
1)在ViewController的.m文件中導(dǎo)入shaderView頭文件芙委、添加一個(gè)屬性逞敷，并在viewDidLoad方法中賦值
#import "ViewController.h"
#import "ShaderView.h"
@interface ViewController ()
@property (nonatomic) ShaderView *shaderView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.shaderView = (ShaderView *)self.view;
}
2)編寫(xiě)著色器代碼，上面創(chuàng)建的兩個(gè)分別是shaderv.vsh和shaderf.fsh結(jié)尾的文件灌侣， 就是我們要自定義實(shí)現(xiàn)的頂點(diǎn)著色器(Vertex Shader)和片源著色器(Fragment Shader)推捐。
-
shaderv.vsh中代碼：
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
gl_Position = position;
}
這里面的代碼就是，確定頂點(diǎn)位置侧啼，將紋理坐標(biāo)傳遞給片源著色器牛柒。
參數(shù)說(shuō)明：
position：頂點(diǎn)坐標(biāo)，是一個(gè)4維向量痊乾。如（x,y,z,1.0）分別對(duì)應(yīng)x皮壁、y、z和縮放因子（0.0-1.0）
textCoordinate: 紋理坐標(biāo)哪审，這里定義的是一個(gè)二維向量蛾魄，也就是一個(gè)2D紋理。如：（0.5,0.5）;
varyTextCoord：經(jīng)過(guò)varying轉(zhuǎn)換后的紋理坐標(biāo)湿滓，因?yàn)轫旤c(diǎn)著色器和片元著色器的數(shù)據(jù)不能直接傳遞滴须，需要借助varying轉(zhuǎn)換后才行，可以理解為我開(kāi)發(fā)中橋接叽奥。因?yàn)檫@個(gè)參數(shù)要提供給片源著色器使用扔水，所以定義名字在頂點(diǎn)著色器和片源著色器中必須一致才可以。
lowp：是表示低精度的意思而线。
-
shaderf.fsh中代碼：
precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
這里的代碼就是拿到頂點(diǎn)著色器提供的轉(zhuǎn)換后的紋理坐標(biāo)铭污、紋理數(shù)據(jù)并采樣以得到對(duì)應(yīng)像素點(diǎn)的顏色。
參數(shù)說(shuō)明：
precision highp float:定義當(dāng)前float精度膀篮，highp表示高精度
varyTextCoord：前面已經(jīng)提到了嘹狞，頂點(diǎn)著色器提供的紋理坐標(biāo)
colorMap：當(dāng)前紋理坐標(biāo)的下的紋理數(shù)據(jù)
3)編寫(xiě)ShaderView代碼
layoutSubviews中方法調(diào)用流程圖.png
#import "ShaderView.h"
#import <OpenGLES/ES2/gl.h>
@interface ShaderView()
//在iOS和tvOS上繪制OpenGL ES內(nèi)容的圖層，繼承與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 ShaderView
- (void)layoutSubviews{
//1.設(shè)置圖層
[self setupLayer];
//2.設(shè)置圖形上下文
[self setupContext];
//3.清空緩存區(qū)
[self deleteRenderAndFrameBuffer];
//4.設(shè)置renderBuffer
[self setupRenderBuffer];
//5.設(shè)置frameBuffer
[self setupFrameBuffer];
//6.開(kāi)始繪制
[self renderLayer];
}
- (void)setupLayer{
//1.創(chuàng)建特殊圖層
/*
重寫(xiě)layerClass誓竿，將CCView返回的圖層從CALayer替換成CAEAGLLayer
*/
self.myEagLayer = (CAEAGLLayer *)self.layer;
//2.設(shè)置scale
[self setContentScaleFactor:[[UIScreen mainScreen]scale]];
//3.設(shè)置描述屬性磅网，這里設(shè)置不維持渲染內(nèi)容以及顏色格式為RGBA8
/*
kEAGLDrawablePropertyRetainedBacking 表示繪圖表面顯示后，是否保留其內(nèi)容筷屡。
kEAGLDrawablePropertyColorFormat
可繪制表面的內(nèi)部顏色緩存區(qū)格式涧偷，這個(gè)key對(duì)應(yīng)的值是一個(gè)NSString指定特定顏色緩存區(qū)對(duì)象簸喂。默認(rèn)是kEAGLColorFormatRGBA8；
kEAGLColorFormatRGBA8：32位RGBA的顏色燎潮，4*8=32位
kEAGLColorFormatRGB565：16位RGB的顏色喻鳄，
kEAGLColorFormatSRGBA8：sRGB代表了標(biāo)準(zhǔn)的紅、綠确封、藍(lán)除呵，即CRT顯示器、LCD顯示器爪喘、投影機(jī)颜曾、打印機(jī)以及其他設(shè)備中色彩再現(xiàn)所使用的三個(gè)基本色素。sRGB的色彩空間基于獨(dú)立的色彩坐標(biāo)秉剑，可以使色彩在不同的設(shè)備使用傳輸中對(duì)應(yīng)于同一個(gè)色彩坐標(biāo)體系泛豪，而不受這些設(shè)備各自具有的不同色彩坐標(biāo)的影響。
*/
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}
- (void)setupContext{
//1.指定OpenGL ES 渲染API版本侦鹏，我們使用2.0
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
//2.創(chuàng)建圖形上下文
EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
//3.判斷是否創(chuàng)建成功
if (!context) {
NSLog(@"Create context failed!");
return;
}
//4.設(shè)置圖形上下文
if (![EAGLContext setCurrentContext:context]) {
NSLog(@"setCurrentContext failed!");
return;
}
//5.將局部context诡曙，變成全局的
self.myContext = context;
}
+(Class)layerClass
{
return [CAEAGLLayer class];
}
- (void)deleteRenderAndFrameBuffer{
/*
buffer分為frame buffer 和 render buffer2個(gè)大類。
其中frame buffer 相當(dāng)于render buffer的管理者种柑。
frame buffer object即稱FBO岗仑。
render buffer則又可分為3類。colorBuffer聚请、depthBuffer荠雕、stencilBuffer。
*/
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
- (void)setupRenderBuffer{
//1.定義一個(gè)緩存區(qū)ID
GLuint buffer;
//2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
glGenRenderbuffers(1, &buffer);
//3.
self.myColorRenderBuffer = buffer;
//4.將標(biāo)識(shí)符綁定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
//5.將可繪制對(duì)象drawable object's CAEAGLLayer的存儲(chǔ)綁定到OpenGL ES renderBuffer對(duì)象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
- (void)setupFrameBuffer{
//1.定義一個(gè)緩存區(qū)ID
GLuint buffer;
//2.申請(qǐng)一個(gè)緩存區(qū)標(biāo)志
//glGenRenderbuffers(1, &buffer);
//glGenFramebuffers(1, &buffer);
glGenBuffers(1, &buffer);
//3.
self.myColorFrameBuffer = buffer;
//4.
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
/*生成幀緩存區(qū)之后驶赏，則需要將renderbuffer跟framebuffer進(jìn)行綁定炸卑，
調(diào)用glFramebufferRenderbuffer函數(shù)進(jìn)行綁定到對(duì)應(yīng)的附著點(diǎn)上，后面的繪制才能起作用
*/
//5.將渲染緩存區(qū)myColorRenderBuffer 通過(guò)glFramebufferRenderbuffer函數(shù)綁定到 GL_COLOR_ATTACHMENT0上煤傍。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
- (void)renderLayer{
//設(shè)置清屏顏色
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
//清除屏幕
glClear(GL_COLOR_BUFFER_BIT);
//1.設(shè)置視口大小
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.讀取頂點(diǎn)著色程序盖文、片元著色程序
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;
//獲取鏈接狀態(tài)
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);
[self setupPostionData];
//10.加載紋理
[self setupTexture:@"jessica"];
//11. 設(shè)置紋理采樣器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
//12.繪圖
glDrawArrays(GL_TRIANGLES, 0, 6);
//13.從渲染緩存區(qū)顯示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
- (void)setupPostionData{
//6.設(shè)置頂點(diǎn)、紋理坐標(biāo)
//前3個(gè)是頂點(diǎn)坐標(biāo)蚯姆，后2個(gè)是紋理坐標(biāo)
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.-----處理頂點(diǎn)數(shù)據(jù)--------
//(1)頂點(diǎn)緩存區(qū)
GLuint attrBuffer;
//(2)申請(qǐng)一個(gè)緩存區(qū)標(biāo)識(shí)符
glGenBuffers(1, &attrBuffer);
//(3)將attrBuffer綁定到GL_ARRAY_BUFFER標(biāo)識(shí)符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
//(4)把頂點(diǎn)數(shù)據(jù)從CPU內(nèi)存復(fù)制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//8.將頂點(diǎn)數(shù)據(jù)通過(guò)myPrograme中的傳遞到頂點(diǎn)著色程序的position
//1.glGetAttribLocation,用來(lái)獲取vertex attribute的入口的.
//2.告訴OpenGL ES,通過(guò)glEnableVertexAttribArray五续，
//3.最后數(shù)據(jù)是通過(guò)glVertexAttribPointer傳遞過(guò)去的。
//(1)注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
GLuint position = glGetAttribLocation(self.myPrograme, "position");
//(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(position);
//(3).設(shè)置讀取方式
//參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
//參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量龄恋，1疙驾，2，3郭毕，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類型它碎，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值扳肛。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量傻挂，默認(rèn)為0；
//參數(shù)6：指定一個(gè)指針挖息，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件金拒。默認(rèn)為0
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
//9.----處理紋理數(shù)據(jù)-------
//(1).glGetAttribLocation,用來(lái)獲取vertex attribute的入口的.
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
//(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(textCoor);
//(3).設(shè)置讀取方式
//參數(shù)1：index,頂點(diǎn)數(shù)據(jù)的索引
//參數(shù)2：size,每個(gè)頂點(diǎn)屬性的組件數(shù)量，1旋讹，2殖蚕，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個(gè)組件的類型沉迹，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點(diǎn)數(shù)據(jù)值是否應(yīng)該歸一化害驹，或者直接轉(zhuǎn)換為固定值鞭呕。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點(diǎn)屬性之間的偏移量，默認(rèn)為0宛官；
//參數(shù)6：指定一個(gè)指針葫松，指向數(shù)組中的第一個(gè)頂點(diǎn)屬性的第一個(gè)組件。默認(rèn)為0
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
}
#pragma mark -- 加載紋理
//從圖片中加載紋理
- (GLuint)setupTexture:(NSString *)fileName {
//1底洗、將 UIImage 轉(zhuǎn)換為 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.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
//4.創(chuàng)建上下文
/*
參數(shù)1：data,指向要渲染的繪制圖像的內(nèi)存地址
參數(shù)2：width,bitmap的寬度亥揖，單位為像素
參數(shù)3：height,bitmap的高度珊擂，單位為像素
參數(shù)4：bitPerComponent,內(nèi)存中像素的每個(gè)組件的位數(shù)，比如32位RGBA费变，就設(shè)置為8
參數(shù)5：bytesPerRow,bitmap的沒(méi)一行的內(nèi)存所占的比特?cái)?shù)
參數(shù)6：colorSpace,bitmap上使用的顏色空間 kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
//5摧扇、在CGContextRef上--> 將圖片繪制出來(lái)
/*
CGContextDrawImage 使用的是Core Graphics框架，坐標(biāo)系與UIKit 不一樣挚歧。UIKit框架的原點(diǎn)在屏幕的左上角扛稽，Core Graphics框架的原點(diǎn)在屏幕的左下角。
CGContextDrawImage
參數(shù)1：繪圖上下文
參數(shù)2：rect坐標(biāo)
參數(shù)3：繪制的圖片
*/
CGRect rect = CGRectMake(0, 0, width, height);
//6.使用默認(rèn)方式繪制
CGContextDrawImage(spriteContext, rect, spriteImage);
//7滑负、畫(huà)圖完畢就釋放上下文
CGContextRelease(spriteContext);
//8在张、綁定紋理到默認(rèn)的紋理ID（
glBindTexture(GL_TEXTURE_2D, 0);
//9.設(shè)置紋理屬性
/*
參數(shù)1：紋理維度
參數(shù)2：線性過(guò)濾、為s,t坐標(biāo)設(shè)置模式
參數(shù)3：wrapMode,環(huán)繞模式
*/
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數(shù)據(jù)
/*
參數(shù)1：紋理模式矮慕，GL_TEXTURE_1D帮匾、GL_TEXTURE_2D、GL_TEXTURE_3D
參數(shù)2：加載的層次凡傅，一般設(shè)置為0
參數(shù)3：紋理的顏色值GL_RGBA
參數(shù)4：寬
參數(shù)5：高
參數(shù)6：border辟狈，邊界寬度
參數(shù)7：format
參數(shù)8：type
參數(shù)9：紋理數(shù)據(jù)
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
//11.釋放spriteData
free(spriteData);
return 0;
}
#pragma mark --shader
//加載shader
-(GLuint)loadShaders:(NSString *)vert Withfrag:(NSString *)frag
{
//1.定義2個(gè)零時(shí)著色器對(duì)象
GLuint verShader, fragShader;
//創(chuàng)建program
GLint program = glCreateProgram();
//2.編譯頂點(diǎn)著色程序、片元著色器程序
//參數(shù)1：編譯完存儲(chǔ)的底層地址
//參數(shù)2：編譯的類型，GL_VERTEX_SHADER（頂點(diǎn)）哼转、GL_FRAGMENT_SHADER(片元)
//參數(shù)3：文件路徑
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
//3.創(chuàng)建最終的程序
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.創(chuàng)建一個(gè)shader（根據(jù)type類型）
*shader = glCreateShader(type);
//3.將著色器源碼附加到著色器對(duì)象上明未。
//參數(shù)1：shader,要編譯的著色器對(duì)象 *shader
//參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個(gè)
//參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
//參數(shù)4：lenOfStrings,長(zhǎng)度，具有每個(gè)字符串長(zhǎng)度的數(shù)組壹蔓，或NULL趟妥，這意味著字符串是NULL終止的
glShaderSource(*shader, 1, &source,NULL);
//4.把著色器源代碼編譯成目標(biāo)代碼
glCompileShader(*shader);
}
@end
注意點(diǎn)：需要重寫(xiě)
ShaderView的+(Class)layerClass方法，不然會(huì)因?yàn)檎也坏酱a中部分方法而崩潰佣蓉。
+(Class)layerClass
{
return [CAEAGLLayer class];
}
三披摄、結(jié)果
ok，代碼部分已經(jīng)完成勇凭，運(yùn)行一下：
圖像翻轉(zhuǎn).png
可以看到疚膊，圖片紋理是顯示出來(lái)了，但是方向不對(duì)虾标，上下翻轉(zhuǎn)了寓盗。原因是OpenGL要求Y軸的0.0坐標(biāo)是在圖片的底部的；而圖片紋理的Y軸0.0默認(rèn)是圖片的頂部璧函。所以結(jié)果就是Y軸方向翻轉(zhuǎn)了傀蚌。
知道原因了，我們?cè)?strong>頂點(diǎn)著色器里面修改下Y軸的坐標(biāo)即可：
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos *= vec4(1, -1, 1, 1);
gl_Position = vPos;
}
這里我們使用矩陣方式來(lái)矯正Y軸坐標(biāo)蘸吓。除此之外善炫，當(dāng)然還有其他的很多方式來(lái)正確顯示圖片。
我們下一篇文章中會(huì)詳細(xì)說(shuō)明库继。
覺(jué)得不錯(cuò)記得點(diǎn)贊哦箩艺！聽(tīng)說(shuō)看完點(diǎn)贊的人逢考必過(guò)，逢獎(jiǎng)必中制跟。?( ′???` )比心
