FFmpeg 开发(07):FFmpeg + OpenGLES 实现 3D 全景播放器
FFmpeg 开发系列连载:
FFmpeg 开发(01):FFmpeg 编译和集成
FFmpeg 开发(02):FFmpeg + ANativeWindow 实现视频解码播放
FFmpeg 开发(03):FFmpeg + OpenSLES 实现音频解码播放
FFmpeg 开发(04):FFmpeg + OpenGLES 实现音频可视化播放
FFmpeg 开发(05):FFmpeg + OpenGLES 实现视频解码播放和视频滤镜
FFmpeg 开发(06):FFmpeg 播放器实现音视频同步的三种方式
前文中,我们已经利用 FFmpeg + OpenGLES + OpenSLES 实现了一个多媒体播放器,本文将基于此播放器实现一个酷炫的 3D 全景播放器。
全景播放器原理
全景视频是由多台摄像机在一个位置同时向四面八方拍摄,最后经过后期拼接处理生成的。
普通播放器播放全景视频画面会扭曲变形
用普通的多媒体播放器播放全景视频,画面会呈现出严重的拉伸和扭曲变形。
全景播放器将视频画面渲染到球面上,相当于从球心去观察内部球面,观察到的画面 360 度无死角,这也就是市面上大多数“ VR 盒子”的实现原理。
全景播放器将视频画面渲染到球面上
构建球面网格
全景播放器原理与普通播放器的本质区别在渲染图像部分,普通播放器只需将视频画面渲染到一个矩形平面上,而全景播放器需要将视频画面渲染到球面。
为实现全景播放器,我们只需要利用 OpenGL 构建一个球体,然后将 FFmpeg 解码的视频画面渲染到这个球体表面即可。
球体网格
OpenGL ES 中所有 3D 物体均是由三角形构成的,构建一个球体只需要利用球坐标系中的经度角、维度角以及半径计算出球面点的三维坐标,最后这些坐标点构成一个个小矩形,每个矩形就可以分成 2 个三角形。
球坐标系
球坐标系
在球坐标系中,利用经度角、维度角和半径计算出球面点坐标公式如下:
计算出球面点坐标公式
根据上述公式计算球面顶点坐标的代码实现, 其中 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 划线渲染球状网格,测试构建的球体是否准确。
球状网格
渲染全景视频
计算好顶点坐标和纹理坐标后,剩下的就是简单的纹理映射(纹理贴图),不了解纹理映射的同学可以查看这篇文章纹理映射,篇幅有限,这里不展开讲述。
顶点坐标和纹理坐标初始化 VAO 。
// Generate VBO Ids and load the VBOs with data
glGenBuffers(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 Id
glGenVertexArrays(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 object
glUseProgram (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());
先绘制普通视频,看看是啥样儿。
绘制普通视频
最后绘制全景视频。
绘制全景视频
相关文章
- UWA学堂|移动游戏开发核心技术讲解:3D UI、GPU Skinning和DOTS
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第七节:PS基础:UV动画
- Google Earth Engine(GEE)——通过重采样对影像进行分割,然后让影像成为油画形式附带3D效果
- Gym - 100548C The Problem Needs 3D Arrays
- 三维海浪建模3d
- 《Unity 4 3D开发实战详解》一6.7 物理引擎综合案例
- 《Unity 4 3D开发实战详解》一导读
- 《Unity 3.x游戏开发实例》——1.1节Unity 3D简介
- Three.js教程之在网页快速实现 3D效果(教程含源码)
- 实景三维-3D Real Scene
- 【Unity3D日常开发】新建2D、3D场景,新建场景没有灯光等问题
- Unity 3D 开发中需要掌握的数学基础知识概要整理(一)
- 国产3D闪存2019年量产 关注芯片公司
- 3D模型与2D工程图智能联动教程
- 3D设计数据丢失怎么办?