iOS VR视频开发

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

Demo效果图.gif

为了让大家更好的阅读Demo代码,以下简单介绍相关知识及实现思路。

Step 0.

0.1 渲染VR场景视频的大致思路:

image

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

image

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轴比例并不一样,所以最终会产出以下形状:
image
对于初学者还有个容易忽视的技术点,那就是 ==在OpenGL ES只能绘制三角形==,不能绘制多边形,但是在OpenGL中确实可以直接绘制多边形.
//顶点索引
GLuint indices[] ={ 
  0, 1, 2,
  1, 3, 0
};
image
我们还可以通过以下顶点+索引,绘制一个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.

理解球体内的取景视角

image
球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系:
x=rsinθcosφ
y=rsinθsinφ
z=rcosθ
image

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. 齐次记法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345