iOS-OpenGL-ES入门教程（三）纹理取样，混合，多重纹理

发表于 | 分类于

前言

上两篇文章里我们分别绘制了最简单的三角形和纹理图片
下面来讲一下纹理取样，混合，和多重纹理

纹理取样，循环

示例代码来源于下面这本书，
OpenGL ES应用开发实践指南：iOS卷

纹理取样设置函数

1
2
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_NEAREST)
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR);

GL_TEXTURE_MAG_FILTER用于多个纹素对应一个顶点即片元时候的处理方式，GL_NEAREST是取最近的纹素，GL_LINEAR则是取这多个纹素的混合结果

1
2
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

GL_TEXTURE_MAG_FILTER参数用于没有足够的可用纹素来唯一性的映射一个或者多个纹素到每个片元时配置取样. GL_NEAREST是取最近的纹素，GL_LINEAR则是取附近多个纹素的混合结果
GL_LINEAR的直观显示效果就是图片模糊的渲染了。

我们知道顶点的坐标系U,V坐标和纹理的S,T坐标一一映射对用，如果U，V大于1，或者小于0，也就是超出了纹理坐标系，我们可以设置取样边缘的纹素，或者重复纹理取样

1
2
3
4
5
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);//取样纹理边缘的纹素
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);//重复纹理填满
    
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);//取样纹理边缘的纹素
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);//重复纹理填满

接下来我们用下面这个Demo来看下实际效果
Demo.png

这里列举下核心代码

首先是顶点数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
typedef struct {
    GLKVector3 positionCoords;
    GLKVector2 textureCoord;
}SceneVertex;

//顶点 三角形 
static SceneVertex vertices[] =
{
    {{-0.5f, -0.5f, 0.0f}, {0.0f, 0.0f}}, // lower left corner
    {{ 0.5f, -0.5f, 0.0f}, {1.0f, 0.0f}}, // lower right corner
    {{-0.5f,  0.5f, 0.0f}, {0.0f, 1.0f}}, // upper left corner
};

//默认顶点 -- 用于关闭动画时候恢复默认顶点
static const SceneVertex defaultVertices[] =
{
    {{-0.5f, -0.5f, 0.0f}, {0.0f, 0.0f}},
    {{ 0.5f, -0.5f, 0.0f}, {1.0f, 0.0f}},
    {{-0.5f,  0.5f, 0.0f}, {0.0f, 1.0f}},
};


//move结构体 用于动画，各个坐标的变换动画效果
static GLKVector3 movementVectors[3] = {
    {-0.02f,  -0.01f, 0.0f},
    {0.01f,  -0.005f, 0.0f},
    {-0.01f,   0.01f, 0.0f},
};

属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@interface OpenGLES_3_2ViewController(){
     GLuint vertextBufferID;
}


@property (nonatomic,strong)GLKBaseEffect *baseEffect;
//是否使用线性过滤器
@property (nonatomic,assign)BOOL shouldUseLineFilter;
//是否开启动画
@property (nonatomic,assign)BOOL shouldAnimate;
//是否重复纹理
@property (nonatomic,assign)BOOL shouldRepeatTexture;
//顶点s坐标的offset
@property (nonatomic,assign)GLfloat sCoordinateOffset;
@end

ViewDidload中初始化context和baseEffect以及load顶点缓存和纹理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
self.preferredFramesPerSecond = 60;
self.shouldAnimate = YES;
self.shouldRepeatTexture = YES;
self.shouldUseLineFilter = NO;


GLKView *view = (GLKView *)self.view;
NSAssert([view isKindOfClass:[GLKView class]], @"View controller's is not a GLKView");

view.context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
[EAGLContext setCurrentContext:view.context];

self.baseEffect = [[GLKBaseEffect alloc]init];
self.baseEffect.useConstantColor = GL_TRUE;
self.baseEffect.constantColor = GLKVector4Make(1.0f, 1.0f, 1.0f, 1.0f);
glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

//顶点缓存和纹理
[self loadVertexBuffer];
[self loadTexture];

loadVertexBuffer和loadTexture

1
2
3
4
5
6
7
8
9
10
11
12
13
- (void)loadVertexBuffer{
    glGenBuffers(1, &vertextBufferID);
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_DYNAMIC_DRAW);
}

- (void)loadTexture{
    //绑定图片纹理
    CGImageRef imageRef = [[UIImage imageNamed:@"grid.png"] CGImage];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:imageRef options:nil error:NULL];
    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;
}

绘制部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    glClear(GL_COLOR_BUFFER_BIT);
    [self.baseEffect prepareToDraw];
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID);

    //设置vertex偏移指针
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(SceneVertex),NULL + offsetof(SceneVertex, positionCoords));
    
    
    //设置textureCoords偏移指针
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(SceneVertex),NULL + offsetof(SceneVertex, textureCoord));
    
    //Draw
    glDrawArrays(GL_TRIANGLES, 0, 3);
}

核心部分，我们在系统方法update里面更新顶点坐标和纹理取样设置参数，系统update方法调用频率和系统屏幕帧数一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
- (void)update{
    
    //更新动画顶点位置
    [self updateAnimateVertexPositions];

    //更新纹理参数设置
    [self updateTextureParameters];

    //刷新vertexBuffer
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_DYNAMIC_DRAW);
}

- (void)updateTextureParameters{
    glBindTexture(self.baseEffect.texture2d0.target, self.baseEffect.texture2d0.name);
    glTexParameterf(self.baseEffect.texture2d0.target, GL_TEXTURE_WRAP_S, (self.shouldRepeatTexture) ? GL_REPEAT : GL_CLAMP_TO_EDGE);
    glTexParameterf(self.baseEffect.texture2d0.target, GL_TEXTURE_MAG_FILTER, (self.shouldUseLineFilter) ? GL_LINEAR : GL_NEAREST);   
}

- (void)updateAnimateVertexPositions{
    if (_shouldAnimate) {
        int I;
        for (i = 0; i < 3; i++) {
            vertices[i].positionCoords.x += movementVectors[i].x;
            if (vertices[i].positionCoords.x > 1.0f ||
                vertices[i].positionCoords.x < -1.0f) {
                movementVectors[i].x = -movementVectors[i].x;
            }
            
            vertices[i].positionCoords.y += movementVectors[i].y;
            if(vertices[i].positionCoords.y >= 1.0f ||
               vertices[i].positionCoords.y <= -1.0f)
            {
                movementVectors[i].y = -movementVectors[i].y;
            }
            vertices[i].positionCoords.z += movementVectors[i].z;
            if(vertices[i].positionCoords.z >= 1.0f ||
               vertices[i].positionCoords.z <= -1.0f)
            {
                movementVectors[i].z = -movementVectors[i].z;
            }
        }
    }
    else{
        int I;
        for(i = 0; i < 3; I++)
        {
            vertices[i].positionCoords.x =
            defaultVertices[i].positionCoords.x;
            vertices[i].positionCoords.y =
            defaultVertices[i].positionCoords.y;
            vertices[i].positionCoords.z =
            defaultVertices[i].positionCoords.z;
        }
    }
    
    {  // Adjust the S texture coordinates to slide texture and
        // reveal effect of texture repeat vs. clamp behavior
        int    i;  // 'i' is current vertex index
        for(i = 0; i < 3; I++)
        {
            vertices[i].textureCoord.s =
            (defaultVertices[i].textureCoord.s +
             _sCoordinateOffset);
        }
    }
}

需要注意的是，我们更新完了数据源顶点的坐标需要重新glBufferData刷新GPU顶点缓存。

以上呢我们就实现了一个基于OPENGL ES2.0的简单动画，并且呢直观演示了纹理取样的不同参数的实际效果。

纹理混合

之前的Demo我们都是绘制了一张图片，如果是多个图片，也就是多个纹理的绘制如何处理呢。

OpenGL支持纹理混合，开启纹理混合非常的简单。
常用的混合调用以下函数

1
2
3
//开启混合
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

GL_ONE_MINUS_SRC_ALPHA该模式是让源片元的透明度元素和正在更新的像素的颜色元素相乘。
GL_SRC_ALPHA用于让源片元的透明度元素和其他的片元的透明度元素依次相乘。

那么帧缓存最终的像素颜色计算公式如下
帧缓存最终颜色计算公式

好，我们就写一个Demo来做一下纹理混合

核心代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (void)fillTexture{
    //获取图片1
    CGImageRef imageRef1 = [[UIImage imageNamed:@"leaves.gif"] CGImage];
    //通过图片数据产生纹理缓存
    NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];
    self.textureInfo1 = [GLKTextureLoader textureWithCGImage:imageRef1 options:options error:NULL];
    
    //获取图片2
    CGImageRef imageRef2 = [[UIImage imageNamed:@"beetle"] CGImage];
    self.textureInfo2 = [GLKTextureLoader textureWithCGImage:imageRef2 options:options error:NULL];
    
    //开启混合
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

}

这里开启GL_BLEND

绘制部分代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    //清除背景色
    glClearColor(0.0f,0.0f,0.0f,1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //依次绘制顶点纹理1和纹理2
    self.baseEffect.texture2d0.name = self.textureInfo1.name;
    self.baseEffect.texture2d0.target = self.textureInfo1.target;
    [self.baseEffect prepareToDraw];
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    self.baseEffect.texture2d0.name = self.textureInfo2.name;
    self.baseEffect.texture2d0.target = self.textureInfo2.target;
    [self.baseEffect prepareToDraw];
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

我们需要依次绘制纹理1和纹理2，运行结果图如下纹理混合.png

图2倍绘制在了图1的上方，这取决于纹理的绘制顺序。

这种通过多次读写像素颜色渲染缓存叫做多通道渲染。
多通道渲染从性能上来看，每次更新界面图形都需要渲染多次，需要从帧缓存读取颜色数据和片元数据混合，再次写回帧缓存，显然多次的内存读取决定了混合在性能上是不佳的，是次优选择

多重纹理

目前CPU都支持同时从至少两个纹理缓存中取样纹素，也就是多重纹理，从而可以替代纹理混合，优化性能。

GLkit中GLKBaseEffect同时支持两个纹理。

核心代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (void)fillTexture{
    //获取图片1
    CGImageRef imageRef1 = [[UIImage imageNamed:@"leaves.gif"] CGImage];
    //通过图片数据产生纹理缓存
    NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];
    self.textureInfo1 = [GLKTextureLoader textureWithCGImage:imageRef1 options:options error:NULL];
    
    //获取图片2
    CGImageRef imageRef2 = [[UIImage imageNamed:@"beetle"] CGImage];
    self.textureInfo2 = [GLKTextureLoader textureWithCGImage:imageRef2 options:options error:NULL];
    
    self.baseEffect.texture2d0.name = self.textureInfo1.name;
    self.baseEffect.texture2d0.target = self.textureInfo1.target;
    
    
    self.baseEffect.texture2d1.name = self.textureInfo2.name;
    self.baseEffect.texture2d1.target = self.textureInfo2.target;
    //设置混合EnvMode
    self.baseEffect.texture2d1.envMode = GLKTextureEnvModeDecal;

}

这里创建了两个纹理缓存并且设置了纹理2的envMode为GLKTextureEnvModeDecal，GLKTextureEnvModeDecal是和glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);效果一样的。计算公式一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (void)fillVertexArray{
    glGenBuffers(1, &vertextBufferID);
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID); //绑定指定标识符的缓存为当前缓存
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
    
    glEnableVertexAttribArray(GLKVertexAttribPosition); //顶点数据缓存
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(SceneVertex), NULL + offsetof(SceneVertex, positionCoords));
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //纹理0
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(SceneVertex), NULL + offsetof(SceneVertex, textureCoords));
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord1); //纹理1
    glVertexAttribPointer(GLKVertexAttribTexCoord1, 2, GL_FLOAT, GL_FALSE, sizeof(SceneVertex), NULL + offsetof(SceneVertex, textureCoords));
    
}

这里设置顶点纹理数据指针偏移时候开启了GLKVertexAttribTexCoord0 和GLKVertexAttribTexCoord1两个纹理

绘制部分

1
2
3
4
5
6
7
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    //清除背景色
    glClearColor(0.0f,0.0f,0.0f,1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    [self.baseEffect prepareToDraw];
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

这里多重纹理就避免了重复和多次绘制，性能比纹理混合要好，是绘制多个纹理时候的优先选择。

Demo代码地址：LearnOpenGLESDemo

源码来源于书籍：1. OpenGL ES应用开发实践指南：iOS卷