js全景图的展示与交互实践.pdf

JS全景图片的 展现与交互实践 轻松玩转全景图 黄健 @今日头条-EE研发 目录 Contents 第一话 全景图是什么 第二话 全景图的实现原理 第三话 相关实现步骤 第四话 高阶玩法 1 全景图是什么？ 来自头条圈的黑科技 ？ 全景图是什么 ？ 全景照片，又称为全景，英文是PANORAMIC PHOTO，或PANORAMA，用360°相机拍摄出的一组图片。通过专业 的软件和拼接算法实现一个全景显示图像，并且能通过计算机技术实现全方位互动式观看的真实场景还原展示 方式，当下较为火热的实景图片，360°球状相机，VR等都可以认为是全景技术的一些具体应用。 主要实现步骤如下 ： 图像采集 全景相机、球状相机、广角（鱼眼 ）镜头等 图像拼接 拼接工具PTGui + 立方体图片转换Pano2VR （很多设备的系统中也自带有拼接处理程序） 全景图的展示与交互 Tree.js, Pano.js , WebGL, html5 2 全景图的实现基本原理 全景图的显示原理 An image projecon occurs whenever a flat image is mapped onto a curved surface, or vice versa, and is parcularly common in panoramic photography. A projecon is performed when a cartographer maps a spherical globe of the earth onto a flat piece of paper, for example. Sincethe enre field of view around us can be thought of as the surface of a sphere (for all viewing angles), a similar spherical to 2-D projecon is required for photographs which are to be printed. 全景图的显示原理 全景图变形示例 Step 1 Step 2 Step 3 Step 4 图像合成 图⽚之间的处理衔接 ： 1. 特征点匹配 ：找到素材图⽚中共有的图像部分。 2. 图⽚匹配 ：连接匹配的特征点 ，估算图像间⼏何⽅⾯的变换。 全局优化和⽆缝衔接 ：   1. 全景图矫直 ：矫正拍摄图⽚时相机的相对3D旋转 ，主要原因是拍摄图⽚时相机很可能并不在同⼀⽔平 线上 ，并且存在不同程度的倾斜 ，略过这⼀步可能导致全景图变成波浪形状。 2.  图像均衡补偿 ：全局平衡所有图⽚的光照和⾊调 。 3. 图像频段融合 ：步骤4之后仍然会存在图像之间衔接边缘、晕影效果（图像的外围部分的亮度或饱和度 ⽐中⼼区域低）、视差效果（因为相机透镜移动导致） 。 合成全景图中计算机视觉技术的知识和原理 3 相关实现步骤 准备全景素材 无缝滚动 1、a为轮播的可视部分，b为轮播部分，b_1，b_1为轮播内容 2、b_2和b_1要在同一行上，利用scrollLe不断累加的方式实现 3、当b_2滚