王昊天 冯泽岩徐方辉

（菏泽学院 计算机与信息工程系 WOW FX小组）

 

    摘要：《阿凡达》的上映带动了立体电影与电视的迅速发展，本文通过对当前立体电影技术和立体成像原理进行分析，并结合网页游戏的现状与限制，列举出几种在网页中可行的立体画面渲染方案，并对其使用环境，优劣性进行比较。以Flash平台为代表，举例说明立体渲染技术在网页游戏中的具体技术、实现方式与优化。

    关键词：立体；3D；网页游戏；Flash。

 

The technology and realization of Stereoscopic in web game

Wang hao-tian, Feng ze-yan, Xu fang-hui

Abstract: The movie Avatar's release led to the rapid stereoscopic film and television development,based on the current stereoscopic film technology and principle of stereoscopic imaging, combined with the status and limitations of web games , this paper lists several types of web page stereoscopic rendered solution in the program viable, compared its use environment and advantages.Use the Flash Platform as the representative examples, to describe the rendering technology , implementation and optimization in web game design .

Key words: stereoscopic ,3D , web game, flash

 

1 引言

随着立体电影《阿凡达》的上映，“立体”技术在各大媒体与网络中炒的沸沸扬扬，从此家喻户晓。在这部电影的带动下，我们的电影电视发展到了一个全新的阶段--立体阶段。各大厂商也迅速出品了相应的立体电视机（索尼，松下等），立体游戏（Nvidia的3Dvision），以及立体手机，笔记本等。

当前电脑游戏大多可以通过其他软件与设备自动转换为立体模式，但是立体模式却迟迟未出现在网页游戏中。分析其原因，有以下几点：

1. 网页3D技术本身不成熟，因此建立在3D技术之上的立体技术也自然而然的无法顺利发展。

2. 网页游戏大都采用Flash或Sliverlight为开发平台，这两种技术的实际运行效率都比较低，进行3D渲染和立体画面的混合生成会消耗大量CPU资源，影响程序运行效率。

3. 3D设备类型多样，针对不同的设备，需要编写不同的代码，代码量较大。

因此，网页游戏的立体效果迟迟未能出现。本文对网页游戏的3D立体效果提供了一种无论从成本，技术还是平台支持性等方面都比较好的解决方案，从而可以方便的将立体世界带到网页游戏上，丰富互联网的游戏方式。

2 设计与实现

2.1 立体成像原理

立体技术，即模拟了人眼观看物体时，左右眼观看到的景物稍有角度差别，通过大脑合成后，可以感受出场景中物体的远近距离等，如图2.1.1所示。红绿眼镜利用互补色原理，红色镜片中只能看到画面中的红色区域，蓝色镜片只能看到画面中的蓝和绿色区域，左右眼观看的图像不一样，即可模拟出双眼观看现实世界中物体的效果，如图2.1.2所示。

2.2 立体实现原理

从立体的实现原理上来讲，立体技术分为3种：有利用互补色原理的（红蓝，红绿，黄棕）立体技术；利用偏振原理的偏振光立体技术；还有利用视觉暂留的快门式立体技术。第一种效果较差，色彩失真严重，但是成本非常低，用于早期的电影院和普通的PC，印刷品等；第二种只能在电影院中使用特殊的偏振投影设备和偏振眼镜实现，画面稍暗，但色彩损失不大，成本较高；第三种适用于现在流行的立体电视机和高端PC游戏用户，设备成本也较高。

从技术和资金上综合分析，大多数用户能够接受的立体技术是第一种，即使用价格便宜（从几元钱一副）的红蓝立体眼镜，在普通的显示设备上即可使用。

2.3 3D场景的优化

在使用立体技术之前，我们需要有一个3D场景。首先是3D建模，只有先实现3D，才可以在3D的基础上方便的使用立体技术。当前Flash3D已有了较好的解决方案，流行的Flash3D引擎为Alternativa3D，Away3D和Papervision3D。而且网上的使用教程较多，在此就不再过多的讨论3D引擎的使用方法。在3D场景搭建好以后，我们就可以使用立体技术使其画面变得更加震撼，更有层次感。但在此之前，我们需要对场景进行优化，以便执行效率有更大的提升空间。

优化的方式有以下几种：

1. 模型的优化。尽可能减少3D模型中顶点和面的数量，3D引擎会对3D场景中的每个顶点和面执行一遍相应的坐标转换，图像绘制等操作，因此，在保证模型不失真的情况下，尽可能的少用顶点和面，会提高很大一部分的执行效率。

2. 贴图的优化，Flash3D引擎中无论使用视频或者MovieClip作为贴图，其最终都会转换为位图。位图的尺寸越大，会消耗越多的资源，因此，也需要在保证图像质量的前提下，使用较小的图像尺寸。尽可能少用MovieTexture之类的动画贴图，这种贴图会在每帧执行一次将当前的图像转换为位图的操作，这样会消耗很多的资源。

3. 缩减场景。有时当摄像机位于3D场景中的某个位置时，并不是所有的物体都呈现在了视野之内。例如一个场景中有A B两个房间，当摄像机位于A房间中，B房间里的大多数物体是不可见的。但是Flash却无法判断这一点，因此也会将B房间的物体渲染一次，这就造成了不必要的资源浪费。针对于这一点，可以采用判断摄像机位置等方式，动态的移除/添加场景中的物体，对程序进行优化。也可使用广告牌技术，对较远的物体使用平面贴图，节省程序的计算量。

4. 对静态场景进行优化。在3D渲染中，默认都是每帧执行一次渲染，然而在场景变，没有物体运动，摄像机位置角度都不变的情况下，美渲染出的画面是完全一样的。因此，可以判断有没有物体在场景中发生改变，来确定是否需要继续渲染下一帧。从而提升程序运行速度。

在3D场景优化之后，就可以实现立体显示了。下面具体介绍一下红绿立体的具体实现方式。

2.4 立体技术的实现方式

2.4.1 立体技术的具体实现

在3D渲染中实现立体的方式为，通过移动摄像机渲染两幅图像的方式分别代表左眼和右眼看到的图案，然后提取出左眼图像的红色通道和右眼图像的绿蓝通道，将其混合在一起，输出到显示器中即可。

在Flash中的实现代码如下：

首先通过改变摄像机的坐标使其向左平移一小段距离（大致以两摄像机到目标物体的夹角在12度最佳，具体的数值需根据最终显示效果进行微调），并执行渲染，然后，新建BitmapData类的实例_leftGraphicsBuffer,使用draw（）方法将视口中的场景绘制到_leftGraphicsBuffer中，作为左眼看到的画面。

然后将摄像机向右平移一段距离，再次渲染，并将图像存入BitmapData类的新实例_rightGraphicsBuffer中，作为右眼看到的画面。

最后，将左画面的红色通道与有画面的蓝绿通道混合在一起，放入Bitmap类的实例_stereoscopicGraphicsBitmap的bitmapData属性中。将_stereoscopicGraphicsBitmap呈现在舞台上即可。代码如下：

ctLeft = new ColorTransform  (1, 0, 0);//左眼的红色通道

ctRight = new ColorTransform  (0, 1-0.125, 1-0.125);//右眼经过数值调整的蓝绿通道

_stereoscopicGraphicsBitmap.bitmapData.draw(_leftGraphicsBuffer,null,ctLeft,BlendMode.ADD,_stereoscopicGraphicsBitmap.bitmapData.rect);//将左眼位图混合到stereoscopicGraphicsBitmap空白位图中                    _stereoscopicGraphicsBitmap.bitmapData.draw(_rightGraphicsBuffer,null,ctRight,BlendMode.ADD,_stereoscopicGraphicsBitmap.bitmapData.rect);//将右眼位图混合到stereoscopicGraphicsBitmap位图中，最终立体图像混合完成。

但是当场景中物体较多时，会发现Flash或者SilverLight的运行效率很低，因此需要进行相应的优化。

2.4.2 立体混合中的优化方案

在对立体画面进行优化的过程中，除了优化3D场景，在立体混合的步骤中，有3中可用的方案：

1. 每帧分别渲染左右眼画面，将3D场景渲染到低分辨率的位图上，进行混合好。最后将图片放大到原始场景的大小，输出到显示器上。采用此种方法会使程序的运行效率有一定的提升，但是损失的是画质，画面锯齿会比较严重。适用于对画质要求不大的情况下使用。

2. 每帧之渲染一次，交替渲染左右眼图像，并放入缓存。每帧将当前渲染的位图与上一帧存入缓存的位图相混合。此种方法对程序的运行效率的提升最大，但是处理场景中有运动物体的时候会由于两幅图中物体的实际位置的不同而产生从影，只适合静态或者位移不明显的场景。

3. 在Flash中将舞台的质量调为中或者低（stage.qulity="medium"或者"low"）,然后每帧渲染两次，场景渲染到位图时，将位图的自动平滑属性smooth设为false。这样混合时会使程序的执行效率有较小的损失，而且画质还有较好的保证。

综上所述，适应性最强，并且画面效果较好的方法是第3种。

3 结论

         本文从3D场景的优化到立体画面的生成过程中，描述了网页游戏中的立体技术原理以及具体的实现方式。并以Flash为例，详细说明了立体实现核心内容。易于理解，便于移植，为网页游戏以及网页动画的立体技术提供了较好的解决方案，使立体进入网页更加的方便快捷。讲解了多种针对于3D场景和立体处理的优化方法用于提高程序的执行效率，对程序的运行速度有了较大的改善，在大部分场景有着良好的效果与效率。在少数复杂场景中，效率仍比较低下，需进一步优化完善。

此技术成功的运用在了网页游戏《怪兽星球》中，成为了第一款立体网页游戏，获得了较好的效果。

4 参考文献

[1] 孙颖 著 <<ActionScript3>> 殿堂之路 电子工业出版社

[2] 邱彦林 著 <<Flex第一步>> 清华大学出版社

[3] Joey Lott[美] Danny Patterson[美]徐明亮 谷小娜译<<ActionScript3设计模式>> 清华大学出版社

[4] Keith Peters[美] 著 苏金国