首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS开发-OpenGL ES入门教程2

iOS开发-OpenGL ES入门教程2

作者头像
落影
发布2018-04-27 14:56:33
1.1K0
发布2018-04-27 14:56:33
举报
文章被收录于专栏:落影的专栏落影的专栏

教程

OpenGLES入门教程1-Tutorial01-GLKit

这次的是shader编译链接glsl入门简单图形变换

OpenGL ES系列教程在这里

OpenGL ES系列教程的代码地址 - 你的star和fork是我的源动力,你的意见能让我走得更远。

效果展示

核心思路

不采用GLKBaseEffect,编译链接自定义的着色器(shader),用简单的glsl语言来实现顶点和片元着色器,并对图片用简单的图形变换。

具体细节

1、shader编译
  • c语言编译流程:预编译、编译、汇编、链接
  • glsl的编译过程类似c语言,主要有glCompileShader、glAttachShader、glLinkProgram三步;
- (GLuint)loadShaders:(NSString *)vert frag:(NSString *)frag {
    GLuint verShader, fragShader;
    GLint program = glCreateProgram();
    
    //编译
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
        
    //释放不需要的shader
    glDeleteShader(verShader);
    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);
}

2、glsl入门

glsl是OpenGL的着色器语言,有c基础可以很快上手,注意以下几点:

  • 着色器有顶点着色器和片元着色器两种;参考下图,顶点着色器在第一个,片元着色器在最后一个;注意,在顶点着色器中处理顶点,片元着色器处理像素点颜色,那么对于一条线段,顶点着色器只会处理俩个顶点的坐标、颜色等信息,线段上的点会由插值生成。
  • 如下,是一个顶点着色器。出现了attribute、uniform、varying这类修饰符,遇到这些可以看 这里 ,有详细的概念介绍。 需要注意的是,glsl是严格的类型匹配,int和float进行运算会出错。 顶点着色器的目标是输出顶点,所以gl_Position必须赋值
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
    varyTextCoord = textCoordinate;
    
    vec4 vPos = position;

    vPos = vPos * rotateMatrix;

    gl_Position = vPos;
}
  • 如下,这是一个片元着色器。注意,在片元着色器,数字变量都要有类似lowp的精度描述。 片元着色器的目标是输出像素颜色,gl_FragColor必须赋值
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

这里有一个详细的博客,讲得很好。

3、简单图形变换

几何变换有比例、旋转、平移、对称、错切,这里我们介绍简单的旋转变换。

先给出结论:对于一个图形进行旋转变换,相当于对每个顶点乘以一个旋转变换矩阵。矩阵如下:

旋转矩阵.png

对于顶点的变换,我们可以放在OC代码里面来实现,把顶点变换完成后,把顶点输入到OpenGLES;也可以在glsl代码实现,把顶点变换交给gpu来完成。这里我们采用的是后者。

如下:

    GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");
    
    float radians = 10 * 3.14159f / 180.0f;
    float s = sin(radians);
    float c = cos(radians);
    
    //z轴旋转矩阵
    GLfloat zRotation[16] = { //
        c, -s, 0, 0.2, //
        s, c, 0, 0,//
        0, 0, 1.0, 0,//
        0.0, 0, 0, 1.0//
    };
    
    //设置旋转矩阵
    glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);

细心的开发者会发现,这里的z轴旋转矩阵和上面给出来的旋转矩阵并不一致。

究其原因就是OpenGLES是列主序矩阵,对于一个一维数组表示的二维矩阵,会先填满每一列(a0、a1、a2、a3)。

把矩阵赋值给glsl对应的变量,然后就可以在glsl里面计算出旋转后的矩阵。

思考题

  • 1、为什么熊猫的反的?要如何解决?
  • 2、在这个样例中,顶点着色器调用次数和片元着色器调用次数哪个多?
  • 3、glsl里面的变量可以通过glUniform进行赋值,那么是否可以在编译成功后或者链接成功后直接进行赋值?

总结

这一篇的内容作为教程2难度有点大,特别是shader和glsl语言容易让人兴趣直接降到谷底,如果觉得难,可以暂时不用管glsl语言。

待熟悉GLKBaseEffect后,再回来学习glsl也不迟。

代码点我

思考题答案

1、纹理坐标系的(0, 0)在左下角; 2、片元着色器。顶点着色器调用次数与顶点数量有关,片元着色器调用与像素多少有关系。 3、一个一致变量在一个图元的绘制过程中是不会改变的,所以其值不能在glBegin/glEnd中设置。一致变量适合描述在一个图元中、一帧中甚至一个场景中都不变的值。一致变量在顶点shader和片断shader中都是只读的。首先你需要获得变量在内存中的位置,这个信息只有在连接程序之后才可获得。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.03.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 教程
  • 效果展示
  • 核心思路
  • 具体细节
    • 1、shader编译
    • 2、glsl入门
      • 3、简单图形变换
      • 思考题
      • 总结
      • 思考题答案
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档