Shader脚本

Vertex Shader如下:

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsOut;

void main(void)
{
    gl_Position = Position;
    TextureCoordsOut = TextureCoords;
}

其中, Position依然是顶点坐标, 即将要绘制到OpenGLES坐标系上的位置. TextureCoords是纹理坐标, 即将要把图片纹理的哪一个像素点绘制出来.

Fragment Shader如下:

precision mediump float;

uniform sampler2D Texture;
varying vec2 TextureCoordsOut;

void main(void)
{
    vec4 mask = texture2D(Texture, TextureCoordsOut);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

TextureCoordsOut是接收Vertex Shader中的TextureCoords变量的值. 参数Texture是图片纹理的来源, 使用texture2D(Texture, TextureCoordsOut);可获取对应纹理坐标点上的颜色. 将该颜色传递给gl_FragColor即可绘制出来图片在该纹理坐标点上的颜色.

关联Shader参数

_glProgram = [ShaderOperations compileShaders:@"DemoDrawImageTextureVertex" shaderFragment:@"DemoDrawImageTextureFragment"];
glUseProgram(_glProgram);

// 需要三个参数, 跟Shader中的一一对应。
// Position: 将颜色放置在CAEAGLLayer上的哪个位置
// Texture: 图像的纹理
// TextureCoords: 图像的纹理坐标，即图像纹理的哪一块颜色
_positionSlot = glGetAttribLocation(_glProgram, "Position");
_textureSlot = glGetUniformLocation(_glProgram, "Texture");
_textureCoordsSlot = glGetAttribLocation(_glProgram, "TextureCoords");

此处与之前的demo基本一致.

获取图片纹理

获取图片纹理的方式通常比较固定, 涉及到一系列的CoreGraphics方法调用, 封装如下:

/**
 *  加载image, 使用CoreGraphics将位图以RGBA格式存放. 将UIImage图像数据转化成OpenGL ES接受的数据.
 *  然后在GPU中将图像纹理传递给GL_TEXTURE_2D。
 *  @return 返回的是纹理对象，该纹理对象暂时未跟GL_TEXTURE_2D绑定（要调用bind）。
 *  即GL_TEXTURE_2D中的图像数据都可从纹理对象中取出。
 */
- (GLuint)setupTexture:(UIImage *)image {
    CGImageRef cgImageRef = [image CGImage];
    GLuint width = (GLuint)CGImageGetWidth(cgImageRef);
    GLuint height = (GLuint)CGImageGetHeight(cgImageRef);
    CGRect rect = CGRectMake(0, 0, width, height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    void *imageData = malloc(width * height * 4);
    CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGContextTranslateCTM(context, 0, height);
    CGContextScaleCTM(context, 1.0f, -1.0f);
    CGColorSpaceRelease(colorSpace);
    CGContextClearRect(context, rect);
    CGContextDrawImage(context, rect, cgImageRef);

    glEnable(GL_TEXTURE_2D);

    /**
     *  GL_TEXTURE_2D表示操作2D纹理
     *  创建纹理对象，
     *  绑定纹理对象，
     */

    GLuint textureID;
    glGenTextures(1, &textureID);
    glBindTexture(GL_TEXTURE_2D, textureID);

    /**
     *  纹理过滤函数
     *  图象从纹理图象空间映射到帧缓冲图象空间(映射需要重新构造纹理图像,这样就会造成应用到多边形上的图像失真),
     *  这时就可用glTexParmeteri()函数来确定如何把纹理象素映射成像素.
     *  如何把图像从纹理图像空间映射到帧缓冲图像空间（即如何把纹理像素映射成像素）
     */
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); // S方向上的贴图模式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); // T方向上的贴图模式
    // 线性过滤：使用距离当前渲染像素中心最近的4个纹理像素加权平均值
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    /**
     *  将图像数据传递给到GL_TEXTURE_2D中, 因其于textureID纹理对象已经绑定，所以即传递给了textureID纹理对象中。
     *  glTexImage2d会将图像数据从CPU内存通过PCIE上传到GPU内存。
     *  不使用PBO时它是一个阻塞CPU的函数，数据量大会卡。
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);

    // 结束后要做清理
    glBindTexture(GL_TEXTURE_2D, 0); //解绑
    CGContextRelease(context);
    free(imageData);

    return textureID;
}

该方法接收一个UIImage对象, 将其图像数据传递至一个纹理对象中, 最后返回该纹理对象. 则以后取出该图像数据时, 直接根据纹理对象取出即可. 其中的glTexImage2D方法用于将图像数据传递至GL_TEXTURE_2D中, 而如果已经提前将GL_TEXTURE_2D与一个纹理对象绑定好了, 则该方法可将图像数据传递至纹理对象中(这里是textureID).

混合模式

关于混合模式, 是一个非常大的话题. 这里只介绍glBlendFunc的使用. glBlendFunc的参数1作用于源数据, 参数2作用于目标数据. 混合作用的结果颜色是源颜色源因子 + 目标颜色目标因子. 例如, 我们这里的demo是直接将一张图片贴在OpenGL画布上, 因此图片取GL_ONE, 而目标数据即OpenGL画布取GL_ZERO.

glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ZERO);

而另外一种非常常见的混合模式是:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

混合后的结果颜色是 source * source_alpha + destination * (1 - source_alpha). 这种混合模式就是将两种颜色混合叠加的效果. 只有RGBA模式下才使用blend模式. 其他常见的混合模式有:

glBlendFunc(GL_ONE, GL_ZERO) 完全使用源颜色, 完全不使用目标颜色. 和不使用blend的时候一致.
glBlendFunc(GL_ZERO, GL_ONE) 完全不使用源颜色, 完全使用目标颜色. 即原图没有变化.
glBlendFunc(GL_ONE, GL_ONE) 两种颜色的直接相加.

纹理的渲染

有了纹理对象且存储了图像数据后, 就可以拿来进行纹理渲染了. 使用时, 直接再次绑定GL_TEXTURE_2D即可, 表示接下来读取GL_TEXTURE_2D时要使用的是_textureID纹理对象中的数据:

// 第一行和第三行不是严格必须的，默认使用GL_TEXTURE0作为当前激活的纹理单元
glActiveTexture(GL_TEXTURE5); // 指定纹理单元GL_TEXTURE5
glBindTexture(GL_TEXTURE_2D, _textureID); // 绑定，即可从_textureID中取出图像数据。
glUniform1i(_textureSlot, 5); // 与纹理单元的序号对应

纹理数据可以跟纹理坐标一一对应, 在OpenGL坐标中呈现出来.

GLfloat texCoords[] = {
    0, 0,//左下
    1, 0,//右下
    0, 1,//左上
    1, 1,//右上
};
glVertexAttribPointer(_textureCoordsSlot, 2, GL_FLOAT, GL_FALSE, 0, texCoords);
glEnableVertexAttribArray(_textureCoordsSlot);

纹理坐标也同样存储于一个数组中, 使用glVertexAttribPointer方法将其传递给对应的插槽_textureCoordsSlot, 继而传递给Shader中的TextureCoords变量. 注意, 纹理坐标的坐标系与OpenGL不同, 左下角是原点.

有了纹理数据和纹理坐标, 接下来只需要我们已经很熟悉的顶点绘制方式将OpenGL画布绘制出来即可. 这里, 顶点坐标与纹理坐标的位置要一一对应, 即将图像的某个点绘制到OpenGL画布的对应点. 如果我们只是普通的渲染图片, 则将左下, 右下, 左上, 右上这四个点一一对应起来就好了.

GLfloat vertices[] = {
    -1, -1, 0,   //左下
    1,  -1, 0,   //右下
    -1, 1,  0,   //左上
    1,  1,  0 }; //右上
glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
glEnableVertexAttribArray(_positionSlot);

// 一旦纹理数据准备好，两个坐标系的顶点位置一一对应好。
// 就直接绘制顶点即可, 具体的绘制方式就与纹理坐标和纹理数据没有关系了。
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

glBindTexture(GL_TEXTURE_2D, 0); // 使用完之后解绑GL_TEXTURE_2D
[_eaglContext presentRenderbuffer:GL_RENDERBUFFER];

这样, 使用OpenGLES来渲染一张图片的过程就结束了.

实际上, 准备好了纹理数据, 并且将纹理坐标传递给了Shader之后, 就不再需要对其进行操作了. 因此, 至于要不要使用VBO来优化顶点绘制的效率, 就是另外一回事了.

使用索引和VBO来绘制

那么, 既然如此, 再来回顾一下索引数组和VBO的使用吧.

const GLfloat vertices[] = {
    -1, -1, 0,   //左下
    1,  -1, 0,   //右下
    -1, 1,  0,   //左上
    1,  1,  0 }; //右上

GLuint vertexBuffer;
glGenBuffers(1, &vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(_positionSlot);


const GLubyte indices[] = {
    0,1,2,
    1,2,3
};
GLuint indexBuffer;
glGenBuffers(1, &indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

glDrawElements(GL_TRIANGLE_STRIP, sizeof(indices)/sizeof(indices[0]), GL_UNSIGNED_BYTE, 0);

Demo

请参考: Demo