OpenGL ES 案例02:GLKit绘制立方体+旋转

简介: OpenGL ES 案例02:GLKit绘制立方体+旋转

本案例是实现一个有纹理的立方体,并根据任意轴旋转,整体效果如下


  • 未加光照

微信图片_20220514175356.png


增加光照效果

微信图片_20220514175557.png


增加光照的主要的思路如下

微信图片_20220514175726.png


整体思路


代码的实现主要分为4部分:


  • 准备工作:这部分主要的相关库的导入及属性的创建(这里不做过多阐述)
  • ViewDidLoad函数:初始化OpenGL ES相关属性,加载顶点&纹理坐标数据,以及设置定时器
  • GLKViewDelegate函数:视图的绘制
  • update函数:定时器方法,计算旋转角度并修改矩阵堆栈,重新渲染立方体,以实现立方体的旋转


ViewDidLoad函数


这部分主要是一些初始化工作


  • commonInit: OpenGL ES相关初始化
  • setupVertex: 加载顶点&纹理坐标数据
  • addCADisplayLink: 添加定时器


commonInit函数


OpenGL ES初始化分为五部分:


  • 初始化上下文 & 设置当前上下文
  • 创建GLKView对象,并设置context,加入view中
  • 配置深度缓冲区
  • 获取纹理图片 & 设置纹理参数
  • 初始化effect,并使用effect

注:代码分为OC版本和Swift版本


  • OC
- (void) commonInit{
//    1、创建context
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    [EAGLContext setCurrentContext:context];
//    2、创建GLKView并设置代理
    CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width );
    self.glkView = [[GLKView alloc] initWithFrame:frame context:context];
    self.glkView.backgroundColor = [UIColor clearColor];
    self.glkView.delegate = self;
//    3、使用深度测试
    self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
//    4、将glkView加入到view上
    [self.view addSubview:self.glkView];
//    5、获取纹理图片
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"mouse" ofType:@"jpg"];
    UIImage *image = [UIImage imageWithContentsOfFile:filePath];
//    6、设置纹理参数(纹理倒置翻转的策略)
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft: @(YES)};
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:options error:NULL];
//    7、使用effect
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;
}
  • Swift:其中有些变量使用了懒加载具体的代码请见文末的链接
fileprivate func commonInit(){
 //        1、初始化上下文 & 设置当前上下文
         guard let context = EAGLContext(api: .openGLES3) else{
             return
         }
         EAGLContext.setCurrent(context)
         glkView.context = context
 //        读取纹理图片
         let filePath = Bundle.main.path(forResource: "mouse", ofType: "jpg")
         let image = UIImage(contentsOfFile: filePath!)
         guard let textureInfo: GLKTextureInfo = try? GLKTextureLoader.texture(with: (image?.cgImage)!, options: [GLKTextureLoaderOriginBottomLeft:NSNumber.init(integerLiteral: 1)]) else{
             return
         }
 //        使用effect
         effect = GLKBaseEffect()
         effect.texture2d0.name = textureInfo.name
         effect.texture2d0.target = GLKTextureTarget(rawValue: textureInfo.target)!
     }


setupVertex函数


这部分主要是设置顶点数据(顶点坐标 & 纹理坐标 & 法线),并将这些数据从CPU拷贝至GPU


设置顶点数据


下图是立方体的顶点坐标与纹理坐标图示

微信图片_20220514180103.png

其中6个面与纹理的映射关系如下

微信图片_20220514180216.png

顶点数据使用结构体定义


  • OC版本
typedef struct {
    GLKVector3 positionCoord;   //顶点坐标
    GLKVector2 textureCoord;    //纹理坐标
    GLKVector3 normal;          //法线
} CCVertex;
//初始化--这里数据的初始化方式是c语言中的结构体赋值
(CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
  • Swift版本(暂时未包括法线)
struct CCVertex {
     var positionCoord: GLKVector3
     var textureCoord: GLKVector2
 }
 //初始化
 CCVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (0, 1)))


顶点数据的具体代码见完整demo代码,这里不做过多说明


开辟缓存区,copy顶点数据到GPU


将顶点数据从内存(CPU)拷贝至显存(GPU)中

顶点缓冲区:简称VBO

顶点数组:简称VAO

glBufferData中确认了缓存区的大小


  • OC版本
 glGenBuffers(1, &_vertexBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(CCVertex)*kCoordCount, self.vertices, GL_STATIC_DRAW);
  • Swift版本
//2、拷贝到顶点缓冲区
         glGenBuffers(1, &vertexBuffer)
 //        绑定顶点缓冲区
         glBindBuffer(GLenum(GL_ARRAY_BUFFER), vertexBuffer)
 //        coppy顶点数据
         glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<CCVertex>.size*kVertexCount, vertices, GLenum(GL_STATIC_DRAW))
glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<CCVertex>.size*kVertexCount, vertices, GLenum(GL_STATIC_DRAW))


打开通道


attribute的开关在ios中是默认关闭的,需要使用代码手动开启,同时通道需要打开三次(顶点,纹理,法线各需要打开一次),将顶点数据从显存中读取到GLKit的着色器中


  • OC版本

其中的NULL是可以省略的,但是加上代码可读性强

//    顶点数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, positionCoord));
//    纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, textureCoord));
//    光照
    glEnableVertexAttribArray(GLKVertexAttribNormal);
    glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, normal));
  • Swift版本(暂未加光照)
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue))
          glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CCVertex>.size), UnsafeMutableRawPointer(bitPattern: 0))
         glEnableVertexAttribArray(GLuint(GLKVertexAttrib.texCoord0.rawValue))
         //这里加4的原因是因为苹果对部分包含vector类型数据的结构体加了一个padding,此处这个padding等于4个字节。CCVertex占24个字节,而不是5个float所占的20个字节
         glVertexAttribPointer(GLuint(GLKVertexAttrib.texCoord0.rawValue), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CCVertex>.size), UnsafeMutableRawPointer(bitPattern: MemoryLayout<GLKVector3>.size+4))


addCADisplayLink函数


初始化定时器,并将定时器加入runloop中,用于立方体旋转效果的实现


  • OC版本
- (void)addCADisplayLink{
    self.angle = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
  • Swift版本
fileprivate func addCADisplayLink(){
         displayLink.add(to: RunLoop.main, forMode: .common)
     }


update更新


CADisplayLink定时器的刷新的频率与屏幕刷新频率一致,每次刷新都需要计算旋转角度,并应用于立方体


  • OC版本
- (void) update{
    //计算旋转度数
    self.angle = (self.angle +5) % 360;
//    修改baseEffect.transform.modelviewMatrix
    self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1, 0.7);
//    重新渲染
    [self.glkView display];
}
  • Swift版本
@objc fileprivate func update(){
 //        计算旋转角度
         angle = (angle + 5).truncatingRemainder(dividingBy: 360)
 //        修改矩阵堆栈
         effect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(angle), 0.3, 1, -0.7)
 //        重新渲染,回调代理方法重新绘制
         glkView.display()
     }


GLKViewDelegate代理


由于GLKView是自定义的,所以需要在前面设置delegate,当然也可以将控制器默认的view的父类改为GLKView,不需要设置delegate


代理方法的主要目的是绘制视图的内容,并根据定时器的旋转变换,重新渲染视图


  • OC版本
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
//    开启深度测试
    glEnable(GL_DEPTH_TEST);
//    清除缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//    准备绘制
    [self.baseEffect prepareToDraw];
//    绘图(数组绘制)
    glDrawArrays(GL_TRIANGLES, 0, kCoordCount);
}
  • Swift版本
extension ViewController: GLKViewDelegate{
     func glkView(_ view: GLKView, drawIn rect: CGRect) {
 //       开启深度测试
         glEnable(GLenum(GL_DEPTH_TEST));
         glClear(GLbitfield(GL_COLOR_BUFFER_BIT) | UInt32(GL_DEPTH_BUFFER_BIT))
         //准备绘制
         effect.prepareToDraw()
         //开始绘制
         glDrawArrays(GLenum(GL_TRIANGLES), 0, GLsizei(kVertexCount))
     }
 }


注:swift与OC代码的难点主要还是在于对指针的操作

相关文章
|
6月前
QT4.7版本的OPENGL的3D旋转模型例子
QT4.7版本的OPENGL的3D旋转模型例子
119 0
|
6月前
|
XML 小程序 Java
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
【Android App】三维投影OpenGL ES的讲解及着色器实现(附源码和演示 超详细)
120 0
|
C++ 计算机视觉 Python
C++ VS OpenGL绘制教室三维立体旋转图像
C++ VS OpenGL绘制教室三维立体旋转图像
125 0
C++ VS OpenGL绘制教室三维立体旋转图像
|
存储 编解码 算法
Opengl ES之LUT滤镜(上)
Opengl ES之连载系列
449 0
|
数据安全/隐私保护 开发者
OpenGL ES 多目标渲染(MRT)
Opengl ES连载系列
315 0
|
缓存 C++
Opengl ES之FBO
Opengl ES连载系列
144 0
|
数据安全/隐私保护 索引
Opengl ES之纹理数组
Opengl ES连载系列
255 0
|
数据安全/隐私保护
Opengl ES之水印贴图
Opengl ES之连载系列
146 0
|
Java 数据安全/隐私保护 Android开发
Opengl ES之矩阵变换(下)
Opengl ES连载系列
128 0
|
Java API 数据安全/隐私保护
Opengl ES之矩阵变换(上)
Opengl ES连载系列
147 0