1.png
創(chuàng)建著色器程序
新建shaderv.vsh和shaderf.fsh文件，shaderv.vsh為頂點著色器，GLSL代碼如下：
attribute vec4 vertexCoordinate;
attribute vec2 textureCoordinate;
varying lowp vec2 varyTexture;
void main()
{
varyTexture = textureCoordinate;
gl_Position = vertexCoordinate;
}
shaderf.fsh為片元著色器，GLSL代碼如下：
varying lowp vec2 varyTexture;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, varyTexture);
}
在 SLView 編寫代碼
#import "SLView.h"
#import <OpenGLES/ES3/gl.h>
@interface SLView ()
@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 SLView
- (void)layoutSubviews
{
//1.設(shè)置圖層
[self setUpLayer];
//2.設(shè)置圖形上下文
[self setUpContext];
//3.清空緩存區(qū)
[self deleteRenderAndFrameBuffer];
//4.設(shè)置渲染緩存區(qū)
[self setUpRenderBuffer];
//5.設(shè)置幀緩存區(qū)
[self setUpFrameBuffer];
//6.開始繪制
[self renderLayer];
}
#pragma mark - 1.設(shè)置圖層
-(void)setUpLayer
{
//1.創(chuàng)建特殊圖層
/*
重寫layerClass，將JNEWView返回的圖層從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ū)格式，這個key對應(yīng)的值是一個NSString指定特定顏色緩存區(qū)對象。默認(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)所使用的三個基本色素。sRGB的色彩空間基于獨立的色彩坐標(biāo)，可以使色彩在不同的設(shè)備使用傳輸中對應(yīng)于同一個色彩坐標(biāo)體系，而不受這些設(shè)備各自具有的不同色彩坐標(biāo)的影響。
*/
self.myEagLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@(false),kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8};
}
+ (Class)layerClass
{
return [CAEAGLLayer class];
}
#pragma mark - 2.設(shè)置圖形上下文
-(void)setUpContext
{
//1.指定OpenGL ES 渲染API版本
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
//2.創(chuàng)建圖形上下文
EAGLContext * context = [[EAGLContext alloc] initWithAPI:api];
//3.判斷EAGLContext是否創(chuàng)建成功
if (!context)
{
NSLog(@"Create context failed!");
return;
}
//4.設(shè)置圖形上下文
if (![EAGLContext setCurrentContext:context])
{
NSLog(@"setCurrentContext failed!");
return;
}
//5.將局部context變成全局的
self.myContext = context;
}
#pragma mark - 3.清空緩存區(qū)
-(void)deleteRenderAndFrameBuffer
{
/*
buffer分為frame buffer 和 render buffer2個大類。
其中frame buffer 相當(dāng)于render buffer的管理者。
frame buffer object即稱FBO。
render buffer則又可分為3類。colorBuffer、depthBuffer、stencilBuffer。
*/
//1.清空渲染緩存區(qū)
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
//2.清空幀緩存區(qū)
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
}
#pragma mark - 4.設(shè)置渲染緩存區(qū)
-(void)setUpRenderBuffer
{
//1.定義一個緩存區(qū)ID
GLuint buffer;
//2.申請一個緩存區(qū)標(biāo)志
glGenBuffers(1, &buffer);
self.myColorRenderBuffer = buffer;
//3.將標(biāo)識符綁定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
//4.將CAEAGLLayer的存儲綁定到renderBuffer對象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
#pragma mark - 5.設(shè)置幀緩存區(qū)
-(void)setUpFrameBuffer
{
//1.定義一個緩存區(qū)ID
GLuint buffer;
//2.申請一個緩存區(qū)標(biāo)志
glGenFramebuffers(1, &buffer);
self.myColorFrameBuffer = buffer;
//3.將標(biāo)識符綁定到GL_FRAMEBUFFER
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
/*生成幀緩存區(qū)之后，則需要將renderbuffer跟framebuffer進(jìn)行綁定，
調(diào)用glFramebufferRenderbuffer函數(shù)進(jìn)行綁定到對應(yīng)的附著點上，后面的繪制才能起作用
*/
//4.綁定渲染緩存區(qū)和幀緩存區(qū)
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
#pragma mark - 6.開始繪制
-(void)renderLayer
{
//1.設(shè)置清屏顏色
glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
//2.清除顏色緩存
glClear(GL_COLOR_BUFFER_BIT);
//3.設(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);
//4.讀取頂點/片元著色程序
NSString * vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
NSString * fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
//5.加載shader
self.myPrograme = [self loadShaders:vertFile withFrag:fragFile];
//6.鏈接program并判斷狀態(tài)
glLinkProgram(self.myPrograme);
GLint linkStatus;
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE)
{
GLchar message[520];
glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
NSString * messageStr = [NSString stringWithUTF8String:message];
NSLog(@"programe link error:%@",messageStr);
return;
}
NSLog(@"programe link success!!");
//7.使用program
glUseProgram(self.myPrograme);
//8.設(shè)置頂點/紋理坐標(biāo)
//前3個是頂點坐標(biāo)，后2個是紋理坐標(biāo)
GLfloat attrArr[] =
{
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 0.0f,
1.0f, 1.0f, 0.0f, 1.0f, 1.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 1.0f,
1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
};
//9.處理頂點數(shù)據(jù)
//(1)頂點緩存區(qū)
GLuint buffer;
//(2)申請一個緩存區(qū)標(biāo)識符
glGenBuffers(1, &buffer);
//(3)將buffer綁定到GL_ARRAY_BUFFER
glBindBuffer(GL_ARRAY_BUFFER, buffer);
//(4)把頂點數(shù)據(jù)從CPU內(nèi)存復(fù)制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//10.將頂點數(shù)據(jù)傳遞到頂點著色程序
//1.glGetAttribLocation,用來獲取vertex attribute的入口的.
//2.告訴OpenGL ES,通過glEnableVertexAttribArray，
//3.最后數(shù)據(jù)是通過glVertexAttribPointer傳遞過去的。
//(1)注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：vertexCoordinate保持一致
GLuint vertexCoordinate = glGetAttribLocation(self.myPrograme, "vertexCoordinate");
//(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(vertexCoordinate);
//(3).設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為0
glVertexAttribPointer(vertexCoordinate, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
//11.處理紋理數(shù)據(jù)
//(1).glGetAttribLocation,用來獲取vertex attribute的入口的.
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textureCoordinate保持一致
GLuint textureCoordinate = glGetAttribLocation(self.myPrograme, "textureCoordinate");
//(2).設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(textureCoordinate);
//(3).設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為0
glVertexAttribPointer(textureCoordinate, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
//12.加載紋理
[self setUpTexture:@"mei"];
//13.設(shè)置紋理采樣器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
//14.繪圖
glDrawArrays(GL_TRIANGLES, 0, 6);
//15.從渲染緩存區(qū)顯示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
#pragma mark - 加載shader
-(GLuint)loadShaders:(NSString *)vert withFrag:(NSString *)frag
{
//1.定義2個臨時著色器對象
GLuint vertexShader, fragmentShader;
//2.創(chuàng)建program
GLuint program = glCreateProgram();
//3.編譯頂點著色/片元著色程序
//參數(shù)1：編譯完存儲的底層地址
//參數(shù)2：編譯的類型，GL_VERTEX_SHADER（頂點）、GL_FRAGMENT_SHADER(片元)
//參數(shù)3：文件路徑
[self compileShader:&vertexShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragmentShader type:GL_FRAGMENT_SHADER file:frag];
//4.附著程序
glAttachShader(program, vertexShader);
glAttachShader(program, fragmentShader);
//5.釋放不需要的shader
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
return program;
}
#pragma mark 編譯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)建一個shader（根據(jù)type類型）
*shader = glCreateShader(type);
//3.將著色器源碼附加到著色器對象上
//參數(shù)1：shader,要編譯的著色器對象 *shader
//參數(shù)2：numOfStrings,傳遞的源碼字符串?dāng)?shù)量 1個
//參數(shù)3：strings,著色器程序的源碼（真正的著色器程序源碼）
//參數(shù)4：lenOfStrings,長度，具有每個字符串長度的數(shù)組，或NULL，這意味著字符串是NULL終止的
glShaderSource(*shader, 1, &source, NULL);
//4.把著色器源代碼編譯成目標(biāo)代碼
glCompileShader(*shader);
}
#pragma mark - 從圖片中加載紋理
-(void)setUpTexture:(NSString *)fileName
{
//1.將UIImage轉(zhuǎn)換為CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//2.判斷圖片是否獲取成功
if (!spriteImage)
{
NSLog(@"load image failed!");
return;
}
//3.讀取圖片的寬和高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetWidth(spriteImage);
//4.獲取圖片字節(jié)數(shù) 寬*高*4（RGBA）
GLubyte * spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
//5.創(chuàng)建上下文
/*
參數(shù)1：data,指向要渲染的繪制圖像的內(nèi)存地址
參數(shù)2：width,bitmap的寬度，單位為像素
參數(shù)3：height,bitmap的高度，單位為像素
參數(shù)4：bitPerComponent,內(nèi)存中像素的每個組件的位數(shù)，比如32位RGBA，就設(shè)置為8
參數(shù)5：bytesPerRow,bitmap的沒一行的內(nèi)存所占的比特數(shù)
參數(shù)6：colorSpace,bitmap上使用的顏色空間 kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width * 4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
//6.在CGContextRef上將圖片繪制出來
/*
CGContextDrawImage 使用的是Core Graphics框架，坐標(biāo)系與UIKit 不一樣。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。
CGContextDrawImage
參數(shù)1：繪圖上下文
參數(shù)2：rect坐標(biāo)
參數(shù)3：繪制的圖片
*/
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
CGContextRelease(spriteContext);
//7.綁定紋理
glBindTexture(GL_TEXTURE_2D, 0);
//8.設(shè)置紋理屬性
/*
參數(shù)1：紋理維度
參數(shù)2：線性過濾、為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);
//9.載入紋理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, (GLsizei)width, (GLsizei)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
//10.釋放spriteData
free(spriteData);
}
@end
模擬器運(yùn)行效果，發(fā)現(xiàn)默認(rèn)渲染的圖片是倒置的
2.png
圖片翻轉(zhuǎn)策略
解決紋理翻轉(zhuǎn)(方法1)
在 shaderv.vsh 定義一個旋轉(zhuǎn)矩陣，讓所有頂點乘以這個矩陣實現(xiàn)翻轉(zhuǎn)。
shaderv.vsh
attribute vec4 vertexCoordinate;
attribute vec2 textureCoordinate;
varying lowp vec2 varyTexture;
uniform mat4 rotateMatrix;
void main()
{
varyTexture = textureCoordinate;
gl_Position = vertexCoordinate * rotateMatrix;
}
SLView.m
#pragma mark - 解決紋理翻轉(zhuǎn)(方法1)
-(void)rotateTextureImage
{
//注意，想要獲取shader里面的變量，這里記得要在glLinkProgram后面
//1.rotate等于shaderv.vsh中的uniform屬性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
//2.獲取渲旋轉(zhuǎn)的弧度
GLfloat radians = 180 * 3.14159f / 180.0f;
//3.求得弧度對于的sin\cos值
GLfloat s = sin(radians);
GLfloat c = cos(radians);
//4.參考Z軸旋轉(zhuǎn)矩陣
GLfloat zRotation[16] = {
c,-s,0,0,
s,c,0,0,
0,0,1,0,
0,0,0,1
};
//5.設(shè)置旋轉(zhuǎn)矩陣
/*
glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
location : 對于shader 中的ID
count : 個數(shù)
transpose : 轉(zhuǎn)置
value : 指針
*/
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
解決紋理翻轉(zhuǎn)(方法2)
GLSL代碼不變，在圖片解壓縮的時候直接翻轉(zhuǎn)。
在 setUpTexture方法 添加以下代碼
//解決紋理翻轉(zhuǎn)(方法2)
CGRect rect = CGRectMake(0, 0, width, height);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextDrawImage(spriteContext, rect, spriteImage);
解決紋理翻轉(zhuǎn)(方法3)
只更改 sharderf.fsh 代碼
varying lowp vec2 varyTexture;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTexture.x,1.0-varyTexture.y));
}
解決紋理翻轉(zhuǎn)(方法4)
只更改 sharderv.vsh 代碼
attribute vec4 vertexCoordinate;
attribute vec2 textureCoordinate;
varying lowp vec2 varyTexture;
void main()
{
varyTexture = vec2(textureCoordinate.x,1.0-textureCoordinate.y);
gl_Position = vertexCoordinate;
}
解決紋理翻轉(zhuǎn)(方法5)
直接更改頂點紋理坐標(biāo)
//解決紋理翻轉(zhuǎn)(方法5)
GLfloat attrArr[] =
{
1.0f, -1.0f, 0.0f, 1.0f, 1.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 0.0f,
-1.0f, -1.0f, 0.0f, 0.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f, 0.0f,
-1.0f, 1.0f, 0.0f, 0.0f, 0.0f,
1.0f, -1.0f, 0.0f, 1.0f, 1.0f,
};
翻轉(zhuǎn)后效果
3.png
思維導(dǎo)圖
4.png
