OpenGL ES 使用GLSL和GLKit分别实现金字塔添加纹
2020-08-05 本文已影响0人
iOS_沧海一笑
GLSL实现金字塔添加纹理
- 准备步骤和我的上一篇所讲的一模一样,详情请看这里，我这里主要是讲以下不同的地方。
- 自定义顶点着色器：
// 顶点位置
attribute vec4 position;
// 顶点颜色
attribute vec4 positionColor;
// 纹理颜色
attribute vec2 textCoor;
// 投影矩阵
uniform mat4 projectionMatrix;
// 模型视图矩阵
uniform mat4 modelViewMatrix;
// 与片元着色器桥接的顶点颜色
varying lowp vec4 varyColor;
// 与片元着色器桥接的纹理颜色
varying lowp vec2 vTextCoor;
void main()
{
vTextCoor = textCoor;
varyColor = positionColor;
vec4 vPos;
// 4*4 * 4*4 * 4*1 投影矩阵(4*4) * 模型视图矩阵(4*4) * 顶点向量(4*1)
vPos = projectionMatrix * modelViewMatrix * position;
// 赋值给gl_Position的内建变量
gl_Position = vPos;
}
- 自定义片元着色器
precision highp float;
varying lowp vec4 varyColor;
varying lowp vec2 vTextCoor;
uniform sampler2D colorMap;
void main(){
//color&texture 颜色和纹理的混合
vec4 weakMask = texture2D(colorMap,vTextCoor);
vec4 mask = varyColor;
float alpha = 0.3;
// 使用混合公式，将颜色和纹理进行混合，只有当透明度不为1的时候才能混合
vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
// 赋值给gl_FragColor的内建变量
gl_FragColor = tempColor;
}
- 顶点数据
// 前三个位顶点坐标(x, y, z), 中间三位是顶点颜色值(r, g, b), 后2位是纹理坐标(s, t)
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,//顶点
};
//处理纹理数据, 注意：这里的步长要改为 8。
GLuint textCoor = glGetAttribLocation(self.myPorgram, "textCoordinate");
glEnableVertexAttribArray(textCoor);
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (float *)NULL + 6);
// 加载纹理的方法，之前写过多次，这里就不赘述了。
[self setupTexture:@"xiannv"];
// 设置纹理采样器 sampler2D
glUniform1i(glGetUniformLocation(self.myPorgram, "colorMap"), 0);
GLKit 实现金字塔添加纹理
- 使用GLKit就简单多了，因为GLKit已经封装了很多方法供我们使用了。主要有以下3步：
- 新建图层
setupContext
//1. 新建图层
- (void)setupContext {
//1.新建OpenGL ES 上下文
self.myContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
GLKView *view = (GLKView *)self.view;
view.context = self.myContext;
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
[EAGLContext setCurrentContext:self.myContext];
//开启深度测试
glEnable(GL_DEPTH_TEST);
}
- 渲染图形
render
//2. 渲染图形
- (void)render {
//1.顶点数据
//前3个元素是顶点数据，中间3个是颜色值，最后2个是纹理坐标
GLfloat attrArr[] =
{
-0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f,//左上
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f,//右上
-0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f,//左下
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f,//右下
0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.5f, 0.5f,//顶点
};
// GLfloat attrArr[] =
// {
// -0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, //左上
// 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, //右上
// -0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, //左下
//
// 0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, //右下
// 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, //顶点
// };
//2.索引绘图
GLuint indices[] = {
0, 3, 2,
0, 1, 3,
0, 2, 4,
0, 4, 1,
2, 3, 4,
1, 4, 3,
};
//顶点个数
self.count = sizeof(indices) / sizeof(GLuint);
//将顶点数组放入数组缓冲区中 GL_ARRAY_BUFFER
GLuint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
//将索引数组存储到索引缓冲区 GL_ELEMENT_ARRAY_BUFFER
GLuint index;
glGenBuffers(1, &index);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
//使用顶点数据
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
//使用颜色数据
glEnableVertexAttribArray(GLKVertexAttribColor);
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
//纹理坐标数据
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);
//着色器
self.myEffect = [[GLKBaseEffect alloc] init];
//投影视图
CGSize size = self.view.bounds.size;
float aspect = fabs(size.width / size.height);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 100.0);
projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0, 1.0, 1.0);
self.myEffect.transform.projectionMatrix = projectionMatrix;
//模型视图
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0, 0.0, -2.0);
self.myEffect.transform.modelviewMatrix = modelViewMatrix;
//定时器
double seconds = 0.1;
timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, seconds * NSEC_PER_SEC, 0.0);
dispatch_source_set_event_handler(timer, ^{
self.xDegree += 0.1 * self.xB;
self.yDegree += 0.1 * self.yB;
self.zDegree += 0.1 * self.zB;
});
dispatch_resume(timer);
}
- 加载纹理数据
setupTexture
- (void)setupTexture {
//1.获取纹理图片路径
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"xiannv" ofType:@"jpg"];
//2.设置纹理参数
//纹理坐标原点是左下角，但是图片的显示原点是左上角
NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
//3.使用苹果GLKit 提供的GLKBaseEffect 完成着色器工作
self.myEffect.texture2d0.enabled = GL_TRUE;
self.myEffect.texture2d0.name = textureInfo.name;
}
- 要实现
GLKViewDelegate的代理方法glkView:drawInRect:
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
glClearColor(0.3, 0.3, 0.3, 1.0);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
[self.myEffect prepareToDraw];
glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
}
- 要实现
GLKViewControllerDelegate的代理方法-(void)update实时更新旋转状态
-(void)update {
GLKMatrix4 modeViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0, 0.0, -2.5);
modeViewMatrix = GLKMatrix4RotateX(modeViewMatrix, self.xDegree);
modeViewMatrix = GLKMatrix4RotateY(modeViewMatrix, self.yDegree);
modeViewMatrix = GLKMatrix4RotateZ(modeViewMatrix, self.zDegree);
self.myEffect.transform.modelviewMatrix = modeViewMatrix;
}
- 结语：需要源码的请看这里 GLSL_Pyramid, GLKit_Pyramid
