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

> 本文为小专栏[《Graphics Dance》](https://xiaozhuanlan.com/graphics_dance)特供文章，仅提供预览，欢迎订阅。 # 目录 - 引言 - 全景能力 - 模型 - 球面投影 - 柱面投影 - 天空包围盒 - 渲染 - 选择模型 - 建立模型 - 加载物料 - 渲染模型 - 渲染其他组件 - 控制 - 手势 - 传感器 - 如何确定手机姿态 - 欧拉角 - 汉密尔顿四元数 - 低通滤波 - 交互 - 点击交互 - 悬浮标签 - 结语 # 引言这是我去年十一月在公司里做的一个分享，现整理成博客。视频资源来自我以前就职的实验室，未经授权禁止转载。现在各大 App 都出现全景图乃至全景视频的样式了，那么一个合格的全景图引擎到底包含了什么呢？本文面向没有太多图形学基础的同学，算是一个简单的科普。 # 正文 ## 全景能力首先列出一般的全景图所拥有的能力： - 360 度无死角可观看 - 通过手势可以旋转视角 - 利用手机传感器自动旋转视角 - 悬浮标签、点击交互有了这些能力，就可以算是一个合格的全景图渲染引擎了。 ## 模型目前全景图的渲染方法主要有`球面投影`、`柱面投影`、`天空包围盒`。 ### 球面投影球面投影的物料是一张球面展开贴图。最常见的球面投影就是世界地图。地球的近似球面展开图大概是这样： ![](//cdn.blog.yuusann.com/img/corpus/18002_1.jpg) 经过拉伸后得到： ![](//cdn.blog.yuusann.com/img/corpus/18002_2.jpg) 可以看出，球面投影的物料，在不同纬度都会有不同程度的拉伸。最极端的南北两极的极点都只有**1个像素**，因此球面展开图的最上面一行和最下面一行的颜色都是一样的。 <video id="video" controls="" preload="none" width=100% poster="//cdn.blog.yuusann.com/img/corpus/18002_3.png"> <source id="mp4" src="//cdn.blog.yuusann.com/img/corpus/18002_3.mp4" type="video/mp4"> </video> 将视角置于球心，效果： <video id="video" controls="" preload="none" width=100% poster="//cdn.blog.yuusann.com/img/corpus/18002_4.png"> <source id="mp4" src="//cdn.blog.yuusann.com/img/corpus/18002_4.mp4" type="video/mp4"> </video> ---- # 预览结束，查看全文请订阅小专栏[《Graphics Dance》](https://xiaozhuanlan.com/topic/8597340261)