在iOS上如何使用OpenGL给图形添加一些变换

在上一篇中，我们了解了如何给图形给图形贴上一张图片（纹理）。那么本篇就来讲一下怎么让图形动起来吧（变换）。

• 创建一个变换矩阵
• 编写GLSL接收矩阵
• 修改矩阵的值

创建矩阵

我们用GLKit可以很容易的创建一个单位矩阵GLKMatrix4Identity，接着我们对这个矩阵做一些平移、缩放、旋转的处理。
我们添加3个UISlider来控制这些平移、缩放、旋转的值。代码如下：

- (void)setupSliders {
    CGSize size = self.view.bounds.size;
    _translationSlider = [[UISlider alloc] initWithFrame:CGRectMake(16, size.height - 140, size.width - 32, 16)];
    _scaleSlider = [[UISlider alloc] initWithFrame:CGRectMake(16, size.height - 100, size.width - 32, 16)];
    _rotateSlider = [[UISlider alloc] initWithFrame:CGRectMake(16, size.height - 60, size.width - 32, 16)];
    
    _translationSlider.minimumValue = 0;
    _translationSlider.maximumValue = 1;
    _scaleSlider.minimumValue = 1;
    _scaleSlider.maximumValue = 2;
    _rotateSlider.minimumValue = 0;
    _rotateSlider.maximumValue = 3.14;
    
    [self.view addSubview:_translationSlider];
    [self.view addSubview:_scaleSlider];
    [self.view addSubview:_rotateSlider];
}

创建单位矩阵，并应用这3个变量。

GLKMatrix4 transform = GLKMatrix4Identity;

transform = GLKMatrix4Translate(transform, _translationSlider.value, 0, 0);
transform = GLKMatrix4Scale(transform, _scaleSlider.value, _scaleSlider.value, 1);
transform = GLKMatrix4Rotate(transform, _rotateSlider.value, 0, 0, 1);

编写GLSL接收矩阵

有了矩阵的值后，我们需要修改片段着色器来接收这个值（transform），在drawInRect的时候将值传给片段着色器。

attribute vec3 a_Position;
attribute vec2 a_TexCoord;

varying lowp vec2 TexCoord;

uniform mat4 transform;

void main(void) {
    gl_Position = transform * vec4(a_Position, 1.0);
    TexCoord = a_TexCoord;
}

修改管道（program）的代码，将值传给着色器。

- (void)setMat4:(const GLchar *)name value:(GLKMatrix4)mat {
    GLint location = glGetUniformLocation(_programHandle, name);
    glUniformMatrix4fv(location, 1, GL_FALSE, &mat.m00);
}

修改矩阵的值

我们可以修改3个Slider的值来看看效果。由于渲染的宽高是按窗口的大小来的，所以旋转的时候宽高会变，就成了一个四边形了。

Github地址，喜欢的点个赞。