FFmpeg + OpenGL ES 实现 3D 全景播放器

Stella981
• 阅读 405

FFmpeg + OpenGL ES 实现 3D 全景播放器

FFmpeg + OpenGLES 实现 3D 全景播放器

FFmpeg 开发系列连载:

前文中,我们已经利用 FFmpeg + OpenGLES + OpenSLES 实现了一个多媒体播放器,本文将基于此播放器实现一个酷炫的 3D 全景播放器。

1

全景播放器原理

全景视频是由多台摄像机在一个位置同时向四面八方拍摄,最后经过后期拼接处理生成的。

普通播放器播放全景视频画面会扭曲变形

用普通的多媒体播放器播放全景视频,画面会呈现出严重的拉伸和扭曲变形。

全景播放器将视频画面渲染到球面上,相当于从球心去观察内部球面,观察到的画面 360 度无死角,这也就是市面上大多数“ VR 盒子”的实现原理

FFmpeg + OpenGL ES 实现 3D 全景播放器

全景播放器将视频画面渲染到球面上

2

构建球面网格

全景播放器原理与普通播放器的本质区别在渲染图像部分,普通播放器只需将视频画面渲染到一个矩形平面上,而全景播放器需要将视频画面渲染到球面。

为实现全景播放器,我们只需要利用 OpenGL 构建一个球体,然后将 FFmpeg 解码的视频画面渲染到这个球体表面即可

FFmpeg + OpenGL ES 实现 3D 全景播放器

球体网格

OpenGL ES 中所有 3D 物体均是由三角形构成的,构建一个球体只需要利用球坐标系中的经度角、维度角以及半径计算出球面点的三维坐标,最后这些坐标点构成一个个小矩形,每个矩形就可以分成 2 个三角形。

FFmpeg + OpenGL ES 实现 3D 全景播放器

球坐标系

FFmpeg + OpenGL ES 实现 3D 全景播放器

球坐标系

在球坐标系中,利用经度角、维度角和半径计算出球面点坐标公式如下:

FFmpeg + OpenGL ES 实现 3D 全景播放器

计算出球面点坐标公式

根据上述公式计算球面顶点坐标的代码实现, 其中 ANGLE_SPAN 为步长,RADIUS 为半径,RADIAN 用于弧度转换 。

//构建顶点坐标for (float vAngle = 90; vAngle > -90; vAngle = vAngle - ANGLE_SPAN) {//垂直方向每隔 ANGLE_SPAN 度计算一次    for (float hAngle = 360; hAngle > 0; hAngle = hAngle - ANGLE_SPAN) {//水平方向每隔 ANGLE_SPAN 度计算一次        double xozLength = RADIUS * cos(RADIAN(vAngle));        float x1 = (float) (xozLength * cos(RADIAN(hAngle)));        float z1 = (float) (xozLength * sin(RADIAN(hAngle)));        float y1 = (float) (RADIUS * sin(RADIAN(vAngle)));        xozLength = RADIUS * cos(RADIAN(vAngle - ANGLE_SPAN));        float x2 = (float) (xozLength * cos(RADIAN(hAngle)));        float z2 = (float) (xozLength * sin(RADIAN(hAngle)));        float y2 = (float) (RADIUS * sin(RADIAN(vAngle - ANGLE_SPAN)));        xozLength = RADIUS * cos(RADIAN(vAngle - ANGLE_SPAN));        float x3 = (float) (xozLength * cos(RADIAN(hAngle - ANGLE_SPAN)));        float z3 = (float) (xozLength * sin(RADIAN(hAngle - ANGLE_SPAN)));        float y3 = (float) (RADIUS * sin(RADIAN(vAngle - ANGLE_SPAN)));        xozLength = RADIUS * cos(RADIAN(vAngle));        float x4 = (float) (xozLength * cos(RADIAN(hAngle - ANGLE_SPAN)));        float z4 = (float) (xozLength * sin(RADIAN(hAngle - ANGLE_SPAN)));        float y4 = (float) (RADIUS * sin(RADIAN(vAngle)));        //球面小矩形的四个点        vec3 v1(x1, y1, z1);        vec3 v2(x2, y2, z2);        vec3 v3(x3, y3, z3);        vec3 v4(x4, y4, z4);        //构建第一个三角形        m_VertexCoords.push_back(v1);        m_VertexCoords.push_back(v2);        m_VertexCoords.push_back(v4);        //构建第二个三角形        m_VertexCoords.push_back(v4);        m_VertexCoords.push_back(v2);        m_VertexCoords.push_back(v3);    }}

计算对应球面坐标的纹理坐标,实际上就是计算固定行和列的网格点。

//构建纹理坐标,球面展开后的矩形int width = 360 / ANGLE_SPAN;//列数int height = 180 / ANGLE_SPAN;//行数float dw = 1.0f / width;float dh = 1.0f / height;for (int i = 0; i < height; i++) {    for (int j = 0; j < width; j++) {        //每一个小矩形,由两个三角形构成,共六个点        float s = j * dw;        float t = i * dh;        vec2 v1(s, t);        vec2 v2(s, t + dh);        vec2 v3(s + dw, t + dh);        vec2 v4(s + dw, t);        //构建第一个三角形        m_TextureCoords.push_back(v1);        m_TextureCoords.push_back(v2);        m_TextureCoords.push_back(v4);        //构建第二个三角形        m_TextureCoords.push_back(v4);        m_TextureCoords.push_back(v2);        m_TextureCoords.push_back(v3);    }}

用 OpenGL 划线渲染球状网格,测试构建的球体是否准确。

FFmpeg + OpenGL ES 实现 3D 全景播放器

球状网格

3

渲染全景视频

计算好顶点坐标和纹理坐标后,剩下的就是简单的纹理映射(纹理贴图),不了解纹理映射的同学可以查看这篇文章纹理映射,篇幅有限,这里不展开讲述。

顶点坐标和纹理坐标初始化 VAO 。

// Generate VBO Ids and load the VBOs with dataglGenBuffers(2, m_VboIds);glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);glBufferData(GL_ARRAY_BUFFER, sizeof(vec3) * m_VertexCoords.size(), &m_VertexCoords[0], GL_STATIC_DRAW);glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[1]);glBufferData(GL_ARRAY_BUFFER, sizeof(vec2) * m_TextureCoords.size(), &m_TextureCoords[0], GL_STATIC_DRAW);// Generate VAO IdglGenVertexArrays(1, &m_VaoId);glBindVertexArray(m_VaoId);glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);glEnableVertexAttribArray(0);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(vec3), (const void *)0);glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[1]);glEnableVertexAttribArray(1);glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(vec2), (const void *)0);glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);glBindVertexArray(GL_NONE);

绘制视频画面。

// Use the program objectglUseProgram (m_ProgramObj);glBindVertexArray(m_VaoId);GLUtils::setMat4(m_ProgramObj, "u_MVPMatrix", m_MVPMatrix);//绑定纹理glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, m_TextureId);GLUtils::setFloat(m_ProgramObj, "s_TextureMap", 0);glDrawArrays(GL_TRIANGLES, 0, m_VertexCoords.size());

先绘制普通视频,看看是啥样儿。

FFmpeg + OpenGL ES 实现 3D 全景播放器

绘制普通视频

最后绘制全景视频。

FFmpeg + OpenGL ES 实现 3D 全景播放器

绘制全景视频

-- END --

技术交流扫码添加我的微信:Byte-Flow

FFmpeg + OpenGL ES 实现 3D 全景播放器

免费获取视频教程和源码

推荐:

我用 OpenGL ES 给小姐姐做了几个抖音滤镜

一文掌握 YUV 图像的基本处理

Android OpenGL ES 从入门到精通系统性学习教程

FFmpeg + OpenGLES 实现音频可视化播放

Hi 小姐姐,这是你要的瘦身大长腿效果?

OpenGL ES 实现动态(水波纹)涟漪效果

觉得不错,点个在看呗~

FFmpeg + OpenGL ES 实现 3D 全景播放器

本文分享自微信公众号 - 字节流动(google_developer)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
1个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
晴空闲云 晴空闲云
1个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表: **时辰** **时间** **24时制** 子时 深夜 11:00 - 凌晨 01:00 23:00 - 01 :00 丑时 上午 01:00 - 上午 03:00 01:00 - 03 :00 寅时 上午 03:00 - 上午 0
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Stella981 Stella981
1年前
Angular material mat
Icon Icon Name mat-icon code _add\_comment_ add comment icon <mat-icon> add\_comment</mat-icon> _attach\_file_ attach file icon <mat-icon> attach\_file</mat-icon> _attach\
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
1个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue