专利名称：Web全景图浏览的实现方法、系统和移动终端的制作方法
技术领域：
本发明涉及虚拟现实技术领域，尤其涉及一种Web全景图浏览的实现方法、系统和移动终端。
背景技术：
随着智能手机性能的逐渐提高以及智能手机操作系统的不断完善，越来越多的用户习惯于通过手机上网浏览网页，而目前手机网页仍主要采用图文信息的呈现方式，用户体验较差，需要一种全新的展现形式来吸引用户。全景图技术是虚拟现实中一项重要的技术，能极大地改善用户体验。目前在互联网上已经使用，适用于旅游、地产等各种有展示需求的行业。和其它需要大量的三维场景建模及仿真技术投入的虚拟现实技术手段相比，全景图技术采用拼接的现实全景图像较容易地帮助人们实现对身临其境的虚拟漫游及交互的渴望。对于很多现实环境的三维虚拟展示，诸如旅游景点虚拟导览、城市环境三维全景虚拟、房产全景虚拟等等，都有非常实际的应用价值。目前已有的全景图浏览，要么使用flash技术，但flash文件占用资源过大，手机支持性不强；要么使用插件的方式，但前提是必须在自己的终端上安装一定的插件。
发明内容
本发明要解决的一个技术问题是提供一种Web全景图浏览的实现方法、系统和移动终端，能够更流畅地实现全景图浏览。本发明提供一种Web全景图浏览的实现方法，包括获取全景图像；响应于浏览指令，根据全景图像确定浏览图像；将浏览图像交替写入与视图窗口对应的双显示缓冲区；在视图窗口中交替显示双显示缓冲区中的浏览图像。根据本发明方法的一个实施例，基于CSS和JavMcript的脚本实现Web全景图浏览。根据本发明方法的一个实施例，获取全景图像包括从服务器端获取全局图像。根据本发明方法的一个实施例，还包括服务器端通过图像预处理、特征向量提取、特征匹配、图像拼接、图像融合生成全景图像。根据本发明方法的一个实施例，浏览指令包括水平移动、垂直移动、全景图缩放、 或全屏显示。根据本发明方法的一个实施例，全景图像是经过柱面投影变换获得的柱面投影图像。本发明还提供一种移动终端，包括与视图窗口对应的双显示缓冲区，以及全景图像获取模块，用于获取全景图像；
浏览图像确定模块，用于响应于浏览指令，根据全景图像确定浏览图像，将浏览图像交替写入双显示缓冲区；图像显示模块，用于在视图窗口中交替显示双显示缓冲区中的浏览图像。根据本发明的移动终端的一个实施例，还包括控制模块，用于解析CSS和 JavaScript的脚本获得操作指令，将操作指令发送给全景图像获取模块、浏览图像确定模块和图像显示模块。根据本发明的移动终端的一个实施例，浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示。本发明还提供一种Web全景图浏览的实现系统，包括服务器以及上述移动终端； 服务器用于生成全景图像，移动终端从服务器获取全景图像。本发明提供的Web全景图浏览的实现方法、系统和移动终端，将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，能够更流畅地显示全景图，提高了用户体验。
图1示出本发明的手机Web全景图浏览的实现方法的一个实施例的流程图；图2示出本发明的服务器端生成全景图的一个实施例的流程图；图3示出根据图片生成全景图的例子；图4示出根据全景图生成柱面投影图的例子；图5示出全景图与视图窗口的位置关系示意图；图6示出本发明的Web全景图浏览的实现系统的一个实施例的结构图；图7出本发明的移动终端的一个实施例的结构图。
具体实施例方式下面参照附图对本发明进行更全面的描述，其中说明本发明的示例性实施例。在附图中，相同的标号表示相同或者相似的组件或者元素。根据本发明的部分实施例，采用了图像处理、CSS和Jav必cript技术，实现了手机 Web全景图的生成与浏览效果，并通过手机按键操作实现了人机交互性。图1示出本发明的手机Web全景图浏览的实现方法的一个实施例的流程图。如图1所示，在步骤102，获取全景图像。例如在服务器端根据图片生成全景图像， 终端从服务器端获得全景图像。在步骤104，响应于浏览指令，根据全景图像确定浏览图像。用户输入浏览指令，终端根据用户的浏览指令，根据全景图像确定浏览图像。例如，根据用户的左移、右移、上移、 下移、缩放等指令，确定当前的浏览图像。在步骤106，将浏览图像交替写入与视图窗口对应的双显示缓冲区。在终端的内存中设置两个与视图窗口对应的显示缓冲区，将确定的浏览图像交替写入双显示缓冲区。在步骤108，在视图窗口中交替显示双显示缓冲区中的浏览图像。例如，当前时刻显示第一显示缓冲区的图像，则下一时刻显示第二显示缓冲区的图像，再下一时刻显示第一显示缓冲区的图像，依次类推。
在上述实施例中，将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，可以流畅显示全景图，提高了用户体验。根据本发明的一个实施例，在终端基于CSS和JavMcript的脚本实现Web全景图浏览，通过CSS (Cascading Style Sheets，层叠样式表)和Javakript的脚本实现上述浏览步骤。现有技术中终端播放全景图，要么使用flash技术，但flash文件占用资源过大， 手机支持性不强；要么使用插件的方式，但前提是必须在自己的终端上安装一定的插件。基于CSS和JavMcript的脚本实现Web全景图浏览，通用性强，不需要用户下载任何插件，占用资源小，对手机的支持性强。图2示出本发明的服务器端生成全景图的一个实施例的流程图。如图2所示，步骤202，图像预处理。例如，使用图像预处理改善图像的视觉效果， 通过图像平滑处理技术去除图像的噪声。步骤204，特征向量提取。例如，使用SIFT算法提取特征向量。SIFT算法是一种基于特征的配准方法。SIFT特征匹配算法是David G. Lowe总结了以往的基于不变量技术的特征检测方法的基础上，于2004年提出的一种基于尺度空间的、对图像缩放、旋转甚至仿射变换保持不变性的特征匹配算法。该算法匹配能力较强，能提取稳定的特征，可以处理两幅图像之间发生平移、旋转、仿射变换、视觉变换、光照变换情况下的匹配问题，甚至在某种程度上对任意角度拍摄的图像也具备较为稳定的特征匹配能力，从而可以实现差异较大的两幅图像之间的特征匹配。步骤206，特征匹配。例如，使用KD树与BBF算法进行特征匹配。针对图像中提取的SIFT特征点，文使用k-d tree树构建算法构建一棵k_d树，再使用BBF算法在k-d树上寻找最近距离点KNN(K-neareSt neighbor)。k_d树是二叉检索树的扩展，k表示空间的维数。k-d树的每一层将空间分成两个，树的顶层结点按一维进行划分，下一层结点按另一维进行划分，以此类推，各个维循环往复。划分要使得在每个结点， 大约一半存储在子树中的点落入一侧，而另一半落入另一侧。当一个结点中的点数少于给定的最大点数时，划分结束。BBF(Best BinFirst)算法用于在KD_tree上找最近距离匹配点对。它借助优先队列，从根节点开始，在KD-tree寻找路径，错过的点先塞到优先队列里， 先向前扫描至叶子节点；然后再从队列里取出目前关键值最小的，重复上述过程，一个直扫到叶子节点；直到队列为空，或者已经重复了 200遍时停止。步骤208，图像拼接。例如，使用DLT方法、RANSAC算法、LM非线性优化算法得到匹配特征之间的变换参数以实现图像拼接。在成功提取图像之间匹配的SIFT特征点之后，利用DLT(DirectLinear Transformation)方法找到这些特征点对之间的变换参数，并使用RANSAC算法对特征点提纯，找到最适合的特征点对(称其为内点)，并估计出变换参数矩阵。之后在基于内点的基础上，进一步利用LM非线性优化算法优化匹配特征点之间的变换参数，使之可以有效利用于图像的拼接。DLT (直接线性变换)方法，Abdal-Aziz和Karara提出了直接线性变换像机定标的方法，他们从摄影测量学的角度深入的研究了像机图像和环境物体之间的关系，建立了像机成像几何的线性模型，这种线性模型参数的估计完全可以由线性方程的求解来实现。直接线性变换是将像点和物点的成像几何关系在齐次坐标下写成透视投影矩阵的形式。 RANSAC算法为一种全自动稳健的图像拼接融合算法。给定N个数据点组成的数据集合P， 其中大多数是由一个参数未知的特定模型产生的，该模型的参数至少需要η个数据点求出 (Ν>η)。算法的目的就是求出这个模型的参数。将下述过程运行k次Step 1，从P中随机选取含有η个数据点的子集Sl ；Step 2，由所选取的η个数据点计算出一个模型Hl ；Step 3，对数据集合中其余的N-n个数据点，计算出它们与模型Hl之间的距离，记录在Hl的某个误差允许范围内的P中数据点的个数C。Levenberg-Marquardt非线性优化算法是求解非线性最小化问题的标准方法。该算法是在逆Hessian矩阵方法的极限和最速下降法之间做平滑调和，即后一方法在远离最小值时应用，当接近最小值时则逐渐切换到前一方法。从算法本质来看，它们都无法克服对初始值选取敏感以及不能保证收敛到全局最优解等缺陷。但通常如果初始值误差在一定范围内，利用该求精算法，可以使匹配点的误差控制在0. 1个像素之内。步骤210，图像融合。例如，使用图像融合方法消除图像之间的拼接痕迹。图3示出根据图片生成全景图的例子。图3上方示出连续的3张图片经过图像处理生成图3下方所示的全景图。根据本发明的一个实施例，针对生成的平面全景图，还可以采用柱面投影变换公式实现了该全景图的柱面投影，获得全景图的柱面投影图像。这样，除了直接浏览平面全景图外，用户还可以选择柱面变形的视觉效果。图4示出根据全景图生成柱面投影图的例子。 如图4所示，第1行为投影前的全景图，第2行为柱面投影后的效果。下面通过一个具体的例子说明全景图手机浏览的实现。图5示出全景图与视图窗口的位置关系示意图。外面大的框表示全景图，具有相应的宽度width、高度height和左上顶点(left，top)。其中波纹框表示视图窗口，具有宽度View_width和高度View_height。在下面的描述中，分别用Imagel和Image2表示与视图窗口对应的两个显示缓冲区的图像。如图5所示，全景图片的大小、位置用(left，top, width,height)来表示，视图窗口的大小、位置用(0，0，View_width，View_height)来表示。 为了实现全景图360度的顺畅浏览，使用了两个显示缓冲区中的图片(分别记作Imagel和 Image2)交替显示。根据图片位移的水平方向，设定了两种移动模式moveMode :M0VE_ASC模式，视图不动而图片左移，于是视图看到的是相对从左到右平移的效果；M0VE_DESC模式，视图不动而图片右移，于是视图看到的是相对从右到左平移的效果。相对于Imagel而言，Image2的位置可以是在其左侧或右侧，视全景图浏览的模式而定，具体而言有两种类型的位置关系 localRelation，记为IMG_FIRST，表示 Lnage2 在 Lnagel 的左侧；IMG_LAST，表示 Image2 在 Imagel的右侧。(1)浏览初始化设定移动模式moveMode、Image2的位置关系localRelation分别为M0VE_ASC模式、IMG_LAST,同时设置移动时水平、竖直方向移动的步长img必tep均为某一个常数。(2)水平方向位移1)平移步长St印的确定若moveMode 采用的是 M0VE_ASC 模式，则 step = -imageStep ；
若moveMode 采用的是 M0VE_DESC 模式，则 step = imageStep ；2)对Imagel图片进行处理每平移一次，图片的水平位置可表示为χ = Imagel. left+step若不考虑图片平移出界的情况，χ的值即是平移后的Imagel. left值。但考虑到图片平移出界的问题，X的值不能直接赋予Imagel. left，需按以下几种情况进行处理。a)若 moveMode 采用的是 M0VE_ASC 模式当图片Imagel左侧移出视图区域左边界时，进行如下处理IocalRelation = IMG_LAST ；当图片的右侧移进视图区域时，进行如下处理χ = x+2 X Imagel. widthIocalRelation = IMG_FIRST ；b) img_move 采用的是 M0VE_DESC 模式当图片Imagel右侧移出视图区域右边界时，进行如下处理IocalRelation = IMG_LAST ；当图片Imagel的左侧进入视图区域时，进行如下处理χ = x-2 X Imagel. widthIocalRelation = IMG_FIRST ；最后将χ的值直接赋予Imagel. left。3)对Image2图片进行处理Image2图片与Imagel图片保持图片大小(width，height) —致，top值也一致，唯一不同的就是left值。对left值大小的控制分以下两种情况处理。a)moveMode 采用的是 M0VE_ASC 模式且 IocalRelation = IMG_LAST,或者 moveMode 采用的是 M0VE_DESC 模式且 IocalRelation = IMG_FIRST，则Im age2. left = Im agel. left+Im agel. widthb)其他情况，则Im age2. left = Im agel. Ieft-Im agel. width通过对图片Imagel和Image2的有效控制，可以实现同一张全景图左右360度浏览的完美效果。左移与右移的互换也只需要通过moveMode与localRelation的同时切换即可实现。(3)竖直方向位移因为Image2图片与Imagel图片保持图片大小(width，height) —致，top值也一致，所以只需对其中一张图片进行处理即可得到平移后的位置。上移的浏览效果通过将图片进行下移得以实现，即触发一次上移事件，y = Imagel. top+imageStep下移图片可能会出现出界问题，故加入一个约束条件以确保图片下移不出界，即 若y大于零，则直接将y的值设为零，最后将y值赋予Imagel. top和Image2· top。同理，下移的浏览效果等价于将图片进行上移，即触发一次下移事件，y = Imagel. top-imageStep
下移图片可能会出现出界问题，故加入一个约束条件以确保图片下移不出界， 艮口 若 y zj、于(View_height-Imagel. height)，贝Ij直接)y 值设为(View_height-Imagel. height),最后将 y 值赋予 Imagel. top 禾口 Image2. top。(4)全景图缩放为了使缩放后视图的中心不变，我们选取以视图中心为基准点进行缩放，设缩放的比例为m = 1. 3d则缩放后的图片大小、位置为width = widthXmheight = height Xm
权利要求
1.一种Web全景图浏览的实现方法，其特征在于，包括获取全景图像；响应于浏览指令，根据所述全景图像确定浏览图像；将所述浏览图像交替写入与视图窗口对应的双显示缓冲区；在所述视图窗口中交替显示所述双显示缓冲区中的浏览图像。
2.根据权利要求1所述的实现方法，其特征在于，基于CSS和JavMcript的脚本实现 Web全景图浏览。
3.根据权利要求1所述的实现方法，其特征在于，所述获取全景图像包括从服务器端获取所述全局图像。
4.根据权利要求3所述的实现方法，其特征在于，还包括所述服务器端通过图像预处理、特征向量提取、特征匹配、图像拼接、图像融合生成所述全景图像。
5.根据权利要求1所述的实现方法，其特征在于，所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示。
6.根据权利要求1所述的实现方法，其特征在于，所述全景图像是经过柱面投影变换获得的柱面投影图像。
7.一种移动终端，其特征在于，包括与视图窗口对应的双显示缓冲区，还包括全景图像获取模块，用于获取全景图像；浏览图像确定模块，用于响应于浏览指令，根据所述全景图像确定浏览图像，将所述浏览图像交替写入所述双显示缓冲区；图像显示模块，用于在所述视图窗口中交替显示所述双显示缓冲区中的浏览图像。
8.根据权利要求7所述的移动终端，其特征在于，还包括控制模块，用于解析CSS和JavMcript的脚本获得操作指令，将所述操作指令发送给所述全景图像获取模块、浏览图像确定模块和图像显示模块。
9.根据权利要求7所述的移动终端，其特征在于，所述浏览指令包括水平移动、垂直移动、全景图缩放、或全屏显示。
10.一种Web全景图浏览的实现系统，其特征在于，包括服务器以及如权利要求7至9 中任意一项所述的移动终端；所述服务器用于生成所述全景图像，所述移动终端从所述服务器获取所述全景图像。
全文摘要
本发明公开一种Web全景图浏览的实现方法、系统和移动终端，涉及虚拟现实实现领域。该方法包括获取全景图像；响应于浏览指令，根据景图像确定浏览图像；将浏览图像交替写入与视图窗口对应的双显示缓冲区；在视图窗口中交替显示双显示缓冲区中的浏览图像。将浏览图像交替写入双显示缓冲区，终端在视图窗口中交替显示缓冲区中的浏览图像，克服了通常终端处理能力不足导致的浏览不流畅的问题，可以流畅显示全景图，提高了用户体验。
文档编号G06F3/048GK102546921SQ201110045779
公开日2012年7月4日 申请日期2011年2月25日 优先权日2010年12月7日
发明者张路宜, 李江崴, 梁洁, 武娟, 陈学亮, 陈戈, 韩晓梅 申请人:中国电信股份有限公司