一个全景图渲染引擎到底包含了些什么

发布于:2018-01-10 13:32,阅读数:842,点赞数:3


> 本文为小专栏[《Graphics Dance》](https://xiaozhuanlan.com/graphics_dance)特供文章,仅提供预览,欢迎订阅。

# 目录

- 引言
- 全景能力
- 模型
- 球面投影
- 柱面投影
- 天空包围盒
- 渲染
- 选择模型
- 建立模型
- 加载物料
- 渲染模型
- 渲染其他组件
- 控制
- 手势
- 传感器
- 如何确定手机姿态
- 欧拉角
- 汉密尔顿四元数
- 低通滤波
- 交互
- 点击交互
- 悬浮标签
- 结语

# 引言

这是我去年十一月在公司里做的一个分享,现整理成博客。视频资源来自我以前就职的实验室,未经授权禁止转载。

现在各大 App 都出现全景图乃至全景视频的样式了,那么一个合格的全景图引擎到底包含了什么呢?本文面向没有太多图形学基础的同学,算是一个简单的科普。

# 正文

## 全景能力

首先列出一般的全景图所拥有的能力:

- 360 度无死角可观看
- 通过手势可以旋转视角
- 利用手机传感器自动旋转视角
- 悬浮标签、点击交互

有了这些能力,就可以算是一个合格的全景图渲染引擎了。

## 模型

目前全景图的渲染方法主要有`球面投影`、`柱面投影`、`天空包围盒`。

### 球面投影

球面投影的物料是一张球面展开贴图。

最常见的球面投影就是世界地图。地球的近似球面展开图大概是这样:

![](//cdn.yuusann.com/img/corpus/18002_1.jpg)

经过拉伸后得到:

![](//cdn.yuusann.com/img/corpus/18002_2.jpg)

可以看出,球面投影的物料,在不同纬度都会有不同程度的拉伸。最极端的南北两极的极点都只有**1个像素**,因此球面展开图的最上面一行和最下面一行的颜色都是一样的。

<video id="video" controls="" preload="none" width=100% poster="//cdn.yuusann.com/img/corpus/18002_3.png">
<source id="mp4" src="//cdn.yuusann.com/img/corpus/18002_3.mp4" type="video/mp4">
</video>


将视角置于球心,效果:

<video id="video" controls="" preload="none" width=100% poster="//cdn.yuusann.com/img/corpus/18002_4.png">
<source id="mp4" src="//cdn.yuusann.com/img/corpus/18002_4.mp4" type="video/mp4">
</video>

----

# 预览结束,查看全文请订阅小专栏[《Graphics Dance》](https://xiaozhuanlan.com/topic/8597340261)


评论:1条


1楼:2019-04-26 12:19:26

kk@2018:

没有做反面剔除啊?


返回列表

返回归档

返回主页