《電子技術應用》
您所在的位置:首頁 > 嵌入式技術 > 設計應用 > 基于VRML和JavaScript的數(shù)碼攝影虛擬實驗系統(tǒng)的設計與實現(xiàn)
基于VRML和JavaScript的數(shù)碼攝影虛擬實驗系統(tǒng)的設計與實現(xiàn)
來源:微型機與應用2011年第13期
孫永麗
(山東科技大學 信息科學與工程學院 數(shù)字媒體技術系,山東 青島 266510)
摘要: 設計開發(fā)了三維虛擬數(shù)碼單反相機,,使學生對數(shù)碼單反相機有直觀形象的認識,,再使用VRML軟件進行交互設計并實現(xiàn)網(wǎng)上發(fā)布,建立逼真的交互式三維虛擬實驗環(huán)境,,實現(xiàn)數(shù)碼攝影虛擬實驗。
Abstract:
Key words :

摘  要: 設計開發(fā)了三維虛擬數(shù)碼單反相機,使學生對數(shù)碼單反相機有直觀形象的認識,,再使用VRML軟件進行交互設計并實現(xiàn)網(wǎng)上發(fā)布,建立逼真的交互式三維虛擬實驗環(huán)境,,實現(xiàn)數(shù)碼攝影虛擬實驗,。
關鍵詞: VRML;JavaScript,;虛擬實驗,;三維建模三維場景,;數(shù)碼單反相機

1 研究思路與開發(fā)平臺的選擇
 目前,,基于網(wǎng)絡對實驗對象進行三維交互展示的有效處理方法是使用專業(yè)的設計軟件,如采用AUTOCAD,、3DS MAX等將實驗對象的三維模型設計出來,。這種方法建模過程直觀形象,但生成的模型和動畫不能與用戶進行交互,,需要將三維模型導出為相關虛擬現(xiàn)實設計軟件所需要的格式文件,,用虛擬現(xiàn)實設計軟件進行三維展示的交互設計,最后將它發(fā)布到網(wǎng)站上[1],。
 經(jīng)過多年的發(fā)展,,虛擬現(xiàn)實技術的實現(xiàn)也派生出多種不同的方法,現(xiàn)在較為流行的有VRML,、Java 3D,、CULT3D、X3D等多種實現(xiàn)方法,。它們各自有不同的優(yōu)缺點,。其中,,虛擬現(xiàn)實建模語言VRML(Virtual Reality Modeling Language)是一種描述大量對象的屬性及相互關系的語言,具有平臺無關性,、三維交互性,、多媒體集成、境界逼真等眾多優(yōu)越的特征,,所以選擇該軟件作為開發(fā)平臺,。雖然VRML可以通過直接編程進行語義描述,建立實驗對象的三維模型,,但這種方法適合建立簡單規(guī)則的模型,。數(shù)碼單反相機主要由機身和鏡頭兩部分組成。機身上又包括取景窗口,、液晶顯示屏,、曝光模式選擇盤、控制撥輪以及各個操作按鈕等,,結構比較復雜,,不宜直接用VRML語言進行語義描述。而是利用3DS MAX建立整個模型,,并賦予材質,、色彩、光照,,導出VRML的格式文件(.*wrl文件),。因此,選擇3DS MAX進行建模,,再使用VRML軟件進行交互設計并實現(xiàn)網(wǎng)上發(fā)布,,建立逼真的交互式三維虛擬實驗環(huán)境,可以讓學生隨時通過網(wǎng)絡瀏覽三維場景,,并通過人機交互進行仿真實驗,。
2 三維虛擬數(shù)碼單反相機的設計與實現(xiàn)
 實驗對象的建模是虛擬實驗開發(fā)過程中最重要的一步,模型的好壞直接影響運行的效果和場景的沉浸度,。為了便于在VRML瀏覽器中設計三維數(shù)碼單反相機的交互,可以真實地模擬實際操作進行鏡頭的旋轉,、曝光模式選擇盤的轉動,、控制撥輪和按鈕的操作等,在對數(shù)碼相機進行建模時,,將其各部分分別建模,,后期組裝。將數(shù)碼單反相機的三維模型建好后,,在3DS MAX中應用輸出插件導出*wrl格式的文件,。在運用3DS MAX模型導出VRML文件后要充分注意優(yōu)化VRML程序,。優(yōu)化技術是三維虛擬建模過程中至關重要的一個環(huán)節(jié),優(yōu)化結果的好壞將直接影響三維數(shù)碼相機的顯示速度和交互效果[2],。
3 使用VRML語言結合JavaScript實現(xiàn)數(shù)碼單反相機的虛擬實驗
 數(shù)碼單反相機虛擬實驗系統(tǒng)共包括四個實驗,,分別是:認識數(shù)碼相機、數(shù)碼相機的調節(jié)模式,、數(shù)碼相機的光圈調節(jié),、數(shù)碼相機快門調節(jié)。
3.1 認識數(shù)碼單反相機模塊的設計與實現(xiàn)[3]
 實驗1是對數(shù)碼單反相機的三維展示,,主要分為:(1)自由旋轉展示,。在這種方式下,相機自動在瀏覽器中旋轉,,讓學習者從不同的角度上觀察相機的結構,。(2)手動控制展示。在這種方式下,,學習者可以自主轉動相機,,從不同角度細致地觀察相機。
 為了實現(xiàn)相機的自由旋轉展示,,可以運用時間傳感器節(jié)點(TimeSensor)和方向插補器節(jié)點(OrientationInterpolator),。TimeSensor節(jié)點的作用是創(chuàng)建一個虛擬時鐘,可以像時鐘一樣標記時間的流逝,,設置開始動畫,、結束動畫和控制動畫的播放速度等屬性,并向插補器節(jié)點輸出時間事件,,產(chǎn)生相應的動畫效果,。OrientationInterpolator可改變觀察方向或者改變形狀體的方向。插補器節(jié)點使用一組關鍵時刻和關鍵值來描述一個動畫,。關鍵時刻列表在插補器節(jié)點的key域中指定,,關鍵值列表在插補器節(jié)點的keyvalue域中指定。瀏覽器在渲染時將根據(jù)這些關鍵時刻所對應的關鍵狀態(tài)在場景中通過線性插值計算技術自動生成連續(xù)動畫,。實現(xiàn)自由旋轉展示部分相應代碼如下:
 OrientationInterpolator{   //創(chuàng)建控制動畫的插補器
        key    [0 0.5 1]//指定關鍵時刻列表
        keyValue [//指定對應的旋轉關鍵值列表
            0 1 0 0,,
            0 1 0 3.14,
            0 1 0 6.28
        ]
}
TimeSensor {//創(chuàng)建控制動畫的時間感應器
        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出事件路由到方向插補器節(jié)點,。
 為了能從各種角度來展示相機,運用SphereSensor傳感器節(jié)點,,對相機進行了手動的三維展示,。 SphereSensor節(jié)點用于感知觀察者的拖動動作,,并且計算旋轉角和角度。通過使用它的rotation_changed域輸出變化的參數(shù),,對相機整體進行360°上下左右的旋轉完成相機的手動展示,。代碼如下:
SphereSensor{
        enabled TRUE
}
 ROUTE camera_sd.rotation_changed TO    camera_all.rotation
對于VRML窗口與網(wǎng)頁之間的交互主要是通過JavaScript和VRML中的TouchSensor節(jié)點完成。由于TouchSensor節(jié)點能感知用戶的鼠標事件,,一般的鼠標操作通常有3種:移動,、點擊、拖動,。本設計主要使用了移動操作,,當用戶進行移動操作的時候會使TouchSensor中的isOver公共域變?yōu)門RUE,傳遞出去一個真事件,。在網(wǎng)頁中用JavaScript接收到該事件再運用相應的程序完成相應的操作,,然后在VRML場景中運用Onmousemove感知鼠標的移動事件。VRML場景中主要代碼:
Touchsensor {
    Enabled TRUE
}
 在網(wǎng)頁中對VRML場景運用了Onmousemove感知鼠標的移動事件,,當鼠標作用于VRML場景時會觸發(fā)相應的處理事件javascript代碼,,例如當鼠標移動到LCD顯示屏時,用到了條件判斷語句對其進行判斷:
if(M_e.Nodes("Viewfinder_button").Fields("isOver")==-1){
                display_div(2,,12),;
}
 然后進行相應的處理操作。其中Viewfinder_button是取景器的觸發(fā)傳感器TouchSensor的名稱,。
3.2 數(shù)碼相機曝光模式的選擇模塊的設計與實現(xiàn)

 


 在實驗2中,,要求能模擬真實的數(shù)碼相機的操作,允許學習者通過轉動曝光模式調節(jié)環(huán),,選擇不同的曝光模式,。每一種曝光模式都有各自的特點以及適用的場合。實現(xiàn)這一效果,,是在VRML中使用CylinderSensor(圓柱傳感器)與Script節(jié)點的結合實現(xiàn)了用戶與曝光模式選擇盤的交互,。CylinderSensor節(jié)點也可以感知一個觀察者的拖動動作,并且計算轉軸和角度,,通過它的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顯示屏上不同的曝光模式畫面。同時也向瀏覽器環(huán)境傳遞不同的旋轉角度,,瀏覽器根據(jù)不同的旋轉角度來顯示不同的模式說明,。
3.3 光圈與快門的調節(jié)模塊的設計與實現(xiàn)
 實驗3和實驗4分別是針對光圈大小和快門大小進行調節(jié),,然后在模擬的場景中進行拍攝,比較不同的光圈值和快門速度對畫面成像效果的影響,。這樣,,既讓學生掌握了光圈和快門值的調整方法,又讓他們理解了光圈值和快門速度與畫面成像效果的關系,。這兩部分實現(xiàn)的方法相似,,所以在此一并說明。
 以快門速度的調整為例,,通過設置不同的快門速度,,模擬了不同的成像效果。首先通過機身上的調節(jié)按鈕設置快門速度,,如圖1所示,,分別設置快門速度為1/200 s與1/1 000 s。

 然后到模擬的三維場景中進行取景操作,。由于不同的快門速度對成像效果的影響主要是體現(xiàn)在動態(tài)被攝對象上,,所以,在場景中模擬了一輛奔跑的汽車,,按下拍攝,,即可得到模擬的成像效果,如圖2所示,。

 具體實現(xiàn)方法如下:
    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 網(wǎng)絡發(fā)布與插件的自動安裝
 VRML 文件可以采用超級鏈接的方式把HTML文件和VRML 文件鏈接到一起,這對于三維模型的虛擬展示具有十分重要意義,。HTML文件格式的標準并不支持對VRML文檔的嵌入,,但非標準HTML提供<EMBED>標記可實現(xiàn)VRML文檔的嵌入。例如下面的語句實現(xiàn)了VRML文檔camera.wrl在HTML文件中的嵌入,,其中SRC域指定關聯(lián)的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>
 在網(wǎng)頁中要進行對VRML的操作只進行上述嵌入是遠遠不夠的,還要通過javaScript中的M_e=camera.Engine,獲取對相機VRML場景的句柄并賦給M_e,。這樣,,就可以對VRML場景中的每一個節(jié)點中的每一個域和事件的值進行獲取了。
 為了保證用戶機器上能正常播放,,需要在用戶機器上安裝VRML瀏覽器,。可通過以下代碼實現(xiàn)自動安裝:
<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>
 虛擬實驗是開展網(wǎng)絡教學的一個瓶頸,而其中最關鍵的是沒能較好地解決交互性的問題,。利用VRML技術,,結合支持VRML的開發(fā)工具構建一個虛擬實驗環(huán)境,并利用Java提供的支持VRML的開發(fā)包,,實現(xiàn)了用戶與虛擬環(huán)境之間的交互,,可以滿足數(shù)碼攝影虛擬實驗教學的需要。實驗常常是一種協(xié)作性的活動,,合作是實驗過程中一個至關重要的環(huán)節(jié),,因此,要充分利用現(xiàn)代網(wǎng)絡技術,,增強對虛擬實驗的協(xié)同操作,,進一步體現(xiàn)網(wǎng)上實驗的優(yōu)勢[4]。
參考文獻
[1] 田茵.基于虛擬現(xiàn)實的三維產(chǎn)品展示[J].計算機教育,,2009(6).
[2] 張枝軍.電子商務網(wǎng)站中商品三維虛擬展示技術研究[J].商場現(xiàn)代化,,2008(11).
[3] 孫永麗.三維虛擬仿真數(shù)碼單反相機的設計與實現(xiàn)[J].軟件導刊,2010(8).
[4] 張民.遠程虛擬實驗平臺及LabVIEW實驗研究[D].太原:太原理工大學,,2010.

此內容為AET網(wǎng)站原創(chuàng),,未經(jīng)授權禁止轉載。