OpenGL ES不容错过的实战-碰碰车

教程

OpenGLES入门教程1-Tutorial01-GLKit
OpenGLES入门教程2-Tutorial02-shader入门
OpenGLES入门教程3-Tutorial03-三维变换
OpenGLES入门教程4-Tutorial04-GLKit进阶
OpenGLES进阶教程1-Tutorial05-地球月亮
OpenGLES进阶教程2-Tutorial06-光线
OpenGLES进阶教程3-Tutorial07-粒子效果
OpenGLES进阶教程4-Tutorial08-帧缓存
这一次是碰碰车。非常重要的一节，是前面教程的一个应用。
这一次的内容较多，包括复杂顶点模型、第一和第三人称视角变化、万向节锁、物理碰撞模拟、平滑动画与高低通滤波器、模型封装、材质绘制。
这一次的教程会尽可能多详细介绍。

效果展示

核心思路

通过加载头文件的顶点数据，得到复杂的顶点模型--车和场景。
先绘制场景，再单独绘制每一辆车。
第三人称视角固定为俯视角，第一人称视角选取一辆车作为视点所在，视线为车的前进方向。
当第一、第三人称视角切换的时候，通过滤波器来达到视线平滑过渡。
物理碰撞通过向量运算来模拟。

细节解析

1、模型加载

模型放在头文件，car的数据放在bumperCar.h 包括bumperCarVerts顶点位置，bumperCarNormals顶点法线，总共有bumperCarNumVerts = 1164个顶点。
场景的数据放在bumperRink.h，格式和car一致，顶点较少，只有bumperRinkNumVerts = 180个顶点。

2、模型封装

• SceneMesh类是网格类，通过AGLKVertexAttribArrayBuffer管理顶点数据，发送顶点数据到GPU，分配顶点数据内存，绘制顶点数据。
• SceneModel类是模型类，属性axisAlignedBoundingBox放置了模型的最大最小边界，属性mesh是模型的网格类，管理顶点数据。
• SceneCarModel类是car的模型类，包括car的顶点数据和模型的基本属性，可以绘制car模型。
• SceneRinkModel类是场景的模型类，包括场景的顶点数据和边界等基本属性，可以绘制场景。
• SceneCar类是car的逻辑类，包括car的速度、位置、偏航角、半径，还有滤波器函数、cars的碰撞处理、car与场景的碰撞处理、绘制car模型。

观察SceneCar类的初始化函数

- (id)initWithModel:(SceneModel *)aModel
   position:(GLKVector3)aPosition
   velocity:(GLKVector3)aVelocity
   color:(GLKVector4)aColor;

SceneCar需要SceneModel（模型类）、position（位置）、velocity（速度）、color（颜色）来初始化。
注意，这里的SceneCar并没有依赖SceneCarModel，而是依赖抽象（基类）SceneModel，实现了解耦。可以新建一个SceneOtherCar继承SceneModel，传递给SceneCar，不需要修改SceneCar的代码就可以创建出一个新的car。

3、视角变化

视角通过函数GLKMatrix4MakeLookAt确定，参数如下：

GLKMatrix4 GLKMatrix4MakeLookAt(
          float eyeX, float eyeY, float eyeZ,
          float centerX, float centerY, float centerZ,
          float upX, float upY, float upZ)

GLKMatrix4MakeLookAt() 函数会计算并返回一个model-view矩阵，这个矩阵会对齐从眼睛的位置到看向的位置之间的矢量与当前视域的中心线。
GLKMatrix4MakeLookAt()的详细解析会在接下来的教程--基于视锥体（平截体）的OpenGL ES性能优化篇详细介绍，目前可以按照参数来理解：假设有一个人，他的眼睛在前三个参数指定的位置，眼睛望向中间三个参数的位置，头的朝向为最后三个参数的方向，up（0，1，0）为标准方向。

• 第一人称视角如下。

    self.eyePosition = GLKVector3Make(10.5, 5.0, 0.0);
    self.lookAtPosition = GLKVector3Make(0.0, 0.5, 0.0);

• 第三人称视角如下。

    self.targetEyePosition = GLKVector3Make(viewerCar.position.x,
                                                viewerCar.position.y + 0.45f,
                                                viewerCar.position.z);
    self.targetLookAtPosition = GLKVector3Add(_eyePosition, viewerCar.velocity);

细心的同学已经发现有eyePosition和targetEyePosition两个position。
eyePosition表示的是当前eye所在的位置，targetEyePosition表示的eye最终的目的。
之所以需要设置一个目标的位置，是为了做视角的切换，通过高通滤波器函数SceneVector3FastLowPassFilter和低通滤波器函数SceneVector3SlowLowPassFilter，实现视角平滑过渡。

4、滤波器函数

• 高通滤波器函数，50.0是一个可替换的较大的常数。可以模拟撞墙后震动的效果，因为50.0比较大，current值再增加后可能超过target。

GLfloat SceneScalarFastLowPassFilter(NSTimeInterval elapsed,
                                     GLfloat target,
                                     GLfloat current)
{
    return current + (50.0 * elapsed * (target - current));
}

• 低通滤波器函数，4.0是一个可替换的较小的常数。可以模拟视角切换过程的效果，因为4.0比较小，current会逐渐接近target。

GLfloat SceneScalarSlowLowPassFilter(NSTimeInterval elapsed,
                                     GLfloat target,
                                     GLfloat current)
{
    return current + (4.0 * elapsed * (target - current));
}

5、万向节锁

<==-----------<==飞机
-
______________________x

| y

<==-----------<==飞机
-
______________________x

如上，假设地面的正北方向为x轴，正朝上为y轴。现在左下角的原点处有一台望远镜，它通过(a, b)来望向天空中的飞机，a为与望远镜与x轴正方向的夹角，我们用偏航角来解释；b为望远镜向上抬起后与地面的夹角，我们用高度角来解释。
对于任意一台坐标为(a, b)的飞机，我们都可以通过先偏移a偏航角，再抬起b高度角，从而观察到飞机。
现在假设有一台坐标为(0, 45)的飞机，朝望远镜飞来。飞机在望远镜的正北方向，偏航角为0，高度角为45。随着飞机不断接近望远镜，偏航角不变，高度角不断变大。
当飞机飞到望远镜的正上空的时候，坐标为(0, 90)。
此时，如果飞机转向朝东方向飞，偏航角由0直接变为90，但是此时由于望远镜正朝上（之前的坐标为0，90），偏航角的改变没有意义（丢失一个自由度）。
本教程还不需要用到四元数来解决这个问题，只是作为背景了解一下。Google上面有很多解释，比我讲的好很多。

6、物理碰撞模拟

• car与墙壁的碰撞
  通过(SceneAxisAllignedBoundingBox)rinkBoundingBox可以得到墙壁的最大小边界。根据car的radius属性得到半径，通过半径radius+nextPosition与rinkBoundingBox判断是否到达边界。
  如果到达边界则把对应轴的速度向量反向。

• car之间的碰撞
  假设两辆车分别为self和other。
  selfCar的速度为velocity、位置为position，otherCar的速度为otherVelocity、位置为otherPosition。
  通过position和otherPosition，可以得到一条直线，car的碰撞就发生在这一条线上的方向上。
  velocity在直线上的分量为tanOwnVelocity，otherVelocity在直线上的分量为tanOtherVelocity。

  
  
  

  如上，碰撞完成后selfCar的速度为velocity - tanOwnVelocity，otherCar的速度为otherVelocity - tanOtherVelocity。

self.velocity = GLKVector3Subtract(ownVelocity, tanOwnVelocity);
currentCar.velocity = GLKVector3Subtract(otherVelocity, tanOtherVelocity);

7、材质绘制

GLKBaseEffect有一个material属性，用于材质颜色的设置。
注意的是需要调用anEffect的prepareToDraw之后，再调用model的draw。

    //设置材质
    anEffect.material.diffuseColor = self.color;
    anEffect.material.ambientColor = self.color;
    [anEffect prepareToDraw];
    [model draw];

思考

场地、车都是分别绘制的，他们的位置是如何控制的？当第一人称视角切换后，为什么车的显示会跟着变大？
这一部分作为思考题，就不给出答案了，在代码里面有注释。

总结

这一次的实现还是比较简单，模型是放在头文件，并没有用modellist文件来管理。
我在源代码的基础上，简化了不需要的代码和增加了很多注释。看完教程和代码的后，相信都能理解。

附上源码