虛擬實境與全景影像於室內設計之應用

全文

(1)國立臺灣師範大學資訊工程研究所碩士論文. 指導教授：張鈞法博士. 虛擬實境與全景影像於室內設計之應用 Application of Virtual Reality and Stereoscopic Panorama for Interior Design. 研究生：張祐瑄撰中華民國一百零六年七月.

(2) 摘要購買房屋是許多人努力追求的生活目標，人口數增加使得居住密集度越來越高，如何有效利用空間，兼顧生活機能與個人風格，成為一大課題。室內空間的經營與運用搭載著許多人的夢想，與人們居於其中如何生活、如何和空間產生互動息息相關。而室內設計師則幫助客戶滿足期望，將夢想實現。虛擬實境的發展能讓室內設計師與客戶之間更有效地進行溝通，在有限的空間、時間與成本壓力之下，讓空間的實用性與個人風格化的空間設計產生連結。因此，本研究以虛擬實境於室內設計之應用為目的，探討如何以較高擬真效果的非即時繪製方法產生立體全景影像，讓空間中的光影變化、裝飾材料、色彩設計、傢俱、燈具和陳列品更完美呈現於使用者的眼前。本研究分為非即時影像繪製、立體全景影像的製作原理，以及虛擬實境跨平台應用等三部分作討論，研究結果顯示：即使場景相對複雜，非即時影像繪製方法相較於光柵化的即時繪製更具真實感，且更能得到穩定的虛擬實境體驗品質。透過改變繪製方法的相機設定，讓使用者得以於虛擬實境頭戴顯示器中觀看具立體效果的全景影像。另外，利用 WebVR API 可以輕易達到虛擬實境跨平台應用；然而，對於不同平台間的相容性仍有部分待改善之處。本研究的討論結果，可作為室內設計於虛擬實境應用之參考。. 關鍵字：虛擬實境、非即時繪製、立體全景影像、室內設計. I.

(3) Abstract Investing in real estate is a goal to pursue in many people’s lives. As population grows, the high population density makes us think: “How can we manage our interior space effectively with both perfect life function and personal style?” Interior space management and utilization is related to how people live inside this space, and how people interactive with this space. Using their professional knowledge, interior designers make customers’ dreams come true. Under the pressure of limitation of space, time, and cost, designers and customers may want to make interior space functionality and personal style be precisely connected as soon as possible. And applications of virtual reality for interior design does this. Photorealistic pre-rendering is good at physically-based ray tracing that can render lighting, shadowing, and material of furniture and decoration more detailed. For the reason that to enhance users’ experiences, in this research, we set the application of virtual reality for interior design as a goal to achieve, study on stereoscopic panorama via photorealistic pre-rendering for virtual reality. In this research, we discuss pre-rendering, stereoscopic panorama images, and cross-platform applications of virtual reality. As results, panoramic images and videos with complex scenes rendered by pre-rendering are more photorealistic than rendered by real-time rendering, and they are more stable in virtual reality experiences. It is a way to see stereo images in display devices by setting camera modes before rendering. For cross-platform application, although the compatible problem in offset are concerned, WebVR API is still a choice to implement easily.. Index Terms- virtual reality, pre-rendering, stereoscopic panorama, interior design II.

(4) 誌謝論文撰寫之初，我坐在書桌前努力敲打著鍵盤。偶爾思緒理不清的時候，會盯著螢幕想著想著就出了神。想著此時此刻窗外的太陽是否正曬得馬路發燙？這樣炎熱的日子，在戶外移動的人們少了。住家附近的小學近日好像也安靜許多，少了孩子們的嬉鬧聲。點開電腦桌面右下角的日曆，這時才驚覺「啊！暑假又到了呀！」憶起兩年前初次踏入師大校園的那天，我手上緊緊捏著抄寫滿是系上教授與實驗室資訊的紙條。那天我與多位教授約面談，多次鼓起勇氣敲響好幾個實驗室的木門，語無倫次地向學長姊詢問相關資訊。直至今日，已在師大度過了兩年，也成為新生們口中的「學姊」。透過修課學習老師們的專業知識，參與校園活動認識許多貼心的好友，陪伴我走過這兩年的碩士生活。專業領域的學習上，謝謝張鈞法教授引領我進入圖學之門，讓我得以依照自己的節奏進行學習，順利完成我的學業。謝謝柏元與佑欣積極且耐心地為我解答疑問，成為我完成論文的最大助力。碩士的最後一年，庭賜、新予以及俞慶三位學弟的加入為實驗室增添許多歡笑，減輕我為修課與研究煩惱的壓力。待在圖學實驗室的這兩年，我不再只依照喜好判斷動畫與遊戲的可愛程度，而是進一步了解幕後製作的專業，並懂得獨立且自主地學習與探討。孤身在異地求學，非常感謝一路走來陪伴我的朋友們。謝謝旻詣一路以來的陪伴與支持，謝謝同在師大奮鬥的秉善、雯琳、君儒、佳宜，對我總是不藏私地分享你們的資訊，陪我談天紓壓，也一起互相打氣。求學過程偶有挫敗、孤單的時候，你們的陪伴成為我強而有力的後盾！ III.

(5) 遠在家鄉等待的家人們，今年高齡九十六歲阿嬤的牽掛、爸媽的期待與不捨、小姑姑的關心，還有哥哥和妹妹的相伴，對於家人的感謝一切盡在不言中，謝謝你們成就今天的我。就讀研究所的這兩年，對於大家的無限包容與教導，獻上最真摯的感謝，謝謝！謹以此論文獻給每位給予我幫助與鼓勵的人。. 張祐瑄謹致國立臺灣師範大學資訊工程研究所中華民國 106 年 7 月. IV.

(6) 目錄摘要.................................................................................................................................. I Abstract .......................................................................................................................... II 誌謝............................................................................................................................... III 目錄................................................................................................................................ V 圖目錄..........................................................................................................................VII 表目錄........................................................................................................................... IX 第1章. 緒論..................................................................................................... 1. 1.1. 研究背景............................................................................................. 1. 1.2. 研究目的............................................................................................. 2. 1.3. 論文架構............................................................................................. 3. 第2章. 文獻探討............................................................................................. 4. 2.1. 非即時繪製......................................................................................... 4. 2.2. 人類的立體視覺................................................................................. 8. 2.3. 虛擬實境頭戴顯示器之視覺原理................................................... 10. 2.4. 立體全景影像繪製方法................................................................... 11 2.4.1. 立體全景影像之深度線索...................................................... 12. 2.4.2. 全景影像繪製之立體相機原理.............................................. 15. 第3章. 研究方法與實作............................................................................... 19. 3.1. HTC VIVE ........................................................................................ 19. 3.2. 小米 VR 眼鏡基礎版 ..................................................................... 20 V.

(7) 3.3. Blender 與 Cycles Render Engine .................................................. 21. 3.4. WebVR .............................................................................................. 22. 3.5. A-Frame ............................................................................................ 22. 3.6. 實作方法........................................................................................... 23. 第4章. 結果與討論....................................................................................... 27. 第5章. 結論與未來方向............................................................................... 34. 5.1. 結論................................................................................................... 34. 5.2. 未來方向........................................................................................... 35. 參考文獻....................................................................................................................... 36. VI.

(8) 圖目錄圖 2.1 光線追蹤示意圖................................................................................................ 5 圖 2.2 陰影示意圖........................................................................................................ 6 圖 2.3 折射效果示意圖................................................................................................ 6 圖 2.4 光照示意圖......................................................................................................... 7 圖 2.5 立體視覺原理.................................................................................................... 9 圖 2.6 光角示意圖........................................................................................................ 9 圖 2.7 雙眼交疊示意圖.............................................................................................. 11 圖 2.8 螢幕寬長比與雙眼交疊比例關係.................................................................. 11 圖 2.9 正視差.............................................................................................................. 13 圖 2.10 負視差............................................................................................................ 14 圖 2.11 零視差 ............................................................................................................ 14 圖 2.12 兩異軸像機的製圖概念................................................................................ 15 圖 2.13 兩同軸相機的製圖概念................................................................................ 16 圖 2.14 相機平行設置................................................................................................ 16 圖 2.15 相機聚合設置................................................................................................ 17 圖 2.16 相機聚合設置的結果示意圖........................................................................ 17 圖 2.17 相機離軸設置示意圖.................................................................................... 18 圖 3.1 以 Cycles 繪製的場景圖 ............................................................................... 21 圖 3.2 A-Frame 程式實作示意圖 ........................................................................... 23 圖 3.3 實作流程圖...................................................................................................... 24 VII.

(9) 圖 3.4 輸出立體全景影像之 Blender Cycles 設定示意圖 ..................................... 25 圖 3.5 利用 A-Frame 與 three.js 實作概念 ........................................................... 26 圖 4.1 立體全景影像結果圖...................................................................................... 28 圖 4.2 立體全景影像細節圖...................................................................................... 29 圖 4.3 全景影像於瀏覽器全螢幕模式之結果圖...................................................... 30 圖 4.4 全景影像於行動裝置瀏覽之結果圖.............................................................. 31 圖 4.5 於 VIVE 觀看立體全景影像之結果圖 ........................................................ 32 圖 4.6 於手機以 Cardboard 觀看立體全景影像之結果圖 ..................................... 33. VIII.

(10) 表目錄表格 3.1 HTC VIVE 規格 ........................................................................................... 19 表格 3.2 HTC VIVE 最低系統需求 ........................................................................... 20 表格 3.3 小米 VR 眼鏡基礎版 ................................................................................ 21. IX.

(11) 第1章. 緒論. 1.1 研究背景淺談虛擬實境（virtual reality；VR）的歷史，顧名思義，即是使用者在一虛擬場景中有如身歷其境。虛擬實境利用顯示器技術以及電腦技術模擬產生三維（three-dimensional；3D）空間的虛擬世界。目前虛擬實境設備大多都是設計一個顯示器可以將眼睛周圍的空間完全包覆，在使用者的眼睛周圍建立一個立體、看似真實的虛擬世界。通常還會結合動作感測器，電腦透過感測器得知使用者的肢體動作，產生相對應影像，達到與使用者互動的情境。關於虛擬實境的想法最早可追溯至十九世紀的360°全景壁畫，以畫作360°環繞於空間使觀眾有如站立於歷史場景中。於 1838 年， Charles Wheatstone 研究發現人類的雙眼間隔大約 6 至 7 公分，雙眼看到的物體遠近、角度皆有些微差異，運用雙眼視差法創造出世上第一组的立體圖像，並利用像差原理製作完成第一個立體鏡（stereoscope）。1849 年， David Brewster 運用兩個透鏡製作成一個透鏡立體鏡（lenticular stereoscope），藉由兩台相機模擬兩眼的距離，再用立體鏡觀賞同時拍攝出的照片，使視覺感受不同深度的立體感。1929 年， Edward Link 創造出 Link trainer 首部商業飛行模擬器。此一模擬器透過操控方向舵以及轉向柱來模擬飛機的方向以及俯仰角度。隨著科技時代的演進，人類逐漸發展出更豐富多元的方法來模擬人類的感知。 1930 年代，「虛擬實境」（virtual reality）較為完整的概念首先出現於 Stanley G. Weinbaum 的科幻小說 Pygmalion’s Spectacles 中。故事中，主角一旦戴上這副護目鏡便可以沉浸於有著嗅覺、味覺以及觸覺的全像虛擬世界。1939 年， William 1.

(12) Gruber 創造 View-Master 。現代流行的 Google Cardboard ，以及其他適用於智慧型手機的低成本虛擬實境頭戴顯示器即是依循類似 View-Master 的基本立體鏡設計原理製成。1950 年代中，電影攝影師 Morton Heilig 以打造「未來電影院」為概念打造名為 Sensorama 的體驗劇場，此模擬器主打立體音效、三維場景、嗅覺以及會隨場景模擬振動的座椅。 Sensorama 的出現可謂是沉浸式虛擬實境（immersive VR）的先驅。1960 年， Morton Heilig 設計出 VR 頭戴式顯示器（headmounted display；HMD）。1961 年， Philco 公司開發出首款，配備有陰極射線管和磁性頭部姿勢追蹤功能的虛擬實境頭戴式顯示器── Headsight 。1965 年， Ivan E. Sutherland 提出「 Ultimate Display 」，以電腦顯示三度空間圖像的觀念，也奠定虛擬實境的基礎。虛擬實境發展至二十一世紀，科技大廠推出的虛擬實境設備紛紛進入消費市場。虛擬實境的創新與開發正蓬勃發展。虛擬實境應用層面相當廣泛，例如：軍事、教育、醫學、影視娛樂、時尚流行、建築工程等等，各大領域皆已有相關應用。自主機、電腦、平板電腦和手機等行動裝置之後，虛擬實境將帶來新的技術挑戰。. 1.2 研究目的虛擬實境隨著科技大廠爭相發表技術，其應用也越來越廣泛。在應用上，室內設計是指設計師運用美學和工程技術，針對室內環境作空間規劃以及設計。於此應用可以讓使用者體驗建築的空間感、燈光效果、傢俱、飾品的型態以及材質表現，讓設計師在以三維繪圖軟體將設計理念實現後，將設計概念以虛擬實境呈. 2.

(13) 現給客戶預覽。沉浸式的預覽體驗讓設計概念的呈現更有真實感，成為客戶與室內設計師之間的溝通橋樑。虛擬實境的應用注重於「體感」與「環境」的設計，觀看品質會決定使用者的體驗舒適度。因此，對於畫面運算和處理的要求極高。以目前科技大廠的裝置規格而言，建議畫面更新頻率為 90 fps（frames per second），最低為 60 fps。使用者的電腦必須擁有較高規格的硬體效能，才足以達到良好的觀看品質；否則，容易造成使用者產生頭痛、暈眩、噁心等不適感。規格需求較低的行動式虛擬實境裝置，只需要智慧型手機就能進行體驗，但擬真效果相對較差。本研究以室內設計於虛擬實境裝置呈現的擬真程度為目的，探討非即時繪製（pre-rendering）全景影像的方法，及其於沉浸式虛擬實境的立體效果。希望藉此讓使用者可以輕鬆地在不同平台體驗虛擬實境。. 1.3 論文架構本論文共分為五章，第一章為緒論，說明本研究的背景及目的；第二章為文獻探討，探討選擇非即時繪製的原因，以及欲使全景影像於虛擬實境裝置顯示時具有立體效果的視覺原理與影像繪製方法；第三章為研究方法與實作，介紹本研究使用的實驗設備、環境規劃、軟體以及實作方法；第四章為結果與討論；第五章為結論與未來方向。. 3.

(14) 第2章. 文獻探討. 利用全景影像於室內設計之應用必須了解非即時繪製影像之於室內設計的優、缺點，以及基於虛擬實境頭戴顯示器的眼鏡設計原理，繪製立體全景影像之方法。因此，本研究的文獻探討將針對非即時影像繪製、人類的立體視覺、虛擬實境頭戴顯示器之視覺原理，以及全景影像繪製等四部分進行探討。第一節，將說明非即時影像繪製的優、缺點；第二、三節，則介紹人類的立體視覺，以及虛擬實境頭戴顯示器如何模擬出立體視覺；最後，於第四節討論立體全景影像繪製的方法。. 2.1 非即時繪製非即時繪製（pre-rendering）指利用前製運算所產生的影像，而非即時於硬體運算產生的影像。以基於物理的光線追蹤（ray tracing）產生影像，概念如圖 2.1，從投影平面的每個像素點（pixel）產生光線，對場景中的每個物體作交點測試。若光線與物體相交，則根據物體的位置決定是否位於陰影處，並且，依物體的材質作出折、反射反應，產生第二條光線進行下一層的追蹤。由於每個光源都會發出無數條光線作追蹤，所以，非即時繪製的主要缺點在於要付出許多時間進行運算。. 4.

(15) 圖 2.1 光線追蹤示意圖 [14]. 針對室內設計選擇光線追蹤的非即時繪製法原因是：光線追蹤對於光影效果的優秀表現，以及對於材質表現的高細緻度。以下就幾個層面討論光線追蹤與普遍應用於即時運算的光柵化（rasterization）方法的差異。在陰影的計算上，採用光柵化的非即時繪製基本概念以陰影貼圖（shadow mapping）呈現，會產生鋸齒（aliasing）的問題。如圖 2.2，左圖於角色眼睛下方的陰影處，邊緣有嚴重的鋸齒。為改進陰影瑕疵問題，光柵化衍伸出像是：百分比漸進過濾（percentage closer filtering）、層疊陰影貼圖（cascaded shadow map）等多種方法。百分比漸進過濾指每當對陰影貼圖進行一次採樣時，就對相鄰的圖素（texel）進行採樣，對相鄰圖素全部進行比較，並將比較結果作線性過濾後回傳一個介於 0 與 1 之間的浮點數。透過百分比漸進過濾的方法使得陰影邊界變圓滑，但在與光源夾角較小的平面之處仍可見出現陰影貼圖的圖素的條紋問題。層疊陰影貼圖作法將相機的可視範圍從近到遠分割成多個子視錐，每個視錐繪製一張陰影貼圖，讓近處陰影比遠處陰影精細。但是，當場景越大，貼圖越多就越會造成記憶體空間的浪費。相較於光柵化的方法，以物理性質作為實作概念的光線追蹤加上反鋸齒（anit-aliasing）效 5.

(16) 果如圖 2.2 中間的圖，得到相對圓滑的陰影，右圖為光線追蹤加上柔和陰影（soft shadow）讓陰影更柔和、自然。在折、反射效果上，光柵化以環境貼圖（environment mapping）作反射，這種計算方法在近處無法達到相互反射（interreflection）。如圖 2.2，左圖環境貼圖對於近處並未作出反射，右圖為光線追蹤根據物理性質的相互反射效果。運算更為複雜的折射，光柵化目前還難以呈現出精準的效果，相較之下，光線追蹤略勝一籌。. 圖 2.2 陰影示意圖（左）環境貼圖（中）光線追蹤（右）柔和陰影 [15]. 圖 2.3 折射效果示意圖（左）光柵化（右）光線追蹤 [3]. 6.

(17) 在照明效果方面，光柵化欲實現空間中的照明效果可用光傳遞體積（light propagation volume）此類方法實現，此方法為不需要預先計算的動態全域照明演算法，在體積數據中計算傳播。此方法的缺點為性能較慢，欲在虛擬實境中達到完全擬真的互動應用，必須詳加考慮畫面更新以及即時運算的延遲問題。光線追蹤的部分是以光子的概念模擬照明。在真實世界中，光源發散出光子（photon）於空間中運行。當物體接受到來自光源發出的光線，與光子碰撞會形成直接照明（direct illumination）。光子與場景中不同材質的物體表面碰撞，隨著折、反射繼續彈跳。隨著光子反彈碰撞，光子會吸收所碰撞物體的材質資訊，繼續進行彈跳直至能量減弱消失為止。這樣的情況稱為間接照明（indirect illumination）。例如：鏡面反射光或漫射光皆屬於此。因為場景中有許多光子重複進行碰撞而產生相互照明的效果，最後整個場景佈滿光子，呈現均勻明亮的整體效果，稱為全域照明（global illumination）。如圖 2.4，左圖為直接照明，右圖的全域照明使得空間更為明亮，且具有色彩滲透（color bleeding）的效果。因為全域照明提供大範圍的整體照明，適合室內設計模擬自然採光。. 圖 2.4 光照示意圖（左）直接照明（右）全域照明 [16]. 7.

(18) 除了近乎真實的影像細緻度，非即時繪製通常用於較高規格，且具有高複雜度場景的情況下。預先計算允許場景中具有多種物體、燈光，以及材質等數量較多的多邊形。應用於虛擬實境中，每個畫面皆可預測。透過前製運算，可以輕易達到建議的畫面更新率，減少因為畫面顯示延遲所造成的不適感。. 2.2 人類的立體視覺以人類的生理結構而言，雙眼視覺（binocular vision）指觀測物體的影像被聚焦，並且分別成像於兩眼視網膜上。人眼的視野大約是往內向鼻側60°，往外100°，向上60° ，向下75° ；利用左、右眼分別對物體作訊息的收集得知物體的深度。如圖 2.5 所示，雙眼之間的水平距離使得兩眼視網膜上所形成的同一物體的影像稍有不同，此現象稱為「雙眼視差」（binocular parallax）。當同時使用雙眼觀測物體時，大腦同時接收兩眼的視覺訊息，雙眼像差在大腦皮層的視覺中樞融合成為深度知覺（depth perception），形成立體的視覺，進而得以判斷物體之遠近與深度。單眼水平視野約160° ，大腦融合的交疊區域約120° ，交疊率為75%。. 8.

(19) 圖 2.5 立體視覺原理 [6]. 以物理現象而言，目標物與雙眼之間所形成的角度稱為「光角」（optical angle），光角越大表示物體與使用者之間的視覺距離越近。如圖 2.6 所示，目標物體 1 與雙眼形成角度為θ1 ，較目標物體 2 與雙眼形成的角度θ2 大。在視覺感受上，目標物體 1 與使用者之間的距離較目標物體 2 近。. 圖 2.6 光角示意圖 [17] 9.

(20) 人類視覺觀看物體時藉由多個深度線索（depth cues）判斷空間中物體的相對位置，包括雙眼視差、透視（perspective）、動態視差（motion parallax）、遮蔽（occlusion）、光影變化（lighting and shadows）以及物體的相對大小等深度線索。其中，以雙眼視差最常被視為深度知覺的主因。當雙眼同時作用時，因雙眼間距而產生雙眼像差（binocular disparity）。當雙眼進行調節（accommodation）對焦於不同遠近的目標物時，兩眼會有同時向內聚合的壓力，隨著物體的逼進而增大，產生聚合（convergence）作用，像差的差距因光角增大而變大。. 2.3 虛擬實境頭戴顯示器之視覺原理虛擬實境頭戴顯示器的眼鏡模擬人類的雙眼，如圖 2.7 所示，利用個別顯示左、右眼的影像，使其產生影像的交疊，達到立體視覺。舉例而言，假設顯示器規格是單眼解析度（resolution）：1080 x 1200，寬長比（aspect ratio）為 9:10，單眼對角線視角（field of view）為：100° 。依圖 2.8 所示，對角線視角為100° 可轉換為水平視角77.1°，垂直視角83.1°。欲達到人類雙眼融合交疊率75%，依圖 2.8 可得知雙眼交疊後的對角線視角為：110°，水平視角96.4°，垂直視角仍為83.1°。以 HTC VIVE 為例，頭戴顯示器規格為：（1）解析度：2160 x 1200，單眼解析度：1080 x 1200，寬長比：9 : 10；（2）雙眼交疊後的視角：110° 。因此，可達到模擬人類的立體視覺效果。. 10.

(21) 圖 2.7 雙眼交疊示意圖 [18]. 圖 2.8 螢幕寬長比與雙眼交疊比例關係 [18]. 2.4 立體全景影像繪製方法欲在虛擬實境頭戴顯示器中觀看到具立體效果之全景影像，必須先繪製一組分別顯示於虛擬實境頭戴顯示器左、右眼的全景影像。本節將討論繪製一組可於虛擬實境頭戴顯示器觀看時，具有立體感的全景影像的方法，以及不同方法對於 11.

(22) 立體感和觀看舒適度的影響。. 2.4.1 立體全景影像之深度線索工程圖的基礎繪製法是利用投影原理，於影像中表達出場景中物體的形狀、大小及物體之間的關係。以透視方法進行投影，影像中遠處的物體會較近處物體來得小，且沿著方向相同的物體邊緣延伸會指向於一個消失點（vanish point），藉此可得知影像中的物體於場景中相對的深度與位置。欲使一組左、右全景影像能於視覺中融合達到立體效果必須考慮視覺的深度線索，如 2.2 節所述，人類視覺會因為雙眼視差、調節以及聚合，對觀看到的影像作融合達到立體效果。雙眼聚合時，光角增大，則像差增大。對大部分的人而言，當光角大於6°，表示物體離使用者太近，將導致雙眼難以對焦造成不適。反之，光角太小，表示物體離使用者太遠，將失去立體感。當其中一個深度線索未能正確地融合，使用者容易因此看到兩個未融合的影像，造成觀者暈眩等強烈的不適感。所以，將這三個因素列為考量為必然。使用者觀看顯示器螢幕時，雙眼與螢幕之間的距離即為雙眼產生調節作用的焦距；經由焦距調節而聚合於影像中的一點，此點稱為聚合點（convergence point）。當一個三維場景中的物體投影於螢幕，左、右投影之間的距離，稱為「水平視差」（horizontal parallax）。依據場景中物體與投影平面設置的相對位置，與其產生的視差效果，分為三種視差。如果場景中的物體位於投影平面（projection plane）的後方，使得物體於螢幕成像時，左影像向左偏移，右影像向右偏移。如圖 2.9 所示，使用者雙眼的聚合點將被引導至螢幕的後方，此現象稱為「正視差」（positive parallax）。最大正視差發生在當物體位於無限遠處，此時水平視差與雙眼間距相. 12.

(23) 等。正視差的聚合點位於螢幕後方，但是雙眼調節焦距仍在螢幕上，此種狀況容易造成部分使用者的不適感。. 圖 2.9 正視差 [19]. 如果場景中的物體位於投影平面的前方，使得物體於螢幕成像時，左影像向右偏移，右影像向左偏移。如圖 2.10 所示，雙眼聚合點將被引導至螢幕的前方，此現象稱為「負視差」（negative parallax）。當物體投影於螢幕與雙眼之間距離的二分之一處，此時負視差與雙眼間距相等。隨著物體逼近使用者，負視差逐漸增加，過於靠近使用者的物體易使使用者感到不適。. 13.

(24) 圖 2.10 負視差 [19]. 倘若場景中的物體位於投影平面，使得物體於螢幕成像時，左、右影像完全疊合，如同人類視覺於現實世界觀看物體時的最佳聚合作用。如圖 2.11 所示，雙眼聚合點於螢幕上，此現象稱為「零視差」（zero parallax）。因此，投影平面又稱零視差平面。此時雙眼調節的焦距與聚合點皆在螢幕上，對於使用者的體驗而言，觀看在投影平面上的物體最為舒適。. 圖 2.11 零視差 [19] 14.

(25) 2.4.2 全景影像繪製之立體相機原理全景影像繪製依據相機的設定，分為單像（ monoscopic ）以及立體（stereoscopic）。以環繞場景的圓球繪製方式來看，單像影像即是設置單一相機，對選定的一中心軸作水平環繞繪製而得。此種方法繪製出單一全景影像，而非一組左、右影像，無法達到立體效果。而立體影像是藉由設置兩台相機，繪製出兩張影像來達到立體效果。倘若利用單像影像的方法分別繪製兩張影像，兩相機分別對自己的軸心作旋轉繪製。如圖 2.12 所示，在旋轉之初，兩相機的相對視點位置正確，可產生正確的立體效果；然而，隨著兩相機旋轉，轉至90°時，兩影像沒有像差。此外，當兩相機旋轉至 180°，兩相機的相對視點左、右交換，會產生雙眼交叉的錯誤效果。正確的相機設置應該以模擬人體雙眼與頭部的關係，設置兩台相機對同一軸心作旋轉，而非各自旋轉。如圖 2.13 所示，兩相機中間的距離即對應人體的雙眼間距。. 圖 2.12 兩異軸像機的製圖概念 [20]. 15.

(26) 圖 2.13 兩同軸相機的製圖概念 [20] 由上述可以得知立體影像是由設置兩台相機所繪製，並說明兩台相機軸心如何旋轉與其效果。接下來，將說明兩同軸相機的三種相對關係對於投影結果的影響。繪製全景影像的相機旋轉方式普遍以每次旋轉0.5°至1°的方式繪製影像。當兩相機以對稱視錐的中線分隔，保持平行的可視軸線，兩視錐以水平方向偏移，稱為平行（parallel）方法。如圖 2.14，此方法未設置零視差平面，因此，零視差發生在無限遠處，場景中的所有物體都具有負視差。這種方法比較適合用於視野寬闊、無邊無際欲呈現風景的場景。. 圖 2.14 相機平行設置 [21] 16.

(27) 如圖 2.15，當兩相機模擬雙眼注視於一物體，兩相機透過對稱的視錐沿著中央線向內交於一點，稱為聚合（converged 或 toe-in）方法。如圖 2.16，這種投影方式會因為兩相機的角度差異產生垂直視差（vertical parallax）。觀測畫面時會因為影像的不一致，使得人類的大腦無法將兩影像融合、難以於畫面邊緣對焦，產生影像扭曲的感覺，容易造成眼部疲勞與不適感。. 圖 2.15 相機聚合設置 [21]. 圖 2.16 相機聚合設置的結果示意圖 [22]. 17.

(28) 最常被使用的立體相機設置方法稱為離軸（off-axis）。如圖 2.17，平行設置兩相機的可視軸線來減少垂直視差，並以非對稱的視錐控制零視差投影平面。位於零視差平面之前的物體會成像在螢幕前方，位於零視差平面之後則會成像在螢幕後方，是目前最佳的立體影像繪製方法。. 圖 2.17 相機離軸設置示意圖 [21]. 18.

(29) 第3章. 研究方法與實作. 本章將於第一節介紹本研究實作所使用的軟、硬體設備以及環境，並於第二節說明如何實作在瀏覽器、家用電腦、以及行動裝置上跨平台觀看室內設計全景圖的方法。. 3.1 HTC VIVE HTC VIVE 由 HTC 與 Valve 共同研發，也屬於 Valve 的 SteamVR 專案開發一部分。 SteamVR 是一套虛擬實境系統，包含 OpenVR 、 Chaperone 導護系統、 Lighthouse Tracking 技術以及 HTC VIVE 硬體設備。其中， Chaperone 導護系統為安全牆功能，確保使用者在遊玩區域內能安全地活動。而 Lighthouse Tracking 即是利用密度極大的非可見光探測配戴虛擬實境裝置的使用者位置和動作，並將其模擬在虛擬實境的三維空間中。透過兩個基地台，可以達到相對精準的效果。計算能力非常小、延遲低。 HTC VIVE 裝置包含一組虛擬實境頭戴式顯示器與串流盒、兩台基地台與兩支無線手持控制器，顯示器規格如表格 3.1 所示，表格 3.2 為使用 VIVE 的最低系統需求。表格 3.1 HTC VIVE 規格 [23]. 螢幕總解析度. 2160 x 1200（單眼：1800 x 1200）. 畫面更新率. 90 fps. 可視角. 約110°. 重量. 約 555 公克 19.

(30) 表格 3.2 HTC VIVE 最低系統需求 [24] NVIDIA® GeForce® GTX 970、AMD Radeon™ R9 290 GPU 同級規格或以上 CPU. Intel® Core™ i5-4590/AMD FX™ 8350 同級規格或以上. RAM. 4GB RAM 以上. 視訊輸出 USB 連接埠. HDMI 1.4、DisplayPort 1.2 或更新版本 1 個 USB 2.0 或以上版本的連接埠 Windows® 7 SP1、Windows® 8.1 以上版本、. 作業系統 Windows® 10. 3.2 小米 VR 眼鏡基礎版小米 VR 眼鏡基礎版由小米開發，規格如表格 3.3，已通過相容 Google Cardboard 認證，根據 Google Cardboard 認證標準規範。 Google Cardboard 虛擬實境系統包含硬體與軟體兩部分，硬體部分指依照 Google Cardboard 規範所製作的行動裝置頭戴顯示器。將行動裝置放入頭戴顯示器內，利用行動裝置內建的重力感測器以及陀螺儀追蹤頭部的擺動與旋轉方向。 Cardboard 的軟體開發套件使用 OpenGL ， Google Cardboard 官方目前已提供 SDK 同時支援 Andorid 以及 iOS 平台，於試驗版 Chrome 瀏覽器支援 WebGL 。因此，在軟體部分泛指 Cardboard 的所有應用程式。 20.

(31) 表格 3.3 小米 VR 眼鏡基礎版 [26] 最小適合：4.7 吋適用手機尺寸最大適合：5.7 吋 208.7 公克. 重量. 3.3 Blender 與 Cycles Render Engine Blender 是一套由 Blender 開發的三維繪製自由軟體，具有跨平台特性。無論是影片製作或是遊戲製作，支援所有建模（modeling）、角色骨架綁定（rigging）、動畫（animation）、模擬（simulation）、繪製（rendering）、合成（compositing）和動態捕捉（motion tracking）等功能。而 Cycles 是 Blender 基於光線追蹤開發的繪製引擎（render engine）， Cycles 彈性度佳、更快速，且讓影像繪製更具有照片的真實感，如圖 3.1；另外，也支援 GPU ，加速光線追蹤的繪製速度。. 圖 3.1 以 Cycles 繪製的場景圖 21.

(32) 3.4 WebVR WebVR 是一個實驗性的 JavaScript API ，主要部屬於瀏覽器中以支援各種虛擬實境裝置。使用者只要擁有頭戴顯示器以及相容的瀏覽器，即可輕鬆透過瀏覽器體驗虛擬實境。 WebVR API 目前已經能在以下瀏覽器中執行：實驗性 Firefox ── Nightly 、實驗性 Chrome ── Chromium 、 Android 系統中的 Chrome，以及適用於 GearVR 的 Samsung Internet 瀏覽器。. 3.5 A-Frame A-Frame 是由 Mozilla 開發的網頁框架，主要開發目的是為了建立虛擬實境體驗，提供快速且便利的方法開發 WebVR 。 A-Frame 是基於 three.js 的網頁框架，採用「實體──組件──系統」（entity-component-system；ECS）概念。 ECS 概念是遊戲開發常見的模式，比起傳統程式的層次與繼承型結構， ECS 更強調組合性。實體是系統裡最基礎的物件；組件則是可重複利用的模組，放入實體中賦予其外觀、功能和行為等；而系統則提供環境、服務，並管理組件。舉例而言，當我們在場景中設置一顆圓球，此圓球為一個實體，包含位置、幾何形狀、材質、動作等組件。每一個組件會有其特性，例如：材質裡面可能包含顏色、光澤度等特性。一個繪製系統會繪製所有擁有外觀特性的實體。這樣的概念使得開發者對於程式的開發，功能的分享、擴充、修正有更大的彈性。如圖 3.2 上圖所示，在 A-Frame 中，創造 <a-entity> 為 HTML 元素，以 <a-entity> 元素為基本實體，其他如： <a-box> 、 <a-plane> 、 <a-sky> 為可使. 22.

(33) 用的基本幾何實體。實體中的 HTML 屬性如 <a-entity> 中的 material 屬性即是可重複使用的模組，可利用 JavaScript 如圖 3.2 的下圖，改變其外觀顏色與功能等等。系統則是以 <a-scene> 管理整個場景。開發者透過更改屬性以達到需求。. 圖 3.2. A-Frame 程式實作示意圖. A-Frame 目前支援大部分的虛擬實境頭戴顯示器，例如： VIVE 、Rift 、 GearVR 、 Daydream 以及 Cardboard 。利用 A-Frame 開發 WebVR 讓虛擬實境跨平台更加便利。. 3.6 實作方法本研究實作流程如圖 3.3，利用 Cycles Render Engine 將三維場景繪製輸出為一組具有左、右的立體全景影像，於瀏覽器讀取全景圖片或影片，依據所選擇的顯示器顯示結果。. 23.

(34) Cycles. A-Frame. • Stereoscopic panoramic pairs rendering. • Images mapping for both eyes • Camera layer setting. Display devices • Browsers • HTC VIVE • Cardboard. 圖 3.3 實作流程圖. 欲將三維場景繪製輸出立體全景影像，於 Blender 中選擇「 Cycles Render Engine 」。後續步驟如圖 3.4，步驟一，選擇「 Render Layer 」，將「 Views 」勾選，確認左、右眼皆被選取。步驟二，選擇輸出格式，本研究以 Top-Bottom 為設定。步驟三，至「 Camera 」選擇相機模式。此處選擇「 Panoramic 」，將全景圖設定為「 Equirectangular 」產出長方形投影結果。於「 Stereoscopy 」中選擇「 Off-Axis 」方法，依照顯示器設備調整雙眼間距，以及投影平面的距離。注意雙眼間距的設定應依照人類雙眼間距以及虛擬實境顯示器之兩眼間距作為設定，間距設定過高或過低都會使得使用者的大腦難以融合影像，而產生暈眩感。最後，勾選「 Spherical Stereo 」，將兩相機設定為同軸旋轉。. 24.

(35) 圖 3.4 輸出立體全景影像之 Blender Cycles 設定示意圖. 於瀏覽器以 A-Frame 作虛擬實境應用的網頁實作，概念上想像使用者站於一圓球空間中，而圓球以全景影像作為環境貼圖。實作上如圖 3.5，為求立體將分為左、右圓球，分別顯示左、右眼所看到的空間。利用 three.js 裡 layer 的概念：在 three.js 中，每個相機就是一個 layer object，最多可以控制 32 個 layer 。每個物體（object）都會有 1 bit 作為 layer 編號，用來控制這個物體在此相機中的可見與否。在本研究的實作上，將左眼相機的圓球空間設定為 layer 1 ，右眼 25.

(36) 相機的圓球空間為 layer 2 。對繪製完成的全景影像作讀取，上半部為 layer 1 的左圓球貼圖；下半部則為 layer 2 的右圓球貼圖。在瀏覽器模式時，預設為 layer 1 的左眼空間。當選取進入虛擬實境模式，則 layer 1 與 layer 2 的圓球空間將分別顯示於左、右眼，以此達到立體效果。. Image. Display. Camera Layer 1 Left eye. Browsers Layer 2 Right eye. VR Devices. 圖 3.5 利用 A-Frame 與 three.js 實作概念. 26. Cardboard.

(37) 第4章. 結果與討論. 本研究以 Blender 2.78 採用 Cycles Render Engine ，以及 A-Frame 0.5.0 實作，分別於 Windows 10 、顯示卡規格為： NVIDIA GeForce GTX 1070 的電腦搭載 HTC VIVE ，以及規格為 Android 4.4.2 以上的多支手機加上小米 VR 眼鏡基礎版 Cardboard 上進行體驗與測試。 Cycles 繪製立體全景影像結果如圖 4.1，此立體全景影像分為上下部分，上方為左眼影像，下方為右眼影像。非即時繪製沒有固定限制的時間限度，所以在場景中的環境、物體、燈光、貼圖等都允許使用較多的多邊形個數，以及 4K 或更高解析度的貼圖檔案。即使使用者使用較低規格的硬體設備，也可以繪製出逼真的結果圖。細節部分如圖 4.2，場景中，隨著光線灑落室內，經由光線的多次彈跳，光線在空間中形成自然的採光，襯托出空間中的寬敞與明亮。木質地板上因為光照產生光暈，木質地板的木紋讓室內更有質感。陰影部份並非如光柵化方法生硬，以較符合真實世界的柔和半透明陰影繪製。另外，相較於無法完美處理漫射光的光柵化方法，對於表面非光滑的布製材質，例如：場景中的沙發材質，以及毛巾細節。光線追蹤的擬真程度讓室內設計概念的呈現更加完善。. 27.

(38) 圖 4.1 立體全景影像結果圖場景模型取自[33]. 28.

(39) 圖 4.2 立體全景影像細節圖場景模型取自[33] 29.

(40) 將繪製完成的立體全景影像讀入利用 A-Frame 開發的 WebVR 應用中，在尚未進入虛擬實境觀看模式前，於瀏覽器觀看為全景影像預覽模式。於電腦版進入全螢幕模式，經由滑鼠拖曳改變視角觀看全景影像，圖 4.3。於手機則可擺動手機，透過陀螺儀感測器改變視角觀看，觀看介面如圖 4.4。以瀏覽器觀看全景影像雖然無法感受其立體效果，但其優點為不受高規格設備影響，對於室內設計的概念展示可攜性與相容性高。. 圖 4.3 全景影像於瀏覽器全螢幕模式之結果圖. 30.

(41) 圖 4.4 全景影像於行動裝置瀏覽之結果圖. 進入虛擬實境模式， A-Frame 利用 Gamepad API 判斷目前使用的裝置，進行開啟。虛擬實境裝置利用分別顯示左、右影像來達到立體效果。雖然， VIVE 本身對於使用的系統規格要求較高，無法攜帶，且使用成本較高。但是，相較於行動裝置， VIVE 畫面更新率高達 90 fps，對於頭部擺動、旋轉的運算速度快，於 VIVE 上觀看影像可以得到較穩定的觀看品質，減少使用者的不適感。利用行動裝置和 Cardboard 觀看，具有便利性，使用成本也相對較低。但是，容易受到行動裝置本身解析度影響，觀看品質不一。圖 4.5 為 VIVE 上觀看的影像，圖 4.6 則為於行動裝置上的影像。人類的視覺觀看物體時，左眼影像會偏右，而右眼影像會偏左，由此達到左右影像疊合。經由測試結果，如圖 4.5、圖 4.6 可以右側紅色箭頭處可看出，對於同樣的影像，在左、右眼圓球空間作貼圖時， VIVE 的影像成功模擬此效果。然而，於行動裝置上卻出現左眼影像偏右，右眼影像偏左的情況。造成此狀況的原因是：當 WebVR 被告知要執行虛擬實境模式時，會利 31.

(42) 用 Gamepad API 進行設備偵測，依據顯示器規格對雙眼間距以及相關顯示規格作校正。當無法於瀏覽器偵測到 WebVR API ，應用程式會利用 WebVR-polyfill 函式庫補足需求。如果使用行動裝置，則會以 Google Cardboard 預設的參數作為設定，使用者的手機規格此一變數因此造成影像的些微偏差。. 圖 4.5 於 VIVE 觀看立體全景影像之結果圖. 32.

(43) 圖 4.6 於手機以 Cardboard 觀看立體全景影像之結果圖. 非即時繪製靜態的全景影像可以達到接近照片品質的真實感。而其缺點在於無法於場景中移動。對此，可以利用全景影片彌補無法於場景中移動的缺點。根據各科技大廠對於其市售的虛擬實境設備所作的規格，建議最佳體驗的畫面更新率為 90 fps，最低不得低於 60 fps。預設路徑的預錄影片，可在繪製前透過設定達到最佳畫面更新率，相較於光柵化的即時繪製，也更能準確計算移動中映入眼簾的光影變化。. 33.

(44) 第5章. 結論與未來方向. 5.1 結論虛擬實境裝置的使用越來越普遍，隨著需求的增加，開發者也更積極投注心力於此。但是，目前對於虛擬實境的服務內容還沒有一套標準規範；因此，虛擬實境的應用難以讓所有使用者都達到最佳體驗。當一程式即時更新太慢、畫面解析度太低，亦或是設計未考量體感與環境的設計，都可能導致使用者產生不適感。室內設計之於虛擬實境，有別於以往提供使用者觀看設計圖，虛擬實境能讓使用者在設計被實現前，以沉浸式的方式預先瀏覽以及體驗。這樣的方式不僅利於使用者與室內設計師之間的溝通，也可以減少因為誤判所造成不必要的浪費。以室內設計為出發點，追求更佳的光影效果和物品真實程度，以及讓使用者擁有較好的虛擬實境體驗品質，必須致力於更穩定、更擬真的影像。相較於較難達到此目標的即時運算，非即時運算可以繪製複雜度較高且較真實的場景。雖然無法作即時互動，但仍能以預錄影片的方式達到移動效果。此外，目前已經有許多三維繪製軟體與遊戲開發引擎擴充虛擬實境相關套件，影像的製作已非難事。將非即時繪製應用於虛擬實境，使用者無須擁有高規格的硬體設備去運算虛擬實境中的場景，一樣可以看到高品質的畫面效果。考量跨平台的相容性，將影像匯入 WebVR 以及行動裝置的平台也相對容易。以目前消費市場來看，無論是選擇哪種虛擬實境裝置，這樣低成本的使用設計對於虛擬實境入門的使用新手更為友善。. 34.

(45) 5.2 未來方向本研究未來仍有待改進之處，目前全景影像以前述作法實作雖具備立體感，但是，圓球狀的影像會於空間的正上方與正下方形成明顯的交點縫合（pole merging）問題。提高交點縫合角度可以使縫合點較平滑，卻也同時減弱立體效果。未來希望可以在不影響立體效果的情況下，改善圓球交點的問題。此外，目前是以模擬雙眼的水平間距為概念，對場景作水平環繞作繪製。若以其他方向轉動頭部觀看，視覺上容易產生扭曲變形以及影像無法融合的感覺。未來可以朝此方向作進一步的探討，可望減少暈眩感。. 35.

(46) 參考文獻 [1]. P. Bourke, “Calculating stereo pairs,” Retrieved December, vol. 12, pp. 2006, 1999.. [2]. P. Bourke, "Synthetic Stereoscopic Panoramic Images," Interactive Technologies and Sociotechnical Systems: 12th International Conference, VSMM 2006, Xi’an, China, October 18-20, 2006. Proceedings, H. Zha, Z. Pan, H. Thwaites, A. C. Addison and M. Forte, eds., pp. 147-155, Berlin, Heidelberg: Springer Berlin Heidelberg, 2006.. [3]. P. H. Christensen, J. Fong, D. M. Laur, and D. Batali, "Ray Tracing for the Movie ‘Cars’." pp. 1-6.. [4]. S. Gunkel, M. Prins, H. Stokking, and O. Niamut, "WebVR meets WebRTC: Towards 360-degree social VR experiences." pp. 457-458.. [5]. F. Huang, and Z.-H. Lin, "Stereo panorama imaging and display for 3D VR system." pp. 796-800.. [6]. C. Lee, “3D Cinema Technology and the making of “Seediq Bale” 3D. from Dr,” Charles Lee, charles@ twranimation. com, 2011.. [7]. X. Liu, and J. Qiao, "Research on Chinese Museum Design Based on Virtual Reality." pp. 372-374.. [8]. R. Patterson, “Review Paper: Human factors of stereo displays: An update,” Journal of the Society for Information Display, vol. 17, no. 12, pp. 987-996, 2009.. [9]. S. Peleg, M. Ben-Ezra, and Y. Pritch, “Omnistereo: panoramic stereo imaging,” IEEE Transactions on Pattern Analysis and Machine Intelligence, vol. 23, no. 3, pp. 279-290, 2001. 36.

(47) [10]. I. E. Sutherland, “The ultimate display,” Multimedia: From Wagner to virtual reality, 1965.. [11]. L. Tao, and Y. Wang, "A WebGL-based 3D virtual home roaming by seamlessly connecting videos to panoramas." pp. 498-503.. [12]. Z. Wartell, L. F. Hodges, and W. Ribarsky, “Balancing fusion, image depth and distortion in stereoscopic head-tracked displays,” in Proceedings of the 26th annual conference on Computer graphics and interactive techniques, 1999, pp. 351-358.. [13]. G. Y. Zhang, and L. Zhao, "Web-based virtual walkthrough of panoramas." pp. 233-237.. [14]. ICE, “Ray-Tracing,” Available at: https://www.ice.rwthaachen.de/research/tools-projects/grace/ray-traycing/. [15]. Imagination, “Hybrid rendering for real-time lighting: ray tracing vs rasterization,” Available at: https://www.imgtec.com/blog/hybridrendering-for-real-time-lighting/. [16]. MGBoom, “GI Concept In Maya : Maya Gi 照明的核心觀念,” Available at: http://www.mgboom.com/2014/11/gi-concept-in-mayamaya-gi.html. [17]. PIDA, “3D 立體顯示應用產業像況與未來發展,” Available at: http://www.pida.org.tw/optolink/optolink_pdf/98118414.pdf. [18]. Sensics, “Binocular Overlap,” Available at: http://sensics.com/what-isbinocular-overlap-and-why-should-you-care/. [19]. 3D Forums, “Stereoscopic Parallax,” Available at: https://www.3dforums.com/threads/stereoscopic-parallax.4/ 37.

(48) [20]. Google, “Rendering Omni‐directional Stereo Content,” Available at: https://developers.google.com/vr/jump/rendering-ods-content.pdf. [21]. eleVR, “CG & VR Part 1 – Rendering Challenges,” Available at: http://elevr.com/cg-vr-1/. [22]. Doc-Ok.org, “Good stereo vs. bad stereo,” Available at: http://docok.org/?p=77. [23]. Wikipedia, “HTC Vive,” Available at: https://zh.wikipedia.org/wiki/HTC_Vive. [24]. VIVE, Available at: https://www.vive.com/tw/. [25]. SteamVR, Available at: http://steamvr.com. [26]. 小米, Available at: http://www.mi.com/tw/. [27]. Google Cardboard, Available at: https://vr.google.com/intl/zhTW/cardboard. [28]. Blender, Available at: https://www.blender.org/. [29]. Cycles, Available at: https://www.blender.org/features/cycles/. [30]. Blender Guru, Available at: https://www.blenderguru.com/. [31]. WebVR API, Available at: https://developer.mozilla.org/enUS/docs/Web/API/WebVR_API. [32]. A-Frame, Available at: https://aframe.io/. [33]. ermmus, “Sunny Room,” Available at: https://www.blendswap.com/blends/view/53286. 38.

(49)