基于Flash ActionScript的全景技术分析与实现
2020年的新冠疫情导致大规模聚集的限制，在线展示和交互成为主流，过去在线展示主要应用于房地产、服装等行业，今年的特殊情况，临近招生季，各个学校的在线校园展示成为热门，一时间几乎每个学校都在宣传自己的全景校园和在线招生咨询系统，《基于Flash ActionScript的全景技术分析与实现》是2012年本科毕业的毕业设计,利用全景相机和flash呈现区域局部的全景。技术很简单，但是当时觉得很好玩、高大上，由此，还从论文导师马老师的动漫实验室借了昂贵的全景相机（主要是鱼眼镜头）。文章略长，请耐心。
摘 要
全景展示技术是虚拟现实技术的一个重要课题，三维全景技术即方便基于浏览器的web传输，又给用户提供高品质、高交互的网络体验。互联网从C/S架构转向B/S架构，富因特网应用程序（RIAs）大行其道，Flash是最早提出RIA理论的先驱，逐步发展成为网页动画的标准，Flash Player在浏览器中的安装率高达99%，Flash在2D基础上实现3D是一种跨越，大大提高了虚拟现实的沉浸性和交互性。论文首先分析了Flash在实现全景技术的可行性和优越性，然后分析了Flash实现全景环视的基本原理和算法，最后结合实际具体应用实现素材的采集、拼接，最终实现全景环视。在实现过程中将不使用图像处理软件进行图像拼接，而是全部使用Actionscript脚本实现，大大提高了操作的灵活度和可扩展性。
关键词
Flash 3D,Actionscript ,全景技术,图像拼接
一、问题的提出
随着计算机硬件和软件的发展，以及互联网宽带的大规模应用，虚拟现实技术（Virtual Reality简称VR）应经成为计算机应用领域的一个研究热点，其应用也越来越广泛和迫切。如Web3D、全景环视等技术的广泛应用，Adobe、Autodesk等知名软件公司都与虚拟现实保持紧密联系，加大其在互联网中的应用。
全景展示作为一种多媒体推广形式和展示手段，交互性和真实性强，具有较强的临境感，同时对硬件和软件的需求较其他虚拟现实方式简单易实现，近年来受到了广泛的重视。而基Flash技术的全景展示更容易让人接受，用它可以将音乐、声效、动画以及富有新意的界面融合在一起制作出高品质的动态效果。同时Flash制作的播放文件小，利于网上传输，Flash RIA插件在互联网浏览器中的安装率高达98%左右等优点深受人们的喜爱。
本文将放弃使用图像处理软件进行图像拼接，主要采用在Flash中应用Actionscript 脚本通过建模、拼接、交互控制实现全景展示，通过理论联系实践，构建出一个场景全景展示的实际应用，并能推而广之其他的应用，如教学情境营造、校园漫游、作品展示、场景漫游等。
二、目前全景技术研究现状
三维全景（又称虚拟全景）是基于全景图像的真实场景虚拟现实技术。它是使用相机环360度或720度拍摄的一组或多组照片，通过相关的处理、拼接成一张全景照片，再通过计算机技术实现全方位交互式浏览的真实场景虚拟化展示方式。用户可以在浏览器中或其他播放器中通过鼠标左右、上下任意视角旋转观看，甚至可以任意放大、缩小，观看宏观或者局部细节，如亲临现场般的环视、俯视、仰视，给人们带来全新的临场感和交互感。目前这种技术已广泛的应用于各种领域，如城市规划、产品展示、服装、汽车等行业。下面将对Flash3D、全景技术的已有研究进行分析。
2.1 虚拟全景技术介绍
基于桌面级虚拟现实技术的全景技术，首先利用相机环绕一固定轴线旋转采集的离散图像作为基础数据，经过拼接处理形成全景图像；然后通过合适的空间模型把一幅或多幅全景图像组织为虚拟全景空间。用户在这个虚拟空间中可以模拟前进、后退、仰视、俯视、近看、远看等操作。使得用户感觉身临其境，好像在一个窗口前浏览一个现实的场景。
全景图像是指大于双眼正常视角或双眼余光视角，乃至360度完整场景范围的图像。普通采样设备无法一次性采集全景空间图像，一般用的是多幅图像拼接生成。
全景图像的拼接是根据渐入渐出的原理，对采样获得的离散图像进行无缝拼接，各离散图像之间平滑过渡，消除图像叠加产生的模糊和明显的分界所制作的全景图像，显示时可以模拟人眼的透视习惯以达到虚拟现实的效果。
数字三维全景和以往的建模、图片等表现形式相比，其优势如下：
1．沉浸感强，基于对真实图片的处理模拟三维实景制作，相比其他建模生成对象更真实可信，给观赏者带来身临其境的感觉。
2．交互性好，可以任意控制，比平面图片传达更多的图像信息。
3．生成方便，制作周期短，制作成本低。
4．发布格式多样，生成文件小，适合网络传输和各种形式的应用。
正因为如此，如今有大量的网站使用三维全景展示：从大学校园到旅游公司，从软件厂商到商品广告，甚至政府机构网站等等。全景环视技术出现在网页中使得网页交互性更强，对用户更具有吸引力。
2.2 虚拟全景技术的分类
全景图通常是全视角图象, 在它所对应的视点处，通过透视投影得到任意观察方向的视平面图象，不同全景图模式的获取和控制的难易有很大的不同。包括柱面全景图像、球面全景图像和立方体全景图像。
1) 柱形全景：是环水平360度观看四周的景色，上下的视野将受到限制。
2) 球形全景：球形全景视角是水平360度，垂直180度，全视角。
3) 立方体全景：其制作也比较简单，只需把上下前后左右6个方向图片进行拼合出更高精度和更高储存效率的全景。
通过以上分析可以看出：
1）球面全景图的中心位于视点处，是描述一个场景的理想选择，不过，球面全景图是一个非均匀采样表示，会导致场景扭曲变形，在两极尤为严重(如图1)，且球面投影缺乏一种适合于计算机存储的表示方式；
2）柱面全景图 (如图2)的优点是容易获得，且可方便地生成360度方向的场景，但这种无底面的有限柱面将对垂直方向的视域有一定的限制；
3）立方体全景图是由6 幅广角为90 的画面组成(如图3)，它克服了球面全景图和柱面全景图的一些缺陷，这种方式不仅易于全景图象数据的存储，而且与屏幕像素对应的重采样区域边界为多边形，便于显示，另外，这种立方体映射方式还可以实现水平和垂直方向的360度旋转，即可以实现任意角度的旋转，以便进行最大自由度的观察。在本文中将采用立方体全景展示图实现制作全景浏览效果。
2.3 基于Web实现虚拟全景的几种主流技术介绍
随着Intemet的普及，作为瘦客户端的Web浏览器，其主要职责是呈现HTML并把请求发回到应用服务器，而应用服务器动态地生成页面并传给客户端，这种模式被称为B/S架构。该模式成功地解决了C/S时期面临的软件分发问题。同一时期，基于B/S实现虚拟全景技术也有所发展，以下对发展过程出现的几种主流技术进行一个简单的介绍。
1) VRML技术
VRML是虚拟现实造型语言（Virtual Reality Modeling Language）的简称，是一种用于建立真实世界的场景模型或人们虚构的三维世界的场景建模语言，也具有平台无关性。是目前Internet上基于 WWW的三维互动网站制作的主流语言。它本质上是一种面向web，面向对象的三维造型语言，而且它是一种解释性语言。
目前国内利用VRML技术作为开发平台又做得比较成功的公司有中视典数字科技公司，据有一定成功案例和市场份额，详细情况请关注其公司官方网站(http://www.vrp3d.com/)。
2) WEBMAX技术
WEBMAX是国内第一个完全自主知识产权的“三维网页”虚拟互动软件技术，三维网页虚拟互动技术的研发国内起步较晚，上海创图网络科技发展有限公司是国内第一家实现三维网页虚拟技术的公司，目前还没有其它类似的技术出现。国外与WEBMAX的同类技术及产品有Cult3D、Google Earth、Intel Shockwave3D等，WEBMAX在运算速度、文件压缩比、以及网络性能上与国外同类技术相比，有很大优势。WEBMAX技术在三维网络游戏技术的基础上增加了压缩和网络流式传输的功能，三维数据可以直接在网页内边浏览边下载。
3) Cult3D技术
Cult3D是一种崭新3D网络技术，由两部分组成，一部分编写3D素材，另一部分用于解读3D素材，将最终结果无缝地嵌入到HTML中。
4) Java 3D技术
利用JAVA技术，可以轻松的创建360度实景物体和场景展示，并能模拟三维空间。JAVA技术产品可在浏览器上直接浏览，主要是运用JAVA的Applet的嵌入网页。
5) Fl ash技术
Flash有着强大的矢量图形系统，而且兼容性相当优秀，动画可以通过插件的方式实现跨平台播放与互动。通过ActionScript（一种FLASH图形脚本编程语言）编程实现真实感图形的生成与小规模三维虚拟场景的构建。可以支持基于网络或本地的中小型游戏开发，小规模的虚拟实现，科学计算可视化，多媒体教育，还可以将该技术应用到网页上，制作网页特效与动画特效，为个人网站增添一道亮丽的风景线。
Flash的3D虚拟现实最早源自于德国的Flash图形学大师Andre.Michelle发表了一篇关于虚拟现实的文章，并提供了一个实例。在Flash里部署3D虚拟实境无疑是一个革命性进步，我们再也不用去安装Java虚拟机和QTVR了，基于Flash的可编程矢量图形界面基础上开发出来的虚拟现实可以通过创新的用户界面以达到完美的用户体验。城市吧(www.city8.com)就是采用这种技术部署的全景体验城市地图，是国内比较前端的开发应用。
最近在国外已经有动画爱好者开展了对FLASH三维的研究，也开发出了相关的三维引擎，最具代表性的有开源的Papervision3D和非开源的SWFZ。而在国内也有不少的开发者对该技术进行了讨论与初步的探索，但技术还不成熟，尚未整理成系统。
Flash 3D技术的优势：首先是一个跨平台的应用，可同时满足在线应用和App应用；第二、是一种成熟技术，同时安装于全球98%以上的电脑上，无需其它安装插件；第三、可以实现各种动画，图形处理功能强大；第四、Flash 3D 使得可以在缩放，改变横宽比时，不降低显示的图片质量；第五、Flash 交互性强，可以网页、应用程序、后台程序等进行交互通讯，并可作为程序的一部分嵌入运行。
通过以上对六种技术的分析，可以总结出这些技术都达到一定成熟程度，各自都有不同领域有不发展，但是都在一个共同点特点，就是要在浏览器上装插件，而且还有个别的软件会在不同的浏览器上运行插件，得到的效果有一定的差别。在互联网的浏览器上拥99.1％左右安装率(见图4)的Flash Player无疑成为最有效最广泛的应用工具，真正实现Java一直提到的：“Write once,run everywhere!”
三、基于Flash的全景技术的基本原理
3.1 点透视与投影
点透视可以产生远小近大的变化的空间感，在立方体虚拟全景中，假设观察者位于立方体的中央，通过该点透视来计算每个面的在空间投影中的位置，以产生透视效果。
3.1.1 立方体的坐标表示
立方体全景展示允许观察者在水平方向上和垂直方向上进行全方位环视。立方体投影变换及其反变换算法的核心是投影变换公式，为此我们建立坐标系，如图2 所示。原始立方体由六个面组成，立方体的中心点O 为观察坐标系原点（即视点），a 为立方体的边长，α为方位角（-π≤α≤π），β为俯仰角（-π/2≤β≤π/2）。
由此可以得出立方体六个面的坐标方程分别为：
前平面：{x= a/2，（- a/2≤y,z≤a/2）}
后平面：{x= -a/2，（- a/2≤y,z≤a/2）}
左平面：{y= -a/2，（- a/2≤x,z≤a/2）}
右平面：{y= a/2，（- a/2≤x,z≤a/2）}
上平面：{z= a/2，（- a/2≤x,y≤a/2）}
下平面：{z= -a/2，（- a/2≤x,y≤a/2）}
3.1.2 投影算法
投影即视线与立方体各个面的相交，视平面任一点(x,y,z)与视点O(0,0,0)连线方程为：
有视线方程和立方体各个面方程联立即可得出视平面上的点与立方体各个面上对应点的坐标，分别表示为：
3.1.3 实时交互算法
该算法是实现全景交互展示的核心算法。为了能交互地浏览立方体全景图，必须实时地计算出视平面上任一点的观察坐标，以便再根据上面的算法求得全景图上所投射的可见部分，并显示出来。观察者对全景图交互地浏览，即是通过对方位角α和俯仰角β的改变，在坐标系中就是水平轴y和垂直轴z的旋转，绕y、z 轴的旋转方程可用奇次坐标形式表示，如下：
由公式（4）可得到任意角度的视平面上任一点的观察点坐标为：
再根据式（3）可得到对应的立方体各面上的对应点。
3.1.4 视平面在观察坐标系的坐标转换
立方体全景图采用六幅图像来存储图像的数据。为了实现上述算法，首先要把视平面中的点由设备坐标（u，v）变换到观察坐标（x，y，z）中。
为了便于推导运算, 假定视平面绕视点旋转运动,即视线垂直于视平面。设视平面中心初始观察坐标为(d,0 ,0 ), 且视平面平行于立方体的面1 , 则初始位置视平面方程为：x =d。
在设备坐标系下，对于视平面在初始位置上的任一点（u，v），根据中心点的初始观察坐标和初始位置视平面方程，可得到其观察坐标为（d，u- w/2，v- h/2），随着观察方位角和俯仰角的改变，根据算出的坐标，先取其象素值，再将其重投影到视平面上，并显示出来，即实现了交互实时显示功能。
3.1.5 判断视线与立方体的相交面
坐标原点O 位于立方体的中心，与立方体每个顶点的射线上任一点的(x、y、z )的绝对值相等，所以该射线与三坐标轴的夹角的绝对值均为π/4。而任一点（x，y，z）其3 个值中哪个决定值最大，则该点和原点的连线就与哪个轴的夹角的绝对值小于π/4，即该射线一定会与该轴穿过的面相交。也就是说，视平面上某一点的观察坐标值中绝对值最大的轴穿过的面就是视线与立方体相交的面；当有两个坐标的绝对值相等且大于另一个坐标时，则与边相交；当三个坐标的绝对值相等时，则与顶点相交。
例如图2，当|y|=max（|x|，|y|，|z|）且y>0 时视线必与右平面相交；当|x|=|y|>|z| 且x>0，y>0 时，视线必与前平面与右平面的交边相交；当|x|=|y|=|z| 且x>0，y>0，z>0 时，交点为顶点F。依次类推可以得到视平面上的任一点与立方体各面上相应点的对应关系。
3.2 细分贴图
flash的matrix类只支持二维的平面图形变换：如切变、缩放、平面位移。位图无法实现3D变换，在flash中必须使用细分贴图的方法来欺骗人们的眼睛，即将一张图片细分为n张小的三角面片，再将小三角面片进行平面切变，进而实现3D的浏览效果。
3.3 消隐算法
通过消隐算法，可以避免观察者只能看到离屏幕最近的面，而不能看到整个3D空间，理论上消隐算法有3个步骤：在一个立方体中，面法线与视锥体夹角大于180度则应设为不可见；在同一个像素上，只显示与视点最近的多边形（Zbuffer算法）；投影在屏幕以外的多边型不可见，这三种算法的缺点是非常占用cpu资源。在这里我们采用andrew设计的一种更简单的算法：多边形的中心与视点重合，在视点坐标系中Z值<0的多边形不可见；投影在屏幕以外的多边型不可见。
四、基于Flash 3D的全景展示实现
前面对Flash实现3D的原理进行分析，下面将采用普通相机拍摄素材，并进行处理，最终场景全景展示。
4.1本文的设计思想
4.1.1 在设计本全景图时，需要进行五步操作，分别是：图像采集，全景图制作，场景设计、脚本编写、制作全景浏览效果。其流程图如图所示:
4.1.2开发环境
本文中3D引擎的开发环境包括硬件环境与软件环境两部分。
1)硬件环境
CPU：Intel Core(TM)2 Duo T5870 2.00GHz
内存：1G
2)软件环境
开发语言：ActionScript 2.0
开发环境：Flash Player 10
开发工具：Adobe Flash CS5、Adobe Photoshop CS5
4.2素材的采集
全景拍摄需要准备这些硬件：
数码相机：从理论上来说，数码相机和传统的光学相机都可以使用。但是数码相机图片直接为电脑可以接受的格式，而光学相机还需要经过特定的仪器转换（如扫描仪）才可直接被读取，为求简便，使用数码相机。
中焦镜头：镜头的选择尽量使用中焦或者长焦镜头，镜头角度越小，图像扭曲程度越小，在处理时，程序识别其的概率就高，为后期处理提供方便。
摄影支架：摄影支架为固定相机所用，防止相机抖动为图像处理增加难度，甚至出现无法识别的图像。
根据经验，拍摄时，有以下几点需注意：
1) 使用三角架进行拍摄，并调整三角架使相机水平。
2) 拍摄模式建议选择手动模式。
3) 拍摄照片时，以下参数应该一致：尺寸大小、焦距、快门速度和光圈、白平衡。
4) 共需拍摄6 张图片，相机需以镜头的光学中心为轴旋转拍摄，通过调节云台上的刻度，确定每次转动的角度，以保证照片拼接的无错位。
所拍摄素材如下图所示：
4.3素材处理
接着开始对上面的素材进行使用软件拼接。具体拼接过程这里就不详细列出，但会给相关教程信息。
4.3.1 photoshop转换
根据其那面的算法分析，首先要对素材图进行切片，然后按下图进行的拼接使用，转换过程及效果图如下：
4.3.2 Photoshop修复
由于照相的原因，有的地方可能出现明显的拼接痕迹，可以使用photoshop对局部全景进行修复，修复过程主要使用Photoshop几个工具：变形、羽化、模式(天空用叠加，地面用变亮)等，图4-8 Photoshop修复示意图。
4.4 脚本设计
4.4.1 主场景的制作
首先，新建一个场景命名为panorama。新建一个名为main的电影剪辑，把制作好的全景图片导入到库中，库图片链接属性：标识符：data3.勾选设置。
然后进行界面设计，制作欢迎和说明性动画。在主场景中输入背景图案和说明性文字。
4.4.2 数据显示的制作
在主场景的第一帧创建关键帧，按下F9编写脚本#include "main.as"
新建main.as的文件，编写脚本代码。这里对脚本的核心部分进行解释，详细代码见附录。
首先读入位图数据,将其存放在数组中主要采用loadBitmap()函数，该函数从模块的可执行文件中加载指定的位图资源。
鼠标按下时bitmap的变换距阵，Matrix 类表示一个转换矩阵，它确定如何将点从一个坐标空间映射到另一个坐标空间。您可以对一个显示对象执行不同的图形转换，方法是设置 Matrix 对象的属性，将该 Matrix 对象应用于 Transform 对象的 matrix 属性，然后应用该 Transform 对象作为显示对象的 transform 属性。这些转换函数包括平移（x 和 y 重新定位）、旋转、缩放和倾斜。使用 new Matrix() 构造函数创建 Matrix 对象后，才能调用 Matrix 对象的方法。
初始每个bitmap细分结点在正则化3D视见体空间中的空间位置 求每subdiv的在屏幕坐标系的x和y将每个subdiv可见量存储于subdivEnable中细分贴图顶点在camera坐标空间中的坐标系变换运算 _loc5为z值,_loc5与_loc6的两个方程是对空间向量距阵计算的简化，添加鼠标控制部分。
自此，脚本动画已经制作完成，下一步我们就可以在flash player中预览制作的全景效果了。对其中出现的bug可以进一步调整，使其更加完美。
4.4.3 输出动画
根据需要选择输出配置，在flash中可以输出SWF、FLV等格式，也可以发布文网页格式等。
4.5 嵌入网页
将动态的全景图像上传网页发布于网站，加上文字介绍，这样网站内容更丰富，这样大大增加了网页的吸引力，也使得用户获得更好的体验。
4.6 全景效果
测试地点为我校图书馆，相片采集环境良好，光照充足，标识性的建筑可以为图像拼接提供很好的效果。
八 小结
在制作二维动画的软件Flash上实现三维，这本身就是一种具有挑战性的创新。本文在对三维全景技术和现在互联网上主流实现WEB 3D技术的分析之后，通过比较分析，得出Flash实现3D的意义和作用。通过对计算机图形学实现3D原理的分析，设计了适合本项目的全景浏览效果。最后通过实践经验，结合全景拍摄的相关技巧，并配以实例，讲解过程。最终实现我校图书馆的虚拟全景展示。本人从对计算机图形学了解甚少，通过不断地学习，阅读了很多本计算机图形学的经典作品，同时ActionScript的编程技术也是需要不断地进步的一方面。通过这个项目，还补充了有关摄影方面的知识，三者融合贯通才最终完成这个项目。
[参考文献]
[1] Alaric Cole.Learning Flex 3 Getting up to Speed with Rich Internet Applications[M].O’ReillyMedia,Inc.2008:19-23.
[2] 姜学智,李忠华.国内外虚拟现实技术的研究现状[J].辽宁工程技术大学学报，2004,23(2)：238-240.
[3] 苏莉.立方体全景图的自标定及浏览算法[D].北京:北京化工大学,2010.
[4] 陈宇先.基于Flash ActionScript 3的虚拟校园全景漫游[D].广州:中山大学, 2010：1-38.
[5] Flash 专栏.基于flash的360虚拟现实引擎（cubicVR）实现原理[EB/OL]. http://bbs.blueidea.com/thread-2717880-1-6.html.
[6] 王涛春,徐丹.基于PDA的立方体全景图实时漫游[J].计算机工程与应用，2006,4：61-64.
[7] Duke Gledhilla, Gui Yun Tiana, Dave Taylora, David Clarkeb.Panoramic imaging—a review[J].UK：Computers & Graphics ,2003,27 :435–445.
[8] 韦群,高丽,龚雪晶.基于立方体全景图的虚拟场景浏览技术研究及实现[J].中国图象图形学报,2003,9:1061-1066.
[9] 汤武辉. 基于WebGIS的电子商务系统设计与实现[D].厦门:厦门大学,2008:62-67.
[10] 项峻松.专业市场购物导航系统的设计与实现[D].上海:华东师范大学,2009:1-120.
[11] M.Traka,G.Tziritas.Panoramic view construction[J].Singal Processing:Image Communication，2003,18:465-481.
[12] Flash 专栏.基于flash的360虚拟现实引擎（cubicVR）实现原理http://bbs.blueidea.com/thread-2717880-1-6.html
[13] 杨会君.虚拟场景绘制中基于图像绘制方法的研究[D].湖南:国防科学技术大学,2005.
[14] 全政环.360°全景技术的应用和发展历程[J].电脑知识与技术,2010.
[15] 王润玲.基于散客市场的虚拟旅游产品设计与开发研究[D].山东:山东师范大学,2009.