基於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 {//創建控制動畫的時間感應器
enabled TRUE
cycleInterval 30//指定每個變化周期的時間長短
}
ROUTE clock_camera.fraction_changed TO 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 TO camera_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 數位相機曝光模式的選擇模塊的設計與實現

本文引用地址：http://www.eepw.com.cn/article/257828.htm

　在實驗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>
EMBED name=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]。