[OpenGL ES 04]3D变换实践篇：平移，旋转，缩放
[OpenGL ES 04]3D变换实践篇：平移，旋转，缩放
罗朝辉 (http://www.cnblogs.com/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 来实现动画效果。
最后，四棱锥看起来有点丑陋，来个水立方怎么样？（长方体），这个任务就交给看官你了，相信你一定可以实现的。
