iOS VR视频开发

Demo的Github仓库地址：https://github.com/filelife/FLVRPlayer

为了让你们更好的阅读Demo代码，如下简单介绍相关知识及实现思路。

Step 0.

0.1 渲染VR场景视频的大体思路：

逐帧读取VR视频的逐帧数据，以后经过着色器渲染到球体模型上，获取球体中心的做为视觉取镜点，经过重力感应接受头部移动向量方向，更新手机的映射取镜点。

Step 1.

1.1 获取模型

首先，须要建立一个球体。在OpenGL中建立模型，须要顶点和纹理坐标，经过3D MAX等工具制做的obj模型在iOS中识别不了，因此须要进行转换为OpenGL使用的顶点数组。

有位大神写了一个模型转换为顶点数组的工具：https://github.com/HBehrens/obj2opengl

产物是一套球体模型的顶点数据+顶点索引；

1.2 模型数据描述

为了更好理解顶点数据和定点索引的旨意，咱们来分析一个正方形模型的建模数据。

GLfloat squareVertexData[] =
{
    0.5, -0.5, 0.0f,    1.0f, 0.0f, //右下
    -0.5, 0.5, 0.0f,    0.0f, 1.0f, //左上
    -0.5, -0.5, 0.0f,   0.0f, 0.0f, //左下
    0.5, 0.5, -0.0f,    1.0f, 1.0f, //右上
};
复制代码

这些点咱们本意想要描述的是一个正方形，可是因为手机屏幕坐标系内XY轴比例并不同，因此最终会产出如下形状：

对于初学者还有个容易忽视的技术点,那就是 ==在OpenGL ES只能绘制三角形==,不能绘制多边形,可是在OpenGL中确实能够直接绘制多边形.

//顶点索引
GLuint indices[] ={ 
  0, 1, 2,
  1, 3, 0
};
复制代码

咱们还能够经过如下顶点+索引，绘制一个3D的正方体。

//顶点数据，前三个是顶点坐标， 中间三个是顶点颜色，    最后两个是纹理坐标
GLfloat attrArr[] =
{
    -0.5f, 0.5f, 0.0f,       0.0f, 0.0f, 0.5f,       0.0f, 1.0f,//左上
    0.5f, 0.5f, 0.0f,        0.0f, 0.5f, 0.0f,       1.0f, 1.0f,//右上
    -0.5f, -0.5f, 0.0f,      0.5f, 0.0f, 1.0f,       0.0f, 0.0f,//左下
    0.5f, -0.5f, 0.0f,       0.0f, 0.0f, 0.5f,       1.0f, 0.0f,//右下
    -0.5f, 0.5f, 1.0f,       0.0f, 0.0f, 0.5f,       0.0f, 1.0f,//后方左上
    0.5f, 0.5f, 1.0f,        0.0f, 0.5f, 0.0f,       1.0f, 1.0f,//后方右上
    -0.5f, -0.5f, 1.0f,      0.5f, 0.0f, 1.0f,       0.0f, 0.0f,//后方左下
    0.5f, -0.5f, 1.0f,       0.0f, 0.0f, 0.5f,       1.0f, 0.0f,//后方右下
};

复制代码

//顶点索引
    GLuint indices[] =
    {
        0, 3, 2,
        0, 1, 3,
        0, 4, 1,
        5, 4, 1,
        1, 5, 3,
        7, 5, 3,
        2, 6, 3,
        6, 7, 3,
        0, 6, 2,
        0, 4, 6,
        4, 5, 7,
        4, 6, 7,
    };

复制代码

Step 2.

2.1渲染基础 - 缓存

CPU的运算能力（每秒亿次级别）远高于其对内存的读写能力（每秒百万次级别），为了优化效率，避免产生数据饥饿，在OpenGL ES中，可让程序从CPU的内存中复制数据到GPU控制的连续RAM缓存中，GPU在取得一个缓存数据以后，便会独占该缓存，从而尽量有效的读写内存数据，缓存数据包含：几何数据、颜色、灯光效果等等。

缓存的生命周期：

2.1.1. 生成（Generate）：请求OpenGLES为GPU控制的缓存生成一个独一无二的标志符。

对应函数：glGenBuffers()

2.1.2. 绑定（Bind）告诉OpenGLES为接下来的运算使用一个缓存。

对应函数：glBindBuffer()

2.1.3. 启用（Enable）或者禁止（Disable）：告诉OpenGLES再接下来的渲染中，是否使用缓存数据。

对应函数：glEnableVertexAttribArray()

2.1.4. 设置指针（Set Points）：告诉OpenGLES在缓存中的数据存储的类型和所须要访问的数据的内存指针偏移。

对应函数：geVertexAttribPointer()

2.1.5. 绘图（Draw）：告诉OpenGLES使用当前绑定并启用的缓存中的数据渲染整个场景或者某个场景的一部分。

对应函数：glDrawArrays()

2.1.6. 删除（Delete）：告诉OpenGLES删除之前生成的缓存并释放相关的资源。

对应函数：glDeleteBuffers()

2.2 一个3D场景的几何数据

2.2.1. 坐标系（笛卡尔坐标系）:OpeGLES坐标系没有单位，点{1,0,0}到点{2,0,0}的距离就是沿着X轴的的1单位。 2.2.2. 矢量：矢量是理解现代GPU的关键，由于图形处理器就是大规模矢量处理器。 2.2.3. 点、线、三角形：OpenGLES只渲染顶点、线段和三角形。下图就是一种渲染案例，经过点、线、三角形渲染环形体。

2.3 Core Animation层：

因为iOS操做系统不会让应用直接向前帧缓存或者后帧缓存绘图，也不会让应用直接控制前帧缓存和后帧缓存之间的切换。因此iOS使用Core Animation合成器去控制全部绘制层的合成。（例如：StatusBar层+开发者提供的渲染层 = 屏幕最终显示像素）

Core Animation合成器使用OpenGLES来尽量高效地控制GPU、混合层和切换帧缓存，所以Core Animation合成器合成图像造成一个合成结果的过程，都和OpenGLES有关。

2.4 GLKView/GLKViewController:

GLKView/GLKViewController都是GLKit框架的一部分。GLKView是UIView的子类，GLKView简化了 经过CoreAnimation对于：建立帧缓存、管理帧缓存、绘制帧缓存的所须要做的工做。于GLKView相关的GLKViewController是视图的委托，并接收当视图须要重绘时的消息。

Step 3.

理解球体内的取景视角

球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系:

x=rsinθcosφ

y=rsinθsinφ

z=rcosθ

Step 4.

代码浅析。

1. GLKBaseEffecty： 隐藏了iOS设备支持的多格OpenGLES版本之间的差别。在应用中使用BaseEffect可以减小代码量,例如简化避免咱们去使用OpenGLES2中的Shading Lauguage。

EAGL:Embedded Apple GL

2. EAGLContext： Context上下文是为了多任务在互不干扰状况下，共享图像的硬件设备而存在的， EAGLContext则提供并行工做的函数方法，并控制GPU去执行渲染运算。

3. EAGLSharegroup： 管理Context中的OpenGL ES对象，Context须要经过EAGLSharegroup对象建立和管理的。

[图片上传失败...(image-9f3553-1529478576825)]

4. glTexParameter :函数用于制定纹理的应用方式。[滤波模式（第14页）]

纹理放大与缩小以下图
/* TextureParameterName */
//提供纹理放大缩小滤波
#define GL_TEXTURE_MAG_FILTER 0x2800
#define GL_TEXTURE_MIN_FILTER 0x2801
#define GL_TEXTURE_WRAP_S 0x2802
#define GL_TEXTURE_WRAP_T 0x2803
@ glTexParameteri (GLenum target, GLenum pname, GLint param);
//glTexParameterf vs glTexParameteri：不一样点在于 integer和 float类型入参。
//In the case where the pname (second) parameter is GL_TEXTURE_WRAP_S where you are passing an enum you should use glTexParameteri but for other possible values such as GL_TEXTURE_MIN_LOD and GL_TEXTURE_MAX_LOD it makes sense to pass a float parameter using glTexParameterf. 
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_REPEAT);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
复制代码

5. 纹理空间映射到对象空间上产生了Wrap，关于S方向和T方向上的延伸方案：

#define GL_TEXTURE_WRAP_S 0x2802
#define GL_TEXTURE_WRAP_T 0x2803
复制代码

6. 纹理在作Mipmap(纹理映射)变化中产生的缩小方案：

采样方案：

点采样方法：最近纹素的纹理值。
线性滤波：最近领域（2x2）纹素加权平均值。
复制代码

补充两点：

1. Shader语法介绍

2. 齐次记法