基于Web的3D图形动画技术 及其在教学中的应用

基于Web的3D图形动画技术 及其在教学中的应用3D Graphics-Animation Techology Based on Web and Its Applications on Instruction李嘉宁 王咸伟华南师范大学教育信息技术学院 510631Tel: 13922282693，13660052315 Fax：020-85212248E-mail：wangxw garning随着多媒体技术、网络技术、3D技术和仿真技术的发展，Web课件不再仅仅是图片和文字的整合，而是类似于实物的三维场景的合理运用。这些设想在很大程度上已经实现了，这要归功于因特网上虚拟现实技术(VR)的应用。本文着重介绍了Web3技术及其教学应用和全景VR的制作过程及其关键技术。关键词：Web 3D 全景摄影 教学1 引言从教育发展史看，任何一种新技术、新媒体的出现，都会引起教育上的革命。随着计算机技术的发展，计算机辅助教育(CBE)成了当今教育技术学研究的热点。如何合理使用各种媒体以达到最佳的学习效果，如何优化人机交互界面以利于学习者的学习活动等都是CBE工作者极为关注的问题。现在，Web 3D的出现，为计算机辅助教育提供了更为广阔的前景。1.1 Web 3D技术的应用与教学Web 3D技术对Web教学所带来的影响主要表现在它对软件的知识表达、界面与交互性这几方面。三维图形动画相对于原先的基于一定图标与对象进行隐喻的二维图形界面而言，Web 3D的三维图形界面和听觉特性，以及对学习对象操作的三维交互特性都能够比较容易地令使用者产生身临其境的感觉。虽然现时大多数的网页虽然也揉合了文字、图形、声音等手段，但给人的感觉还是有明显的二维平面成分，在一些特定的学科中，适当地引入三维技术可以帮助学习者理解和掌握知识要点，解决教学中的重点和难点。在虚拟的世界里，可以有各种不同的可调节参数供学习者调教。这一特征为交互式的学习提供了坚实的基础。从建构主义学习理论的观点来看，这种从做中学的学习方式（1earning by doing），将学习者置于主动学习的中心地位，将更有助于学习者知识的构建。Web 3D典型的教育应用包括： （1）建筑工程学：交互性的参观还未完工的办公大楼，找寻装饰的构思；或参观房屋模型，学习建筑原理；参观世界各地经典建筑，寻找建筑设计的灵感。（2）考古学：参观世界上你不可能到达的博物馆，研究从未对公众开放过的私人收藏的绘画或雕塑。（3）医学教育：学生可以通过解剖一具虚拟的尸体来学习解剖学，也可以观看血细胞通过心脏的全过程。医生用从实际病人身上收集来的数据进行仿真，对手术或其他过程进行周密的计划，例如：观看胃镜的过程，了解病变组织的特征。（4）导游培训：让学生参观世界各地虚拟的风景名胜，并学习这些名胜的历史、特点、文化内涵等等，如图1所示。（5）生物教育：操纵分子模型，观察不同药物的立体结构图像；或沿着丛林小溪来研究海狸的习性。（6）历史教育：进入别的世纪，如参观商代的集市，或参加唐代的盛典。（7）化学和物理教育：昂贵实验仪器的介绍与展示，参观你不可能进入的实验空间，如核反应堆，粒子对撞空间等等，如图2所示。（8）社会科学：参观世界各地的社会风情，了解各地生活形态与习性。 图1 虚拟导游 图2 金刚石的原子结构1.2 Web 3D对教学系统带来的影响Web 3D作为一种Web技术，对教学系统在时间与空间上进行了扩展。它克服了时空的障碍，也可以对事物的发展过程进行控制。传统的学校教学模式的教学系统在时空上是同步的，教师与学生在同时、同地完成教学活动。后来，随着广播电视技术的发展，出现了空中学校、电视大学等远程教学形式。但这类远程教学，还只是从形式上对教学系统进行模拟，因为其教学传播形式基本上还是一种单向的传输，师生间的交互非常的微弱，没能体现教学的本质，即交互性。从90年代开始，出现了虚拟教室、虚拟学校、虚拟教育系统等。尤其是基于WWW的虚拟学校，其学习过程的实现相当灵活，学生在学习过程中有较高的地位，可以说是一种真正以学生为中心的虚拟学习环境。2 典型的Web 3D技术简介实现Web 3D主要有两种方法，一种是用编程的方法进行建模，然后再进行渲染来实现的；另一种是基于摄影技术的三维全景摄影。两种技术各有所长，代表Web 3D两种不同的发展方向。包括VRML语言、Java3DAPI、Apple QuckTimeVR技术和Ulead Cool360等三维技术。2.1 VRML语言VRML是虚拟现实建模语言（Virtual Reality Modeling Language）的简称，是一种基于文本的通用语言，是HTML的3D(三维)模拟。它定义了3D应用中大多数常见概念，如光源、视点、动画、雾化、材质属性、纹理映射等。VRML语言的诞生，尤其是新的VRML2.0标准，被称为第二代Web语言。VRML以其文件体积小、实时着色、全方位的观看效果等优势而逐渐成为新一代的网络三维技术，在建筑、天文、机械制图等应用得如火如荼。2.2 Java 3D APIJava 3D是Java语言在三维图形领域的扩展，是一组应用编程接口（API）。利用Java 3D提供的API，可以编写出基于网页的三维动画、各种计算机辅助教学软件和三维游戏等等。利用Java 3D编写的程序，只需要编程人员调用这些API进行编程，而客户端只需要使用标准的Java虚拟机就可以浏览，因此具有不需要安装插件的优点。2.3 Apple QuickTime VR技术Apple QuickTime VR技术是Apple公司媒体播放软件QuickTime的一个技术扩展，从QuickTime 4.0播放器开始支持VR影片。利用 QuickTime 中的 Web 浏览器插件（Plug-in）技术，可以跨平台地浏览放在Web 页面上的QuickTime VR影片，同时它也允许 Java 应用小程序与 QuickTime 的所有API链接。利用QuickTime VR技术可以实现三维全景浏览和三维实物浏览。2.4 Ulead Cool360、LivePicture等三维全景技术Ulead Cool360、LivePicture等3维全景摄影是把相机环360 度拍摄的一组照片拼接成一个全景图像，用一个播放软件在因特网上显示。使用者只需要用鼠标控制环视的方向，就可以感到就在环境当中。现在的发展是动态全景视频，使用者甚至可以在指定的网站上看到进行中的带音响效果全景足球比赛，当然，这需要相当长的下载时间。3 三维全景摄影技术3.1 三维全景摄影的概念三维全景摄影是用普通相机环360度拍摄出一组照片，然后拼接成一个全景图像，再用一个专用的播放软件在因特网上显示。它能用鼠标控制环视的方向，使人感到就在环境当中浏览所拍摄的大好风光。现在利用三维全景摄影主要开发出成360度全景浏览（VRP）和“互动虚拟物体（VRO）”的技术。3.2 三维全景摄影的技术特点网络虚拟游览为人们提供了方便的远程多媒体信息，使得浏览者可以足不出户，就如同身临其境一样，感受到现场的环境。利用三维全景摄影技术将全景照片动态的显示在网页上，您只需要用鼠标就可以在各个场景之间环视、旋转、切换、放大和缩小，如同身处真实环境中。加上现在国家宽带网建设速度的加快，有宽广的市场前景。归纳起来，三维全景摄影的优点主要有：（1）采用实地拍摄，有照片级的真实感。 （2）具有一定的交互性，能用鼠标控制环视的方向，例如：可以看天、看地、看左、看右、看近和看远，还可以进行跳转。（3）一部分的三维全景摄影作品不需要单独下载插件，只需要一个小小的Java Applet程序，自动下载后就可以在网上观看全景照片。一般总共下载的文件才100150KB，用56K MODEM下载时间仅需1分种左右，即可以欣赏全景图片了。3.3 三维全景摄影的发展近年来全景摄影从简单的柱形全景，发展到球形全景，对象全景。球形全景视角是水平360度，垂直180度，即全视角。可以说您已经融入了虚拟环境之中了。现在的发展是动态全景视频，您可以在我指定的网站上看到进行中的带音响效果全景足球比赛，当然，这需要下载时间。 4 三维全景摄影在教学的应用（1）建筑工程学：参观还未完工的房子，找寻装饰的构思；或参观房屋模型，学习建筑原理；参观世界各地经典建筑，寻找建筑设计的灵感。 （2）考古学：参观世界上你不可能到达的博物馆，研究从未对公众开放过的私人收藏的绘画或雕塑。 （3）医学教育：学生可以通过解剖一具虚拟的尸体来学习解剖学，也可以观看血细胞通过心脏的全过程。医生用从实际病人身上收集来的数据进行仿真，对手术或其他过程进行周密的计划，例如：观看胃镜的过程，了解病变组织的特征。（4）导游培训：让学生参观世界各地虚拟的风景名胜，并学习这些名胜的历史、特点、文化内涵等等。 （5）历史教育：进入别的世纪，如参观商代的集市，或参加唐代的盛典。 （6）社会科学：参观世界各地的社会风情，了解各地生活形态与习性。5 三维全景作品的制作工具简介三维全景已有一定的发展历史，各个公司都推出了自己制作的工具，大体可以分成三类：MAC OS平台的Apple QuickTime、需要外加浏览器插件播放和无插件播放。它们都有各自的特点和优点：（1）Apple QuickTime VR Authoring StudioApple QuickTime VR Authoring Stuion是Apple公司媒体播放软件QuickTime VR的专用编辑软件，目前更新到v1.0.1版本，为MAC OS系统专用，暂时无提供PC版，但是它在MAC OS制作出来的VR影片可以被PC版的QuickTime 4.0播放器支持。（2）需要外加浏览器插件播放类的编辑软件这类编辑软件在编辑完成发布时，需要浏览者安装相应的浏览器插件（Plug-in）才能看到编辑的全景VR，一般功能都比较齐全。代表的编辑软件有Ulead公司出品的Cool 360和Live Picture等，其中Live Picture更可以实现720度的球形全景VR，适合层次要求高的用户使用。（3）无需外加浏览器播放插件的编辑软件这类编辑软件在编辑过程中和前一类的软件差不多，不同在于完成发布时，它利用使用者的Java虚拟机，把全景VR的播放、控制用Java Applet程序编写出来，这样使用者用起来就觉得是不用安装插件了。代表的软件是IBM公司出品的Hotmedia软件。这个软件是IBM公司WebSphere的其中一个组件，是配合WebSphere HomePage Design使用的，它突出的特点是使用Java Applet程序来代替浏览器的插件，具有跨平台、体积小的特点，并且它还可以导入Ipix、简单的vrml文件，并且把它们转化为使用用Java Applet程序进行播放和控制、实现了“无插件”的转换。但是目前该功能还不够完善，可以提供控制的编程接口较少。6 全景摄影作品的制作流程三维全景摄影作品的制作一般分成以下几个步骤：（1）确定制作的主题和地点，准备好拍摄的工具。（2）二维平面图的拍摄和文字介绍信息的收集。（3）三维全景图片的制作以及播放程序设计。（4）预览和发布作品。7 制作三维全景摄影的关键技术图3 拍摄示意图在制作全景VR的过程中，要注意以下的关键技术：（1）要用一台质量较好的数码相机，这一点非常重要。如果原始的素材质量十分差，那么在后期的照片编辑环节就要费很大的力气了修改，而且效果还不一定令人满意。建议使用CCD感光的数码相机，低档的CMOS感光相机就不要用了。（2）用普通相机（相对于全景相机而言）拍摄全景照片组时，至少需要10张或者更多的短片段、可以组拼成环绕的照片组，这就需要有一些拍摄的技巧，这里提供了两种拍摄的技巧： 拍摄12张照片的方法比较简单，你把这12张照片想象为一个时钟，在每一个钟点的位置拍一张，组合起来就是12张了，也就是说，相邻的两张照片相隔30度角，如图3所示。这种方法比较简单，只需要把三脚架固定好，然后按照30度角旋转拍摄就可以了。 在拍摄全景照片组时，有一点是十分重要的，就是相邻的照片必须有部分内容是交迭的。这点很重要，因为在使用Adobe Photoshop处理全景照片组的过程中，需要用这部分作为组合的依据。交迭部分一般至少需要占单张照片的15%，并且较大的建筑物尽量避免分割在两张照片中。在拍摄过程过程中，你可以用一些标志性较强的目标作为拍摄下一张照片的分界点，如图4所示。图4 相邻照片间要有相同部分按照以上的两点技巧，你应该尽可能拍多一点照片，因为“胶卷”在数码相机里应该可以说是免费的吧，放心的拍吧，拍多一点照片在后期编辑中可以有多一点选择嘛。在拍摄的过程中，三脚架对拍摄是有一定帮助的，当然了，如果你能保证地平线在各张照片中都保持得好的话，不用它也是可以的。（3）照片拍好、输入到计算机以后要进行处理，处理主要包括对照片组的亮度、对比度、色彩饱和度、色阶、色差、大小、透视等个方面的调整。在这里推荐使用Adobe公司出品的图像处理软件Photoshop，因为它的功能齐全，可以完成这些调整。（4）要注意区分大小写由于Java对大小写敏感，因此在写HTML代码时要注意大小写，不然可能会出现找不到文件的错误。8 “华南师范大学正门”VR制作实例下面以用IBM Hotmedia制作的“华南师范大学正门”全景VR为例，展示一幅全景VR创作的全过程。首先，确定拍摄的主题华南师范大学正门，拍摄的地点是在华师正门的一侧，拍摄的日期定在某天傍晚，因为傍晚的太阳光线较柔和，以减少对摄影主体的干扰。接着，就在华南师范大学正门口附近找一个符合摄影要求的地点。在这里我选在正门的左前方，因为这里来往的车和人较少，可以减低人为的干扰因素。找到拍摄点后，就按技术要领，摆好三脚架，调好初始水平的角度，并且记录初始照片的位置，然后按每一张大约沿逆时针方向转动36度左右，拍下一系列的照片，要注意在拍摄的过程中照片间一定要有重复景物，不然后期处理会相当麻烦甚至造成失真。如图5所示。 图5 “华南师范大学”全景照片原始图样拍摄好照片后，就要把数码相机和计算机对接，把拍摄的照片传送到电脑；如果是使用传统相机拍摄的要把照片冲洗后再用扫描仪输入到计算机中，可以得到以下10张照片：由于作者的摄影器材所限，拍摄出来的照片明显不理想，照片间的亮度、对比度、色差等方面都不一致，要先用Adobe Photoshop对亮度、对比度和色差进行调整，使到照片间的亮度等基本一致。调整以后如图6所示：图6 经过调整后的“华南师范大学”全景照片图样由于IBM Hotmedia要导入一幅完整的全景图片来输出的，所以在基本解决了图片的亮度、色差等问题后，要继续用Adobe Photoshop对照片组进行几何视角的调整（主要使用Adobe Photoshop中的Transform命令下的Scale、Rotate、Skew、Distort和Perspective五个子命令），使它们能组合成一个整体。如图7所示。图7 组合得到的全景照片然后，打开IBM hotmedia，在左边的工作区中选中“Panorama”（全景照片）选项，再点击右边的“Add”标签，加入刚才做好的全景图像。插入全景照片后，点击“Options”选项，对全景VR的各种参数进行调整。当选好各种参数后，点击“OK”，再选择“File”菜单下的“Publish”选项发布制作好的全景VR，至此一个全景VR就做好了。9 Web 3D发展方向及应用前景Web 3D的发展日新月异，版本和功能不断推陈出新，但可能的发展趋势总结如下：（1）基于客户/服务器的开发与应用目前，虚拟学校、虚拟商店，虚拟银行，虚拟医院等网上客户系统已成为非常热门的研究领域，此时，人们不再是独自漫步于VRML的虚拟世界，而是每个人进入其中，甚至可以看到对方而相互打招呼。（2）Web 3D与流式技术更紧密的结合通过与流式技术的结合，可以在下载Web 3D的同时，显示部分内容，做到边下载边播放。Apple公司的QuickTime VR正在做这方面的尝试。（3）动画设计更加完善控制3D对象的动作，使之能受控制地活动起来，增强控制部分的功能，使它与其他程序的接口更加完善。至于Web 3D技术的发展与教学应用，笔者认为其前景不可限量。当前Web 3D技术已日趋成熟。现时Web 3D正朝着两个方向（基于编程和基于摄影）发展，并且两种技术各有特点，各有所长，其与Web的接口也渐渐完善，适宜用于教学应用开发。Web 3D有利于教学。在某些学科（例如：物理、化学的微观结构，建筑结构等）适当地引入Web 3D技术可以帮助学习者理解和掌握知识要点，解决重点和难点。Web课件应该加入Web 3D图形动画技术。既然Web 3D有这样大的教学优势，在开发Web课件的过程中，应该适当地加入Web 3D图形动画，以便使学习者更好地理解重点和难点，建立从做中学的学习方式（1earning by doing），将学习者置于主动学习的中心地位，将更有助于学习者知识的构建。目前，英、美、日等国政府及大公司不惜投入巨额资金进行该领域的研究与开发工作，我国在这方面的工作也已经起步，相信在不久的将来，Web 3D必将得到更好的完善和广泛的应用。参考文献1 王咸伟，李克东. 基于Web的远程网络教学系统开发的关键技术.上海师范大学学报（自然科学版）.2000.11.2 葛晓程等编. 妙用JAVA及VRML开发三维图形. 电子工业出版社，1999.3 张杰编. JAVA 3D交互式三维图形编程. 人民邮电出版社，1999.4 张文渊，苏键锋编. 因特网上的VRML. 电子工业出版社，2000.5 柯温钊编著. JAVA例解教程. 中国铁道出版社，2001.6 KrisJamsa,Ph.D.,Phi Schmaude，Nelson Yee:VRML.PROGRAMMERS LIBRARY.PUBLISHING HOUSE OF ELECTROUNICS INDUSTRY相关网站：1 Apple公司的QuickTime VR.2 Ulead公司的Cool 360软件主页.3 IBM公司的Hotmedia软件主页.4 四方环视全景摄影.With the developing of multimedia technology, web technology, three dimensions technology and simulation technology, the Web-courseware should be no longer the conformity of picture and text, it should be something like the applications of three-dimension scenes in reason. The assumption has come true in degree. It owns to the application of the Virtual Reality (VR) technology on web. The main content of this paper is to introduce the technology of Web 3D and the process of making Panoramas and its key technology.Key words：Web3D Panoramas Teaching