OpenGL ES之纹理

之前只是用OpenGL ES来渲染出一个很单调的白色三角形, 但生活中却又千千万万种颜色, 还有些东西是由很多颜色组成的, 为了渲染出最逼真的, OpenGL ES提供了一种纹理的图形技术, 用来渲染没一个像素的颜色

• 纹理: 用来保存图像的颜色元素的缓存, 例子中只做2D的缓存
  原理大概是OpenGL ES缓存了一张图片上的像素颜色, 在通过我们定义的几何图形一叠加绘制出结果图形. 几何图形多出来的部分, 将不会被着色.如图:

  
  
  

  屏幕快照 2017-06-28 下午8.43.06.png

• 纹理渲染过程中的一些概念:
  1.视口坐标(和屏幕坐标相反要注意):帧缓存中的像素坐标

  2.片源: 每个元素像素

  3.映射:几何图形和纹理叠加,对齐的过程

  4.纹理坐标系中的2D轴:S和T轴, 每一条轴的坐标范围(0-1), 从一个像素到64个纹素 .如图:

  
  
  

  图片发自App

• 效果展示:(一个三角形,用纹理渲染)
  纹理图片:

  
  
  

  图片发自App

最后效果:

图片发自App

• 代码
  三角形顶点坐标和纹理坐标

//顶点数据 用浮点类型
static const scene point[] = {
    0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
    0.5, 0.5, -0.0f,    1.0f, 1.0f, //右上
    -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上   
 };

纹理

glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //纹理告诉OpenGL纹理的数据在哪里
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(scene) , NULL);
    //纹理贴图
    CGImageRef imageRef = [[UIImage imageNamed:@"11"] CGImage];
    GLKTextureInfo *info = [GLKTextureLoader textureWithCGImage:imageRef options:nil error:NULL];

• 最终的效果图三角形中的图片是位置是不是原来图片的位置, 这是因为视口坐标和屏幕坐标是相反的, 如要修改可以先将纹理的image先做旋转处理(懒不想搞).

• 最后demo地址:https://github.com/xiaojuye/OpenGL.git