1
2020年全國技專校院學生實務專題製作競賽暨成果展 研究成果報告書
智慧3D 實境賞屋系統
參賽類群：英文代碼 C 資工通訊 類群
109年 3 月 11日
摘要
時下的看屋模式有2D 照片、實際請 房仲帶看，以3D 模型呈現的廠商也漸漸 發跡，然而，目前市面上的以3D 實作的 看屋導覽需要投入大量的時間與人力成 本來完成房屋的建置。為了在有限的資 源下讓建置成本降到到最低，我們導入 了 AI 來自動生成房屋模型，讓人力成本 大幅減少，並以 WebGL 開發使用者界面，
達到跨平台的需求。目前國內已有數家 廠商導入此技術。
我們想透過房屋的全景圖照片一步 步還原出房屋的三維結構，進一步建構 出房屋的3D 模型，使用 WebGL 將全景圖 貼到模型上，透過半自動化流程整合出 各個房間的拼接資訊，將整個房屋完整 的顯示在使用者眼前。利用一連串的攝 影機運動動畫結合 VR 技術穿梭於模型之 中，讓使用者能有沉浸式的 VR 賞屋體驗。
並且讓系統克服所有平台限制讓使用者 能“隨時、隨地、不限裝置”的進行賞 屋。
前言：
現在的房屋觀賞模式大多還是停留 在圖片或房仲現場帶看的方式。本專題 的主要目的就是希望能透過一系列房屋 的全景圖，藉由這些全景圖還原房間的 三維結構，將房屋內不同房間結構組合 再一起，最後整合出該房屋的整體三維 結構，再透過 VR 或網頁的方式提供沉浸 式的賞屋體驗。
重建三維結構的過程雖然希望達到 全自動化流程去運作，但是免不了人工 編輯與檢查的部分，為了加速並簡化整 個流程的進行，希望可以盡量將編輯器 設計成使用者只須輸入各房間全景圖，
然後透過簡單的操作與檢查自動化輸出 的結果之後即可觀賞房屋。這樣的方式 不只讓看房方式可以更加豐富，並且也 達到了去門檻的效果，讓使用者可以不 須學會複雜的操作也可以製造出一間房 屋的完整三維結構。
3
壹、現有相關研究與概況比較
：
GeoCV 與四維看看：
這兩間公司都有提供了這種網頁房 屋三維結構觀賞的功能，其中 GeoCV 更 是支援了不規則形狀的房間結構 （左 圖），而四維看看(右圖)大多只支援直 角形狀的房間結構，但兩者基本上都是 透過人工去重建這些三維模型，所以門 檻非常高，基本上房價必須要高到一個 程度的客戶才會使用這樣的方式去呈現，
而本專題想要達成的效果即是僅透過裝 置所拍攝的全景圖資源，不需要使用者 會使用複雜的三維編輯軟體就可以重構 出房屋的整體三維結構的編輯器。
貳、本專題特點
一、 拋棄原有2D 照片，使用全景圖3D 模型增加空間感
二、 不需複雜建模過程，快速建置模 型環境
三、 成本低，只需房間全景圖就能自 動產生3D 模型
四、 不需要人力介入，自動生成平面 圖
五、 WebGL 開發克服平台限制
GeoCV
四維看看
參、設計原理
本專題有與 iStaging 愛實境宅妝股 份有限公司合作，房屋全景圖的搜集是 透 過 該 公 司 與 房 仲 業 合 作 ， 利 用 insta360或 iStaging 公司所開發的裝置 搭配手機，就可以在房屋內部定點拍攝 全景圖，以這些資料來作為流程的資料
來源。
下列流程以一間房屋為單位去進行 說明，依照運算順序為：房間三維結構 預測、房型種類預測、門窗預測、全景 圖分群、房間結構優化以及房屋串聯。
一、 房屋三維結構預測（自動化）
運算說明：
這 個 部 分 是 引 用 了 DuLa- Net[S-T Yang CVPR 2019]的方法 去透過全景圖預測每張全景圖的房 間三維結構，DuLa-Net 會將來原圖
片做 manhattan align,讓房間墻面 皆調整為 x、z 方向(直角形狀的房 間結構)，經過 manhattan align 處理完透過訓練好的模型再預測該 全景圖的三維結構。
5
二、 房間種類預測（自動化）
運算說明：
利用 Resnet-50網絡結構訓練 房型種類模型，目前能夠分類的模 型有：臥室、客廳、廚房、陽台、
浴室、餐廳、和空房。為了能夠讓 這模型更能分辨台灣房間種類，因
此在訓練集裡加入許多台灣的各種 房型訓練。那房間種類預測的方法 是從全景圖裡抓取 feature 來做預 測，然後會產生出各個分類的的機 率預測，透過這個機率提供給後續 全景圖分群。
三、 門窗預測（自動化） 運算說明：
利用 pytorch 內已經訓練好的 模型去標記在三維結構裡的門窗、
通道的位置，讓後面的流程進行房 間串接流程時，每個房間的相對位
置會是正確的，若是沒有提供鏈接 點的資訊，系統會無法得知兩個房 間要在哪個位置串接。
四、 全景圖分群（自動化）
運算說明：
因為在拍攝時的各種因素，例 如：房間大小、拍攝者習慣。。。
等因素，使得每間房間不一定只會 拍攝單張全景圖，但是後面房間串 接的部分只需要以房間以單位去進 行組合即可，並不需要取用所有的 全景圖，所以必須將統一房間的全 景圖做分群的動作。
除此之外整合分群能夠讓三維 結構優化，因為單張全景圖有部分 結構因為相機視角的關係而被遮蔽 住或是資訊不足，所以透過拍攝多 張全景圖再整合來彌補相機視角的 缺點。因此這部分需要將全景圖分 群，將同屬於一個房間的全景圖歸 類起來。
五、 房間結構優化(自動化)
運算說明:
透過前面的分群結果，可以利 用此資料來整合房間不同全景圖的 三維結構，以解決因視角問你而缺 漏的三維結構資訊，以達到優化結 構的效果，讓各個房間的三維結構 能更接近真實情況。
（一） Registration:
嘗試在每張全景圖的集合 結構中定位出共同的結構，
並以此基準計算出全景圖
（二） Layout merge:
透過圖論分析，擷取與整 合每張全景圖間的幾何資 訊以及相對位置，產生出 更完整的整合結構，能夠 包含所有視角資訊。
（三） Geometry optimization：
將前一步驟中產生的整合 結 構 重 投 影
（reprojection）至所有 房間的全景圖上，藉由最
7
六、 房間自動拼接整合（自動化）
運算說明：
將房間分群和數量確定了以後，
就可以綜合利用前面的門窗資訊來 連接各個房間，透過演算法去把每
一間房間自動拼湊出整體房屋的三 維結構，人工選擇最好的拼接結果，
顯示在場景賞呈現線上導覽系統，
以提供使用者使用。
七、 線上導覽系統
運算說明：
所有流程最後產出的資料統合 起來，即可在網頁端用 three.js 重建整體房屋三維結構，透過加入
相機控制以及一些運鏡動畫效果，
即可提供真實強大的沉浸式賞屋體 驗。
肆、成果展現
伍、遭遇問題與解決
一、 IOS 裝置瀏覽器 TextureID 限 制：
改用其他方式來做3D 模型的 貼圖，將好幾張貼圖結合成一張，
在利用程式將圖片分割區塊，減 少讀取貼圖時的數量，讓網頁不 會資源數量而整個 crash 掉，導致 系統完全不能運作。透過這個方 式克服了各平台限制，在手機或 電腦、ios 或 android 都可以運作 我們的專題。
二、 房屋貼圖呈現效果：
為了在經過門的時候，讓貼 圖看起來不會有撞門的感覺，將
房屋 Model 的房門移除，將當間 房間貼圖同一視角貼到其他房間 上，在同站點時，看出去的貼圖 都是不會有奇怪的顯示方式，大 大改善了使用者體驗。
三、 攝影機控制動畫效果：
為了在 Viewer 呈現不同的導 覽效果，加入了各種 camera 控制，
並且導入了 anime.js 的 library 來控管各動畫，讓動畫切換及時 間掌控上更加靈活也更加簡便，
也大大了提高專題的效能問題，
不會因為動畫播放而造成大量卡 頓產生。
10
參考文獻
一、 C. Zou, A. Colburn, Q.
Shan, and D. Hoiem.
LayoutNet: Reconstruct- ing the 3d room layout from a single rgb image.
In The IEEE Conference on Computer Vision and Pattern Recognition (CVPR), June 2018
二、 S-T Yang, F-E Wang, C-H Peng, P Wonka, M. Sun, and H-K Chu. DuLa-Net:
A Dual-Projection Net- work for Estimating Room Layouts from a Single RGB Panorama. In The IEEE Conference on Computer Vision and Pattern Recognition (CVPR), June 2019.
https://cgv.cs.nthu.ed u.tw/projects/dulanet
