本研究實作流程如圖 3.3，利用 Cycles Render Engine 將三維場景繪製輸出 為一組具有左、右的立體全景影像，於瀏覽器讀取全景圖片或影片，依據所選擇 的顯示器顯示結果。
24
• Stereoscopic panoramic pairs rendering
A-Frame
• Images mapping for both eyes
25
圖 3.4 輸出立體全景影像之 Blender Cycles 設定示意圖
於瀏覽器以 A-Frame 作虛擬實境應用的網頁實作，概念上想像使用者站於 一圓球空間中，而圓球以全景影像作為環境貼圖。實作上如圖 3.5，為求立體將 分為左、右圓球，分別顯示左、右眼所看到的空間。利用 three.js 裡 layer 的概 念：在 three.js 中，每個相機就是一個 layer object，最多可以控制 32 個 layer 。 每個物體（object）都會有 1 bit 作為 layer 編號，用來控制這個物體在此相機中 的可見與否。在本研究的實作上，將左眼相機的圓球空間設定為 layer 1 ，右眼
26
相機的圓球空間為 layer 2 。對繪製完成的全景影像作讀取，上半部為 layer 1 的 左圓球貼圖；下半部則為 layer 2 的右圓球貼圖。在瀏覽器模式時，預設為 layer 1 的左眼空間。當選取進入虛擬實境模式，則 layer 1 與 layer 2 的圓球空間將分 別顯示於左、右眼，以此達到立體效果。
Image Camera
Browsers
Cardboard Layer 1
Left eye
Layer 2 Right eye
VR Devices
Display
圖 3.5 利用 A-Frame 與 three.js 實作概念
27
第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，場景中，隨著光線灑落室內，經由光線的多次彈 跳，光線在空間中形成自然的採光，襯托出空間中的寬敞與明亮。木質地板上因 為光照產生光暈，木質地板的木紋讓室內更有質感。陰影部份並非如光柵化方法 生硬，以較符合真實世界的柔和半透明陰影繪製。另外，相較於無法完美處理漫 射光的光柵化方法，對於表面非光滑的布製材質，例如：場景中的沙發材質，以 及毛巾細節。光線追蹤的擬真程度讓室內設計概念的呈現更加完善。
28
圖 4.1 立體全景影像結果圖 場景模型取自[33]
29
圖 4.2 立體全景影像細節圖 場景模型取自[33]
30
將繪製完成的立體全景影像讀入利用 A-Frame 開發的 WebVR 應用中，在 尚未進入虛擬實境觀看模式前，於瀏覽器觀看為全景影像預覽模式。於電腦版進 入全螢幕模式，經由滑鼠拖曳改變視角觀看全景影像，圖 4.3。於手機則可擺動 手機，透過陀螺儀感測器改變視角觀看，觀看介面如圖 4.4。以瀏覽器觀看全景 影像雖然無法感受其立體效果，但其優點為不受高規格設備影響，對於室內設計 的概念展示可攜性與相容性高。
圖 4.3 全景影像於瀏覽器全螢幕模式之結果圖
31
圖 4.4 全景影像於行動裝置瀏覽之結果圖
進入虛擬實境模式， A-Frame 利用 Gamepad API 判斷目前使用的裝置，進 行開啟。虛擬實境裝置利用分別顯示左、右影像來達到立體效果。雖然， VIVE 本身對於使用的系統規格要求較高，無法攜帶，且使用成本較高。但是，相較於 行動裝置， VIVE 畫面更新率高達 90 fps，對於頭部擺動、旋轉的運算速度快，
於 VIVE 上觀看影像可以得到較穩定的觀看品質，減少使用者的不適感。利用行 動裝置和 Cardboard 觀看，具有便利性，使用成本也相對較低。但是，容易受到 行動裝置本身解析度影響，觀看品質不一。圖 4.5 為 VIVE 上觀看的影像，圖 4.6 則為於行動裝置上的影像。人類的視覺觀看物體時，左眼影像會偏右，而右眼影 像會偏左，由此達到左右影像疊合。經由測試結果，如圖 4.5、圖 4.6 可以右側 紅色箭頭處可看出，對於同樣的影像，在左、右眼圓球空間作貼圖時， VIVE 的 影像成功模擬此效果。然而，於行動裝置上卻出現左眼影像偏右，右眼影像偏左 的情況。造成此狀況的原因是：當 WebVR 被告知要執行虛擬實境模式時，會利
32
用 Gamepad API 進行設備偵測，依據顯示器規格對雙眼間距以及相關顯示規格 作校正。當無法於瀏覽器偵測到 WebVR API ，應用程式會利用 WebVR-polyfill 函式庫補足需求。如果使用行動裝置，則會以 Google Cardboard 預設的參數作為 設定，使用者的手機規格此一變數因此造成影像的些微偏差。
圖 4.5 於 VIVE 觀看立體全景影像之結果圖
33
圖 4.6 於手機以 Cardboard 觀看立體全景影像之結果圖
非即時繪製靜態的全景影像可以達到接近照片品質的真實感。而其缺點在於 無法於場景中移動。對此，可以利用全景影片彌補無法於場景中移動的缺點。根 據各科技大廠對於其市售的虛擬實境設備所作的規格，建議最佳體驗的畫面更新 率為90 fps，最低不得低於 60 fps。預設路徑的預錄影片，可在繪製前透過設定達 到最佳畫面更新率，相較於光柵化的即時繪製，也更能準確計算移動中映入眼簾 的光影變化。
34