CN101923462A - 一种基于FlashVR的三维微型场景网络发布引擎 - Google Patents

Abstract

本发明涉及一种基于FlashVR的三维微型场景网络发布引擎，根据三维流水线，结合Flash软件中空间表达的方式，利用Flash脚本语言ActionScript 3.0实现了一种基于Flash的、免插件的三维微型场景网络发布引擎。实验表明，该引擎实现了对3dSmax或者maya等三维建模工具导出的三维模型文件的实时渲染和互动操作，最终生成相应的.swf文件，并将.swf文件嵌入到浏览器中，无需用户下载额外插件即可实现三维模型的发布；同时，在对部分通用技术细节进行整理和封装的基础上，形成一个面向FlashVR应用的应用程序接口函数，使得FlashVR开发人员不必再关心底层技术的实现细节，大大减少开发人员的工作难度和工作量，缩短开发周期。

Description

一种基于FlashVR的三维微型场景网络发布引擎

技术领域

本发明涉及虚拟现实(Virtual Reality)技术和互联网络发布技术，具体是一种基于FlashVR的三维微型场景网络发布引擎。

背景技术

基于Web的虚拟现实***是基于桌面VR***在互联网上的延伸，即实现三维物体和场景在网络上有限带宽的范围内传输，从而呈现在千里之外的网络用户面前，使二维的网页变成一个接近真实的三维场景。它是互联网技术和虚拟现实技术发展的必然产物。基于桌面VR***的可分为两类：基于图像的桌面VR***和基于模型的桌面VR***。目前针对基于图像的桌面VR***的网上虚拟现实技术主要有VRML技术、Java3D技术、Viewpoint技术、Cult 3D技术等。

VRML技术是一种网上三维语言，，通过节点进行三维描述，，节点又由域和事件构成：域定义节点的属性；事件定义用户与场景之间的交互，使虚拟世界具有动感。在节点间创建通道(Route)，通过发送一个事件使一个节点控制另一个节点。VRML文件是虚拟空间的文本性描述，可采用文本编辑器、VrmlPad(试用版)或由能够生成VRML三维空间的工具可视化地生成。VRML的优点是简单、方便、易用，可以直接嵌入到HTML文件中去，可以利用Script节点可以通过Java或者JavaScript语言编写的程序脚本来扩展其功能。缺点是画面不够生动逼真；VRML语言功能目前还不是很强，与Java和JavaScript语言交互较难掌握等。

Java3D技术是Java语言在三维图形领域的扩展，是一组应用编程接口(API)。它除具有VRML具有的可交互性、支持多媒体和节省网络带宽外，还具有简化三维应用程序的开发、更强的交互性、同其它Java APIs有良好的结合性等优点。

Viewpoint和Cult 3D技术三者拥有互动性强、真实度高的共同特点。Cult3D技术的内核是基于JAVA，它可以嵌入JAVA类，利用JAVA来增强交互和扩展，它对硬件要求相对较低，即使是低配置电脑用户也能流畅浏览Cult3D作品。利用Viewpoint公司开发的Viewpoint技术可创建照片级真实的3D图像，在窄带环境里也可发挥逼真的效果。但遗憾的是，这两种技术工具的使用都需要付出比较昂贵的注册费用，在我国的应用受到一定限制。

另外，OpenGL，Direct3D也常用来开发网上的虚拟现实***。但它们有一个共同缺点：编程较难掌握，致使很多网上虚拟现实开发爱好者望而却步。

【参考文献】

[1]《虚拟现实技术》(美)Grigore C.Burdea，(法)Philippe Coiffet著；魏迎梅，栾悉道等译北京：电子工业出版社.

[2]基于WebVR的变电站通信监控***设计与实现[J]，华北电力大学学报，2005，vol32，No.3，85～88.

[3]虚拟现实中基于图形与图像的混合建模技术[J]，中国图像图形学报，2001，6(1)：96～101.

[4]Web3D虚拟现实技术概况与分析比较[J]，科学之c友，2008，5(14)：130～131.

[5]基于Web的虚拟现实的开发与应用，计算机应用研究[J]，2003，(3)，92～95.

[6]三维图形引擎技术的研究.(硕士学位论文).北京：北方工业大学，2004

发明内容

本发明在综合运用虚拟现实(Virtual Reality)技术、互联网络发布技术、多维可视化技术等研究成果基础上，结合Flash软件中空间表达的方式，利用Flash脚本语言ActionScript 3.0实现了一种基于FlashVR的三维微型场景网络发布引擎。实验表明，该引擎实现了对3dSmax或者maya等三维建模工具导出的三维模型文件的实时渲染和互动操作，最终生成相应的.swf文件，并将.swf文件嵌入到浏览器中，无需用户下载额外插件即可实现三维模型的发布；同时，在对部分通用技术细节进行整理和封装的基础上，形成一个面向FlashVR应用的应用程序接口函数，使得FlashVR开发人员不必再关心底层技术的实现细节，大大减少开发人员的工作难度和工作量，缩短开发周期。

本发明的技术方案，设计思路如下：

1)根据Flash软件中对图形的表达方式，设计三维图形在Flash中的数学表达结构；

2)根据基础3D流水线、光照着色和纹理映射理论，确定三维场景视图生成的一般步骤：

3)在上三项理论基础上，基于ActionScript 3.0设计与实现引擎渲染模块。

本发明的有益效果在于：基于ActionScript 3.0编写一套三维图形类库，实现了Flash在3D领域的拓展，优化了3D在互联网上的发布方式，在Flash Player中播放，具有体积小，与用户交互能力强，效果逼真的特点，提高了网上漫游的速度和质量，并可以无需下载插件即可在网络上进行三维物体、三维场景的发布，为用户带来一种全新的体验。

附图说明

图1坐标系的表达

图2三维平移

图3三维变化流水线

图4聚光灯

图5利用单位向量u、v和n定义的右手观察坐标系

图6斜平行投影

图7图片相互部分遮挡关系示意图

图8纹理坐标

图9纹理映射

图10纹理映射到正方体

图11遮挡关系异常

图12上海普润房产别墅展示

图13四川灾区板房展示

具体实施方式

13D数学理论

1.13D坐标系

定义坐标系如图1，其中，x轴和y轴分别为横向和纵向，z轴以你看屏幕的方向为正方向。但是因为Flash CS3并不支持3D绘制，所以z轴并不存在，但是在3D空间里，离得人眼越远的物体，它的大小就越小，那么它在x和y轴上的移动就越缓慢，因此我们可以利用物体大小变化来模拟远近的效果。

3D空间以坐标系原点为中心，原点的坐标我们用Point(x，y，z)，(0，0，0)来表示。在Flash 2D中，原点存在舞台的左上角Point(x，y)，(0，0)，为了方便绘制物体，我们把3D空间的原点移动到舞台中心，即数学坐标中心。

1.2二维数：描述坐标平面上的点(x，y)。

1.3UV数：描述贴图在模型上的x，y位置，形同二维数，但根据贴图坐标命名为u，v。

1.4三维数：就是向量数，描述在三维空间里的相对位置(x，y，z)。

1.5三维矩阵：矩阵是若干数字、函数或数值表达式的长方形阵列，这些称为该矩阵的元素。单行或单列的矩阵表示一个向量，通常矩阵可以看作为行向量或列向量的集合。运用了4*4或4*3的矩阵，它与各种运算相关，是最重要的数学类。

这里主要讨论4x4矩阵，排列形式如下：

$M=\left[\begin{array}{cccc}{M}_{00}& M_{01}& M_{02}& M_{03}\\ M_{10}& M_{11}& M_{12}& M_{13}\\ M_{20}& M_{21}& M_{22}& M_{23}\\ M_{30}& M_{31}& M_{32}& M_{33}\end{array}\right]$

可得一个三维位置在齐次坐标中表示为四元向量。因此，不论何种几何变换操作，都是一个左乘坐标向量的4*4矩阵。和二维的一样，任意矩阵变换序列，通过依序合并每一个变换矩阵而得到的一个矩阵表示。变换序列中每一个后继从左边去和以前的变换矩阵合并。

1.5.1三维平移

如图2，在三维齐次坐标表示中，将任意点P＝(x，y，z)经平移距离t_x，t_y，t_z，到点P’＝(x’，y’，z’)，x’＝x+t_x，y’＝y+t_y，z’＝z+t_z。利用变换向量T＝(t_x，t_y，t_z)对某点进行平移变换.我们可以利用矩阵形式来表达三维平移操作，如下：

$\left[\begin{array}{c}{x}^{\′}\\ y^{\′}\\ z^{\′}\\ 1\end{array}\right]=\left[\begin{array}{cccc}1& 0& 0& t_x\\ 0& 1& 0& t_y\\ 0& 0& 1& t_z\\ 0& 0& 0& 1\end{array}\right]\×\left[\begin{array}{c}x\\ y\\ z\\ 1\end{array}\right]$

或P’＝T*P

1.5.2三维缩放：

缩放变换的矩阵为：

$\mathrm{Mx}=\left[\begin{array}{cccc}\mathrm{sx}& 0& 0& 0\\ 0& \mathrm{sy}& 0& 0\\ 0& 0& \mathrm{sz}& 0\\ 0& 0& 0& 1\end{array}\right]$

1.5.3绕X轴、y轴、z轴旋转的旋转矩阵分别为：

$\mathrm{Mx}=\left[\begin{array}{cccc}1& 0& 0& 0\\ 0& \cos \mathrm{\θ}& \sin \mathrm{\θ}& 0\\ 0& -\sin \mathrm{\θ}& \cos \mathrm{\θ}& 0\\ 0& 0& 0& 1\end{array}\right]$

$M_y=\left[\begin{array}{cccc}\cos \mathrm{\θ}& 0& -\sin \mathrm{\θ}& 0\\ 0& 1& 0& 0\\ \sin \mathrm{\θ}& 0& \cos \mathrm{\θ}& 0\\ 0& 0& 0& 1\end{array}\right]$

$M_y=\left[\begin{array}{cccc}\cos \mathrm{\θ}& \sin \mathrm{\θ}& 0& 0\\ -\sin \mathrm{\θ}& \cos \mathrm{\θ}& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]$ (θ为绕各个坐标轴旋转的角度)

对象的平移、缩放、旋转通过平移定义该对象的各个点然后在新的位置重建该对象而实现。对于由一组多边形表面表示的对象，可以将各个表面的顶点进行相应的平移，然后重新显示新位置的面。

1.6四元数

将四元数表示用于旋转变换是获得对于给定轴旋转的一种更有效的方法。它比4x4矩阵需要更少的存储空间，并且更容易写出变换序列的四元数过程。这对于需要复杂运动序列和给定对象两个位置的运动差值显得尤其重要。

描述四元数的一个方法就是把它看作是一个有序对，由一个标量部(scalar part)和一个向量部(vector part)组成：

q＝(s，v)

也可以把四元数看成为高阶复数，带有一个实部(标量部分)和三个虚部(向量的元素)。绕经过原点的任意轴旋转，可以通过建立有以下标量和向量部的四元数：

$S=\cos \frac{\mathrm{\θ}}{2},$ $V=U\sin \frac{\mathrm{\θ}}{2}$

其中，u是沿所选旋转轴的单位向量，θ是绕此轴的指定旋转角。任意点P绕该四元数旋转，可以用四元数符号表示为

P＝(0，p)

这里，点的坐标为向量部P＝(x，y，z)。然后点的旋转由四元数运算实现：

P′＝qPq^-1

其中q^-1＝(s，-v)是等式中所给出的标量和向量部组成的单位四元数q的逆变换。这一变换产生了下面的新四元数：

P’＝(0，p’)

该有序对的第二项是旋转的点位置P’，它由点积和叉积表示为

P′＝s²p+v(p·v)+2s(v×p)+v×(v×p)

参数s和v由等式给定其值。很多计算机图形***利用向量计算中的有效硬件实现来执行快速的三维对象旋转。

2基础3D图形流水线

三维场景视图的计算机生成步骤：首先，需要在场景中确定一个观察位置。根据要显示场景的前、后、侧、上或底来选择观察位置。也可以在一组对象的中间，甚至在一个对象如一个建筑物或一个分子的内部选择一个观察位置。然后，要确定照相机的方向。照相机朝着哪个方向及如何绕视线旋转照相机以确定照片的向上方向。最后，裁剪窗口确定如人观察范围的视景。图3给出了建立三维场景以及将场景变换到设备坐标的一般步骤。

在世界坐标系中建立好场景模型以后，将场景描述转换到选择的观察坐标系。观察坐标系定义了观察参数，包括投影平面(观察平面)的位置和方向，然后在投影平面上定义与照相机对应的二维裁剪窗口，并建立三维裁剪区域。该裁减区域称为观察体，其形状和大小依赖于裁减窗口的尺寸、投影方式和所选的观察方向的边界位置。投影操作将场景的观察坐标描述转换为投影平面的坐标位置。对象映射到规范化坐标系，所有在观察体外的部分被裁剪掉。裁剪操作可以在所有与设备无关的坐标变换(从世界坐标系到规范化坐标系)完成之后进行。这样，坐标变换可以合并以便最大限度地提高效率。

定义：3D图形在屏幕上的显示，实际上是一个将离散的模型和关卡放置到适当的空间位置、再从人眼所观察到的角度将它们投影到正确的平面位置、最后填充像素点的过程。因此，3D元素要经过一系列的变换过程，这个过程称为3D流水线，如图3所示。

3光照着色和纹理映射理论

为了让模型看起来更加真实，可以给场景配上一个或者多个光源。同时还可以选择是否使灯光影响几何体的外观，几何模型可以有与其每个顶点相关联的颜色。通常光照计算是在世界空间中进行的。如果对光源进行视点变换，在观察空间中会得到同样的光照效果。这是因为：即使将参与光照计算的所有实体都变换到同一个空间中，光源、相机以及模型之间的相对位置依然保持不变。

3.1颜色

计算机屏幕上的颜色是使用RGB或颜色索引来表示。RGB颜色模式很常用，在这种模式下，每个分量被表示为0～1或0～255的值，例如红色就表示为(255，0，0)。

3.1.1颜色加法

当两个数相加大于255时，就会存在溢出。所以我们将颜色C1和C2相加后，对每个分量进行截取：C_sum＝CI+C2＝(MAX(r1+r2，255)，MAX(g1+g2，255)，MAX(b1+b2，255))

其中MAX(x，y)返回x和y中较大的那个。这样就保证了分量的值不会超过255。

3.1.2颜色调制

颜色调制实际上就是颜色乘法，这种调制方式是调制颜色的亮度，也需要避免溢出。如：C_modulated＝s*c1二(s*r1，s*g1，s*b1)，其中S可以是0到无穷大的任何值。缩放因子为1.0时，颜色保持不变；缩放因子小于1.0时，颜色亮度降低到原来的5倍；缩放因子大于1.0时，颜色亮度将增加到原来的5倍。

3.1.3 AlPha混合

AlPha混合指的是将多个像素颜色相加，得到目标像素的颜色，混合时将指定每个源像素的百分比。Alpha混合用于模拟透明和其他效果，如：阴影。其工作原理：根据混合因子(通常被称为AlPha)将多个源像素混合起来，并将结果作为目标像素的颜色值。

3.2光照模型

优秀的光照引擎应该支持无穷多的各种类型的光源，而光照计算应针对每个像素，并考虑所有材质属性，但实际上并不是这样的。即使是最高级的3D加速器也只支持不多的几种光源，我们不能执行完美的像素光照计算，同时通常只支持无穷远光源和点光源。另外，所有的光照计算都只在三角形顶点上进行，然后使用插值来平滑表面的光照。下面介绍几种常见的光源类型。

3.2.1定向光源

定向光源是没有确切位置的光源，它离场景非常远(无穷远)，其光线平行地照射到表面上。定向光源还具有这样的特征：其光照强度不会随距离而衰减，因为光线已经传播了无穷远的距离。然而，定向光源仍然有强度和颜色。要定义定向光源，只需指定其初始颜色和强度。用CI_XXX二来表示光源颜色，用CO_XXX功来表示光源的初始强度，其中XXX表示光源类型。定向光源的强度为：I(d)_dir，＝IO_dir*CI_dir。

3.2.2点光源

点光源是使用3D空间中的一个点来模拟的，点光源实际上被模拟为现实生活中的点光源，如：电灯泡。因此光照强度随光源离表面的距离S的距离衰减，而衰减是使用三个因子来模拟的：常量衰减因子K_c、线形衰减因子K₁和二次衰减因子K_q。用d表示位于点P处的点光源和表面s上的点s之间的距离，则光照强度和距离之间的关系如下：

I(d)_point＝(IO_Point*C1_Point)/(K_c+K₁*d+K_q*d²)其中d＝|p-s|

3.2.3聚光灯

聚光灯的计算开销非常高。现实生活中的手电筒就被模拟为聚光灯。图4描述了标准的聚光灯模拟方式，其中聚光灯位于点P处，方向向量为1，光线照射到表面S上的点s：另外还有一个表示聚光灯照射范围的圆锥。这个锥体由两个区域组成：内部区域和外部区域，内部区域通常被称为本影，外部区域被称为半影。在本影内，光照强度是恒定的，但过渡到半影中后急剧衰减。对于模拟聚光灯的衰减使用如下算法：

情形1：如果光源方向与光源到点s的向量之间的夹角大于外圆锥(半影)的角度，则不对该点执行光照计算；

情形2：如果光源方向与光源到点S的向量之间的夹角小于内圆锥(本影)的角度，则使用100％的聚光灯强度，但根据距离对其进行衰减；

情形3：如果光源方向与光源到s的向量之间的夹角大于内圆锥(本影)的角度，但小于外圆锥(半影)的角度，则根据距离和减弱公式对强度进行衰减定义聚光灯，先指定位置p、方向向量1和两个角度a和沪，它们分别定义了内圆锥和外圆锥)。光源颜色C1_spotlight，和强度IO_spotlight

如果角度θ大于Φ/2，聚光灯根本就照射不到相应的点；如果θ小于Φ/2，相应的点位于照射范围内，但内圆锥中不考虑减弱，只在外圆锥中考虑减弱。还要指定一个控制聚光灯总体光照强度的指数因子用p_f表示。最后，由于聚光灯属于点光源，需要考虑光照强度随距离衰减的问题，因此需要指定衰减因子K_c、K₁和K_q。

这样计算聚光灯光照强度的公式如下：

情形1：θ大于Φ/2(位于半影外，根本照射不到)：I(d)_spotlight＝0

情形2：θ小于Φ/2(位于本影内，根本照射不到)：I(d)_point＝(IO_Point*C1_Point)/(K_c+K₁*d+K_q*d²)

情形3：θ小于Φ/2并且θ大于a/2(位于半影内)：

$I{\left(d\right)}_{\mathrm{spotlight}}=\frac{{\mathrm{IO}}_{\mathrm{spotlight}}*{\mathrm{Cl}}_{\mathrm{spotlight}}}{K_c+K_l*d+K_q*d^2}*\frac{{(\cos \mathrm{\θ}-\cos (\mathrm{\φ}/2))}^{\mathrm{pf}}}{(\cos (\mathrm{\α}/2)-\cos (\mathrm{\φ}/2))}$

从上面的分析过程可以看到，使用的模型非常复杂，如果是渲染离线3D环境，可以使用这么复杂的模型；但如果是实时地渲染3D模型，则没有必要使用这么复杂的模型。在实时渲染中，粗略地模拟聚光灯的模型也能够满足需要。即不将锥形划分成强度不减弱的本影和半影，而是将整个锥体内的减弱因子都设置为cosa，同时考虑指数因子。简化后的模型：

$I{\left(d\right)}_{\mathrm{spotlight}}=\frac{{\mathrm{IO}}_{\mathrm{spotlight}}*{\mathrm{Cl}}_{\mathrm{spotlight}}*\mathrm{MAX}{(\cos \mathrm{\θ},0)}^{\mathrm{pf}}}{K_c+K_l*d+K_q*d^2}$

3.3顶点象素着色

3.3.1固定着色

固定着色，是最简单的模型，不考虑任何光照效果，没有环境光、散射光等，只是使用某种颜色将多边形绘制为实心的。因此，固定着色根本不考虑光照模型，只是根据多边形颜色的索引或RGB值绘制它。

3.3.2恒定着色

恒定着色指的是根据多边形上某个像素的光照情况对整个多边形进行着色。也就是说，假设多边形是由一种材质构成的。我们只处理三角形，在每个多边形中，每个点的面法线都是相同的，因此对于每个多边形，只需对一个顶点执行光照计算，然后根据计算结果对整个多边形进行着色。这就是恒定着色，也叫面片着色。对于由平面组成的物体，这种方法是可行的，但对于由曲面组成的物体，使用多边形对其进行近似时，这种方法导致物体看起来是由多边形组成的。如果使用Gouraud或Phong等平滑着色方法，平面多边形看起来将是平滑的。因此我们应该根据不同属性的物体采取相应的着色方法。

3.3.3Gouraud着色

Gouraud着色可以让表面颜色平滑的变化，使其看起来是平滑的，对于小平面组成的物体结果会很糟糕，但对于球体，效果很好。Gouraud着色算法对于每个多边形都计算其所有顶点的颜色和强度。对于共享多个顶点的多边形，对其法线进行平均。然后执行光照计算，得到每个顶点的最终颜色。也就是说，不使用单种颜色来渲染多边形，而是根据每个顶点的颜色，使用插值来计算多边形内部各点的颜色。Gouraud存在的缺点是着色必须在光栅化每个多边形时进行，因此在屏幕空间中执行，存在透视变形。只是肉眼并不能分辨出这种变形。另一个问题，在光栅化期间需要执行插值算法，这种算法的开销很高。

4引擎渲染模块的设计与实现；

场景渲染是三维引擎中最重要的子模块之一，负责实现基本图元的绘制，光线处理和纹理处理等，实际上是三维真实感图形的再现过程。在许多应用领域都对场景的实时性有很高的要求，如果达不到一定的显示速率，就会丧失实际应用的价值。渲染模块需要完成整个多边形处理流程，包括多边形的位置计算与遮挡显示、物体剔除、隐藏面消除、光照和着色、纹理映射等，直到最后将每个像素的RGB信息送入显示缓存。它的效率直接决定引擎的效率和质量。

4.1基本3D数据结构

4.1.1点

根据前面的数学基础，创建一个顶点过程如下：

     function vertex3d(x，y，z，scale＝1):Object

{  var point3d＝new Object()；

  point3d.x＝x；

  point3d.y＝y；

  point3d.z＝z；

  point3d.scale_point＝scale；//scale_point代表这个点在投射到2D平面上后位置缩放的比率。

  return point3d；

}

4.1.2多边形

由于三角形最容易被渲染，所以本引擎仅支持三角形，最终所有的模型都用三角形来表示。根据顶点和多边形的组织方式，定义了一种基于顶点列表多边形结构，和另一个种包括物体的每个多边形的顶点信息的结构，在光栅化阶段可以将该其传递给光栅化器。

基于顶点列表多边形结构：

  var vertexes＝

{

       new Vector(-60，-60，0)，

       new Vector(60，-60，0)，

       new Vector(60，60，0)，

       new Vector(-60，60，0)

       }；

       with(polygon.graphics)

{

      clear()；

     lineStyle(.5，0x000000，0)；

    beginFill(0x6A83A6，1)；

    draw_face(pro[0]，pro[1]，pro[2])；//绘制第一个三角形

    endFill()；

    beginFill(0xBD5E53，1)；

    draw_face(pro[3]，pro[2]，pro[0])；//绘制第二个三角形

    endFill()；

}

4.1.3物体

3D引擎中，物体通常由一组多边形构成，我们采用让物体本身提供存储局部坐标、世界坐标和相机坐标的空间，同时在流水线中提供存储这些坐标的功能。物体数据结构如下：

  var colladaID:Dictionary；

var colladaIDToObject:Object；//物体ID

var filename:String；//物体名称

var useMaterialTargetName:Boolean＝false；

var DEFAULT_LINE_COLOR:uint＝0xffff00；

var DEFAULT_LINE_WIDTH:Number＝0；

var DEFAULT_TGA_ALTERNATIVE:String＝″png″；//物体属性

    var forceCoordSet:int＝0；

var COLLADA:XML；//物体类型

public var texturePath:String；//贴图路径

protected var_objectToNode:Object；

protected var_channelsByTarget:Dictionary；

protected var_geometries:Object；

protected var_queuedMaterials:Array；

protected var_textureSets:Object；

protected var_channels:Array；

protected var_skins:Dictionary；

protected var_numSkins:uint；

protected var_rootNode:DisplayObject3D；

protected var_currentFrame:int＝0；

protected var_currentTime:int；

protected var_totalFrames:int＝0；

protected var_startTime:Number；

protected var_endTime:Number；

protected var_isAnimated:Boolean＝false；

protected var_isPlaying:Boolean＝false；

protected var_autoPlay:Boolean；

protected var_rightHanded:Boolean；

protected var_controllers:Array；

protected var_playerType:String；

protected var_loop:Boolean＝false；

protected var_bindVertexInputs:Dictionary；

4.1.4相机

定义UVN相机数据结构如下：

public function Camera3D

{

 camera Type；

var fov:Number；

var near:Number；

var far:Number；

var camera Focus:Number；

var camara Z:Number；

var camara Zoom:Number；

var clip content:Boolean；

}

4.2构建世界坐标系场景

与全局坐标生成相关的信息包括初始静止的坐标和运动变换矩阵。两者分别从man.asf和man.amcm中导入。

无论是初始静止状态下的坐标，还是每一帧的运动变换数据，即都是局部的数据，须要转化成全局的数据。

4.3局部坐标与全局坐标的转变

从局部坐标到全局坐标的转换，必须局部坐标系下的变换矩阵乘以父节点在更上层节点上的变换矩直乘到根节点在全局坐标系下的变换矩阵。公式如下：

$P=M^n...M^2{M}^1{M}^0\left[\begin{array}{c}0\\ 0\\ 0\end{array}\right]$

在求整个层次模型中所有节点的全局坐标，如果已知父节点的全局坐标，需要将子节点的变换矩阵乘以父节点的全局坐标。

整个层次模型是一棵树，因此，我们可以使用广度优先遍历(BFS)的方法来求得每一关节的全局坐标。算法设计如下：从根节点(root)开始，先求出根节点的全局坐标。根节点是比较特殊的节点。它负责整个人物的旋转和平移，所以它是用他的局部坐标(0，0，0)先乘以其旋转矩阵再乘以其平移矩阵，以此来求得它的全局坐标。然后从根节点开始，遍历其所有子节点，利用父节点的全局坐标乘以子节点的平移矩阵再乘以其旋转矩阵，得到子节点的全局坐标。遍历完子节点后，再遍历下一层的子节点。以此类推，直到遍历到叶子节点位置。

4.4照相机的UVN坐标***

在图5中，由于观察平面法向量N定义了z触轴方向且观察向上向量v用来获得珠，轴方向，我们只要再确定尤“酬轴方向即可。计算v和N的叉积得到U方向并形成右手观察系。N和U的叉积可以生成与N和U都正交的调整后沿正向孺轴的v值。至此，我们得到右手观察系的一组单位轴向量。

$n=\frac{N}{\left|N\right|}=(n_x,n_y,n_z)$

$u=\frac{V\×n}{\left|V\right|}=(u_x,u_y,u_z)$

v＝V×n＝(u_x，v_y，u_z)

4.5世界坐标系向观察坐标系转换

假设观察坐标系原点在世界坐标系中的坐标P(x₀，y₀，z₀)，将其移动到世界坐标系的原点的变换是：

$T=\left[\begin{array}{cccc}1& 0& 0& -x_0\\ 0& 1& 0& -y_0\\ 0& 0& 1& -z_0\\ 0& 0& 0& 1\end{array}\right]$

将观察坐标系重合到世界坐标系得旋转变换矩阵使用2.4中求得的单位向量u、v和n来获得。该变换矩阵为：

$R=\left[\begin{array}{cccc}{u}_x& u_y& u_z& 0\\ v_x& v_y& v_z& 0\\ n_x& n_y& n_z& 0\\ 0& 0& 0& 1\end{array}\right]$

将两个矩阵相乘即获得坐标变换矩阵：

$M=R\·T=\left[\begin{array}{cccc}{u}_x& u_y& u_z& -u\·p_0\\ v_x& v_y& v_z& -v\·p_0\\ n_x& n_y& n_z& -n\·p_0\\ 0& 0& 0& 1\end{array}\right]$

变换矩阵M将世界坐标系下物体描述变换到观察坐标系。

4.6投影变换

在这里，我们使用的是平行投影。由于投影线的方向和观察平面法线向量之间的关系任意，我们使用斜平行投影的方法。

如图6所示，观察坐标系上的一点P(x，y，z)投影到位于观察z轴z_vp处的观察平面的(x，y，z_vp)。位置(x，y，z_vp)是相应的正投影点。从(x，y，z)到(x_p，y_p，z_vp)的斜平行投影线与投影平面上连接(x_p，y_p，z_vp)和(x，y，z_vp)的线之间的夹角为a(0°＜a＜90°)。观察平面上这条长度为L的线与投影平面水平方向的夹角为Φ(0°＜Φ＜360°)。

设P(x，y，z)的投影向量V_p＝(Vpx，Vpy，Vpz)，其中V_py/V_px＝tanφ。由三角形变换得出：

V_px/V_pz＝x_p-x/z_vp-z

V_py/V_pz＝y_p-y/z_vp-z

利用上式求得的斜投影向量参数，我们可以求得斜平行投影矩阵：

$M_{\mathrm{obligue}}=\left[\begin{array}{cccc}1& 0& -V_{\mathrm{px}}/V_{\mathrm{pz}}& z_{\mathrm{vp}}{V}_{\mathrm{px}}/V_{\mathrm{pz}}\\ 0& 1& -V_{\mathrm{py}}/V_{\mathrm{pz}}& z_{\mathrm{vp}}{V}_{\mathrm{py}}/V_{\mathrm{pz}}\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right]$

4.7观察坐标系向规范化设备坐标

首先求得三维人物的包围盒。遍历三维物体坐标，求出xw_min、xw_max、yw_min、yw_max、zw_min、zw_max。介于六者之间的平行六面体就是包围盒。

然后计算规范化变换矩阵：

$M_{\mathrm{obligue}}=\left[\begin{array}{cccc}\frac{2}{{\mathrm{xw}}_{\max }-{\mathrm{xw}}_{\min }}& 0& 0& \frac{{\mathrm{xw}}_{\max }+{\mathrm{xw}}_{\min }}{{\mathrm{xw}}_{\max }-{\mathrm{xw}}_{\min }}\\ 0& \frac{2}{{\mathrm{yw}}_{\max }-{\mathrm{yw}}_{\min }}& 0& \frac{{\mathrm{yw}}_{\max }+{\mathrm{yw}}_{\min }}{{\mathrm{yw}}_{\max }-{\mathrm{yw}}_{\min }}\\ 0& 0& \frac{-2}{{\mathrm{zw}}_{\max }-{\mathrm{zw}}_{\min }}& \frac{{\mathrm{zw}}_{\max }+{\mathrm{zw}}_{\min }}{{\mathrm{zw}}_{\max }-{\mathrm{zw}}_{\min }}\\ 0& 0& 0& 1\end{array}\right]$

4.8规范化设备坐标映射到设备坐标

规范设备坐标系下视口左下角的坐标为(-1，-1)，将其移动到(0，0)的变换矩阵为：

$T=\left[\begin{array}{ccc}1& 0& 1\\ 0& 1& 1\\ 0& 0& 1\end{array}\right]$

规范设备坐标系下视口的长、宽皆为2，将其放大到设备坐标系下视口大小的变换矩阵：

$S=\left[\begin{array}{ccc}W/2& 0& 0\\ 0& h/2& 0\\ 0& 0& 1\end{array}\right]$

其中，w表示设备坐标系下视口的宽度，h表示设备坐标系下视口的宽度。

由于在设备坐标系下，(0，0)点位于视口的左下角，Y轴朝上。而在Flash里面，(0，0)点位于视口的左上角，Y轴朝下。所以，我们必须进行变化：

x’＝x，y’＝h-y.

4.9遮挡关系处理

遮挡关系的处理根据参数z值来所处的深度。如果A处的Z值大于B处的Z值，则A挡住B。

如图7在复杂的遮挡关系群中，可能出现的环形部分遮挡关系。即A部分遮挡B，B部分遮挡C，C部分遮挡A的情况。为处理该情况，传统的做法是：进行图像切割，消除遮挡环。但是，我们开发使用的是Flash，图像的切割会大大降低***的性能，所以，我们不采用图像切割的方法。我们采用优先级判断的办法。

在计算出所有遮挡关系之后，我们加入了优先级的计算。每一个骨骼都有一个固定的被遮挡优先级的值。我们计算每一块的优先级的值。

如图7情况，设A的被遮挡优先级为5，B的为3，C的为1。由于A遮挡B，A的优先级为3，B遮挡C，B的优先级为1，C遮挡A，C的优先级为5。最终，优先级，我们认为C遮挡B遮挡A。

遮挡消隐效果的实现，我们使用的是Flash的内部机制。在Flash提供的图像容器中，深度索引值高的图像和深度索引值低的图像重叠时，深度索引值高的盖住深度索引值低的。基于此原理，我们为物体建立一个总的图像容器，每一个骨骼图像以它的Z值为深度索引值，这样就实现了遮挡效果。

4.10裁剪的处理

二维图像的裁剪，我们并没有用任何算法处理，而是直接利用Flash内部机制实现。在Flash中，每一个图像容器，它都有一个幕布(mask)属性，你可以指定幕布的大小，默认情况下，幕布是和容器一样大小。一旦你指定了幕布的大小，处于幕布内的图像会在重绘时渲染，而幕布范围外的图像则会自动被裁剪。

4.11纹理映射原理

纹理网可以理解为是物体的外表图案。在3D场景中，它极大的增加了物体的真实性。例如，我们可以在显示屏上画一系列组合的矩形来表示一堵墙，但这样的墙看起来光秃秃的，颜色也不真实。如果我们再在上面加上一些划痕，磨损，苔迹，还有标语，使它看起来更像一堵真实的墙，这就是纹理。物体的这些外表图案是存储在一些二维的图片中的，纹理即是指这些二维的图片，它一般采用bmp或JPg的图片格式。纹理上的每一个像素称为纹理像素。理论上任何尺寸的纹理都可以，但是为了提高效率，纹理最好是正方形的而且它的边长最好是2的n次幂的形式，例如16x16，32x32，64x64，128x128等是最有效率的尺寸。如果可以的话，纹理越小越好。通常用纹理坐标标识一张纹理图，纹理坐标的作用是在纹理上指定一个点，因为纹理是ZD的，所以我们仅需要两个值：U和V。U是横轴的值，而V是纵轴的值，u和v的取值一般归一化在0到1之间，左上角是(o，0)右下角是(1，1)，U和V的取值也可以是0到2的幂减1。下面的图8演示了一个纹理和它的几个点。

在场景中，把纹理应用到三维对象上，这个过程就叫做纹理映射。在此过程中，纹理坐标会被映射到顶点上，所以，顶点将额外增加两个值：U和V。

对于如图9所示的正方体，下面列出了每个顶点对应的纹理坐标(顶点序号＝(U，V))：

0＝(0，1)   1＝(0，0)   2＝(1，1)   3＝(1，0)   4＝(0，1)   5＝(0，0)

6＝(1，1)   7＝(1，0)   8＝(0，1)   9＝(0，0)   10＝(1，1)  11＝(1，0)

12＝(0，1)  13＝(0，0)  14＝(0，1)  15＝(0，0)  16＝(1，1)  17＝(1，0)

映射到正方体上的纹理效果如下图10所示：

由于纹理图和多边形的大小不一样，假如要将宽1个像素高8个像素映射到宽1个像素高为n的多边形上，其中n为任意形在纹理图上的采样比例，其计算公式为：采样比例二纹高度。

首先假设n为4，在这种情况下，根据采样比例的计算因此可以在纹理图的每两个像素中采集一个。也就是说，每移动1个像素，必须在纹理图中移动2个像素，因此，6位置上的像素并将它们分别映射到目标多边形的0，1，2，然后假设n为14，那么，采样比例为8/14＝0.57。制每个像素时，当前采样点与前一个点的距离为0.57个0到13，对应的采样点序列如下：

样本0：0.57  样本1：L14  样本2：L71

样本4：2.85  样本5：3.42 样本6：3.9

样本8：5.13  样本9：5.7  样本10：6.

样本12：7.41 样本13：7.98

对采样点进行截尾，结果为：(0，1，1，2，2，3，3，4，5，被采样两次。

整个算法过程用伪代码形式描述如下：

{

//设置扫描线起点的纹理坐标

//沿扫描线从左到右进行插值

for(从左到右的所有像素)

{

//读取纹理的颜色

//计算下一个像素的纹理坐标

}

}

4.12  Z缓存

Z排序的提出就是为了确定多边形的前后绘制顺序，其算法思想是，根据渲染列表中的每个多边形的Z值将多边形按照从前到后的顺序排列，然后按照这样的顺序绘制他们。如果多边形比较小而且不是凹的，这种算法效果将很好也很容易实现，但是在某些情况下，如图所示，将导致异常情况发生。因此我们使用像素级的Z排序算法，及z缓存。其算法思想和Z排序的区别在于Z排序时对每个多边形的Z值进行排序，而z缓存是针对屏幕上的每个像素点进行z排序，这样并不存在任何顺序不正确的情形。

对于大小为M×N的屏幕，创建一个z缓存zbuffer[x，y]，其中包含每个多边形中每个像素被光栅化或扫描转换后的z值。z缓存的大小为M×N，被初始化为最大可能z值(实际上是无穷大)。下面描述z缓存算法过程如下：

for(渲染列表中的每个多边形)

1.对其进行光栅化，生成x_i、y_i、z_i

for(每组x_i、y_i、z_i)

2.if(z_i＜zbuffer[x_i，y_i])

{

//将z_i写入到z缓存中，即zbuffer[x_i，y_i]＝z_i，

//然后将该像素显示到屏幕上：Plot(x_i，y_i)

}

对于多边形各个点上的z值的计算我们将采用z坐标插值的方法来实现。具体插值算法和前一节介绍的Gouraud着色插值算法是相同的。为了创建z缓存***，建立z缓存的数据结构如下：

UCHAR*zbuffer；//指向存储空间的指针

int width；//宽度

int height；//高度

int size；//大小

对z缓存的操作包括创建、清空和填充、删除等。每种操作都提供一个函数加以实现，其原形如下：

int Creat Zbuffer(ZBUFFER_PTR zb，int width，int height)；//创建

void Clear_Zbuffer(ZBUFFER_PTR zb，UINTdata)；//清空和填充

int Delete_Zbuffer(ZBUFFER_PTR zb)；//删除

在进行z-buffer测试时，建立了若干个互相交错的三角形面的几何模型，为了展示z-buffer的工作情况，分别对每个三角形面采用不同的颜色对其进行着色，然后将所有的三角形全部绘制到屏幕上，此前先记录下每个三角形空间中的位置，通过绘制可以观察出是否是相对z值最小的三角形面被绘制在前面了。渲染效果图12，13。

Claims (2)

1.一种基于FlashVR的三维微型场景网络发布引擎，包括以下设计思路：

(1)根据Flash软件中对图形的表达方式，设计三维图形在Flash中的数学表达结构；

(2)根据基础3D流水线、光照着色和纹理映射理论，确定三维场景视图生成的一般步骤；

(3)基于ActionScript 3.0设计与实现引擎渲染模块。

2.根据权利要求1所述的一种基于FlashVR的三维微型场景网络发布引擎，其特征在于，所述步骤(2)中，在渲染过程中采用z-buffer技术，针对屏幕上的每个像素点进行z排序，进行去除隐藏面处理，防止渲染过程中面显示顺序异常情况的发生；所述步骤(3)中，利用Flash脚本语言ActionScript 3.0实现一种免插件的三维微型场景网络发布引擎。

Images