OpenGL ES — GLSL加載圖片紋理
函數介紹
- 建立着⾊器
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_TYPEparams— 指向查詢結果的整數存儲位置的指針 - 獲取着⾊器的信息⽇志
void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog)shader— 須要獲取信息⽇志的着⾊器對象句柄maxLength— 保存信息⽇志的緩存區⼤⼩length— 寫⼊的信息⽇志的⻓長度(減去null 終⽌符)；若是不須要知道⻓長度。 這個參數能夠爲NullinfoLog— 指向保存信息⽇志的字符緩存區的指針 - 建立程序對象
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 終⽌符)，若是不須要知道⻓長度,這個參數能夠爲NullinfoLog指向存儲信息⽇志的字符緩存區的指針 - 使用程序對象
void glUseProgram(GLuint program)program: 設置爲活動程序的程序對象句柄
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 {
//一、將 UIImage 轉換爲 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判斷圖片是否獲取成功
if (!spriteImage) {
NSLog(@"Failed to load image %@", fileName);
exit(1);
}
//二、讀取圖片的大小，寬和高
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);
//五、在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);
//七、畫圖完畢就釋放上下文
CGContextRelease(spriteContext);
//八、綁定紋理到默認的紋理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);
}
複製代碼
加載紋理的代碼到此結束，此時咱們運行會發現咱們加載的紋理是顛倒的。下篇介紹加載紋理顛倒的解決方案。數組
相關文章
- 1. OpenGL ES — GLSL加載紋理時顛倒的解決方案
- 2. OpenGL ES 入門之旅 -- GLSL加載圖片案例
- 3. OpenGL ES (16): 紋理貼圖
- 4. OpenGL ES紋理貼圖
- 5. OpenGL ES - 瞭解GLSL
- 6. OpenGL學習（十一）-- 用 GLSL 實現加載圖片
- 7. OpenGL ES 入門之旅 -- GLSL紋理單元和紋理翻轉解決策略
- 8. OpenGL 加載透明紋理
- 9. opengl GLSL宏加載shader source
- 10. [OpenGL]將來視覺6-靜態圖片紋理加載
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • ionic 加載動作 - ionic 教程
- • Docker 清理命令
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
