使用 OpenGL ES 实现全景播放器

全景视频在播放的时候，可以自由地旋转视角。如果结合手机的陀螺仪，全景视频在移动端可以具备更好的浏览体验。本文主要介绍如何基于 AVPlayer 实现一个全景播放器。

首先看一下最终的效果：

在上一篇文章中，我们了解了如何对视频进行图形处理。（如果还不了解的话，建议先阅读一下。传送门）

一般全景视频的编码格式与普通视频并无区别，只不过它的每一帧都记录了 360 度的图像信息。全景播放器需要做的事情是，可以通过参数的设置，播放指定区域的图像。

所以，我们需要实现一个滤镜，这个滤镜可以接收一些角度相关的参数，渲染指定区域的图像。然后我们再将这个滤镜，通过上一篇文章的方式，应用到视频上，就可以实现全景播放器的效果。

一、构造球面

全景视频的每一帧图像，其实是一个球面纹理。所以，我们第一步要做的是先构造球面，然后把纹理贴上去。

首先来看一段代码：

/// 生成球体数据
/// @param slices 分割数，越多越平滑
/// @param radius 球半径
/// @param vertices 顶点数组
/// @param indices 索引数组
/// @param verticesCount 顶点数组长度
/// @param indicesCount 索引数组长度
- (void)genSphereWithSlices:(int)slices
                     radius:(float)radius
                   vertices:(float **)vertices
                    indices:(uint16_t **)indices
              verticesCount:(int *)verticesCount
               indicesCount:(int *)indicesCount {
    // (1)
    int numParallels = slices / 2;
    int numVertices = (numParallels + 1) * (slices + 1);
    int numIndices = numParallels * slices * 6;
    float angleStep = (2.0f * M_PI) / ((float) slices);
    
    // (2)
    if (vertices != NULL) {
        *vertices = malloc(sizeof(float) * 5 * numVertices);
    }
    
    if (indices != NULL) {
        *indices = malloc(sizeof(uint16_t) * numIndices);
    }
    
    // (3)
    for (int i = 0; i < numParallels + 1; i++) {
        for (int j = 0; j < slices + 1; j++) {
            int vertex = (i * (slices + 1) + j) * 5;
            
            if (vertices) {
                (*vertices)[vertex + 0] = radius * sinf(angleStep * (float)i) * sinf(angleStep * (float)j);
                (*vertices)[vertex + 1] = radius * cosf(angleStep * (float)i);
                (*vertices)[vertex + 2] = radius * sinf(angleStep * (float)i) * cosf(angleStep * (float)j);
                (*vertices)[vertex + 3] = (float)j / (float)slices;
                (*vertices)[vertex + 4] = 1.0f - ((float)i / (float)numParallels);
            }
        }
    }
    
    // (4)
    if (indices != NULL) {
        uint16_t *indexBuf = (*indices);
        for (int i = 0; i < numParallels ; i++) {
            for (int j = 0; j < slices; j++) {
                *indexBuf++ = i * (slices + 1) + j;
                *indexBuf++ = (i + 1) * (slices + 1) + j;
                *indexBuf++ = (i + 1) * (slices + 1) + (j + 1);
                
                *indexBuf++ = i * (slices + 1) + j;
                *indexBuf++ = (i + 1) * (slices + 1) + (j + 1);
                *indexBuf++ = i * (slices + 1) + (j + 1);
            }
        }
    }
    
    // (5)
    if (verticesCount) {
        *verticesCount = numVertices * 5;
    }
    if (indicesCount) {
        *indicesCount = numIndices;
    }
}

这段代码参考自 bestswifter/BSPanoramaView 这个库。它通过分割数和球半径，生成了顶点数组和索引数组。

现在来逐行解释代码的含义：

(1) 这部分代码是对原始图像进行分割。下面以 slices = 10 为例进行讲解：

如图，slices 表示分割的份数，横向被分割成了 10 份。numParallels 表示层数，纵向分割成 5 份。因为纹理贴到球面时，横向需要覆盖 360 度，纵向只需要覆盖 180 度，所以纵向分割数是横向分割数的一半。可以把它们想象成经纬度来帮助理解。

numVertices 表示顶点数，如图中蓝色点的个数。numIndices 表示索引数，当使用 EBO 绘制矩形的时候，一个矩形需要 6 个索引值，所以这里需要用矩形的个数乘以 6 。

angleStep 表示纹理贴到球面后，每一份分割对应的角度增量。

(2) 根据顶点数和索引数申请顶点数组和索引数组的内存空间。

(3) 开始创建顶点数据。这里遍历每一个顶点，计算每一个顶点的顶点坐标和对应的纹理坐标。

为了方便表示，将角 AOB 记为 α ，将角 COD 记为 β ，半径记为 r 。

当 i 和 j 都为 0 的时候，表示的是图中的 G 点。实际上，第一行的 11 个点都会和 G 点重合。

对于图中的 A 点，它的坐标为：

x = r * sin α * sin β
y = r * cos α
z = r * sin α * cos β

由此易得出顶点坐标的计算公式。

而纹理坐标只需要根据分割数等比增长。值得注意的是，由于纹理坐标的原点在左下角，所以纹理坐标的 y 值要取反，即 G 点对应的纹理坐标是 (0, 1) 。

(4) 计算每个索引的值。其实很好理解，比如第一个矩形，它需要用到第一行的前两个顶点和第二行的前两个顶点，然后将这四个顶点拆成两个三角形来组合。

(5) 返回生成的顶点数组和索引数组的长度，在实际渲染的时候需要用到。因为每一个顶点有 5 个变量，所以需要乘上 5 。

将上面生成的数据进行绘制，可以看到球面已经生成：

二、透视投影

OpenGL ES 默认使用的是正射投影，正射投影的特点是远近图像的大小是一样的。

在这个例子中，我们需要使用透视投影。透视投影定义了可视空间的平截头体，处于平截头体内的物体才会被以近大远小的方式渲染。

如图，我们需要使用 GLKMatrix4MakePerspective(float fovyRadians, float aspect, float nearZ, float farZ) 来构造透视投影的变换矩阵。

fovyRadians 表示视野，fovyRadians 越大，视野越大。aspect 表示视窗的比例，nearZ 表示近平面，farZ 表示远平面。

在实际使用中，nearZ 一般设置为 0.1，farZ 一般设置为 100 。

具体代码如下：

GLfloat aspect = [self outputSize].width / [self outputSize].height;
CGFloat perspective = MIN(MAX(self.perspective, kMinPerspective), kMaxPerspective);
GLKMatrix4 matrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(perspective), aspect, 0.1, 100.f);

因为摄像机的默认坐标是 (0, 0, 0)，而球面的半径是 1，处于 0.1 ~ 100 这个范围内。所以通过透视投影的矩阵变换后，看到的是从球面的内部，由平截头体截出来的图像。

因为是球面内部的图像，所以是镜像的（这个问题后面一起解决）。

三、视角移动

手机设备内置有陀螺仪，可以实时获取到设备的 roll 、pitch、yaw 信息，它们被称为欧拉角。

但凡使用过欧拉角，都会遇到一个万向节死锁问题，它可以用四元数来解决。所以我们这里不直接读取设备的欧拉角，而是使用四元数，再把四元数转成旋转矩阵。

幸运的是，系统也提供四元数的直接访问接口：

CMQuaternion quaternion = self.motionManager.deviceMotion.attitude.quaternion;

但是得到的四元数还不能直接使用，需要做三步变换：

第一步： Y 轴取反

matrix = GLKMatrix4Scale(matrix, 1.0f, -1.0f, 1.0f);

考虑到前面 X 轴镜像的问题，所以这一步实际上是：

matrix = GLKMatrix4Scale(matrix, -1.0f, -1.0f, 1.0f);

第二步： 顶点着色器 y 分量取反

// Panorama.vsh
gl_Position = matrix * vec4(position.x, -position.y, position.z, 1.0);

第三步： 四元数 x 分量取反

CMQuaternion quaternion = self.motionManager.deviceMotion.attitude.quaternion;
double w = quaternion.w;
double wx = quaternion.x;
double wy = quaternion.y;
double wz = quaternion.z;
self.desQuaternion = GLKQuaternionMake(-wx, wy, wz, w);

然后通过 self.desQuaternion 才能计算出正确的旋转矩阵。

GLKMatrix4 rotation = GLKMatrix4MakeWithQuaternion(self.desQuaternion);
matrix = GLKMatrix4Multiply(matrix, rotation);

四、镜头平滑移动

我们在不断地移动手机时，self.desQuaternion 会不断地变化。由于移动手机的速度是变化的，所以 self.desQuaternion 的增量是不固定的。这样导致的结果是画面卡顿。

所以需要做平滑处理，在当前四元数和目标四元数之间，根据一定的增量进行线性插值。这样能保证镜头的移动不会发生突变。

float distance = 0.35;   // 数字越小越平滑，同时移动也更慢
self.srcQuaternion = GLKQuaternionNormalize(GLKQuaternionSlerp(self.srcQuaternion, self.desQuaternion, distance));

五、渲染参数传递

在实际的渲染过程中，外部可以进行渲染参数的调整，来修改渲染的结果。

比如以 perspective 为例，看一下在修改视野大小的时候，具体的参数是怎么传递的。

// MFPanoramaPlayerItem.m
- (void)setPerspective:(CGFloat)perspective {
    _perspective = perspective;
    NSArray *instructions = self.videoComposition.instructions;
    for (MFPanoramaVideoCompositionInstruction *instruction in instructions) {
        instruction.perspective = perspective;
    }
}

在 MFPanoramaPlayerItem 中，当 perspective 修改时，会从当前的 videoComposition 中获取到 MFPanoramaVideoCompositionInstruction 数组，再遍历赋值。

// MFPanoramaVideoCompositionInstruction.m
- (void)setPerspective:(CGFloat)perspective {
    _perspective = perspective;
    self.panoramaFilter.perspective = perspective;
}

在 MFPanoramaVideoCompositionInstruction 中，修改 perspective 会给 panoramaFilter 赋值。然后 MFPanoramaFilter 开始渲染的时候，在 startRendering 方法中，会根据 perspective 属性，生成新的变换矩阵。

六、避免后台渲染

由于 OpenGL ES 不支持后台渲染，所以要注意，在 APP 切换到后台前，应该暂停播放。

NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
[center addObserver:self
           selector:@selector(willResignActive:)
               name:UIApplicationWillResignActiveNotification
             object:nil];

- (void)willResignActive:(NSNotification *)notification {
    if (self.state == MFPanoramaPlayerStatePlaying) {
        [self pause];
    }
}

源码

请到 GitHub 上查看完整代码。

参考

• 【GitHub】bestswifter/BSPanoramaView
• OpenGL ES学习实战(360全景视频播放器)