基于VRML和JavaScript的数码摄影虚拟实验系统的设计与实现

1 研究思路与开发平台的选择

目前，基于网络对实验对象进行三维交互展示的有效处理方法是使用专业的设计软件，如采用AUTOCAD、3DS MAX等将实验对象的三维模型设计出来。这种方法建模过程直观形象，但生成的模型和动画不能与用户进行交互，需要将三维模型导出为相关虚拟现实设计软件所需要的格式文件，用虚拟现实设计软件进行三维展示的交互设计，最后将它发布到网站上[1]。

经过多年的发展，虚拟现实技术的实现也派生出多种不同的方法，现在较为流行的有VRML、Java 3D、CULT3D、X3D等多种实现方法。它们各自有不同的优缺点。其中，虚拟现实建模语言VRML(Virtual Reality Modeling Language)是一种描述大量对象的属性及相互关系的语言，具有平台无关性、三维交互性、多媒体集成、境界逼真等众多优越的特征，所以选择该软件作为开发平台。虽然VRML可以通过直接编程进行语义描述，建立实验对象的三维模型，但这种方法适合建立简单规则的模型。数码单反相机主要由机身和镜头两部分组成。机身上又包括取景窗口、液晶显示屏、曝光模式选择盘、控制拨轮以及各个操作按钮等，结构比较复杂，不宜直接用VRML语言进行语义描述。而是利用3DS MAX建立整个模型，并赋予材质、色彩、光照，导出VRML的格式文件(.*wrl文件)。因此，选择3DS MAX进行建模，再使用VRML软件进行交互设计并实现网上发布，建立逼真的交互式三维虚拟实验环境，可以让学生随时通过网络浏览三维场景，并通过人机交互进行仿真实验。

2 三维虚拟数码单反相机的设计与实现

实验对象的建模是虚拟实验开发过程中最重要的一步，模型的好坏直接影响运行的效果和场景的沉浸度。为了便于在VRML浏览器中设计三维数码单反相机的交互，可以真实地模拟实际操作进行镜头的旋转、曝光模式选择盘的转动、控制拨轮和按钮的操作等，在对数码相机进行建模时，将其各部分分别建模，后期组装。将数码单反相机的三维模型建好后，在3DS MAX中应用输出插件导出*wrl格式的文件。在运用3DS MAX模型导出VRML文件后要充分注意优化VRML程序。优化技术是三维虚拟建模过程中至关重要的一个环节，优化结果的好坏将直接影响三维数码相机的显示速度和交互效果[2]。

3 使用VRML语言结合JavaScript实现数码单反相机的虚拟实验

数码单反相机虚拟实验系统共包括四个实验，分别是：认识数码相机、数码相机的调节模式、数码相机的光圈调节、数码相机快门调节。

3.1 认识数码单反相机模块的设计与实现[3]

实验1是对数码单反相机的三维展示，主要分为：(1)自由旋转展示。在这种方式下，相机自动在浏览器中旋转，让学习者从不同的角度上观察相机的结构。(2)手动控制展示。在这种方式下，学习者可以自主转动相机，从不同角度细致地观察相机。

为了实现相机的自由旋转展示，可以运用时间传感器节点(TimeSensor)和方向插补器节点(OrientationInterpolator)。TimeSensor节点的作用是创建一个虚拟时钟，可以像时钟一样标记时间的流逝，设置开始动画、结束动画和控制动画的播放速度等属性，并向插补器节点输出时间事件，产生相应的动画效果。OrientationInterpolator可改变观察方向或者改变形状体的方向。插补器节点使用一组关键时刻和关键值来描述一个动画。关键时刻列表在插补器节点的key域中指定，关键值列表在插补器节点的keyvalue域中指定。浏览器在渲染时将根据这些关键时刻所对应的关键状态在场景中通过线性插值计算技术自动生成连续动画。实现自由旋转展示部分相应代码如下：

OrientationInterpolator{//创建控制动画的插补器
key[0 0.5 1]//指定关键时刻列表
keyValue [//指定对应的旋转关键值列表
0 1 0 0，
0 1 0 3.14，
0 1 0 6.28
]
}
TimeSensor {//创建控制动画的时间感应器
enabledTRUE
cycleInterval 30//指定每个变化周期的时间长短
}
ROUTE clock_camera.fraction_changedTO camera_auto_rotation.set_fraction
ROUTE camera_auto_rotation.value_changed TO
camera_all.rotation

在ROUTE中，将TimeSensor的fraction_changed出事件路由到插补器的set_fraction入事件，每次时间传感器输出一个新的时刻，插补器就会利用输入的时间计算出一个新的旋转值，然后通过其value_changed出事件路由到方向插补器节点。

为了能从各种角度来展示相机，运用SphereSensor传感器节点，对相机进行了手动的三维展示。 SphereSensor节点用于感知观察者的拖动动作，并且计算旋转角和角度。通过使用它的rotation_changed域输出变化的参数，对相机整体进行360°上下左右的旋转完成相机的手动展示。代码如下：
SphereSensor{
enabled TRUE
}

ROUTE camera_sd.rotation_changed TOcamera_all.rotation
对于VRML窗口与网页之间的交互主要是通过JavaScript和VRML中的TouchSensor节点完成。由于TouchSensor节点能感知用户的鼠标事件，一般的鼠标操作通常有3种：移动、点击、拖动。本设计主要使用了移动操作，当用户进行移动操作的时候会使TouchSensor中的isOver公共域变为TRUE，传递出去一个真事件。在网页中用JavaScript接收到该事件再运用相应的程序完成相应的操作，然后在VRML场景中运用Onmousemove感知鼠标的移动事件。VRML场景中主要代码：
Touchsensor {
Enabled TRUE
}

在网页中对VRML场景运用了Onmousemove感知鼠标的移动事件，当鼠标作用于VRML场景时会触发相应的处理事件javascript代码，例如当鼠标移动到LCD显示屏时，用到了条件判断语句对其进行判断：
if(M_e.Nodes("Viewfinder_button").Fields("isOver")==-1){
display_div(2，12)；
}

然后进行相应的处理操作。其中Viewfinder_button是取景器的触发传感器TouchSensor的名称。

3.2 数码相机曝光模式的选择模块的设计与实现

　在实验2中，要求能模拟真实的数码相机的操作，允许学习者通过转动曝光模式调节环，选择不同的曝光模式。每一种曝光模式都有各自的特点以及适用的场合。实现这一效果，是在VRML中使用CylinderSensor(圆柱传感器)与Script节点的结合实现了用户与曝光模式选择盘的交互。CylinderSensor节点也可以感知一个观察者的拖动动作，并且计算转轴和角度，通过它的rotation_changed域(eventOut出事件)输出。其代码如下：
CylinderSensor{
exposedField SFFloat minAngle 0
exposedField SFFloat maxAngle -1
exposedField SFBool enabled TRUE
exposedField SFFloat diskAngle 0.262
exposedField SFFloat offset 0
exposedField SFFloat autooffset TRUE
eventOut SFBool isActive
eventOut SFVce3f trackPoint_changed
eventOut SFRotation rotation_changed
}

观察者每次改变轨迹点时，autoOffset、offset、maxAngle和minAngle域值在一起作用把轨迹点转化成为旋转值，并通过rotation_changed域(eventOut出事件)输出。然后通过旋转角度的不同改变LCD显示屏上不同的曝光模式画面。同时也向浏览器环境传递不同的旋转角度，浏览器根据不同的旋转角度来显示不同的模式说明。

3.3 光圈与快门的调节模块的设计与实现

实验3和实验4分别是针对光圈大小和快门大小进行调节，然后在模拟的场景中进行拍摄，比较不同的光圈值和快门速度对画面成像效果的影响。这样，既让学生掌握了光圈和快门值的调整方法，又让他们理解了光圈值和快门速度与画面成像效果的关系。这两部分实现的方法相似，所以在此一并说明。

以快门速度的调整为例，通过设置不同的快门速度，模拟了不同的成像效果。首先通过机身上的调节按钮设置快门速度，如图1所示，分别设置快门速度为1/200 s与1/1 000 s。

然后到模拟的三维场景中进行取景操作。由于不同的快门速度对成像效果的影响主要是体现在动态被摄对象上，所以，在场景中模拟了一辆奔跑的汽车，按下拍摄，即可得到模拟的成像效果，如图2所示。

具体实现方法如下：
if(a==4){
M_e.Nodes("tv_sensor").Fields("offset")=-4.125；
M_e.Nodes("tv_sensor").Fields("enabled")=-1；
M_e.Nodes("start_t4_script").Fields("show")=-1；
}
else{
M_e.Nodes("tv_sensor").Fields("enabled")=0；
if(a==1||a==2){
M_e.Nodes("start_t4_script").Fields("show")=0；
}else{
M_e.Nodes("start_t5_script").Fields("show")=0；
}
document.getElementById("left_content").style.display="none"
也就是用JavaScript启动了VRML中快门传感器和控制放在VRML中快门传感器的动作。
4 网络发布与插件的自动安装
VRML 文件可以采用超级链接的方式把HTML文件和VRML 文件链接到一起，这对于三维模型的虚拟展示具有十分重要意义。HTML文件格式的标准并不支持对VRML文档的嵌入，但非标准HTML提供＜EMBED＞标记可实现VRML文档的嵌入。例如下面的语句实现了VRML文档camera.wrl在HTML文件中的嵌入，其中SRC域指定关联的URL，“camera.wrl”是一个VRML文件。
<OBJECT CLASSID="CLSID：4B6E3013-6E45-11D0-9309-0020AFE05CC8"WIDTH=600px HEIGHT=400px； >
<PARAM NAME="SRC" VALUE="vrml/camera.wrl">
<EMBED name=camera id=camera src="vrml/camera.wrl" TYPE="application/x-cc3d" onmousemove="test1_contactVW()；"/>
</OBJECT>
在网页中要进行对VRML的操作只进行上述嵌入是远远不够的，还要通过javaScript中的M_e=camera.Engine，获取对相机VRML场景的句柄并赋给M_e。这样，就可以对VRML场景中的每一个节点中的每一个域和事件的值进行获取了。

为了保证用户机器上能正常播放，需要在用户机器上安装VRML浏览器。可通过以下代码实现自动安装：
<OBJECT CLASSID="CLSID：4B6E3013-6E45-11D0-9309-0020AFE05CC8"WIDTH=600px HEIGHT=400px；
codebase="source/cortvrml.exe">
<PARAM NAME="SRC" VALUE="vrml/camera.wrl">
<EMBEDname=camera id=camera src="vrml/camera.wrl" pluginspage="source/cortvrml.exe" type="application/x-shockwave-flash"TYPE="application/x-cc3d" onmousemove="test1_contactVW()；"/>
</OBJECT>

虚拟实验是开展网络教学的一个瓶颈，而其中最关键的是没能较好地解决交互性的问题。利用VRML技术，结合支持VRML的开发工具构建一个虚拟实验环境，并利用Java提供的支持VRML的开发包，实现了用户与虚拟环境之间的交互，可以满足数码摄影虚拟实验教学的需要。实验常常是一种协作性的活动，合作是实验过程中一个至关重要的环节，因此，要充分利用现代网络技术，增强对虚拟实验的协同操作，进一步体现网上实验的优势[4]。