[OpenGL ES 04]3D变换实践篇：平移，旋转，缩放

[OpenGL ES 04]3D变换实践篇：平移，旋转，缩放

罗朝辉 (http://blog.csdn.net/kesalin)

本文遵循“署名-非商业用途-保持一致”创作公用协议

前言

前文《[OpenGL ES 03]3D变换：模型，视图，投影与Viewport》中已经详细介绍了3D变换相关的数学知识，也讲了基本的模型变换：平移，旋转与缩放，如果你还没有阅读前文或对这些知识还不够明白，务必先弄懂前文再继续。假如你已经准备好继续了，那么在接下来的内容中，我将介绍如何在 OpenGL ES 中运用这些知识，来渲染一个四棱锥，并对它进行平移，旋转与缩放操作，此外本文也演示了如何将 OpenGL View 与 UIView 结合在一起（注意：在实际运用中，不推荐这么做，混合使用 OpenGL View 和 UIView 对效率影响较大）。

本文代码可以从这里获得：点此下载（Tutorial03），最终效果图如下：

 

一，创建工程

1，新建工程

从今天起，我们不再从头开始创建 window 和 view 了，新建一个名为 Tutorial03 的 Single view application 工程：

2，从前面的效果图中可以看到，在这个教程中，我们需要两个 view：OpenGL view 和 UIView。因此打开 MainStoryboard.storyboard，向其中加入两个 view，其中上面那一个用于 OpenGL view，下面那一个用于 control view。调整两个view 的大小与位置，将下面的 view 的背景设置为浅蓝色，以方便区分。

3，拷贝 Tutorial02 教程中的 GLESUtils.h, GLESUtils.m OpenGLView.h, OpenGLView.m 以及 FragmentShader.glsl, VertexShader.glsl 到 Tutorial03 中，并加入到工程中进来，再添加 OpenGLES 以及 QuartzCore framework。

4，在 ViewController.h 中，为这两个view 添加 IBOutlet：

#import "OpenGLView.h"

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIView * controlView;
@property (nonatomic, strong) IBOutlet OpenGLView * openGLView;

在 ViewController.m 中 @implementation ViewController 下面的添加

@synthesize controlView, openGLView;

并在 viewDidUnload 中进行清理：

- (void)viewDidUnload
{
    [super viewDidUnload];
    
    [self.openGLView cleanup];
    self.openGLView = nil;
    
    self.controlView = nil;
}

5，回到 MainStoryboard.storyboard，将上面那个 view 的类型设置为 OpenGLView，并关联相关的 IBOutlet：

 

二，描绘四棱锥

1，在 Tutorial02 中只描绘了一个三角形，这回我们来描绘一个真正的 3D 物体：四棱锥。在 OpenGLView.m 中 render() 上面添加如下函数：

- (void)drawTriCone
{
    GLfloat vertices[] = {
        0.5f, 0.5f, 0.0f, 
        0.5f, -0.5f, 0.0f,
        -0.5f, -0.5f, 0.0f,
        -0.5f, 0.5f, 0.0f, 
        0.0f, 0.0f, -0.707f,
    };
    
    GLubyte indices[] = {
        0, 1, 1, 2, 2, 3, 3, 0,
        4, 0, 4, 1, 4, 2, 4, 3
    };
    
    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices );
    glEnableVertexAttribArray(_positionSlot);
    
    // Draw lines
    //
    glDrawElements(GL_LINES, sizeof(indices)/sizeof(GLubyte), GL_UNSIGNED_BYTE, indices);
}

这次我们使用顶点索引数组结合 glDrawElements 来渲染，而在 Tutorial02 中，使用的是 glDrawArrays。使用顶点索引数组有什么好处呢？很明显，我们可以减少存储重复顶点的内存消耗。比如在本例的索引表中，我们重复利用了顶点 0，1，2，3，4，它们对应 vertices 数组中5个顶点（三个浮点数组成一个顶点）。

glDrawElements 函数的原型为：

void glDrawElements(    GLenum      mode,
     GLsizei      count,
     GLenum      type,
     const GLvoid *      indices);

第一个参数 mode 为描绘图元的模式，其有效值为：GL_POINTS, GL_LINES, GL_LINE_STRIP,  GL_LINE_LOOP,  GL_TRIANGLES,  GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN。这些模式具体含义下面有介绍。

第二个参数 count 为顶点索引的个数也就是，type 是指顶点索引的数据类型，因为索引始终是正值，索引这里必须是无符号型的非浮点类型，因此只能是 GL_UNSIGNED_BYTE, GL_UNSIGNED_SHORT, GL_UNSIGNED_INT 之一，为了减少内存的消耗，尽量使用最小规格的类型如 GL_UNSIGNED_BYTE。

第三个参数 indices 是存放顶点索引的数组。（indices 是 index 的复数形式，3D 里面很多单词的复数都挺特别的。）

2，使用

修改 render() 函数如下：

- (void)render
{
    glClearColor(0, 1.0, 0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);

    // Setup viewport
    //
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);    
    
    [self drawTriCone];

    [_context presentRenderbuffer:GL_RENDERBUFFER];
}

编译运行程序，你就应该就能看到一个四棱锥了。

也许你会说，怎么看起来不像呢？那是因为你是从四棱锥的正上方朝下俯视它，索引四棱锥的尖顶（就是图中间交叉的那个点）看起来就是平的了。如果我们给程序加入旋转功能，那就会看得非常明显了，在介绍完图元模式之后，我们将加入旋转功能。

三，图元模式介绍：

对于画 line 来说有三种模式：

此外还可以通过函数 glLineWidth(GLfloat width) 来设定线的宽度，要获得当前设置的线宽度可以使用如下代码：

GLfloat lineWidthRange[2];
glGetFloatv(GL_ALIASED_LINE_WIDTH_RANGE, lineWidthRange);

在 Tutorial02 教程中，我们使用模式 GL_TRIANGLES 描绘了一个三角形。对于三角形来说也有三种模式：

OpenGL ES 还支持描绘点(精灵, sprite)的模式：GL_POINTS，此外还可以通过内建变量 gl_PointSize 来设置点精灵的大小，要获取当前设置的点精灵的大小可以使用如下代码：

GLfloat pointSizeRange[2]; 
glGetFloatv(GL_ALIASED_POINT_SIZE_RANGE, pointSizeRange);

 

四，平移

1，添加控件

为了加入平移控制，我们需要在下面的 view 上面添加滑块对平移的距离进行调节。为此，打开 MainStoryboard.storyboard，在下面浅蓝色背景的 UIView 上添加一个 UILabel 和 UISlider。

并设置滑块的最大值 3，最小值 -3 和当前值 0 ：

2，加入控件关联代码

在 ViewController.h 中加入滑块的 IBOutlet 和 IBAction，并将它与 UISlider 关联起来。

@property (nonatomic, strong) IBOutlet UISlider * posXSlider;

- (IBAction)xSliderValueChanged:(id)sender;

在 ViewController.m 中加入：

@synthesize posXSlider；

- (IBAction)xSliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];

    NSLog(@" >> current x is %f", currentValue);
}

这时，如果你拖动滑块，就能输出滑块当前的值。不要忘记在 viewDidUnload 清理该滑块：

self.posXSlider = nil;

 

3，加入平移代码

为了让我们的三棱锥可以在 x 轴上移动，打开 OpenGLView.h，在 @interface 中加入：

float _posX;

然后再加入属性：

@property (nonatomic, assign) float posX;

打开 OpenGLView.m，加入：

@synthesize posX = _posX;

 

4，修改顶点着色器代码

打开 VertexShader.glsl，修改其内容如下：

uniform mat4 projection;
uniform mat4 modelView;
attribute vec4 vPosition; 
 
void main(void)
{
    gl_Position = projection * modelView * vPosition;
}

在上面的代码中，我们对输入顶点进行了自定义的投影和模型视图变换，还记得在前文中介绍的内容么？尤其是左乘，在这里，顶点先进行模型视图变换，然后再进行投影变换。

5，增加实现 Transform 代码

回到 OpenGLView.h 中，加入对应的投影矩阵与模型视图矩阵：

    KSMatrix4 _modelViewMatrix;
    KSMatrix4 _projectionMatrix;

KSMatrix4 是定义在数学辅助库 GLESMath 中用 4 * 4 的二维数组表示的矩阵，你可以在这里获取 GLESMath.h 和 GLESMath.c，并将它们加入工程中。这个数学辅助库中包含了常见的一些 3D 计算，后面还会提到它。

在 OpenGLView.m 中，在 setupProgram 的最后加入获取模型视图矩阵以及投影矩阵变量的槽位：

    // Get the attribute position slot from program
    //
    _positionSlot = glGetAttribLocation(_programHandle, "vPosition");
    
    // Get the uniform model-view matrix slot from program
    //
    _modelViewSlot = glGetUniformLocation(_programHandle, "modelView");
    
    // Get the uniform projection matrix slot from program
    //
    _projectionSlot = glGetUniformLocation(_programHandle, "projection");

 在OpenGLView 的匿名 category 中加入以下两个函数声明：

- (void)setupProjection;

- (void)updateTransform;

然后在 @implemetion 中实现它们：

-(void)setupProjection
{
    // Generate a perspective matrix with a 60 degree FOV
    //
    float aspect = self.frame.size.width / self.frame.size.height;
    ksMatrixLoadIdentity(&_projectionMatrix);
    ksPerspective(&_projectionMatrix, 60.0, aspect, 1.0f, 20.0f);
    
    // Load projection matrix
    glUniformMatrix4fv(_projectionSlot, 1, GL_FALSE, (GLfloat*)&_projectionMatrix.m[0][0]);
}

上面的代码中，ksMatrixLoadIdentity 是 GLESMath 中的一个数学函数，用来将指定矩阵重置为单位矩阵，而 ksPerspective 与前文中讲到的 gluPersoective 作用一样。在这里，我们设置视锥体的近裁剪面到观察者的距离为 1， 远裁剪面到观察者的距离为 20，视角为 60度，然后装载投影矩阵。默认的观察者位置在原点，视线朝向 -Z 方向，因此近裁剪面其实就在 z = -1 这地方，远裁剪面在 z = -20 这地方，z 值不在(-1, -20) 之间的物体是看不到的。不要忘记在初始化代码中调用该函数：

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setupLayer];        
        [self setupContext];
        [self setupProgram];
        [self setupProjection];
    }

    return self;
}

下面的代码是更新模型视图矩阵，以响应用户的控制。

- (void)updateTransform
{
    // Generate a model view matrix to rotate/translate/scale
    //
    ksMatrixLoadIdentity(&_modelViewMatrix);
    
    // Translate away from the viewer
    //
    ksTranslate(&_modelViewMatrix, self.posX, 0.0, -5.5);
    
    // Rotate the triangle
    //
    ksRotate(&_modelViewMatrix, 0.0, 1.0, 0.0, 0.0);
    
    // Scale the triangle
    ksScale(&_modelViewMatrix, 1.0, 1.0, 1.0);
    
    // Load the model-view matrix
    glUniformMatrix4fv(_modelViewSlot, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.m[0][0]);
}

上面的代码中，ksTranslate，ksRotate，ksScale 也是 GLESMath 中的数学函数，作用与 glTranslate，glRotate，glScale 相同，分别用于平移，绕轴旋绕以及缩放。在这里，设置在 x 方向上平移，平移量将由 self.posX 控制，而这个属性最终是由滑块控制的，从而达到用户移动物体的目的；将 z 设置为 -5.5 (介于 (-1, -20) 之间，前面有讲)；此外还设置绕 x 轴旋绕 0 度，在 x，y，z三个方向上缩放 1 倍，这两个函数的调用是为下一步的旋转和缩放控制准备的。最后，装载模型视图矩阵。

由于需要在 posX 的值变化时，及时更新模型视图矩阵，并重新描绘，以便能及时看到效果，我们得自己实现属性 posX 的 setter 和 getter 方法：

- (void)setPosX:(float)x
{
    _posX = x;
    
    [self updateTransform];
    [self render];
}

- (float)posX
{
    return _posX;
}

6，至此，下层的控制代码就绪了，我们来实现上层 UI 的响应代码，修改 ViewController.m 中的 xSliderValueChanged 方法如下：

- (IBAction)xSliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];
    
    openGLView.posX = currentValue;

    NSLog(@" >> current x is %f", currentValue);
}

7，编译运行，滑动滑块你就能够控制四棱锥在 x 方向上来回移动了（还记得前面限制了 x 的位置只能在 (-3, 3) 之间么，这是为了不让四棱锥跑到屏幕外边去)。聪明的你，应该很容易实现如何控制在 y 和 z 方向的移动了。在实现的过程中要注意，y 滑块的取值范围也为(-3, 3)，默认值为0，而 z 滑块的取值范围为(-10, -1)，默认值居中为-5.5。这样的设置可以确保物体不会完全跑出视锥体所圈定的范围，因为视锥体之外的物体是不可见的。比如下图中四棱锥的尖顶部分就跑到视锥体的近裁剪面外面去了，所以尖顶就被裁剪了。

五，旋绕，缩放

1，实现下层控制代码

有了控制平移的基础，我们也很容易就能控制旋转与缩放。我们还是从下层开始，修改 OpenGLView.h 中的代码（我将在 y 和 z 方向平移的代码放在这里了，希望你是自己实现它的）:

    float _posX;
    float _posY;
    float _posZ;
    
    float _rotateX;
    float _scaleZ;
}

@property (nonatomic, assign) float posX;
@property (nonatomic, assign) float posY;
@property (nonatomic, assign) float posZ;

@property (nonatomic, assign) float scaleZ;
@property (nonatomic, assign) float rotateX;

修改 OpenGLView.m 中的代码：

@synthesize posX = _posX;
@synthesize posY = _posY;
@synthesize posZ = _posZ;
@synthesize scaleZ = _scaleZ;
@synthesize rotateX = _rotateX;

前面说过，我们需要自己实现这些属性的 setter 和 getter 方法，在这里就不一一列出了， 它们与 setPosX 和 posX 的实现是类似的。我们需要让这些属性来控制模型视图矩阵，因此还要更新 updateTransform 方法如下：

- (void)updateTransform
{
    // Generate a model view matrix to rotate/translate/scale
    //
    ksMatrixLoadIdentity(&_modelViewMatrix);
    
    // Translate away from the viewer
    //
    ksTranslate(&_modelViewMatrix, self.posX, self.posY, self.posZ);
    
    // Rotate the triangle
    //
    ksRotate(&_modelViewMatrix, self.rotateX, 1.0, 0.0, 0.0);
    
    // Scale the triangle
    ksScale(&_modelViewMatrix, 1.0, 1.0, self.scaleZ);
    
    // Load the model-view matrix
    glUniformMatrix4fv(_modelViewSlot, 1, GL_FALSE, (GLfloat*)&_modelViewMatrix.m[0][0]);
}

这样四棱锥就能绕 x 轴旋转 rotateX 角度，并在 z 方向上缩放 scaleZ 倍。注意：属性 scaleZ 默认值为 0，所以我们需要对它进行初始化，此外为了能方便重置模型视图矩阵，我实现了 resetTransform，该方法在 initWithCoder 方法的最后被调用。

- (void)resetTransform
{
    _posX = 0.0;
    _posY = 0.0;
    _posZ = -5.5;
    
    _scaleZ = 1.0;
    _rotateX = 0.0;
    
    [self updateTransform];
}

2，添加上层控制代码

 打开 MainStoryboard.storyboard，在下方的 control view 中添加滑块与按钮，如图所示：

 然后修改 ViewController.h 为：

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIView * controlView;
@property (nonatomic, strong) IBOutlet OpenGLView * openGLView;

@property (nonatomic, strong) IBOutlet UISlider * posXSlider;
@property (nonatomic, strong) IBOutlet UISlider * posYSlider;
@property (nonatomic, strong) IBOutlet UISlider * posZSlider;
@property (nonatomic, strong) IBOutlet UISlider * scaleZSlider;
@property (nonatomic, strong) IBOutlet UISlider * rotateXSlider;

- (IBAction)xSliderValueChanged:(id)sender; 
- (IBAction)ySliderValueChanged:(id)sender; 
- (IBAction)ySliderValueChanged:(id)sender;

- (IBAction)scaleZSliderValueChanged:(id)sender; 
- (IBAction)rotateXSliderValueChanged:(id)sender;

- (IBAction)autoButtonClick:(id)sender;
- (IBAction)resetButtonClick:(id)sender;

@end

在 ViewController.m 中添加属性相关代码：

@synthesize posXSlider, posYSlider, posZSlider;
@synthesize scaleZSlider, rotateXSlider;

- (void)viewDidUnload
{
    [super viewDidUnload];
    
    [self.openGLView cleanup];
    self.openGLView = nil;
    
    self.posXSlider = nil;
    self.posYSlider = nil;
    self.posZSlider = nil;
    self.scaleZSlider = nil;
    self.rotateXSlider = nil;
    self.controlView = nil;
}

以及响应事件的方法：

- (IBAction)ySliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];
    
    openGLView.posY = currentValue;
    
    NSLog(@" >> current y is %f", currentValue);
}

- (IBAction)zSliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];
    
    openGLView.posZ = currentValue;
    
    NSLog(@" >> current z is %f", currentValue);
}

- (IBAction)scaleZSliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];
    
    openGLView.scaleZ = currentValue;
    
    NSLog(@" >> current z scale is %f", currentValue);
}

- (IBAction)rotateXSliderValueChanged:(id)sender
{
    UISlider * slider = (UISlider *)sender;
    float currentValue = [slider value];
    
    openGLView.rotateX = currentValue;
    
    NSLog(@" >> current x rotation is %f", currentValue);   
}

- (IBAction)autoButtonClick:(id)sender
{
}

- (IBAction)resetButtonClick:(id)sender
{
}

上面的代码很简单，基本与平移 x 的代码类似，所以在这里也就不一一讲述了。然后回到 MainStoryboard.storyboard 中，使用拖拽技巧将相关属性和事件与控件关联起来。 

3，编译运行，滑动不同的滑块，体验下 3D 变换的效果。

 

六，自动旋转与重置

1，重置恢复默认状态

还记得在前面我提到有一个重置模型视图矩阵的方法么，如果想让物体恢复默认状态，只要调用此方法，再重新描绘即可。因此，resetButtonClick 实现如下：

- (void)resetControls
{
    [posXSlider setValue:self.openGLView.posX];
    [posYSlider setValue:self.openGLView.posY];
    [posZSlider setValue:self.openGLView.posZ];
    
    [scaleZSlider setValue:self.openGLView.scaleZ];
    [rotateXSlider setValue:self.openGLView.rotateX];
}

- (IBAction)resetButtonClick:(id)sender
{
    [openGLView resetTransform];
    [openGLView render];
    
    [self resetControls];
}

在 Tutorial02 教程中 render 方法是私有方法，在这里，需要把它修改为公开方法。resetControls 是用来设置控件的默认值，以保持模型矩阵与控件的相关值同步，记得在 viewDidLoad 中调用此函数。编译运行，无论你做了多么复杂的变换，只要按下 Reset 按钮，一切都恢复原样了。

2，自动旋转

下面来添加点好玩的，让物体自动绕 X 轴旋转。这通常是通过 timer 来实现的，但苹果为我们提供了更好的办法：CADisplayLink（其实它内部也是使用的 timer），它可以让我们的应用程序与屏幕的刷新率保持同步，每当屏幕刷新时，就会调用我们提供的回调函数。下面我们来使用它，在 OpenGLView.m 中的匿名 category 中添加成员变量：

@interface OpenGLView()
{
    CADisplayLink * _displayLink;
}

并添加回调函数声明：

- (void)displayLinkCallback:(CADisplayLink*)displayLink;

然后在下面的 @implemetion 中实现此回调，屏幕没刷新一次就让四棱锥绕 x 轴旋转一定的角度：

- (void)displayLinkCallback:(CADisplayLink*)displayLink
{
    self.rotateX += displayLink.duration * 90;
}

在 OpenGLView.h 中添加公开方法：

- (void)toggleDisplayLink;

然后在 OpenGLView.m 中实现之：

- (void)toggleDisplayLink
{
    if (_displayLink == nil) {
        _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkCallback:)];
        [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
    }
    else {
        [_displayLink invalidate];
        [_displayLink removeFromRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
        _displayLink = nil;
    }
}

在上面的代码中，我们实现了一个 toggle 开关方法，如果没有自动旋转，那么就启动自动旋转；如果已经在自动旋转了，那么就停止它。CADisplayLink 的使用很简单，创建一个对象，设置它的 target 和回调函数，然后将它加入 NSRunLoop 中开始运行；如果要停止它，首先调用 invalidate 方法，然后将它从 NSRunLoop 中移除。

最后，我们在按钮的响应方法中添加对 toggleDisplayLink 的调用：

- (IBAction)autoButtonClick:(id)sender
{
    [openGLView toggleDisplayLink];
    
    UIButton * button = (UIButton *)sender;
    NSString * text = button.titleLabel.text;
    if ([text isEqualToString:@"Auto"]) {
        [button setTitle: @"Stop" forState: UIControlStateNormal];
    }
    else {
        [button setTitle: @"Auto" forState: UIControlStateNormal];
    }
}

编译运行代码，点击 Auto 就能让四棱锥自动旋转了，再次点击就能让它停止自动旋转，很妙吧？

 

七，总结

在这一篇文章中，介绍了如何通过 3D 变换来实现平移，旋转和缩放，以更好地理解前文中介绍的理论知识；同时也实现了如何通过 UIControl 来控制 OpenGL View 中的物体；此外还详细介绍了描绘图元的模式以及顶点索引模式。在文章的最后，介绍了如何使用 CADisplayLink 来实现动画效果。

最后，四棱锥看起来有点丑陋，来个水立方怎么样？（长方体），这个任务就交给看官你了，相信你一定可以实现的。