美文网首页
3、OpenGL ES初探之使用GLSL绘制金字塔,并实现颜色与

3、OpenGL ES初探之使用GLSL绘制金字塔,并实现颜色与

作者: 溪浣双鲤 | 来源:发表于2019-06-14 00:13 被阅读0次

直接上干货代码

一、绘制环境--代码准备阶段


打开Xcode,新建一个工程,自定义一个BMView并关联到ViewController的view上,方便查看效果

//
//  ViewController.m
//  PyramidProject
//
//  Created by battleMage on 2019/6/13.
//  Copyright © 2019 battleMage. All rights reserved.
//

#import "ViewController.h"
#import "BMView.h"
@interface ViewController ()
/** 自定义view */
@property (nonatomic, strong)BMView * myView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.myView = [[BMView alloc]initWithFrame:self.view.bounds];
    [self.view addSubview:self.myView];
}

@end


重写View的layoutSubviews方法,定义需要的属性和全局变量,按步骤准备开始绘图:

//
//  BMView.m
//  PyramidProject
//
//  Created by battleMage on 2019/6/13.
//  Copyright © 2019 battleMage. All rights reserved.
//

#import "BMView.h"
#import <OpenGLES/ES2/gl.h>
#import "GLESMath.h"
#import "GLESUtils.h"

@interface BMView()

@property(nonatomic,strong)CAEAGLLayer *myEagLayer; //layer显示
@property(nonatomic,strong)EAGLContext *myContext; //上下文环境
@property(nonatomic,assign)GLuint myColorRenderBuffer; //renderBuffer
@property(nonatomic,assign)GLuint myColorFrameBuffer; //frameBuffer
@property(nonatomic,assign)GLuint myProgram; //关联program
@property (nonatomic, assign) GLuint  myVertices;//顶点缓冲区

@end

@implementation BMView
{
    //设置完成后预览是是否打开XYZ轴旋转
    BOOL bX;
    BOOL bY;
    BOOL bZ;
    //设置点击XYZ旋转时的旋转角度
    float xDegree;
    float yDegree;
    float zDegree;
    
    NSTimer * myTimer;//定时器,设置每秒旋转
}

//重写layoutSubviews
- (void)layoutSubviews {
    //1/设置图层
    [self setupLayer];
    //2/设置上下文
    [self setupContext];
    //3/清空缓冲区
    [self deleteBuffer];
    //4/设置renderBuffer
    [self setupRenderBuffer];
    //5/设置frameBuffer
    [self setupFrameBuffer];
    //6/绘制
    [self render];
}

//1/设置图层
- (void)setupLayer {
}
//2/设置上下文
- (void)setupContext {
}
//3/清空缓冲区
- (void)deleteBuffer {
}
//4/设置renderBuffer
- (void)setupRenderBuffer {
}
//5/设置frameBuffer
- (void)setupFrameBuffer {
}
//6/开始绘制
- (void)render {
}

@end

1、设置图层

//1/设置图层
- (void)setupLayer {
    //创建eaglLayer并设置大小,设置缩放比然后添加到self.layer上
    CAEAGLLayer *eaglLayer = [CAEAGLLayer layer];
    eaglLayer.frame = self.layer.frame;
    [eaglLayer setContentsScale:[UIScreen mainScreen].scale];
    [self.layer addSublayer:eaglLayer];
    self.myEagLayer = eaglLayer;
    //设置eaglLayer绘制属性
    self.myEagLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking:@false,
                                           kEAGLDrawablePropertyColorFormat:kEAGLColorFormatRGBA8,
                                           };
}

2、创建绘制上下文

//2/设置上下文
- (void)setupContext {

    //使用OpenGL ES2 API 创建上下文
    EAGLContext * context = [[EAGLContext alloc]initWithAPI:(kEAGLRenderingAPIOpenGLES2)];
    //校验是否创建成功
    if (!context) {
        NSLog(@"Create Context Failed");
        return;
    }
    
    //设置上下文并校验是否设置成功
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"Set Current Context Failed");
        return;
    }
    
    //给上下文属性赋值
    self.myContext = context;
}

3、清空缓冲区

//3/清空缓冲区
- (void)deleteBuffer {

    //清空renderBuffer缓冲区并置空
    glDeleteBuffers(1, &_myColorRenderBuffer);
    _myColorRenderBuffer = 0;
    
    //清空frameBuffer缓冲区并置空
    glDeleteBuffers(1, &_myColorFrameBuffer);
    _myColorFrameBuffer = 0;
}

4、设置renderBuffer

//4/设置renderBuffer
- (void)setupRenderBuffer {
    //定义一个缓冲区
    GLuint renderBuffer;
    //申请一个缓冲区标志
    glGenRenderbuffers(1, &renderBuffer);
    //给属性赋值
    self.myColorRenderBuffer = renderBuffer;
    //将标识符绑定到GL_RENDERBUFFER
   glBindRenderBuffer(GL_RENDERBUFFER, renderBuffer);
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}

5、设置frameBuffer

//5/设置frameBuffer
- (void)setupFrameBuffer {

    //定义一个缓冲区
    GLuint frameBuffer;
    //申请一个缓冲区标志
    glGenFramebuffers(1, &frameBuffer);
    //给属性赋值
    self.myColorFrameBuffer = frameBuffer;
    
    //绑定当前的标识符到GL_FRAMEBUFFER
          (GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    //将frameBuffer装配到GL_COLOR_ATTACHMENT0
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
}

二、编写顶点/片元着色器程序并加载顶点/片元着色器程序


command+n 新建两个empty文件,并分别修改文件名和后缀为shader.vsh , shader.fsh,这个文件名和后缀都是可以自定义的,并没有固定格式要求,然后使用GLSL语法编写片元/顶点着色器程序

1、编写顶点着色器程序

外界传入positionpositionColor,并且传入投影矩阵projectionMatrix,经过计算顶点而生成的模型视图矩阵modelViewMatrix,由于片元着色器不能直接接收attribute符号修饰的变量,所以用varying修饰符把传入到顶点着色器中的顶点颜色值传递给片元着色器

attribute vec4 position;
attribute vec4 positionColor;

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

void main {

    varyColor = positionColor;
    
    vec4 vPositon;
    vPosition = projectionMatrix * modelVieMatrix * position;
    gl_Position = vPosition;
}

2、编写片元着色器程序

此处接收的varyColor是从顶点着色器中传递过来的,所以varyColor变量修饰符、精度及名称必须和顶点着色器中的变量完全一致!!!!!否则会出错

varying lowp vec4 varyColor;
void main()
{
    gl_FragColor = varyColor;
}

3、接下来我们需要在BMView.m中根据自定义的顶点/片元着色器程序文件名,加载顶点着色器程序和片元着色器程序

-(GLuint)loadShader:(NSString *)vert frag:(NSString *)frag {
    //1/创建两个临时变量
    GLuint vertShader,fragShader;
    //2/创建一个program
    GLuint program = glCreateProgram();
    //3/编辑文件
    //参数1:编译完成存储的底层地址
    //参数2:编译的类型,GL_VERTEX_SHADER(顶点)、GL_FRAGMENT_SHADER(片元)
    //参数3:文件的路径
    [self compileShader:&vertShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //根据两个着色器程序,创建最终的程序
    glAttachShader(program, vertShader);
    glAttachShader(program, fragShader);
    
    //程序绑定两个shader之后,这两个shader变量可以释放了
    glDeleteShader(vertShader);
    glDeleteShader(fragShader);
    
    return program;
}

//编译链接shader
-(void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
    //1、读取文件路径字符串
    NSString * content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    
    //2、根据文件路径字符串,拿到C语言字符串
    const GLchar * source = (GLchar *)[content UTF8String];
    
    //3、根据type创建一个shader
    *shader = glCreateShader(type);
    
    //4、将顶点着色器源码附加到着色器对象上
    glShaderSource(*shader, 1, &source, NULL);
    
    //5、把着色器源码编译成目标代码
    glCompileShader(*shader);
}

三、开始绘制并读取自定义GLSL着色器程序


接着之前BMView.m的第六步

//6/开始绘制
- (void)render {
    //1/设置清屏颜色
    glClearColor(0, 0, 0, 1);
    //清除颜色缓冲区
    glClear(GL_COLOR_BUFFER_BIT);
    
    //2/设置视口
    glViewport(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, self.frame.size.height);
    
    //3/获取顶点着色器,片元着色器文件位置
    NSString* vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
    NSString* fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
    
    //4/清空pragram
    if (!self.myProgram) {
        glDeleteProgram(self.myProgram);
        self.myProgram = 0;
    }
    
    //5/调用步骤二中的方法来根据片元着色器程序和顶点着色器程序生成最终的程序program
    self.myProgram = [self loadShader:vertFile frag:fragFile];
    
    //6/链接程序
    glLinkProgram(self.myProgram);
    GLint linkSuccess;
    
    //7/获取程序的链接状态
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
    if (linkSuccess == GL_FALSE) {
        GLchar messages[256];
        glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"error%@", messageString);

        return ;
    }else {
        //链接成功后使用我们的着色器程序
        glUseProgram(self.myProgram);
    }
    
}

以上步骤是完成渲染环境设置,及根据GLSL编写的顶点着色器程序和片元着色器程序生成最后的程序program并使用,下面开始绘制金字塔

四、绘制金字塔(索引绘图)传入顶点颜色与纹理并混合颜色和纹理


接着BMView.m- (void)render;函数的第7步开始设置金字塔顶点数据开始绘制金字塔**

//8/创建顶点数组和索引数组
    //顶点数组 [前3个为顶点值(x,y,z), 后3个为颜色值(r,g,b)]
    GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,      1.0f, 0.0f, 0.0f, //左上0
        0.5f, 0.5f, 0.0f,       0.0f, 1.0f, 0.0f, //右上1
        -0.5f, -0.5f, 0.0f,     0.0f, 0.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,      1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,       0.5f, 1.0f, 0.5f, //顶点4
    };
    //索引数组
    GLuint indices[] =
    {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 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)将顶点通过myProgram传递到顶点着色器程序的position
    //1/glGetAttribLocation,用来获取vertex attribute的入口
    //2/告诉OpenGL ES,通过glEnableVertexAttribArray,
    //3/最后数据是通过glVertexAttribPointer传递过去
    //注意,第二参数字符串必须和shaderv.vsh中的输入变量:position保持一致
    GLuint position = glGetAttribLocation(self.myProgram, "position");
    
    //(4)/position是attribute属性修饰的,默认attribute修饰的都是关闭的,需要打开
    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) * 6, NULL);
    

和顶点坐标类似,最开始的数组 attrArr[] 同时存了顶点坐标和颜色rgb值,所以顶点坐标和颜色色值都需要从之前的那个数组中获取,所以需要注意一下取值的间隔,以及初始取值位置和长度就好了

//10/处理顶点颜色值
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意,第二参数字符串必须和shaderv.vsh中的输入变量:positionColor保持一致
    
    GLuint positionColor = glGetAttribLocation(self.myProgram, "positionColor");
    
    //(2)设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(positionColor);

    //(3)设置读取方式
    //这个和上面获取顶点坐标一样   glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, NULL);


接下来需要创建模型视图矩阵和投影矩阵并把这两个矩阵链接传到顶点着色器中

//11/接着找到程序program中的投影矩阵projectionMatrix和模型视图矩阵modelViewMatrix地址
    GLuint projectionMatrixSlot = glGetUniformLocation(self.myProgram, "projectionMatrix");
    GLuint modelViewMatrixSlot = glGetUniformLocation(self.myProgram, "modelViewMatrix");
    
    //12/创建 4 * 4 投影矩阵
    KSMatrix4 _projectionMatrix;
    //(1)获取单元矩阵
    ksMatrixLoadIdentity(&_projectionMatrix);
    //(2)计算纵横比例 = 长/宽
    float aspect = self.frame.size.width / self.frame.size.height; //长宽比
    //(3)获取透视矩阵
    /*
     参数1:矩阵
     参数2:视角,度数为单位
     参数3:纵横比
     参数4:近平面距离
     参数5:远平面距离
     参考PPT
     */
    ksPerspective(&_projectionMatrix, 30.0, aspect, 5.0f, 20.0f); //透视变换,视角30°
    //(4)将投影矩阵传递到顶点着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     参数列表:
     location:指要更改的uniform变量的位置
     count:更改矩阵的个数
     transpose:是否要转置矩阵,并将它作为uniform变量的值。必须为GL_FALSE
     value:执行count个元素的指针,用来更新指定uniform变量
     */
    glUniformMatrix4fv(projectionMatrixSlot, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);
    
    
    //13/创建 4 * 4 模型视图矩阵
    //13.创建一个4 * 4 矩阵,模型视图矩阵
    KSMatrix4 _modelViewMatrix;
    //(1)获取单元矩阵
    ksMatrixLoadIdentity(&_modelViewMatrix);
    //(2)平移,z轴平移-10
    ksTranslate(&_modelViewMatrix, 0.0, 0.0, -10.0);
    //(3)创建一个4 * 4 矩阵,旋转矩阵
    KSMatrix4 _rotationMatrix;
    //(4)初始化为单元矩阵
    ksMatrixLoadIdentity(&_rotationMatrix);
    //(5)旋转
    ksRotate(&_rotationMatrix, xDegree, 1.0, 0.0, 0.0); //绕X轴
    ksRotate(&_rotationMatrix, yDegree, 0.0, 1.0, 0.0); //绕Y轴
    ksRotate(&_rotationMatrix, zDegree, 0.0, 0.0, 1.0); //绕Z轴
    //(6)把变换矩阵相乘.将_modelViewMatrix矩阵与_rotationMatrix矩阵相乘,结合到模型视图
    ksMatrixMultiply(&_modelViewMatrix, &_rotationMatrix, &_modelViewMatrix);
    //(7)将模型视图矩阵传递到顶点着色器
    /*
     void glUniformMatrix4fv(GLint location,  GLsizei count,  GLboolean transpose,  const GLfloat *value);
     参数列表:
     location:指要更改的uniform变量的位置
     count:更改矩阵的个数
     transpose:是否要转置矩阵,并将它作为uniform变量的值。必须为GL_FALSE
     value:执行count个元素的指针,用来更新指定uniform变量
     */
    glUniformMatrix4fv(modelViewMatrixSlot, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.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];

此时运行能够看到一个金字塔


6A65DFCCF37F38AF033EACCD6660A0F7.jpg 939B20A373420831E5B3E2F0B137C234.jpg 3DDDFA04B5291664FE1AECA808316760.jpg B639B3665E190C2114A14ED3D57B4DB4.jpg

五、金字塔四个面加载纹理并且混合纹理和颜色


1、在render函数中设置纹理坐标数组并加载纹理

    //1、纹理数组
    在render第8步的数组中添加纹理坐标
    //(1)顶点数组 前3顶点值(x,y,z),中间两位纹理坐标,后3位颜色值(RGB)
    GLfloat attrArr[] =
    {
        -0.5f, 0.5f, 0.0f,   1.0f, 0.0f,    1.0f, 0.0f, 0.0f, //左上0
        0.5f, 0.5f, 0.0f,    0.0f, 1.0f,   0.0f, 1.0f, 0.0f, //右上1
        -0.5f, -0.5f, 0.0f,  0.0f, 0.0f,   0.0f, 0.0f, 1.0f, //左下2
        
        0.5f, -0.5f, 0.0f,   1.0f, 1.0f,   1.0f, 1.0f, 1.0f, //右下3
        0.0f, 0.0f, 1.0f,    0.0f, 1.0f,   0.5f, 1.0f, 0.5f, //顶点4
    };
    
    //2、处理纹理数据
    //(1).glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意:第二参数字符串必须和shaderv.vsh中的输入变量:textCoordinate保持一致
    GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
    
    //(2).设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textCoor);
    
    //(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(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //3、从图片中加载纹理
    [self setupTexture:@"CC"];

并替换修改之前对应顶点,纹理,颜色值读取方式为

//顶点读取方式
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
//纹理读取方式
glVertexAttribPointer(textCoor1, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8, (float *)NULL + 3);
//颜色值读取方式
glVertexAttribPointer(positionColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (float *)NULL + 5);

2、从图片中加载纹理

//从图片中加载纹理
- (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_t width = CGImageGetWidth(spriteImage);
    size_t height = 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:绘制的图片
     */
    CGRect rect = 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);
    
    float fw = 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);   
    return 0;
}

3、在shaderf.fsh文件中加入两个变量,纹理坐标varyTextCoord和纹理采样器colorMap**

varying lowp vec4 varyColor;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    lowp vec4 temp = texture2D(colorMap, varyTextCoord);
    gl_FragColor = temp;
}

4、在shaderv.vsh中加入两个变量**

attribute vec4 position;
attribute vec4 positionColor;
attribute vec2 textCoordinate;


uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying lowp vec4 varyColor;

varying lowp vec2 varyTextCoord;

void main()
{
    varyColor = positionColor;
    varyTextCoord = textCoordinate;
    vec4 vPos;
    vPos = projectionMatrix * modelViewMatrix * position;
    gl_Position = vPos;
}


运行则加载纹理成功


QQ20190614-014138@2x.png QQ20190614-014130@2x.png QQ20190614-014118@2x.png

5、开启混合并设置混合方式

 glEnable(GL_BLEND);
 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

接着通过设置混合方式在shaderf.fsh把纹素和varyColor进行混合

varying lowp vec4 varyColor;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
    vec4 weakMask = texture2D(colorMap, varyTextCoord);
    vec4 mask = varyColor;
    float alpha = 0.3;
    
    vec4 tempColor = mask * (1.0 - alpha) + weakMask * alpha;
    gl_FragColor = tempColor;
}

运行就得到了颜色和纹理混合之后的最终金字塔

![屏幕快照 2019-06-14 下午8.15.39.png](https://img.haomeiwen.com/i2679624/9ead181a21eac348.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
屏幕快照 2019-06-14 下午8.14.01.png
屏幕快照 2019-06-14 下午8.15.45.png

溪浣双鲤的技术摸爬滚打之路

相关文章

网友评论

      本文标题:3、OpenGL ES初探之使用GLSL绘制金字塔,并实现颜色与

      本文链接:https://www.haomeiwen.com/subject/nmjyfctx.html