几种Web3D技术的比较

1、几种Web3D技术的比较2012年3月29日    评论：0    分享：    来源：第三维度    作者：蒋燕萍  夏旺盛  黄心渊    摘 要 介绍了Web技术和3D技术相结合的产物Web3D技术的特点及应用,着重对几种具有代表性的Web3D技术进行了比较,为用户提供了对Web3D技术的选择依据。    1 引 言    虚拟现实

2、(VirtualReality,简称VR)技术是一种逼真地模拟人在自然环境中的视觉、听觉、运动等行为的人机界面技术。1由于虚拟现实具有实时的三维空间表现能力、提供了人机交互式的操作环境以及给人带来了身临其境的感受,它正成为继多媒体之后的又一个研究和应用的热点,开辟了人类交流方式的新领域。    近年来,与虚拟现实相关的各种研究取得了令人瞩目的成就。特别是随着互连网的高速发展,涌现了大量以互联网为基础的虚拟现实技术。这些技术大体上可以分为两个范畴,一个是以图像为基础的Panorama技术,也就是我们平常所说的全景图;另一个则是以3D图形技术为基础的网络三维技术。4&

3、#160;   Web3D可以简单地把它看成是Web技术和3D技术相结合的产物,实际上也就是本机的3D图形技术向互联网的扩展,其本质特征即网络性、三维性和互动性。它与本机的3D图形技术的主要差别在于:    (1)实时渲染。它是由渲染引擎进行实时渲染从而实时显示的(本机的3D图形是预渲染)。    (2)具有无限的交互性。因为是实时渲染,这就为交互性提供了基础。    (3)优化和压缩。由于网络带宽的限制,文件必须经过优化和压缩以保证用户端快速下载。   

4、 通过应用Web3D技术,用户可在网上浏览以三维形式表现出来的物体,并对其进行交互性操作,以体验身临其境的奇妙感受。Web3D技术可广泛应用于企业和电子商务、娱乐游戏业、教育业和虚拟现实展示与虚拟社区等领域3。本文就4种有实力且目前已经取得一定市场的Web3D格式进行介绍和比较。    2 几种Web3D技术    2.1 Cult3D    Cult3D是瑞典的Cycore公司推出的一种全新的Web3D技术,其基础思想是利用现有的网络技术和强大的3D引擎在网页上建立互动的3D对象。C

5、ult3D的内核是基于Java的,它也可以嵌入客户自己开发的Java类,因此具有很强的交互和扩展性能。    Cult3D由3个不同的程序功能Cult3DExporterplug2in、Cult3DDesigner和Cult3DViewerplug2in组成。Web开发设计人员可以使用在3D设计领域广泛使用的3DSMAX或MAYA来设计3D模型,使用Cult3DExporterplug2in来转换设计模型,在Cult3D Designer中为模型加入交互、音效等其他效果,再无缝地嵌入到HTML页面和其他应用程序中。用户只需安装Cult3DVie

6、werplug2in即可在网上实时观看利用Cult3D技术生成的3D模型,通过鼠标还可互动地旋转、放大或缩小它。从这样的开发流程我们可以看出,开发人员无须去适应新的技术,同时Cult3D还为用户提供了人性化和条理化的开发界面,操作简单直观,大大提高了开发的效率,降低了最终用户的成本。9    Cult3D是一个跨平台的3D渲染引擎,通过它可以向所有Internet用户传输具有空前质量和速度的实时交互性物体。它的关键技术有以下几点:3,6    (1)具有超群的图像质量和交互性能且文件量小。   

7、 Cult3D结合高效的压缩技术并支持多重阴影效果、贴图和双线性滤镜,使得用户不需要长时间的下载和焦急的等待就可以看到高质量的三维模型,并能对其进行交互操作。一般情况下,Cult3D的文件量非常小(20k200k),对于普通拨号上网的用户也是可以接受的。此外,Cult3D可以实现复杂的动画,这就为物体添加交互性创造了更多的契机。    (2)跨平台应用,支持多浏览器,而不需要硬件支持。    Cult3D具有很好的跨平台效能,它支持目前主流的各种浏览器,从PC到苹果的各种机型和包括UNIX、LINUX、WINDOW

8、S在内的各种常用的操作系统。    由于Cult3D完全是由软件控制而不需要任何硬件支持,因此即使在没有硬件加速的情况下,普通个人电脑和笔记本的用户也可以看到以往只有在高端工作站上才能看到的精细的实时渲染的效果。    (3)可应用于微软Office和Adobe Acrobat文档。    Cult3D除了可以嵌入到HTML页面中让Internet用户在网络上浏览3D物体以外,还可以作为元素插入到微软Office文档(如Word、PowerPoint或Excel)和AdobeAcrobat文档中

9、使用。    Cult3D中使用Real2time 3Dparticle和Environment Mapping技术来产生发射效果,从而提供了完美的场景渲染效果。正是由于这一优点,Cult3D非常适合博物馆站点或者宣传产品的电子商务网站(图1即是由Cult3D所表现出的室内场景)。由于它基于Java提供了更多样化的扩展性,也就同样适用于游戏或者动画制作的开发。4现在Cult3D已经拥有了广泛的用户群和众多的成功案例,Palm、NEC、CNN和丰田汽车等300多家全球闻名的公司都在他们的站点上使用了Cult3D技术。图1 Cult3D表现出的室内

10、场景(注：原文图片失真 此图来源于互联网)    2.2 Viewpoint    Viewpoint是由美国Viewpoint公司提出的Web3D解决方案。利用它基于XML语言的构架可方便地和浏览器与数据库进行通信,同时还可以内嵌到多个软件中使用,这就使得Viewpoint的应用非常广泛。用户端只需安装一个简单的免费插件就可以在网上浏览到以流方式传输的3D模型,同时用户端还可以对该物体进行旋转、缩放等控制。    该技术的着眼点涵盖了Web3D的各个环节,与其他解决方案不同的是,Viewpoint是自己

11、制作、处理并传输3D图形对象,而不是从其他渠道导入3D图像。    Viewpoint在结构上可分为两个部分,一个是储存三维数据和贴图数据的mts文件,另一个是对场景参数和交互进行描述的基于XML的mtx文件。Viewpoint生成的文件格式非常小,加上它的三维多边形网格结构具有可伸缩性和流传输性,这使得它非常适合在网络上传输。可伸缩性意味着Viewpoint格式的物体可以根据用户机器的处理速度以及Modem的速度来自动地调节精度及其它相关参数以获得最佳的表现。这样的话,设计师只需开发一次高解析度的模型就可以满足用户不同层次精度的需要,从而减少了开发时间。流传输性

12、则使得用户不用下载完所有的三维数据即可看到模型内容,甚至在下载过程中也可交互操作3D物体。    在目前窄带应用环境下,Viewpoint所提供的技术也是最好的解决方案之一。它使用独有的压缩技术,把复杂的3D信息压缩成很小的数字格式,同时也保证我们的浏览器插件可以很快的将这些压缩的信息重新解释出来。它的压缩比比任何一种现有的网上3D压缩技术都要高,其极小的文件量使用户能更为快捷地在网上浏览Viewpoint格式的物体。在3D贴图方面,它使用JPEG的压缩格式,保证文件的贴图不会使3D文件加大。它还具有一个纯软件的高质量实时渲染引擎,在不需要任何硬件加速设备的情况下

13、,其渲染效果接近真实世界。    Viewpoint的主要运用市场是作为物品展示的产品宣传和电子商务领域,图2即是利用Viewpoint制作的网上物品展示。目前View2point公司已经为Nike、Sony、和SharperImage等著名公司提供了在电子商务以及在线广告方面的解决方案。    图2 Viewpoint制作的物品展示    2.3 Atmosphere    Atmosphere是在图像处理和出版领域具有权威地位的Adobe公司推出的一个可通过互联网连接多用

14、户的三维虚拟环境式在线聊天工具。它集虚拟3D世界的创作、观看和互动于一体,是创建网络虚拟三维环境的专业开发解决方案。虽然目前该软件还处于调试开发阶段,但由于它采用了独特的光能追踪算法,在室内空间的展示方面有很大优势,值得我们关注。    AdobeAtmosphere包含3个组件:Atmo2 sphereBuilder,提供出色的3D建模技术来建立三维虚拟世界;AtmosphereBrowser,Adobe公司提供的免费浏览器插件(也能作为独立的应用程序运行),使用户能浏览AdobeAtmosphere创造的3D世界,浏览器运行界面如图3;AtmosphereCo

15、mmunityServer,使用户能在AdobeAtmo2sphere创造的3D世界中用一个基于文本的界面与其他用户进行交流的聊天服务器。图3 Atmosphere的浏览器运行界面    需要注意的是,Atmosphere使用了view2point的技术以得到对三维几何体高质量的压缩和实时渲染效果,所以在安装Atmosphere的浏览器插件的同时也安装了Viewpoint插件。Atmo2sphere除了提供自己的建模工具AtmosphereBuilder来建立三维虚拟世界以外,也可将由3DSMAX或Lightwave等三维创作工具建立的3D模型输出为Viewpoi

16、nt格式的文件(3。mts和3。mtx文件),然后将它们导入到Atmosphere Builder中。同时,Atmosphere也能很好地兼容工业标准的网络内容设计工具,如AdobePhoto2shop和AdobeIllustrator,它还可以将标准网络图像格式引入到Atmosphere中,如JPEG、GIF和PNG。7    AdobeAtmosphere为我们提供了一个出色的虚拟社区解决方案,但由于它处于调试开发阶段,还存在着一些不足之处:从建模技术上看,生成的场景质量还比较粗糙;从渲染技术上看,AtmosphereBrowser浏览器(5MB)的体积太大,

17、对于拨号上网的用户来说下载费时;从短信息聊天功能上看,只支持一对多的方式;从扩展性上看,Atmosphere目前只能在浏览器和它自己的播放器内运行,还不支持嵌入其它的环境中;从服务器端支持看,Adobe还未提供用来处理多用户交互信息传送的服务器端程序,目前建立的Atmosphere场景只能连接到Adobe的服务器上使用;从操作平台上看,现在的Beta版只能在Windows操作平台上安装,只有正式版才能既用于Windows又用于Macintosh平台。10图4 Shout3D开发的网上三维游戏    2.4 Shout3D    Sho

18、ut3D是ShoutInteractive公司推出的在Internet上传输交互三维图形和动画的解决方案。设计师可利用3DSMAX或其他建模工具来创建基本模型(包括建模、贴图、材质、灯光和摄像机等),通过Shout3D为3DSMAX提供的插件把模型直接输出为Shout3d的。s3d文件格式(其他建模工具输出为wrl文件格式即可),然后可利用已有的applet,或根据自己的需要用Java或JavaScript来开发任何可以想象的交互能力,最后使用Shout3DWizard把交互的3D动画发布到网上即可。虽然Shout3D生成的场景质量不高,但利用它提供的高交互性可方便地开发网上的三维游戏,图4即

19、是此类游戏的一个例子。    Shout3D是基于Javaapplet的3D图形渲染引擎,同时它也是Web3D图形的制作工具。由于它是使用Java技术来在网络上传递交互的三维图形的,当访问者浏览有Shout3D的页面时,它的内容和播放器将被同时下载。而这种播放器是嵌入在网页中的Javaapplet程序中的,我们知道所有版本的MicrosoftIE和Netscape4。0以上的版本都能运行Java虚拟机,所以用户不用担心操作平台的限制也不用下载特定的浏览器插件就可观看到完整的3D图形。    3 几种Web3D技术的比较 &#

20、160;  前面介绍了4种有代表性且应用范围较广的Web3D技术,它们在浏览要求、操作平台及各自特点这3方面的具体比较见表1。表1 4种Web3D技术的比较    随着网络技术的高速发展,每天都有不同的Web3D新技术出现,面对众多的Web3D技术,如何选择?选择哪种Web3D技术最佳,就目前而言很难定论。因为这需要针对不同的应用方向来做具体选择。Cult3D和Viewpoint具有逼真的渲染引擎,能产生高质量的场景渲染效果,对于网络上的产品展示它们都具有不可比拟的优势(其中后者比前者的效果更为流畅);Shout3D以其平台无关性、无需插件和可扩展的交互

21、能力等优点,成为开发三维在线游戏和互动Web3D场景的首选;Atmosphere则为建立虚拟社区提供了很好的解决方案。    4 结束语    尽管出现了如此之多的解决方案,Web3D技术的发展仍存在着困难和障碍,这主要表现在两个方面:    (1)没有统一的标准。上述的每种Web3D技术都是由不同的公司自行开发的解决方案,它们使用的都是不同的格式和方法。没有统一的标准,3D在Web上的实现还需假以时日。    (2)插件问题。从上面的介绍可以看出,几乎每个公司开发的Web3

22、D技术标准都需要自己插件的支持,这些插件从几百k到几兆不等,这在带宽不理想的条件下必然会限制一部分人的使用热情。    尽管在各种技术上仍有许许多多的难题,但伴随着国际互联网的普及、网络技术和硬件设施的飞速发展以及网络带宽的增加,网络三维化必将成为今后网络多媒体发展方向的主流,Web3D将不再遥远。    参 考 文 献    1 杨宝民,朱一宁编著.分布式虚拟现实技术及其应用.北京:科学出版社,2000    2 未来的虚拟世界Web3D.Availablefrom

23、0;   3 Web3D的由来、现状和展望.Availablefrom    4 Web3D技术简介.Availablefrom     5 Cult3D领先的Internet3D技术.Availablefrom    6什么是Cult3D? A vailable from http: /    7 AdobeAtmosphere:遨游3D世界,体验网络漫步.Availablefrom    &#

24、160; 8 Atmosphere的3D新概念.Availablefrom    9     10     11     12     13     14 HTML5 Canvas实现360度全景图2013年11月14日 综合 共 2814字 字号 小 中 大 评论关闭很多购物网站现在都支持360实物全景图像，可以360度任意选择查看样品，这样对购买者来说是

25、一个很好的消费体验，网上有很多这样的插件都是基于JQuery实现的有收费的也有免费的，其实很好用的一个叫3deye.js的插件。该插件支持桌面与移动终端iOS与Android， 它的demo程序：自己玩了玩这个Demo以后，照着它的思路，用HTML5 Canvas也实现了类似的功能。所以先说一下它的360度全景图的原理1. 首先需要对实物拍照，间隔是每张照片旋转15度，所以需要23张照片。2. 照片准备好了以后，尽量选择JPG格式，裁剪到适当大小。3. JAVASCRIPT中预加载所有照片，可以配合进度条显示加载精度4. 创建/获取Canvas对象，加上鼠标监听事件，当鼠标左右移动时候，适度的

26、绘制不同帧。大致的原理就是这样，简单吧！实现代码：<!DOCTYPE html><html><head> <meta charset=utf-8"> <title>Full 360 degree View</title> <script>var ctx = null; / global variable 2d contextvar frame = 1; / 23var width = 0;var height = 0;var started = false;var images = new Array

27、();var startedX = -1; window.onload = function() var canvas = document.getElementById("fullview_canvas");canvas.width = 440;/ window.innerWidth;canvas.height = 691;/window.innerHeight;width = canvas.width;height = canvas.height;var bar = document.getElementById('loadProgressBar');f

28、or(var i=1; i<24; i+)bar.value = i;if(i<10)imagesi = new Image();imagesi.src = "0" + i + ".jpg"else imagesi = new Image();imagesi.src = i + ".jpg"ctx = canvas.getContext("2d");/ mouse eventcanvas.addEventListener("mousedown", doMouseDown, false

29、);canvas.addEventListener('mousemove', doMouseMove, false);canvas.addEventListener('mouseup', doMouseUp, false);/ loaded();/ frame = 1frame = 1;imagesframe.onload = function() redraw();bar.style.display = 'none'function doMouseDown(event) var x = event.pageX;var y = event.pag

30、eY;var canvas = event.target;var loc = getPointOnCanvas(canvas, x, y);console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");startedX = loc.x;started = true;function doMouseMove(event) var x = event.pageX;var y = event.pageY;var canvas = event.target;var

31、loc = getPointOnCanvas(canvas, x, y);if (started) var count = Math.floor(Math.abs(startedX - loc.x)/30);var frameIndex = Math.floor(startedX - loc.x)/30);while(count > 0)console.log("frameIndex = " + frameIndex);count-;if(frameIndex > 0)frameIndex-;frame+; else if(frameIndex < 0)frameIndex+;frame-;else if(frame