OpenGLES自定义顶点/片元着色器&编译连接(二)

一.不采用GLKBaseEffect,使用编译连接自定义顶点/片元着色器(shader),用简单的glsl语言来实现顶点/片元,并进行简单的变换。

        具体思路如图:

具体思路

二.编译链接前,我们先来了解一些基本的OpenGLES的函数参数的说明

2.1编译/链接流程说明

        1)着⾊器与程序对象

        2)创建和编译着⾊器

        3)创建并链接程序

        4)获取和设置统⼀变量

        5)获取和设置属性

        6)着⾊器编译器与程序⼆进制代码

        需要创建2个基本对象才能⽤着⾊器进⾏渲染: 着⾊器对象和程序对象,获取链接后着⾊器对象的⼀般过程包括6个步骤: 

        1. 创建⼀个顶点着⾊器对象和⼀个⽚段着⾊器对象

        2. 将源代码链接到每个着⾊器对象

        3. 编译着⾊器对象

        4. 创建⼀个程序对象

        5. 将编译后的着⾊器对象连接到程序对象

        6. 链接程序对象

2.2函数及参数说明

        创建着色器:GLuint   glCreateShader(GLenum type)参数tyle一般使用GL_VERTEX_SHADER(顶点着色器) 或者GL_FRAGMENT_SHADER(片元着色器)返回着色器句柄

        删除着色器:glDeleteShader(GLuint shader)参数:设置刚才创建好的顶点/片元句柄

        void glShaderSource(GLuint shader , GLSizei count ,const GLChar * const *string, const GLint 

*length)将着色器源码附加到着色器对象上(在上一篇文章我写好了两个顶点/片元着色器.vsh和.fsh文件里面,这里需要将写好的源代码附着到着色器上)参数说明:

                            1)参数1:shader,要编译的着色器对象 *shader

                            2)参数2:numOfStrings,传递的源码字符串数量 1个  特别说明:此参数在大多情况下为1

                            3)参数3:strings,着色器程序的源码(真正的着色器程序源码)

                            4)lenOfStrings,长度,具有每个字符串长度的数组,或NULL,这意味着字符串是NULL终止的

对应程序代码:

                        -(void)compileShader:(GLuint*)shadertype:(GLenum)typefile:(NSString*)file{

                            //1.读取文件路径字符串,根据传入的顶点/片元着色器源代码地址转换为C语言字符串

                            NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];

                            const  GLchar* source = (GLchar*)[content   UTF8String];

                        //2.创建一个shader(根据type类型)

                            *shader =glCreateShader(type);

                            glShaderSource(*shader,1, &source,NULL);

                        //4.把着色器源代码编译成目标代码

                            glCompileShader(*shader);

                        }

        OpenGLES不能像iOS那样设置断电,输出信息,想要看刚才创建并编译好的着色器可以通过:void glGetShaderiv(GLuint shader , GLenum pname , GLint *params )检查链接状态,在下面我会具体讲这个怎么使用和void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog)获取输出日志,具体参数如下:

               (1) void glGetShaderiv(GLuint shader , GLenum pname , GLint *params ); 

                shader— 需要编译的着⾊器对象句柄

                pname— 获取的信息参数,可以为GL_COMPILE_STATUS/GL_DELETE_STATUS/GL_INFO_LOG_LENGTH/GL_SHADER_SOURCE_LENGTH/ GL_SHADER_TYPE 

                params— 指向查询结果的整数存储位置的指针

                (2)void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog); 

                shader— 需要获取信息⽇志的着⾊器对象句柄

                maxLength— 保存信息⽇志的缓存区⼤⼩

                length— 写⼊的信息⽇志的⻓度(减去null 终⽌符); 如果不需要知道⻓度. 这个参数可以为Null 

                infoLog— 指向保存信息⽇志的字符缓存区的指针

2.3创建与链接程序

       (1)创建程序

         GLUint glCreateProgram( ) 说明:创建⼀个程序对象返回值: 返回⼀个执⾏新程序对象的句柄。 同样,只要有创建就有删除void glDeleteProgram( GLuint program )参数为创建好的程序

        void glAttachShader( GLuint program , GLuint shader )说明:将刚才创建好的顶点/片元着色器附着到创建的程序当中,当然有附着就有断开,void glDetachShader(GLuint program); 向创建的程序发送指令,断开附着

        (2)链接程序

            glLinkProgram(GLuint program) 参数为刚才创建好的程序

            检查链接状态:void glGetProgramiv (GLuint program,GLenum pname, GLint *params)

            参数说明:program: 需要获取信息的程序对象句柄

                                pname: 获取信息的参数,可以是: 

                                GL_ACTIVE_ATTRIBUTES 

                                GL_ACTIVE_ATTRIBUTES_MAX_LENGTH 

                                GL_ACTIVE_UNIFORM_BLOCK 

                                GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH 

                                GL_ACTIVE_UNIFROMS 

                                GL_ACTIVE_UNIFORM_MAX_LENGTH 

                                GL_ATTACHED_SHADERS 

                                GL_DELETE_STATUS 

                                GL_INFO_LOG_LENGTH 

                                GL_LINK_STATUS 

                                GL_PROGRAM_BINARY_RETRIEVABLE_HINT 

                                GL_TRANSFORM_FEEDBACK_BUFFER_MODE 

                                GL_TRANSFORM_FEEDBACK_VARYINGS 

                                GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH 

                                GL_VALIDATE_STATUS 

                                params: 指向查询结果整数存储位置的指针

对应的程序里面的代码为:

        glLinkProgram(self.myPrograme);

        GLintlink Status;

         //获取链接状态

        glGetProgramiv(self.myPrograme,GL_LINK_STATUS, &linkStatus);

        if(linkStatus ==GL_FALSE) {

        GLchar  message[512];说明:因为不知道错误信息的长度,设置数组的时候可以尽量大一点,512可以修改

        glGetProgramInfoLog(self.myPrograme,sizeof(message),0, &message[0]);

        NSString*messageString = [NSStringstringWithUTF8String:message];

        NSLog(@"Program Link Error:%@",messageString);

        return;

    }

        (3)使用程序

        void glUseProgram(GLuint program)说明:在创建和链接好之后,使用程序

三.FrameBuffffer (帧缓冲区)和RenderBuffffer(渲染缓冲区)说明以及他两的关系

        首先我们先来看一张图:

FrameBuffffer Objects,RenderBuffffer Objects and Textures

        来自苹果爸爸的官网解释:

            ⼀个renderbuffffer 对象是通过应⽤分配的⼀个2D图像缓存区。renderbuffffer 能够被⽤来分配和存储颜⾊、深度或者模板值。也能够在⼀个framebuffffer被⽤作颜⾊、深度、模板的附件。⼀个renderbuffffer是⼀个类似于屏幕窗⼝系统提供可绘制的表⾯。⽐如pBuffffer。⼀个renderbuffffer,然后它并不能直接的使⽤像⼀个GL 纹理。

            ⼀个 frameBuffffer 对象(通常被称为⼀个FBO)。是⼀个收集颜⾊、深度和模板缓存区的附着点。描述属性的状态,例如颜⾊、深度和模板缓存区的⼤⼩和格式,都关联到FBO(Frame Buffffer Object)。并且纹理的名字和renderBuffffer 对象也都是关联于FBO。各种各样的2D图形能够被附着framebuffffer对象的颜⾊附着点。它们包含了renderbuffffer对象存储的颜⾊值、⼀个2D纹理或⽴⽅体贴图。或者⼀个mip-level的⼆维切⾯在3D纹理。同样,各种各样的2D图形包含了当时的深度值可以附加到⼀个FBO的深度附着点钟去。唯⼀的⼆维图像,能够附着在FBO的模板附着点,是⼀个renderbuffffer对象存储模板值。

四.设置RenderBuffer&FrameBuffer

(一)设置RenderBuffer

        1.定义一个缓存区ID

            GLuintbuffer;

        2.申请一个缓存区标志

            glGenRenderbuffers(1, &buffer);

        3.用属性保存

            self.myColorRenderBuffer = buffer;

        4.将标识符绑定到GL_RENDERBUFFER

            glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);

        5.Context将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象

            [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];

(二)设置FrameBuffer

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

        注意:这里不会将Context与帧缓冲区联系起来,因为帧缓冲区的控制是由GPU控制,当我们用于图像图形显示的时候,是从渲染缓冲区拿的,我们只需要开辟帧缓冲区,把它和渲染缓冲区一起绑定到 GL_COLOR_ATTACHMENT0就行了,表示帧缓冲区和渲染缓冲区对应的关系,可以看上面苹果爸爸的解释,你会看到最后一行代码和设置渲染缓冲区的是不一样的,渲染缓冲区是把Context将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象

五.使用固GLKView定着色器和自定义着色器的函数使用不同点(开辟和绑定我们就不说了,代码一样,直接讲不通的地方)&加载纹理的不同点

1.设置顶点坐标的不同点

            在GLKView固定着色器里面,我们设置顶点坐标数据:

            glEnableVertexAttribArray(GLKVertexAttribPosition);

            glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);

            在自定义顶点着色器,我们设置顶点坐标数据:

            把顶点数据从CPU内存复制到GPU上

            glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

            将顶点数据通过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);

2.设置纹理坐标的不同点

            在GLKView固定着色器里面,我们设置纹理坐标数据:

            纹理坐标数据

            glEnableVertexAttribArray(GLKVertexAttribTexCoord0);

            glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

            在自定义顶点着色器,我们设置纹理坐标数据:

            (1).glGetAttribLocation,用来获取vertex attribute的入口的.

            //注意:第二参数字符串必须和shaderv.vsh中的输入变量:textCoordinate保持一致

            GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");

            (2).设置合适的格式从buffer里面读取数据

            glEnableVertexAttribArray(textCoor);

            (3).设置读取方式(参数解释看上)

            glVertexAttribPointer(textCoor,2,GL_FLOAT,GL_FALSE,sizeof(GLfloat)*5, (float*)NULL+3);

3.加载纹理的不同点

         在GLKView固定着色器里面,我们设置加载纹理:

        1.获取纹理图片路径

    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"timg" ofType:@"jpg"];

        2.设置纹理参数

        纹理坐标原点是左下角,但是图片显示原点应该是左上角.

        NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];

        GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];

        3.使用苹果GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)

        cEffect = [[GLKBaseEffect alloc]init];

        cEffect.texture2d0.enabled = GL_TRUE;

        cEffect.texture2d0.name= textureInfo.name;

        在自定义着色器里面,我们设置加载纹理:

//从图片中加载纹理

- (GLuint)setupTexture:(NSString*)fileName {

    //1、将 UIImage 转换为 CGImageRef

    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

    //判断图片是否获取成功

    if(!spriteImage) {

        NSLog(@"Failed to load image %@", fileName);

        exit(1);

    }

    //2、读取图片的大小,宽和高

    size_twidth =CGImageGetWidth(spriteImage);

    size_theight =CGImageGetHeight(spriteImage);

    //3.获取图片字节数 宽*高*4(RGBA)

    GLubyte* spriteData = (GLubyte*)calloc(width * height *4,sizeof(GLubyte));

    //4.创建上下文

    /*

     参数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);

    //5、在CGContextRef上--> 将图片绘制出来

    /*

     CGContextDrawImage 使用的是Core Graphics框架,坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角,Core Graphics框架的原点在屏幕的左下角。

     CGContextDrawImage 

     参数1:绘图上下文

     参数2:rect坐标

     参数3:绘制的图片

     */

    CGRectrect =CGRectMake(0,0, width, height);

    //6.使用默认方式绘制

    CGContextDrawImage(spriteContext, rect, spriteImage);

    //7、画图完毕就释放上下文

    CGContextRelease(spriteContext);

    //8、绑定纹理到默认的纹理ID(

    glBindTexture(GL_TEXTURE_2D, 0);

    //9.设置纹理属性

    /*

     参数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);

    floatfw = width, fh = height;

    //10.载入纹理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, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);

    //11.释放spriteData

    free(spriteData);   

    return0;

}


效果

下一篇,我们讲纹理的翻转

最后附上demo:链接: https://pan.baidu.com/s/1-6RJ0toD6WUkoozX0Fu1Cw 提取码: fweb


            

        

你可能感兴趣的:(OpenGLES自定义顶点/片元着色器&编译连接(二))