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

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

FFmpeg 开发系列连载：

1

2

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

```//构建顶点坐标
for (float vAngle = 90; vAngle > -90; vAngle = vAngle - ANGLE_SPAN) {//垂直方向每隔 ANGLE_SPAN 度计算一次
for (float hAngle = 360; hAngle > 0; hAngle = hAngle - ANGLE_SPAN) {//水平方向每隔 ANGLE_SPAN 度计算一次
float x1 = (float) (xozLength * cos(RADIAN(hAngle)));
float z1 = (float) (xozLength * sin(RADIAN(hAngle)));
float x2 = (float) (xozLength * cos(RADIAN(hAngle)));
float z2 = (float) (xozLength * sin(RADIAN(hAngle)));
float x3 = (float) (xozLength * cos(RADIAN(hAngle - ANGLE_SPAN)));
float z3 = (float) (xozLength * sin(RADIAN(hAngle - ANGLE_SPAN)));
float x4 = (float) (xozLength * cos(RADIAN(hAngle - ANGLE_SPAN)));
float z4 = (float) (xozLength * sin(RADIAN(hAngle - ANGLE_SPAN)));

//球面小矩形的四个点
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);
}
}
```

3

```// 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());
```

-- END --

0 条评论

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

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

• ### 全网最全的 Android 音视频和 OpenGL ES 干货，都在这了

有位大佬说，“这是全网最全的 Android OpenGL ES 教程”，哈哈，对于这种善意的“商业互吹”，当然是欣然接受，这无疑给了我更多的动力和激情来完善这...

• ### FFmpeg + OpenGLES 实现视频解码播放和视频滤镜

前面 Android FFmpeg 开发系列文章中，我们已经利用 FFmpeg 的解码功能和 ANativeWindow 的渲染功能，实现了的视频的解码播放。

• ### 短视频 SDK 开发 (一) 开发一款短视频 SDK 需要具备哪些知识?

2020 年要属什么最火，肯定是短视频和直播带货了。我自己基本上每天晚上睡觉之前都会刷一会儿 douyin 短视频，不得不承认 douyin 的推荐算法是真 n...

• ### iOS开发-音视频开发

5G网络作为第5代的移动通信网络,它的网络峰值传播速度可1以达到10Gbps/s.这比4G的的传输速度快数百倍.举个例子,整部超高画质电影下载可在1秒钟之内下载...

• ### 音视频技术开发周刊 | 147

WebRTC是一个非常新的技术，很多用户仍然在初步摸索阶段。有一些用户是不清楚WebRTC的用户场景，不知道WebRTC究竟可以使用在哪些应用场景中。

• ### Android 基于OpenGl ES渲染yuv视频（十二）

本文是基于前面两篇OpenGl理论学习的实际应用，更好的巩固一下前面的学习内容，重点讲下如何使用OpenGl去渲染一个yuv格式视频。

• ### 【Android 音视频开发打怪升级：FFmpeg音视频编解码篇】

在 Java 层，Android 已经为我们提供了 GLSurfaceView 用于 OpenGL ES 的渲染，我们不必关心 OpenGL ES 中关于 EG...

• ### 一张图概括淘宝直播背后的前端技术 | 赠送多媒体前端手册

2020年，直播带货火爆全网。想一探淘宝直播背后的前端技术？本文将带你进入淘宝直播前端技术的世界。