《ViziCities》3D 地圖打造心得

莫約二週前,Peter Smart 與 Robin Hawkes 釋出了開放源碼的 ViziCities 第一版,並透過 MIT 授權條款提供給大家免費使用。

我將透過這篇文章跟大家說說 ViziCities 的開發心得。從整個 App 架構直到詳細的 WebGL 繪圖功能強化,我們在過去這一年來學到很多,也希望能與大家分享自己的經驗,讓其他人不用再遭遇相同的錯誤。

vizicities

ViziCities 是什麼?

用比較技術性的說法,ViziCities 就是 WebGL 的應用程式,可用 3D 視覺效果呈現世界上任何一個地點。主要目的是能初步了解市區的結構。如果 OpenStreetMap 亦已納入該城市的圖資,就能獲得更好的效果。

了解 ViziCities 的最佳方式就是自己親身體驗。首先你需要可支援 WebGL 的瀏覽器,且請你了解ViziCities 目前是連測試版都還算不上的軟體,所以請別太苛求整體品質。在 ViziCities 中,點擊/拖曳滑鼠即可來回移動;用滑鼠滾輪即可縮放畫面;點擊滑鼠滾輪,或按著 Shift 不放並點擊/拖曳,均可旋轉相機視點。

如果目前無法體驗此 Demo,亦可先觀看此短片:

ViziCities 的重點為何?

當初有許多原因促使我們開始此專案。其中一點就是我們很喜歡這個技術與設計方面的挑戰。我們愛探索自己還不了解的事物,並藉以測試自己的極限。

另一個原因則是我們受到遊戲《模擬城市 (SimCity)》的啟發,想知道遊戲是如何進行這種視覺效果。結果《模擬城市》的開發公司「Maxis」竟然連絡上我們,並表示他們都很喜歡 ViziCities 專案!

我們呈現的是實際世界,而不是遊戲中的虛擬城市。而且最讓人開心的是,ViziCities 往後可能隨時以最新資料建構出城市的 3D 視覺效果。試想,你能看到你居住地區的人口資料、教育資料、健康資料、犯罪資料、不動產資訊、即時運輸情形。大家都能進一步了解自己所居住的地方!

這才剛開始而已,我們還有更多無窮無盡的可能。

為何要用 3D 視點?

我們自己最常聽到的問題就是「為何要用 3D 視點?」
簡單來說,除了「3D 視點可趣味觀察一座城市」這個理由之外,也能達到 2D 所無法呈現的效果與資料分析。譬如 3D 可納入城市的高度與深度,並能進一步呈現城市地面上、下的素材,如天橋、橋樑、天氣概況、地下管線、高聳建築,甚至飛機!這些素材在 2D 地圖上只能顯示成一團東西,但 3D 地圖就能清楚呈現城市的真實面貌,也能看到城市中的物件是如何彼此相接。

核心技術

ViziCities 大部分的基礎都是用 Three.js 所建構。Three.js 就是 WebGL 函式庫,可為瀏覽器代勞複雜的 3D 繪圖作業。我們也使用其他多項技術 (如 Web Workers),以因應開發作業所需的特定功能並解決相關問題。

開發心得

過去一年來,我們從「對 3D 繪圖與地理資料視覺化作業幾乎一無所知」,進步到「至少了解到這些資料本身的重要性與危險性」。我們一路上遇到許多障礙,也耗費許多心血找出問題所在並確實建構了解決方案。

解決問題的過程讓我獲益良多,但不是每個人都喜歡常時間耗在除錯上面。所以我提供相關心得以能協助其他人避免類似的問題,讓大家都能節省更多時間並專注於其他要務之上。

 

 

如果你正打算開發用到大量 WebGL 技術的 App (尤其是遊戲),而且也對 3D 構圖有著無比興趣,那就不能錯過原文《Lessons learnt building ViziCities》內提到的許多開發細節與程式碼。

貼心提醒:原文所提到的相關技巧,並沒有依照開發過程中所遇到的問題而排序。

 

原文連結:Lessons learnt building ViziCities

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *