WEB3D介绍
虚拟展示技术,通常被用于商品网络化三维展示,也有部分小场景虚拟仿真项目采用WEB3D进行制作3D图形技术并不是一个新话题,它在图形工作站以至于PC上的应用早已瓜熟蒂落。然而互联网的出现,却给3D图形技术注入了新的活力,一些微妙而深刻的变化正在进行中。“web3d”这一新词的出现就反映了这种变化的全貌。没有人严格定义web3d,但我们可以把它理解为互联网上的3D图形技术。
VRML是3D图形和多媒体技术通用的交换文件的格式,它描述交互式的3D对象和场景的几何对象的尺寸和形状、色彩、材质、灯光、动画及其交互性。它不仅应用在互联网上,也可以用在本地客户系统中,其应用范围极广。国际上有一个VRML(VRML Consortium)协会,承担起了制定互联网上的3D图形标准与规范的任务。1996年,VRML 1.0发布,1997年,VRML 97诞生。VRML 97的重大革新是:在网络上传输的是模型文件,而不是视频图像文件,故其传输量大大减小,可使任何一个3D图形爱好者都能制作可在互联网上实时渲染的3D场景模型。
然而,在1997年之后,VRML在3D图形标准上的进展缓慢,远远没有达到人们的期望。究其原因主要有:
● 互联网对3D图形的需求并不迫切,到目前为止,2D图像仍在HTML文件中占主导地位。
● 网络带宽仍然是制约网上3D图形发展的主要瓶颈。
● VRML 97过于庞大,它几乎包罗万象。
● 网站的访问者必须先花费10~15分钟的时间下载插件,然后再像安装软件那样安装这个插件,才能观看一个十分粗糙的3D图形。
产品群雄割据 用户苦不堪言
由于VRML协会没有及时推出VRML 97的下一代标准,因此很多互联网3D图形的制作软件并没有完全遵循VRML 97标准,许多公司推出了自己的制作工具,使用专用的文件格式和浏览器插件。类似的软件大约有30种之多。这些软件各有特色,在渲染速度、图像质量、造型技术、交互性以及数据的压缩与优化上都有胜过VRML之处。所有的公司都希望自己的解决方案能成为“事实上的国际标准”。
然而用户却不领它们的情。对用户而言,要在互联网上观看用这些软件制作的3D图形,先要下载1M~7MB的插件,然后安装在网页浏览器上。插件的种类之多,使人无所适从。要观看十个不同的网站,用户就需要下载并安装十个不同厂家的插件。这样烦琐的事情用户实在难以忍受。
为什么需要插件?
3D图形软件为什么离不开插件?其实插件就是实时渲染引擎,其作用是:解释并翻译实施场景模型文件的语法,实时渲染从服务器端传来的场景模型文件,在网页访问者的客户端逐帧、实时地显示3D图形。把实时渲染引擎做成一个插件,这是互联网3D图形软件厂商目前的通常做法。显然,实时渲染引擎是实施互联网3D图形的关键技术,它的文件大小、图形渲染质量、渲染速度以及它所能提供的交互性都直接反映了其解决方案的优劣。
研制更好的实时渲染引擎是各软件厂商竞争的焦点,于是就产生了五花八门的3D图形文件格式与相应的浏览器插件。
结束这种混乱局面的最好办法是微软在其IE浏览器中预装一个或几个实时渲染插件,这样用户就不必花费十多分钟的时间去下载和安装插件。然而,微软并未选中任何一家公司作为其合作伙伴,也许有一天微软会推出自己的一整套解决方案,从而保持它在互联网3D图形领域中的霸主地位。
新一代互联网3D图形
标准X3D诞生
1997年,VRML协会改名为web3d(Web 3D Consortium),此后web3d这一专用缩写开始在互联网上出现。2001年8月,web3d协会发布了新一代国际标准——X3D (X3D的含义是可扩展的 3D)。
X3D得到了许多软件厂商的支持,包括3Dlabs、ATI Technologies、Blaxxun、Nexternet、OpenWorlds、ParallelGraphics、Sony Electronics、US Army STRICOM、SGDL Systems等。X3D与MPEG-4和 XML兼容,并将集成到MPEG-4的3D内容之中,使用XML语法。它与VRML 97向后兼容,即X3D能提供标准VRML 97 browser的全部功能。X3D的主要任务是把VRML的功能封装到一个轻型的、可扩展的核心之中。由于X3D是可扩展的,因此任何一个开发者都可以根据自己的需求,扩展其功能。X3D渲染引擎的商业版本也在去年的SIGGRAPH ’2001的年会上推出,Parallel Graphics(web3d技术的领先软件公司)将联合几个公司开发X3D 新技术。
这是每个努力的网页设计师都将面临的问题。
早上的一个小调查,让我不能继续沉默。
调查的起因,是公司要求对一个网页三番五次的修改,甚至提供了客户认为比较满意的案例。但我怎么看也不觉得这案例能比自己做的好到哪里。当然这里面有我的偏见,我想。出于对自己的怀疑,我把两个网址同时发给QQ中的数十个好友,想看看大众的目光。这些人中,有专业的网页设计师,也有从事互联网其它工种的IT人,也有与互联网不怎么相干的学生、播音主持、教师、公务员等。调查结果出乎我的意料:近100%的业内人士认为我做的好一些,而大多数业外人士选择了另一个。
这是一个另人震惊的答案!尽管之前,我也清楚地知晓这两者之间是有矛盾的,但我不曾料到,其矛盾会如此激烈。这让我们如何是好?是大众出了问题?还是我们出了问题?做为设计师,应该改变大众的审美观呢?还是顺应敷衍?是川菜引导了中国人的口味?还是中国人的口味造就了川菜?
不要告诉我两者可以调和。我不再相信这种鬼话。这完全不是风格的问题。问题是一个长期从事设计工作的人,和一个普通大众,他所观察的侧重点就不一样。举个例子,男人18岁前看女孩子注意脖子之上的部分,18岁后看女孩子注意脖子以下的部分。所以你认为她不漂亮是因为她脸蛋长得不好;你认为她漂亮是因为她有魔鬼身材。不要告诉我既有漂亮脸蛋又有魔鬼身材的女孩子,因为你认为漂亮的脸蛋放在美国人眼中那就是个垃圾。
我曾经在[乱弹]一文中说过“毕竟天下有99%的食者不是厨师,多数穿衣服的也不是服装设计师,但他们依然有权利挑剔,有权利批评与否定。”网站上传之后,大多数看官不是专业设计师,而是普通大众。所以,普通大众的眼光必须是评判网页好坏的一个非常重要的原则。
然而,然而!
然而,现在多数人认同男女平等,百年前全不如此;现在多数男女大街上拉个手亲个嘴视若家常便饭,几十年前全不如此;现在很多人在网上买东西卖东西,几年前全不如此!时代需要引导,大众需要引导!
做哗众取宠的公众垃圾?还是做特立孤行的业内精品?我们当然选择后者。就目前国内的大势来说,我们必须选择后者。这是一个设计师应有的良知与责任。
曾有文章批评过中国网页的四大特点“长闪挤花”。今天看来,这是对这部分设计师的冤枉。他们只是顺应了潮流而已。然而,他们的妥协也导致了中国网页设计水平的整体下滑。这是他们必须承担的罪名。
改变尽管是一件艰难的事,但总比在沉沦中死掉好一些。毕竟有许多事给了我们希望,比如流行音乐。十年前,我的父辈们觉得在台上边唱边跳那就不是在唱歌,他们觉得像“大海航行靠舵手”那样的才叫歌曲。然而他们如今在看那英王菲张信哲甚至王蓉周杰伦。
互联网没有历史,互联网的历史需要我们这一代人去创造。我们需要有所作为。坚守网页设计师的贞操;同时,努力感染身边每个人的审美观。
这就是我要说的。
原文出自:A List Apart
中文翻译:onestab [2004.01.25]
要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。
像素是计算机屏幕上的不可缩放的点,而一个 em 就是一个字大小的方块。由于字体大小的变化, em 代表用户喜欢的文字大小的相对单位。
采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。
也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。
为了理解弹性设计,我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。
弹性文本显然文字是最容易实现的弹性设计的。能够设定喜欢的文字大小是用户最常见的要求,因此不可忽视。
亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。
如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。
em 存在的问题Em 似乎是进行文字相对大小设定时的单位,浏览器默认的文字高度是16像素,对大多数设计者来说太大了,不合他们的口味。要使用 em,设计者一般将文字的初始大小设为小于 1em。
例如:
body { font-size: 0.8em; }h1 { font-size: 2em; }
p { font-size: 1em; }
看起来似乎可行,但有一个问题 - 如果你在 IE 中将“文字大小”设为“较小”或“最小”,文字就会小得难以阅读。由于 IE 如此普及, em 似乎不是可行的选择。
Jeffrey Zeldman过去曾经对此表示质疑,他认为尽管有其不利之处,以像素指定文字大小还是比用 em 好。这个结论是根据 Owen Briggs 所作的深入研究得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小,不是出于精确控制网页外观的需要,而是似乎没有更为合理的其他选择。
如此看来,要么是难看的大字体,要么无法缩放,好像无法两全。别着急,接着读下去。
另一种“大字体”后备样式在与无法缩放的像素所带来的亲和力问题的战斗中,许多作者在他们的网页上使用了一种后备样式表的技术,可通过网页上的一个链接进行切换。
这种方法固然不错,但是如果和相对文字大小的措施(比如Wired News所提到的)一起使用,效果会更好。不能指望用户熟悉你的特有界面,用户一般对浏览器的界面更为熟悉,如果他们想看大一点的字体,更倾向于用浏览器来达到而不是用你的界面。而且他们更期望这种方法在各个网站都管用,不想每访问一个网站都改变一次。,比如
在Web页中嵌入Media Player的方法比较简单,只要用HTML中的<Object></Object>可以了,如下所示。 <OBJECT ID="WMPlay" WIDTH=320 HEIGHT=240 其中ID是对象的名称,当用户在JavaScript要对Media Player进行控制时可以用该对象的名称WMPlay进行访问。CODEBASE指明当用户的浏览器中没有安装Player控件时可以从该URL指定的位置去获取。 当然在建立Player对象时也可以用<PARAM >来为其指定参数。如下所示: <PARAM NAME="FileName" VALUE="C:ASFRootWelcome.asf"> 其中"FileName"参数表示Media Player要播放的文件活或流。"ShowControls"表示在播放时是否显示控制条。Media Player的参数很多,我们在此不再一一详述。读者如果需要了解更详细的内容可以参考Media Player SDK中的相关部分。 如果用户需要对Media Player进行控制可以用JavaScript进行控制。 在这个例子中,Media Player嵌入在Web页面中,在Media Player右边有一些按钮,利用这些按钮用户可以控制Media Player的播放活动。这些按钮的HTML代码如下: <form name="myform"> 相应的JavaScript代码为: <script language="javascript"> Springboot如何实现Web系统License授权认证 C#使用Http Post方式传递Json数据字符串调用Web Service Python3中小括号()、中括号[]、花括号{}的区别详解 vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件 InterlliJ IDEA2020新建java web项目找不到Static Web的解决 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/
nsmp2inf.cab#Version=6,4,5,715"
STANDBY="Loading Microsoft? Windows Media? Player components..."
TYPE="application/x-oleobject">
</OBJECT>
<PARAM NAME="ShowControls" VALUE="False">
<PARAM NAME="AutoRewind" VALUE="True">
<PARAM NAME="AutoStart" VALUE="False">
<input type="button" width="15" value="No Controls " name="NoControls"
OnClick="controlType(false)">
<input type="button" width="15" value="All Controls" name="Full"
Onclick="controlType(true)">
<input type="button" width="15" value=" Small " name="Small"
OnClick="displaySize(1)">
<input type="button" value=" Large " name="Large"
Onclick="displaySize(2)">
<input type="button" width="15" value=" Normal " name="Normal"
Onclick="displaySize(0)">
<input type="button" width="15" value=" Play " name="Play"
Onclick="PlayClick()">
<input type="button" width="15" value=" Stop " name="Stop"
Onclick="StopClick()">
</form>
<!--
var g_Browser = navigator.appName;
function controlType (setting)
{
if (g_Browser == "Netscape")
document.WMPlay.SetShowControls(setting);
else
document.WMPlay.ShowControls = setting;
}
function displaySize (setting)
{
if (g_Browser == "Netscape")
document.WMPlay.SetDisplay
·初探:
Alexa排名在前一两年,直至现在,都成了许多站长追求的目标之一,许多论坛的站长都要求他们的版主装上Alexa工具条,以提高自己的网站的排名。
本人在网上有幸看到一篇文章,说的是Alexa的两个DLL文件AlxTB1.dll、AlxRes.dll,其中AlxRes.dll里面放的是大量的脚本、图片、HTML等代码。有兴趣了解的可以到google.com或baidu.com去搜索一下"alexa dll"。
·设想:让网站的用户都安装alexa工具条。
如果你的站点提供一个功能,用户在线的时候,给用户加分,用户用这些分数,可以享受到你的网站提供的服务,那么,你可以设定这样一个机制:只要会员安装了alexa工具条,则在线的时候获得的分数将是没安装的alexa的两倍,或更多。
·问题:怎么判断用户是否安装了alexa工具条?
(转载请注明http://www.5217.cn)
要判断这个问题,只能通过网页脚本来进行,然后在用户登录时,把值送到服务器。经过本人摸索,AlxRes.dll中的资源,例如脚本,可以通过一个路径来访问,用编辑器打开这个DLL,可以看到所有的脚本。我们通过新建一个HTML页面,在<head>之间插入一个引用脚本资源的<script>,如下:
<script language="javascript" src="res://AlxRes.dll/SCRIPT/dsn.class.js"></script>
dsn.class.js是AlxRes.dll中的其中一个脚本资源,现在我们随便找这个资源里的一个function,只要它能运行就可以,我找到一个比较简单的:
function aborted()
{
return;
}
因为这个方法比较简单,调用也不容易出错。这就好办了,要判断用户端是否安装alexa工具条,写一段脚本:
<script language="javascript" src="res://AlxRes.dll/SCRIPT/dsn.class.js"></script>
<script language="javascript">
function doTryAlexa()
{
try
{
aborted();
return 1;
}
catch(e)
{
return 0;
}
}
</script>
... 下面来测试一下:
<input type="button" value="tryAlexa" onclick="alert(doTryAlexa())">
如果安装了,提示1,没安装就提示2。
·作弊!
在用户登录页,写上上面的脚本,在页面里放一个隐藏输入域和一段脚本:
<input type="hidden" id="IsAlexaUser" runat=server><script>document.getElementById("IsAlexaUser").value=doTryAlexa()</script>
用户登录后,将值存到数据库中的在线表,或Session中……
·效果:如果能保证每天有200个左右的alexa傀儡在你的网站上比较频繁地活动,5000名以上的排名。
相关文章