十一、OpenGL ES GLSL 纹理加载图片

一、准备资源文件

1.创建两个空文件，分别为shaderv.vsh和shaderf.fsh

2.shaderv.vsh里面存放的是顶点数据和纹理数据，内容如下：

attribute vec4 position;

attribute vec2 textCoordinate;

varying lowp vec2 varyTextCoord;

void main()

{

varyTextCoord = textCoordinate;

gl_Position = position;

}

3.shaderf.fsh里面存放的是纹理数据和颜色，内容如下：

precision highp float;

varying lowp vec2 varyTextCoord;

uniform sampler2D colorMap;

void main()

{

gl_FragColor = texture2D(colorMap, varyTextCoord);

}

二、具体实现

1.设置图层

//1.创建特殊图层

重写layerClass，将CCView返回的图层从CALayer替换成CAEAGLLayer

self.myEagLayer = (CAEAGLLayer *)self.layer;

//2.设置scale

[self setContentScaleFactor:[[UIScreen mainScreen]scale]];

//3.设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8

self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];

2.设置上下文

//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;

3.清空缓存区

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;

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];

}

5.设置FrameBuffer

//5.设置FrameBuffer

-(void)setupFrameBuffer

{

//1.定义一个缓存区ID

GLuint buffer;

//2.申请一个缓存区标志

//glGenRenderbuffers(1, &buffer);

//glGenFramebuffers(1, &buffer);

glGenBuffers(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);

}

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];

}

代码见github