0014--纹理和颜色混合

前言

通过glkit和glsl分别对金字塔进行颜色+纹理渲染.

GLSL

• 修改.fsh文件内容

1. textColor为纹理顶点的坐标,
2. texture2D拿到纹理像素
3. 通过混合方程式进行颜色混合返回给gl_FragColor.

precision highp float;
varying lowp vec4 varyColor;
varying lowp vec2 textColor;
uniform sampler2D colorMap;
void main(){
    //    gl_FragColor = varyColor;
    vec4 yColor = texture2D(colorMap, textColor);
    vec4 mask = varyColor;
    float alpha = 0.3;
    gl_FragColor = mask * (1.0 - alpha) + yColor * alpha;
}

• 传入纹理坐标信息

1. 修改顶点数据,加入纹理坐标

 GLfloat attArr[] =
       {
       -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,//顶点
       };

2. 获取纹理坐标名称,将值传入

 GLuint textWColor = glGetAttribLocation(self.myProgram, "textWColor");
    //打开positionColor
    glEnableVertexAttribArray(textWColor);
    //读取方式
    glVertexAttribPointer(textWColor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*8,(float *)NULL + 6);

3.从图片中加载纹理

- (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;
}

4. 设置纹理采样器 sampler2D

glUniform1i(glGetUniformLocation(self.myProgram, "colorMap"), 0);

• 查看效果
  demo
  image.png

GLKit

• 修改结构体,加入纹理坐标的顶点变量GLKMatrix2 tureCoord;,重新赋值

typedef struct OPVertex{
    GLKVector3 positionCoord;
    GLKVector3 colorCoord;
    GLKMatrix2 tureCoord;
}OPVertex;


 self.vertices[0] = (OPVertex){{-0.5f, 0.5f, 0.0f},{1.0f, 0.0f, 1.0f},{0.0f,1.0f}};
    self.vertices[1] = (OPVertex){{0.5f, 0.5f, 0.0f},{1.0f, 0.0f, 1.0f},{1.0f,1.0f}};
    self.vertices[2] = (OPVertex){{-0.5f, -0.5f, 0.0f},{1.0f, 1.0f, 1.0f},{0.0f,0.0f}};
    self.vertices[3] = (OPVertex){{0.5f, -0.5f, 0.0f},{1.0f, 1.0f, 1.0f},{1.0f,0.0f}};
    self.vertices[4] = (OPVertex){{0.0f, 0.0f, 1.0f},{0.0f, 1.0f, 0.0f},{0.5f,0.5f}};

• 打开GLKVertexAttribTexCoord0通道

glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(OPVertex), offsetof(OPVertex,tureCoord)+ NULL);

• 读取图片

 NSString *filepath = [[NSBundle mainBundle] pathForResource:@"iu" ofType:@"jpg"];
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@"1",GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filepath options:options error:nil];

• 创建着色器,来处理

 self.effect = [[GLKBaseEffect alloc] init];
    self.effect.texture2d0.enabled = GL_TRUE;
    self.effect.texture2d0.name = textureInfo.name;
    self.effect.texture2d0.target = textureInfo.target;

• 效果图
  demo
  image.png