OpenGL ES实践教程(四)VR全景视频播放

教程

OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践教程3-Demo03-Mirror 其他教程请移步OpenGL ES文集,这一篇介绍以下知识点:

  • AVFoundation——加载视频;
  • CoreVideo——配置纹理;
  • OpenGL ES——渲染视频;
  • 3D数学——球体以及3维变换;

核心思路

通过AVFoundation加载视频源,读取到每一帧的CMSampleBuffer之后,用CoreVideo创建OpenGL ES纹理缓存并上传GPU;OpenGL ES按照球体的模型来渲染视频;用移动摄像机朝向或者旋转球体的方式来响应手指的移动达到移动镜头的效果。

效果展示

具体细节

1、配置OpenGL ES;

  • loadShaders加载着色器和compileShader编译着色器的内容前面的教程已经介绍过都次,不再赘述;
  • setupBuffers配置缓存信息,并且创建顶点数据缓存,把球体的顶点和纹理数据先上传GPU;

因为模型的顶点数据不会变化,故而可以预先上传,使用时只需通过glBindBuffer即可使用顶点数据; 如果想每帧都上传顶点数据亦可以。(不推荐)

  • glUniform常量赋值在编译链接完成顶点着色器后,可以设置着色器里面用到常量;

2、加载视频;

  • loadAsset创建视频源,并用loadValuesAsynchronouslyForKeys加载轨道信息;
  • createAssetReader创建Reader,并设置读取的格式与轨道目标;
  • processAsset开始Reader,并启动CADisplayLink开始读取视频帧;

通过mReaderVideoTrackOutput的copyNextSampleBuffer可以获取到下一帧的视频信息; 通过CMSampleBufferGetImageBuffer可以获取到CMSampleBuffer里面的像素缓存pixelBuffer,将其传给GLView用于配置纹理;

    CMSampleBufferRef sampleBuffer = [self.mReaderVideoTrackOutput copyNextSampleBuffer];
    CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);

3、配置纹理;

  • 通过CVBufferGetAttachment获取pixelBuffer的颜色空间格式,决定使用的颜色转换矩阵,用于下一步的YUV到RGB颜色空间的转换;
  • 通过glActiveTexture启用纹理,用 CVOpenGLESTextureCacheCreateTextureFromImage创建纹理,再glBindTexture绑定纹理,设置好纹理格式;

CVOpenGLESTextureCacheCreateTextureFromImage创建的亮度纹理为frameHeight * frameWidth,格式为GL_LUMINANCECVOpenGLESTextureCacheCreateTextureFromImage创建的亮度纹理为frameHeight/2 * frameWidth/2,格式为GL_LUMINANCE_ALPHA

思考0:为何要使用CV?是否可以不使用CV直接读取纹理信息?

4、YUV到RGB颜色空间的转换;

YUV颜色空间由亮度+色度组成,GPU支持的RGB的颜色空间,故而需要进行一次转换。 下面是demo用到的颜色转换矩阵:

const GLfloat kColorConversion601FullRange[] = {
    1.0,    1.0,    1.0,
    0.0,    -0.343, 1.765,
    1.4,    -0.711, 0.0,
};

注意:颜色转换和顶点变换都是通过矩阵来计算。

5、球体渲染

简单介绍下全景视频的原理: 通过多个摄像机录制多方向的视频,通过投影计算,存储到一个视频中; 将视频渲染到球面上,通过摄像机的位置与朝向,计算每次能显示的内容并绘制到屏幕。如下图:

这就涉及到两个问题:

  • 将全景的视频信息存储在二维的视频里面;
  • 将二维的视频还原成全景的视频信息。 (摄像机的位置和朝向计算看下面)

思考1:全景视频显示效果与普通视频有何区别?为什么?

球面到2D视频的展开

假设地球被围在一中空的圆柱里,其基准纬线与圆柱相切(赤道)接触,然后再假想地球中心有一盏灯,把球面上的图形投影到圆柱体上,再把圆柱体展开,得到投影。

越靠近画面的TOP和BOTTOM,图像的扭曲效果就越严重。上图还看不太出来,看看下图。

思考2:是否存在没有扭曲效果的全景显示?

2D视频到球面的显示 之前的教程有介绍过,点这里 下图是一张展开了的地球图像

下图是按照球体的顶点数据进行渲染

6、视角变化

球的圆心在原点,摄像机的所在也是原点,如下图。

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

思考

思考0:视频的纹理创建、销毁非常频繁,并且纹理普遍较大,CV对纹理的创建和缓存有针对的优化,故而在处理视频帧的时候推荐通过CV来处理纹理(图像不行)。 如果不是用CV创建纹理,可以通过CVPixelBufferGetBaseAddress,拿到pixelBuffer的像素指针p;p的起始是亮度纹理,p加上亮度纹理的偏移量(frameWidth * frameHeight)之后是色度纹理。

思考1:全景视频带有明显的扭曲效果。因为是把2D平面的纹理渲染到球面上,故而带有扭曲效果。

思考2:存在。天空盒可以做到。天空盒

扩展

1、投影方式

Equisolid投影 Mercator投影

2、录制难点

同步、角度、分屏(双倍设备)

和VR的区别。全景+双屏。

总结

demo的起因是群里和徐杰聊天的时候说到最近看到一个全景视频直播,想起以前自己曾想过做一个全景图像,结果因为不懂CV和AVFoundation、没有球体的顶点数据而放弃。 刚好他有一个视频源,就要过来再试试。 结果这次的demo只花一天的时间就做完了,第二天的时间都是微调手指触摸的体验。 实现过程中遇到一些坑,但是在分析完数据之后也马上解决,一次很好的实践体验。 篇幅有限,代码在这里,欢迎star、fork。疑问请留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【学习】SPSS探索分析实践操作

SPSS为我们提供了探索分析,所谓探索分析之所以是探索,是因为有时候我们对于变量的分布特点不是很清楚,探索的目的在于帮助我们完成以下的工作:识别...

39780
来自专栏AI研习社

Github 项目推荐 | 基于 PyTorch,面向 AI 系统加速研究与开发的深度学习框架

TorchFusion 基于 PyTorch 并且完全兼容纯 PyTorch 和其他 PyTorch 软件包,它供了一个全面的可扩展训练框架,可以轻松用开发者的...

16120
来自专栏python开发者

字符型图片验证码识别完整过程及Python实现

验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙 功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越来越严峻。本文介绍了一...

2.7K80
来自专栏大数据文摘

手把手 | 如何用Python做自动化特征工程

机器学习的模型训练越来越自动化,但特征工程还是一个漫长的手动过程,依赖于专业的领域知识,直觉和数据处理。而特征选取恰恰是机器学习重要的先期步骤,虽然不如模型训练...

1.5K10
来自专栏IT派

用python怎样识别验证码?(含源码)

验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越来越严峻。本文介绍了一套...

68300
来自专栏机器学习AI算法工程

文本自动分类案例(源码)

使用机器学习方法 做文档的自动分类 套路: 1.根据每个文件 生成该文件的一个特征 2.根据特征 选择 分类器 进行文本分类 3.(可选)根据 2 步结果,调...

500120
来自专栏章鱼的慢慢技术路

解救小哈——DFS算法举例

30080
来自专栏互联网杂技

A*算法详解

概述 虽然掌握了 A* 算法的人认为它容易,但是对于初学者来说, A* 算法还是很复杂的。 搜索区域(The Search Area) 我们假设某人要从 A 点...

48490
来自专栏应兆康的专栏

扭曲你的数据,让其变得具有视觉吸引力

经常有这样的情况,你用数据画出图像有看起来会很丑,如何让你的图像变得好看一点呢?本文给大家介绍如何扭曲你的数据,在不影响结果和其他属性的情况下,使得你数据画出来...

41540
来自专栏新智元

【AI可能真的要代替插画师了】复旦同济用cGAN生成动画人物

【新智元导读】复旦大学、同济、CMU等的研究者使用cGAN生成各种属性的二次元人物头像,效果非常令人印象深刻。生成的图片质量非常之高,本文作者认为这项工作如果加...

53650

扫码关注云+社区

领取腾讯云代金券