IOS 中openGL使用教程3（openGL ES 入门篇 | 纹理贴图（texture）使用）

时间：2022-06-11 21:06:37

在这篇文章中，我们将学习如何在openGL中使用纹理贴图。

penGL中纹理可以分为1D，2D和3D纹理，我们在绑定纹理对象的时候需要指定纹理的种类。由于本文将以一张图片为例，因此我们为我们的纹理对象绑定一个GL_TEXTURE_2D的纹理。

本文将分为两个部分，一部分是如何通过图片获取一个2D的纹理，另一部分是如何使用一个纹理。

在上一篇中，我们介绍了如何使用shader来绘制一个多边形，本文是基于上一篇的提高，我们也将继续使用shader，对于shader使用不熟的童鞋可以看上一篇。

首先我们来看看如何通过图片获取一张2D的纹理。

+ (GLuint)createTextureWithImage:(UIImage *)image{

　　//转换为CGImage，获取图片基本参数

    CGImageRef cgImageRef = [image CGImage];

    GLuint width = (GLuint)CGImageGetWidth(cgImageRef);

    GLuint height = (GLuint)CGImageGetHeight(cgImageRef);

    CGRect rect = CGRectMake(, , width, height);

　　//绘制图片

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    void *imageData = malloc(width * height * );

    CGContextRef context = CGBitmapContextCreate(imageData, width, height, , width * , colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmap　　　　ByteOrder32Big);

    CGContextTranslateCTM(context, , height);

    CGContextScaleCTM(context, 1.0f, -1.0f);

    CGColorSpaceRelease(colorSpace);

    CGContextClearRect(context, rect);

    CGContextDrawImage(context, rect, cgImageRef);
　//纹理一些设置，可有可无

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
　　
   //生成纹理
   glEnable(GL_TEXTURE_2D);
 　 GLuint textureID; 
　　glGenTextures(, &textureID); 
　　glBindTexture(GL_TEXTURE_2D, textureID); 　 
　　glTexImage2D(GL_TEXTURE_2D, , GL_RGBA, width, height, , GL_RGBA, GL_UNSIGNED_BYTE, imageData);

　　//绑定纹理位置　

    glBindTexture(GL_TEXTURE_2D, );
　　//释放内存

    CGContextRelease(context);

    free(imageData);

    return textureID;

}

获取纹理之后，我们就要开始使用纹理了。

和之前绘制多边形的过程一样，我们要先把参数传入shader中。在绘制多边形时我们只需要传入各个顶点的位置，但为了使用纹理，我们需要把纹理传入shader，

此外，还要传入所使用的纹理的范围（使用纹理的哪一部分来映射）。

Vertex Shader代码如下：

attribute vec4 Position;

attribute vec2 TextureCoords;

varying vec2 TextureCoordsOut;

void main(void)

{
//用来展现纹理的多边形顶点

    gl_Position = Position;
//表示使用的纹理的范围的顶点，因为是2D纹理，所以用vec2类型

    TextureCoordsOut = 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);

}

注意：

attribute属性只能通过Vertex Shader传入，再传给Fragment Shader，而uniform属性可以直接传入Fragment Shader。

同理的，与绘制多边形的过程一样，我们要编译shader，生成一个glProgram。不同的是，这次我们要传入着色器程序的参数有三个

　　GLuint fragmentShader = [self compileShader:@"MTShaderFragment"

                                       withType:GL_FRAGMENT_SHADER];

    _glProgram = glCreateProgram();

    glAttachShader(_glProgram, vertexShader);

    glAttachShader(_glProgram, fragmentShader);

    glLinkProgram(_glProgram);

    glUseProgram(_glProgram);

    _positionSlot = glGetAttribLocation(_glProgram, "Position");
　　//uniform类型的参数获取方式不同

    _textureSlot = glGetUniformLocation(_glProgram, "Texture");

    _textureCoordsSlot = glGetAttribLocation(_glProgram, "TextureCoords");

接下来就到了最后一步，将纹理“贴”到多边形上。

首先将纹理传入，激活索引为1的纹理。表示接下来的操作都是针对纹理1

glActiveTexture(GL_TEXTURE1);
//载入纹理

glBindTexture(GL_TEXTURE_2D, _textureID);
//为当前程序对象指定Uniform变量的值,参数1代表使用的新值（GL_TEXTURE1）

glUniform1i(_textureSlot, );

在指定区域绘制纹理。

注意：用于表示纹理范围时的坐标表示方式与UIKit和openGL的坐标都不同，范围从（0，0）左下到（1，1）右上。

//纹理使用范围顶点
 const GLfloat texCoords[] = {

        , ,//左下

        , ,//右下

        , ,//左上

        , ,//右上

    };

    glVertexAttribPointer(_textureCoordsSlot, , GL_FLOAT, GL_FALSE, , texCoords);

    glEnableVertexAttribArray(_textureCoordsSlot);

  //绘图区域顶点

    const GLfloat vertices[] = {

        -, -, ,   //左下

        ,  -, ,   //右下

        -, ,  ,   //左上

        ,  ,   }; //右上

    glVertexAttribPointer(_positionSlot, , GL_FLOAT, GL_FALSE, , vertices);

    glEnableVertexAttribArray(_positionSlot);

    const GLubyte indices[] = {

        ,,,

        ,,

    };

    glDrawElements(GL_TRIANGLES, sizeof(indices)/sizeof(indices[]), GL_UNSIGNED_BYTE, indices);

    [_context presentRenderbuffer:GL_RENDERBUFFER];

下一篇我们会讲解如何进行一些动态的操作和简单滤镜，让手指划过的区域变成灰色。

相关文章