OpenGL ES 知识点-纹理

纹理

纹理是用来保存图像颜色元素之的OpenGL ES 缓存.当用一个图像初始化一个纹理缓存之后,在这个图像的中的每个像素变成纹理中的一个纹素(texel).

纹理坐标系中---命名为S 和 T的2D坐标.S的坐标范围0.0到1.0,T坐标是0.0到1.0.远点坐标在左下角.

纹理坐标系

帧缓存是按像素来匹配屏幕尺寸的.在渲染时,GPU会转换纯数字OpenGL ES 坐标系中的每个顶点的X,Y,Z坐标为帧缓存中所对应的真实像素位置.帧缓存对应的像素位置叫做视口(viewport)坐标.
在每个顶点被转化成视口坐标后,GPU会设置转换生成的三角形内的每个像素的颜色.转换几何形状数据为帧缓存中的颜色像素的渲染步骤叫做 点阵化(rasterizing),每个颜色的像素叫做 片元(fragment).
对其方式: 每个顶点还给出了U 和 V坐标值.每个U坐标会映射到顶点的视口中的最终位置到纹理中的沿着S轴的一个位置,V坐标映射到T轴.
取样模式GPU会根据计算出的每个片元的U,V位置从绑定的纹理中选择纹素.这个过程叫做 取样.

• 减小过滤选项
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTTURE_MIN_FILTER,GL_NEAREST)
glTexParameteri(GL_TEXTURE_2D,GL_TEXTTURE_MIN_FILTER,GL_LINEAR)
  来配置每个绑定的纹理.
  GL_LINEAR 来指定参数,GL_TEXTURE_MIN_FILTER :多个纹素对应一个片元,从相匹配的多个纹素中取样颜色,然后用线性内插法混合这些颜色得到片元颜色.

GL_NEAREST 来指定参数,GL_TEXTURE_MIN_FILTER :与片元的U,V坐标最接近的纹素颜色会被取样.

• 放大过滤选项
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTTURE_MAG_FILTER,GL_NEAREST)
glTexParameteri(GL_TEXTURE_2D,GL_TEXTTURE_MAG_FILTER,GL_LINEAR)

GL_LINEAR 指定参数:GL_TEXTURE_MAG_FILTER : 一个纹素对应多个片元,会有一个放大纹理的效果,并让它模糊的出现在渲染的三角形上.
GL_NEAREST :取最临近纹素,并放大纹理.

• 超出纹理选项
  当U,V坐标的值小于0或者大于1时,设置纹理的循环模式,分别设置 S 和 T 轴
  S 轴
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WARP_S,GL_GLAMP_TO_EDGE)
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WARP_S,GL_REPEAT)
  T 轴
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WARP_T,GL_GLAMP_TO_EDGE)
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WARP_T, GL_REPEAT)

透明度,混合和多重纹理

   当纹理计算出来一个完全不透明的最终片元颜色时,这个片元的颜色会简单替换任何帧缓存的像素颜色渲染缓存内现存的对应的像素颜色.
   如果部分透明或者全透明.OpenGL ES 会使用一个混合函数来混合片元颜色和像素颜色渲染缓存对应的像素.

• 通过glEnalbe(GL_BLEND)开启混合
• 通过glBlendFunc(sourceFactor,destinationFactor)设置混合函数.
  sourceFactor:用于指定每个片元的最终颜色元素怎么影响混合,常用值GL_SRC_ALPHA,让源片元的透明度元素依次与其他片元颜色元素相乘;
  destinationFactor:用于指定目标帧缓存中已经存在的颜色元素怎么影响混合,常用值:GL_ONE_MINUS_SRC_ALPHA,让源片元的透明度元素(1.0)与在帧缓存内的正在被更新的像素的颜色元素相乘.

混合模式的计算方式

所以app开发中将,视图设置为不透明,可以有效的提高图片的渲染性能

• 配置参数

- (void)viewDidLoad {
    [super viewDidLoad];
   
    
    GLKView *glkView = (GLKView *)self.view;
    
    glkView.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    
    [EAGLContext setCurrentContext:glkView.context];
    
    
    self.buffer = [[AGLKVertexAttribArrayBuffer alloc] initWithAtrribStride:sizeof(ScenceVertex) numberOfVertices:sizeof(vertices)/sizeof(ScenceVertex) data:vertices usage:GL_STATIC_DRAW];
    
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.useConstantColor = GL_TRUE;
    self.baseEffect.constantColor = GLKVector4Make(
                                                   1,
                                                   1,
                                                   1,
                                                   1);
    
    self.info1 = [self loadTextureInfoWith:@"chi.jpg"];
    self.info2 = [self loadTextureInfoWith:@"vs_star_center.png"];
    
    //开启图片混合
    glEnable(GL_BLEND);
    
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    
}

-(GLKTextureInfo *)loadTextureInfoWith:(NSString *)cgImageName
{

    CGImageRef imageRef = [UIImage imageNamed:cgImageName].CGImage;
    
    return [GLKTextureLoader textureWithCGImage:imageRef options:@{GLKTextureLoaderOriginBottomLeft:@YES} error:NULL];
    

}

• 开始渲染

//重绘
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    [self.baseEffect prepareToDraw];
    //glClear 函数来设置当前绑定的帧缓存的像素颜色渲染缓存中的每一个像素的颜色为前面使用的glClearColor()函数设定的值.可以有效的设置帧缓存中的每一个像素的颜色为背景色.
    glClear(GL_COLOR_BUFFER_BIT);
    
    
    [self.buffer prepareToDrawWithAttrib:GLKVertexAttribPosition numberOfCoordinates:3 attribOfOffset:offsetof(ScenceVertex, positionCoords) shouldEnabled:YES];
    
    [self.buffer prepareToDrawWithAttrib:GLKVertexAttribTexCoord0 numberOfCoordinates:2 attribOfOffset:offsetof(ScenceVertex, textureCoords) shouldEnabled:YES];
    
    
    self.baseEffect.texture2d0.name = self.info1.name;
    self.baseEffect.texture2d0.target = self.info1.target;
    
    [self.baseEffect prepareToDraw];
    
    
    [self.buffer drawArrayWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:6];
    
    
    
    self.baseEffect.texture2d0.name = self.info2.name;
    self.baseEffect.texture2d0.target = self.info2.target;
    
    [self.baseEffect prepareToDraw];
    
    
    [self.buffer drawArrayWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:6];
//
//    //4.启用顶点数据
//    glEnableVertexAttribArray(GLKVertexAttribPosition);
//    
//    //5.设置指针
//    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(ScenceVertex), NULL);
//
//
//    //画图
//    glDrawArrays(GL_TRIANGLES, 0, 3);
    
//    [self prepareToDrawWithAttrib:GLKVertexAttribPosition AttribStride:sizeof(ScenceVertex) numberOfCoordinates:3 attribOfOffset:offsetof(ScenceVertex, positionCoords) shouldEnable:YES];
//    [self prepareToDrawWithAttrib:GLKVertexAttribTexCoord0 AttribStride:sizeof(ScenceVertex) numberOfCoordinates:2 attribOfOffset:offsetof(ScenceVertex, textureCoords) shouldEnable:YES];
//    
//
//    [self drawArrayWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:3];
//    

}

最后合成图片如下

原始图片1

原始图片2

混合后的图片

持续更新中......