第二章

基于網(wǎng)頁的虛擬現(xiàn)實(WebVR)

及其關(guān)鍵技術(shù)主講教師：賈金原助教：楊寒冰

聯(lián)系方式：

QQ:605360422email同濟大學軟件學院圖形圖像研究中心2.1基于網(wǎng)頁的虛擬現(xiàn)實（WebVR）簡介2.2現(xiàn)有WebVR技術(shù)現(xiàn)狀2.3WebVR的關(guān)鍵技術(shù)2.4VRML/X3D技術(shù)簡介2.5WebVR的輕量化建模技術(shù)2.6WebVR的光影效果增強2.7WebVR的輕量化腳本編程技術(shù)2.8WebVR場景的漸進式下載機制2.9WebVR的前景展望與機遇提綱2.1WebVR系統(tǒng)開發(fā)－VRML篇VRML是第二代Web語言的基礎以網(wǎng)頁為中心的模式轉(zhuǎn)換到一個令人激動的三維世界1997年，VRML被ISO和國際電子工業(yè)協(xié)會IEC定為國際標準，簡稱VRML97特點文本格式編碼，文件小，壓縮比高Vrmlscript腳本語言簡單、易用最直觀的面向?qū)ο缶幊趟枷腴_源、良性可持續(xù)發(fā)展、資源豐富開發(fā)效率高、周期短、開發(fā)成本低2.1WebVR系統(tǒng)開發(fā)－X3D篇X3D(Extensible3DSpecification)基于XML的VRML有機擴展，2003年，ISO又制定了X3D作為新的Web3D國際標準特點基于XML的編碼格式更易于網(wǎng)頁集成，更易于與下一代WebServices技術(shù)有機融合基于組件的結(jié)構(gòu)使之具有更好的兼容性與可擴展性輕量化的內(nèi)核硬件上，適用于圖形工作站、PC機、PDA、數(shù)字機頂盒、手機等軟件上，美國著名的海軍研究院（NavyPostgraduateSchool,NPS）擬將X3D技術(shù)應用與NPSNET-V中2.2WebVR的若干關(guān)鍵技術(shù)輕量化的虛擬場景建模技術(shù)輕量化的WebVR互動程序設計技術(shù)輕量化的WebVR引擎大規(guī)模WebVR虛擬場景的快速下載機制高效的WebVR的體系支撐架構(gòu)面向WebVR的軟件工程方法2.3目前主流WebVR瀏覽器(引擎)的比較：VRMLVRPPV3DUnity3DQuest3DVirtools效果★★★★★★☆★★★★★★★★★★☆★★★★★性能★★★☆★★★★★★★★★★☆★★★★★★★★可交互性★★★★★★★★★★★★★★★★☆★★★★★★★★☆場景壓縮比★★★★★★★★★★★★★★★★★★☆★★☆引擎輕量性★★★★★★★★★★★★★★☆★★★★★★★☆可編程性★★★★★★★☆★★★★★★★★☆★★★★☆★★★★2.4WebVR引擎的初步分析對于小規(guī)模WebVR場景，要求較強的網(wǎng)頁級互動性，即時響應的瀏覽速度，建議采用免插件安裝的P(aperVision)

3D技術(shù)最合適。對于中規(guī)模WebVR場景，要求較強的網(wǎng)頁級互動性，較頻繁的場景更新，較高的文件壓縮比，建議采用VRML/X3D技術(shù)較為合適。對于大規(guī)模虛擬場景，要求較強的網(wǎng)頁級互動性，重復訪問頻率低（往往是一次性的訪問），對于文件壓縮比和引擎大小的要求較高，建議采用U3D技術(shù)較為合適。2.4目前VRML應用中存在的誤區(qū)過分依賴壓縮比，不考慮模型的數(shù)據(jù)量與制作方法的聯(lián)系——輕量化模型制作的重要性光影效果表現(xiàn)差強人意對VRML的理解不深入，缺乏面向?qū)ο缶幊趟悸穼υS多的擴展節(jié)點缺乏了解與深入認研究VRML效率低，缺乏面向VRML的高效圖形算法表現(xiàn)手法單一，缺少與多媒體的有機結(jié)合僅注重單純的瀏覽漫游，缺乏軟件工程體系思想，無后臺，無數(shù)據(jù)庫，無通訊漫游模式單調(diào)，幾乎完全依賴瀏覽器所提供的幾種漫游模式我們的對策以及

開發(fā)WebVR的技術(shù)路線WebVR的輕量化建模靜態(tài)虛擬場景的輕量化建模動態(tài)虛擬場景的輕量化建模WebVR的輕量化虛擬互動程序設計盡量減小VRML/X3D的程序代碼量提高VRML/X3D代碼的運行效率WebVR的后臺體系架構(gòu)數(shù)據(jù)庫、J2EE、Ajax、SOA等的集成面向WebVR的軟件工程參照游戲與GIS的軟件工程思想與模式2.5WebVR的輕量化建模技術(shù)原則盡可能地減少模型的三角網(wǎng)格面片數(shù)量盡可能地縮小貼圖的尺寸\大小盡可能地重復使用紋理\材質(zhì)\貼圖單體模型的重用盡量保證幾何精度與光影效果影響建模精度的幾個因素畫面表現(xiàn)度重用度交互度2.5WebVR的輕輕量量化化建建模模實實例例靜態(tài)態(tài)輕輕量量化化建建模模的的實實例例虛擬擬校校園園虛擬擬商商城城外外景景前景景與與背背景景的的和和諧諧融融合合動態(tài)態(tài)輕輕量量化化建建模模的的實實例例瀑布布河流流樹木木與與森森林林例1：瀑布布－－輕輕量量化化的的動動態(tài)態(tài)建建模模非輕輕量量化化建建模模－－粒粒子子系系統(tǒng)統(tǒng)傳輸輸效效率率較較高高運行行效效率率太太低低基于于位位置置插插播播器器的的建建模模傳輸輸效效率率較較高高運行行效效率率更更高高效果果甚甚佳佳虛擬擬樹樹木木的的輕輕量量化化建建模模方方法法（一一））－基基于于幾幾何何的的樹樹木木建建模模方方法法制作作方方法法：：3Dmax直接接生生成成面數(shù)數(shù)：：9758顯示示效效果果：：較較好好顯示示效效率率：：差差未經(jīng)經(jīng)壓壓縮縮代代碼碼量量：：1.10M經(jīng)壓壓縮縮后后代代碼碼量量：：320KB貼圖圖容容量量：：9.6KB虛擬擬樹樹木木的的輕輕量量化化建建模模方方法法（（二二））－基基于于Billboard的樹樹木木建建模模方方法法制作作方方法法：：廣廣告告牌牌Billboard面數(shù)數(shù)：：1顯示示效效果果：：差差顯示示效效率率：：高高未經(jīng)經(jīng)壓壓縮縮代代碼碼量量：：227字節(jié)節(jié)經(jīng)壓壓縮縮后后代代碼碼量量：：176字節(jié)節(jié)貼圖圖容容量量：：206KB虛擬擬樹樹木木的的輕輕量量化化建建模模方方法法（三三））－基基于于模模型型與與Billboard的混混合合方方法法制作作方方法法：：模模型型+廣告告牌牌相相結(jié)結(jié)合合面數(shù)數(shù)：：157顯示示效效果果：：動動態(tài)態(tài)效效果果－－好顯示示效效率率：：高高未經(jīng)經(jīng)壓壓縮縮代代碼碼量量：：25.4KB經(jīng)壓壓縮縮后后代代碼碼量量：：7.39KB貼圖圖容容量量：：106KB虛擬擬樹樹木木的的輕輕量量化化建建模模方方法（（四四））－基基于于規(guī)規(guī)則則的的樹樹木木輕輕量量化化建建模模方方法法制作作方方法法：：基基于于L-System規(guī)則則面數(shù)數(shù)：：1個圓圓臺臺面面顯示示效效果果：：動動態(tài)態(tài)生生長長過過程程－－極好好顯示示效效率率：：高高未經(jīng)經(jīng)壓壓縮縮代代碼碼量量：：1.6KB經(jīng)壓壓縮縮后后代代碼碼量量：：0.69KB貼圖圖容容量量：：10KB虛擬擬森森林林生生成成系系統(tǒng)統(tǒng)快速速地地生生成成虛虛擬擬森森林林效果果比比Billboard更加加動動態(tài)態(tài)逼逼真真樹木木數(shù)數(shù)量量龐龐大大，，但但渲渲染染速速度度快快文件件小小，，便便于于網(wǎng)網(wǎng)絡絡傳傳輸輸基于于VRML的虛虛擬擬森森林林編編輯輯器器WebVR中光光影影效效果果的的輕輕量量化化實實現(xiàn)現(xiàn)－烘焙焙技技術(shù)術(shù)的的應應用用－采用用VRay渲染染器器對對場場景景物物體體進進行行光光影影烘烘焙焙用多多重重紋紋理理貼貼圖圖表表現(xiàn)現(xiàn)光光影影影視視級級虛虛擬擬現(xiàn)現(xiàn)實實效效果果表表現(xiàn)現(xiàn)避免免了了光光源源計計算算帶帶來來的的顯顯示示復復雜雜度度，，加加快快了了實實時時瀏瀏覽覽速速度度2.6WebVR的輕輕量量化化互互動動腳腳本本程程序序設設計計基于于OOP的UI擴展展節(jié)節(jié)點點庫庫基于于探探針針的的輕輕量量化化碰碰撞撞檢檢測測算算法法WebVR的輕輕量量化化虛虛擬擬導導航航算算法法基于于Cohen-Sutherland編碼碼的的飛飛行行物物的的輕輕量量化化交交互互操操縱縱算算法法基于于VRML的全全景景漫漫游游功功能能的的實實現(xiàn)現(xiàn)VRML中的的視視頻頻在在線線播播放放系系統(tǒng)統(tǒng)基于于OOP的VRML的UI擴展展節(jié)節(jié)點點庫庫的的開開發(fā)發(fā)PROTO擴展展機機制制帶帶來來良良性性、、自自增增長長的的軟軟件件理理念念。。自主主研研發(fā)發(fā)大大量量的的PROTO擴展展節(jié)節(jié)點點庫庫為WebVR系統(tǒng)統(tǒng)的的開開發(fā)發(fā)提提供供了了工工具具集集PROTOTYPE作用UIMenu快速生成隨界面尺寸變化的菜單欄UIDialog快速設置生成完整功能的對話框button按鈕map2D快速生成二維導航地圖其它……基于于H-Anim的VRML角色色互互動動設設計計基于于探探針針的的輕輕量量化化VRML碰撞撞檢檢測測算算法法（（1）前進進障障礙礙物物檢檢測測基于于探探針針的的輕輕量量化化VRML碰撞撞檢檢測測算算法法（（2）前進進地地形形檢檢測測：：基于于探探針針的的輕輕量量化化VRML碰撞撞檢檢測測算算法法（（3）高度度障障礙礙物物檢檢測測基于于探探針針的的輕輕量量化化VRML碰撞撞檢檢測測算算法法（（4）前進行為為條件成成立VRML虛擬世界界的輕量量化導航航算法（（一）大規(guī)模VRML環(huán)境的瀏瀏覽問題題面積規(guī)模模廣大，，布局結(jié)結(jié)構(gòu)復雜雜缺乏有效效的導航航信息用戶將會會迷失方方向在虛擬世世界中毫毫無意義義地徘徊徊無法找到到預期的的目標從而失去去繼續(xù)瀏瀏覽、觀觀看的信信心和興興趣VRML虛擬世界界的輕量量化導航航算法（（二）高效的大大規(guī)模VRML世界的虛虛擬導航航算法優(yōu)化的道道路導航航算法可回溯的的盲人爬爬山算法法近似最優(yōu)優(yōu)，精度度達到了了95％以上其準確度度也能達達到虛擬擬漫游的的需要隨著節(jié)點點數(shù)的增增加，精精度也隨隨之增加加，并最最終收斂斂至100％用VRMLscript實現(xiàn)直接與VRML耦合在一一起高效并易易于實現(xiàn)現(xiàn)沒有采用用JavaEAIVRML中的在線線視頻播播放技術(shù)術(shù)虛擬家居居裝修與與科普影影院在虛擬空空間中在在線觀看看科普視視頻基于RSTP流媒體協(xié)協(xié)議傳輸輸2.7WebVR的體系支支撐架構(gòu)構(gòu)過去的VRML系統(tǒng)無后臺無數(shù)據(jù)庫庫而今基于J2EE的后臺管管理系統(tǒng)統(tǒng)數(shù)據(jù)庫基于AJAX的高效通通訊模式式大規(guī)模WebVR場景的漸漸進下載載模式WebVR的體系支支撐架構(gòu)構(gòu)－Web通訊模式式的新應應用（1）傳統(tǒng)Web應用的通通訊模式式請求－等等待－響響應－再再請求的的循環(huán)用戶體驗驗是割裂裂的BrowserUserinterfaceWebServerJSP/ASP/…DB/FileSystemResponseRequestClientServerTimeUseractivityServerprocessingDataDataDataDataWebVR的體系支支撐架構(gòu)構(gòu)－Web通訊模式式的新應應用（2）Ajax異步通訊訊模式無需忙等等待采用局部部刷新連貫的用用戶體驗驗BrowserUserinterfaceServerWeb/XML…DB/FileSystemResponseRequestClientServerTimeUseractivityServerprocessingAjaxengineJavaScriptcallDOM/CSSAjaxProcessDataDataDataDataDataInputInputInputDisplayDisplayDisplayVRML與Ajax的結(jié)合（（1）結(jié)合的方方式以XML為載體通過Ajax技術(shù)實現(xiàn)現(xiàn)VRML虛擬場景景數(shù)據(jù)的的按需動動態(tài)請求求與下載載結(jié)合的意意義減輕服務務器傳輸輸大規(guī)模模場景數(shù)數(shù)據(jù)的負負載與帶帶寬消耗耗避免客戶戶端一次次性渲染染大規(guī)模模場景而而導致漫漫游速度度緩慢通過把復復雜算法法嫁接到到服務器器端，實實現(xiàn)靈活活的人機機交互應應用VRML與Ajax的結(jié)合（（2）VRML與Ajax交互模式式示意圖圖VRML場景Script節(jié)點Ajax引擎事件觸發(fā)事件響應后臺請求數(shù)據(jù)返回數(shù)據(jù)J2EE與Ajax的結(jié)合（（2）J2EE與Ajax交互模式式示意圖圖J2EE服務器組件客服端瀏覽器Ajax引擎ConnectionPoolJavaBeansJSP/Servlet發(fā)送請求返回結(jié)果2.8大規(guī)模WebVR的網(wǎng)上漸漸進式下下載機制制基于AOI（AreaofInterests）的思想漸進式AOI的VRML下載策略略與多線程程下載策策略相結(jié)結(jié)合正在進行行中的研研發(fā)工作作(1)光影效果果方面程序化（（Shader）著色器器在VRML上的應用用體系支撐撐架構(gòu)方方面采用DWR（DirectWebRemoting，WEB遠程調(diào)用用）框架架客戶端無無需再處處理XMLHttpRequest對象以及及服務器器的響應應后臺無需需編寫Servlet把請求轉(zhuǎn)轉(zhuǎn)化為對對JavaBeans的調(diào)用更為靈活活的多人人在線交交互模式式更為高效效的多路路組播通通訊技術(shù)術(shù)正在進行行中的研研發(fā)工作作(2)WebVR場景的輕輕量化方方面虛擬場景景的參數(shù)數(shù)化存儲儲與生成成基于函數(shù)數(shù)的VRML/X3D的擴展節(jié)節(jié)點庫面向WebVR的軟件工工程WebVR的項目開開發(fā)模式式有很多多獨特性性需求分析析成本估算算項目管理理團隊組建建文檔管理理正在進行行中的研研究課題題（1）WebVR的輕量化化建模研究目標標高效、通通用、低低成本的的輕量化化建?；趫D像像的輕量量化3D模型重建建除了傳統(tǒng)統(tǒng)的網(wǎng)格格面片精精簡技術(shù)術(shù)之外如何提取取最小尺尺寸的可可重用紋紋理貼圖圖基于多張張圖像的的樹木植植物L-System重建與Autodesk中國研究究院合作作基于多張張圖片的的樹木植植物的參參數(shù)化建建模中科院自自動化所所與法國國INRIA合作基于AMAP的樹木植植物的輕輕量化建建模正在進行行中的研研究課題題（2）掃描性3D模型的精精簡基于數(shù)字字幾何特特征的模模型精簡簡輕量化的的WebVR模型數(shù)據(jù)據(jù)庫構(gòu)建本地地3D模型庫基于文本本、草圖圖與圖像像的綜合合智能搜搜索網(wǎng)上3D模型資源源的智能能挖掘基于視頻頻的輕量量化的WebVR行為數(shù)據(jù)據(jù)庫虛擬行為為仿真計計算虛擬情感感分析與與計算正在進行行中的研研究課題題（3）開發(fā)輕量量化的WebVR引擎（超）大大規(guī)模的的虛擬場場景的網(wǎng)網(wǎng)上實時時漫游高效的WebVR物理引擎擎大規(guī)模虛虛擬群體體的行為為仿真（（含實時時碰撞算算法）更高端的的WebVR的體系支支撐架構(gòu)構(gòu)SOA，OracleSpatial等對這些海海量的空空間數(shù)據(jù)據(jù)進行更更為有效效的調(diào)度度與管理理（超）大大規(guī)模WebVR場景的的網(wǎng)上上流式式漸進進下載載機制制基于EAOI(ExtendedAOI)P2P網(wǎng)格計計算/普適計計算在在WebVR上的應應用用實驗室室所承承擔的的WebVR課題中國數(shù)數(shù)字科科技館館－體體驗館館二級級子課課題網(wǎng)上虛虛擬車車展系系統(tǒng)國際合合作項項目法國農(nóng)農(nóng)業(yè)研研究中中心，，INRIA數(shù)字植植物實實驗室室崇明島島生態(tài)態(tài)環(huán)境境虛擬擬仿真真系統(tǒng)統(tǒng)上海市市重點點科技技攻關(guān)關(guān)基金金項目目網(wǎng)上大大規(guī)模模虛擬擬展示示的若若干關(guān)關(guān)鍵技技術(shù)的的研究究兩個虛虛擬旅旅游項項目湛江虛虛擬旅旅游與與珠海海虛擬擬旅游游系統(tǒng)統(tǒng)…………………………………………………….2.9WebVR的輝煌煌前景景與潛潛在機機遇??！WebVR掀起了了一場場互聯(lián)聯(lián)網(wǎng)行行業(yè)的的革命命浪潮潮由2D到3D由靜態(tài)態(tài)到動動態(tài)有數(shù)