在 SLView 编写代码
#import "SLView.h"
#import <OpenGLES/ES3/gl.h>
#import "GLESMath.h"
#import "GLESUtils.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 myProgram;
@property(nonatomic,assign)GLuint myVertices;
@end
@implementation SLView
{
float xDegree;
float yDegree;
float zDegree;
BOOL bX;
BOOL bY;
BOOL bZ;
NSTimer* myTimer;
}
-(void)layoutSubviews
{
//1.设置图层
[self setUpLayer];
//2.设置上下文
[self setUpContext];
//3.清空缓存区
[self deleteBuffer];
//4.设置renderBuffer
[self setUpRenderBuffer];
//5.设置frameBuffer
[self setUpFrameBuffer];
//6.绘制
[self render];
}
#pragma mark - 1.设置图层
-(void)setUpLayer
{
self.myEagLayer = (CAEAGLLayer *)self.layer;
[self setContentScaleFactor:[[UIScreen mainScreen] scale]];
self.myEagLayer.opaque = YES;
self.myEagLayer.drawableProperties = @{kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8,kEAGLDrawablePropertyRetainedBacking:@(false)};
}
+(Class)layerClass
{
return [CAEAGLLayer class];
}
#pragma mark - 2.设置上下文
-(void)setUpContext
{
EAGLContext * context = [[EAGLContext alloc] initWithAPI: kEAGLRenderingAPIOpenGLES3];
if (!context)
{
NSLog(@"create context failed!");
return;
}
if (![EAGLContext setCurrentContext:context])
{
NSLog(@"setCurrentContext failed!");
return;
}
self.myContext = context;
}
#pragma mark - 3.清空缓存区
-(void)deleteBuffer
{
glDeleteBuffers(1, &_myColorRenderBuffer);
_myColorRenderBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
_myColorFrameBuffer = 0;
}
#pragma mark - 4.设置renderBuffer
-(void)setUpRenderBuffer
{
//1.定义一个缓存区
GLuint buffer;
//2.申请一个缓存区标志
glGenRenderbuffers(1, &buffer);
self.myColorRenderBuffer = buffer;
//4.将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
#pragma mark - 5.设置frameBuffer
-(void)setUpFrameBuffer
{
//1.定义一个缓存区
GLuint buffer;
//2.申请一个缓存区标志
glGenFramebuffers(1, &buffer);
self.myColorFrameBuffer = buffer;
//4.设置当前的framebuffer
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
//5.将_myColorRenderBuffer 装配到GL_COLOR_ATTACHMENT0 附着点上
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}
#pragma mark - 6.绘制
-(void)render
{
//1.清屏颜色
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
GLfloat scale = [[UIScreen mainScreen] scale];
//2.设置视口
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
//3.获取顶点着色程序、片元着色器程序文件位置
NSString * vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"glsl"];
NSString * fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"glsl"];
//4.判断self.myProgram是否存在,存在则清空其文件
if (self.myProgram)
{
glDeleteProgram(self.myProgram);
self.myProgram = 0;
}
//5.加载程序到myProgram中来
self.myProgram = [self loadShader:vertFile fragFile:fragFile];
//6.链接
glLinkProgram(self.myProgram);
GLint * linkStatus;
//7.获取链接状态
glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE)
{
GLchar messages[520];
glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
NSString * messageStr = [NSString stringWithUTF8String:messages];
NSLog(@"error = %@\n",messageStr);
return;
}
else
{
glUseProgram(self.myProgram);
}
//8.创建顶点数组 & 索引数组
//(1)顶点数组 前3顶点值(x,y,z),后3位颜色值(RGB)
GLfloat attrArr[] =
{
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f,//左上
0.5f, 0.5f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f, 1.0f,//右上
-0.5f, -0.5f, 0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,//左下
0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 0.5f, 1.0f, 0.0f,//右下
0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.5f, 0.5f,//顶点
};
//(2).索引数组
GLuint indices[] =
{
0, 3, 2,
0, 1, 3,
0, 2, 4,
0, 4, 1,
2, 3, 4,
1, 4, 3,
};
//(3).判断顶点缓存区是否为空,如果为空则申请一个缓存区标识符
if (self.myVertices == 0)
{
glGenBuffers(1, &_myVertices);
}
//9.-----处理顶点数据-------
//(1).将_myVertices绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, _myVertices);
//(2).把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
//(3).将顶点数据通过myPrograme中的传递到顶点着色程序的position
//1.glGetAttribLocation,用来获取vertex attribute的入口的.
//2.告诉OpenGL ES,通过glEnableVertexAttribArray,
//3.最后数据是通过glVertexAttribPointer传递过去的。
GLuint position = glGetAttribLocation(self.myProgram, "position");
//(4).打开position
glEnableVertexAttribArray(position);
//(5).设置读取方式
//参数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) * 8, NULL);
//10.--------处理顶点颜色值-------
//(1).glGetAttribLocation,用来获取vertex attribute的入口的.
//注意:第二参数字符串必须和shaderv.glsl中的输入变量:positionColor保持一致
GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
//(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(positionColor);
//(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(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
//纹理坐标
GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoor");
glEnableVertexAttribArray(textCoor);
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (float *)NULL + 6);
//加载纹理
[self setUpTexture:@"tianqi"];
//设置纹理采样器 sampler2D
glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);
//11.找到myProgram中的projectionMatrix、modelViewMatrix 2个矩阵的地址。如果找到则返回地址,否则返回-1,表示没有找到2个对象。
GLuint projectionMatrix = glGetUniformLocation(self.myProgram, "projectionMatrix");
GLuint modelViewMatrix = glGetUniformLocation(self.myProgram, "modelViewMatrix");
//12.创建4 * 4投影矩阵
KSMatrix4 temProjectionMatrix;
//(1)获取单元矩阵
ksMatrixLoadIdentity(&temProjectionMatrix);
//(2)获取透视矩阵
/*
参数1:矩阵
参数2:视角,度数为单位
参数3:纵横比
参数4:近平面距离
参数5:远平面距离
*/
ksPerspective(&temProjectionMatrix, 30.0f, self.frame.size.width/self.frame.size.height, 5.0f, 20.0f);
//(3)将投影矩阵传递到顶点着色器
/*
void glUniformMatrix4fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat *value);
参数列表:
location:指要更改的uniform变量的位置
count:更改矩阵的个数
transpose:是否要转置矩阵,并将它作为uniform变量的值。必须为GL_FALSE
value:执行count个元素的指针,用来更新指定uniform变量
*/
glUniformMatrix4fv(projectionMatrix, 1, GL_FALSE, &temProjectionMatrix.m[0][0]);
//13.创建一个4 * 4 矩阵,模型视图矩阵
KSMatrix4 temModelViewMatrix;
//(1)获取单元矩阵
ksMatrixLoadIdentity(&temModelViewMatrix);
//(2)平移,z轴平移-10
ksTranslate(&temModelViewMatrix, 0.0f, 0.0f, -10.0f);
//(3)创建一个4 * 4 矩阵,旋转矩阵
KSMatrix4 rotationMatrix;
//(4)初始化为单元矩阵
ksMatrixLoadIdentity(&rotationMatrix);
//(5)旋转
ksRotate(&rotationMatrix, xDegree, 1.0f, 0.0f, 0.0f); //绕X轴
ksRotate(&rotationMatrix, yDegree, 0.0f, 1.0f, 0.0f); //绕Y轴
ksRotate(&rotationMatrix, zDegree, 0.0f, 0.0f, 1.0f); //绕Z轴
//(6)把变换矩阵相乘.将temModelViewMatrix矩阵与rotationMatrix矩阵相乘,结合到模型视图
ksMatrixMultiply(&temModelViewMatrix, &rotationMatrix, &temModelViewMatrix);
//(7)将模型视图矩阵传递到顶点着色器
/*
void glUniformMatrix4fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat *value);
参数列表:
location:指要更改的uniform变量的位置
count:更改矩阵的个数
transpose:是否要转置矩阵,并将它作为uniform变量的值。必须为GL_FALSE
value:执行count个元素的指针,用来更新指定uniform变量
*/
glUniformMatrix4fv(modelViewMatrix, 1, GL_FALSE, &temModelViewMatrix.m[0][0]);
//14.开启剔除操作效果
glEnable(GL_CULL_FACE);
//15.使用索引绘图
/*
void glDrawElements(GLenum mode,GLsizei count,GLenum type,const GLvoid * indices);
参数列表:
mode:要呈现的画图的模型
GL_POINTS
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN
count:绘图个数
type:类型
GL_BYTE
GL_UNSIGNED_BYTE
GL_SHORT
GL_UNSIGNED_SHORT
GL_INT
GL_UNSIGNED_INT
indices:绘制索引数组
*/
glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_INT, indices);
//16.要求本地窗口系统显示OpenGL ES渲染<目标>
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}
-(GLuint)loadShader:(NSString *)vertFile fragFile:(NSString *)fragFile
{
GLuint vertShader, fragShader;
GLuint program = glCreateProgram();
[self compileShader:&vertShader type:GL_VERTEX_SHADER file:vertFile];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:fragFile];
glAttachShader(program, vertShader);
glAttachShader(program, fragShader);
glDeleteShader(vertShader);
glDeleteShader(fragShader);
return program;
}
-(void)compileShader:(GLuint*)shader type:(GLenum)type file:(NSString *)file
{
NSString * content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar * source = (GLchar *)[content UTF8String];
*shader = glCreateShader(type);
glShaderSource(*shader, 1, &source, NULL);
glCompileShader(*shader);
}
- (IBAction)xClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bX = !bX;
}
- (IBAction)yClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bY = !bY;
}
- (IBAction)zClick:(id)sender {
//开启定时器
if (!myTimer) {
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(reDegree) userInfo:nil repeats:YES];
}
//更新的是X还是Y
bZ = !bZ;
}
-(void)reDegree
{
//如果停止X轴旋转,X = 0则度数就停留在暂停前的度数.
//更新度数
xDegree += bX * 5;
yDegree += bY * 5;
zDegree += bZ * 5;
//重新渲染
[self render];
}
#pragma mark - 从图片中加载纹理
-(void)setUpTexture:(NSString *)fileName
{
//1.将UIImage转换为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.获取图片字节数 宽*高*4(RGBA)
GLubyte * spriteData = (GLubyte *)calloc(width * height * 4, sizeof(GLubyte));
//5.创建上下文
/*
参数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);
//6.在CGContextRef上将图片绘制出来
/*
CGContextDrawImage 使用的是Core Graphics框架,坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角,Core Graphics框架的原点在屏幕的左下角。
CGContextDrawImage
参数1:绘图上下文
参数2:rect坐标
参数3:绘制的图片
*/
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
//解决纹理翻转(方法2)
// CGRect rect = CGRectMake(0, 0, width, height);
// CGContextTranslateCTM(spriteContext, 0, rect.size.height);
// CGContextScaleCTM(spriteContext, 1.0, -1.0);
// CGContextDrawImage(spriteContext, rect, spriteImage);
CGContextRelease(spriteContext);
//7.绑定纹理
glBindTexture(GL_TEXTURE_2D, 0);
//8.设置纹理属性
/*
参数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);
//9.载入纹理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, (GLsizei)width, (GLsizei)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
//10.释放spriteData
free(spriteData);
}
创建着色器程序
新建shaderv.glsl和shaderf.glsl文件,shaderv.glsl为顶点着色器,GLSL代码如下:
attribute vec4 position;
attribute vec4 positionColor;
attribute vec2 textCoor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
void main()
{
vTextCoor = textCoor;
varyColor = positionColor;
vec4 vPos;
vPos = projectionMatrix * modelViewMatrix * position;
gl_Position = vPos;
}
shaderf.glsl为片元着色器,GLSL代码如下:
- 颜色填充
precision highp float;
varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = varyColor;
}
- 纹理填充
precision highp float;
varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vTextCoor);
}
- 颜色纹理混合填充
precision highp float;
varying lowp vec2 vTextCoor;
varying lowp vec4 varyColor;
uniform sampler2D colorMap;
void main()
{
vec4 weakMask = texture2D(colorMap, vTextCoor);
vec4 mask = varyColor;
float alpha = 0.3;
vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
gl_FragColor = tempColor;
}