移動終端數字線上展示項目的設計與實踐

侯琛琛

摘要：隨著移動互聯網塑造的社會生活形態進一步加強的趨勢，可以利用互聯網傳播速度快、范圍廣的優勢，結合移動端的快捷性、便利性去解決上述問題，并且結合數字化數據的可循環利用性，探索基于移動互聯網的經濟有效的文化展示和傳播的創新方式。以故宮博物院靈沼軒線上展示項目為例，驗證基于移動終端的輕量化、多樣化線上展示的可行性，探尋展示效果與傳輸效力的均衡點，并分享以移動終端為主要傳播渠道的展示項目的設計理念與實踐經驗。

關鍵詞：移動終端;互聯網;博物館;循環利用;數字展示

中圖分類號：TN918.4 文獻標識碼：A 文章編號：1007-9416（2019）03-0156-04

1 展示工作的現狀及挑戰

故宮博物院開展信息化工作二十年來，一直著力于用信息化技術服務內部辦公、研究及對外宣傳、展示工作，已取得不少可觀的成績并積累了大量的文物數字化數據資源。展示方面從線上到線下通過不同的渠道、媒介呈現了豐富多彩的數字展示內容：線上展示主要為無法現場參觀的觀眾提供全面、快捷的信息化服務，通過網絡展示輕量型的文字、圖片、視頻等內容，并開發多款可下載應用程序更深入、細致地展示文化內容;線下展示為現場觀眾提供以設備輔助的具有高精度、豐富視覺效果的互動性體驗內容，包括虛擬現實劇場，虛擬現實頭戴式顯示體驗等。

線下互動展示項目頗受觀眾歡迎，體驗效果反饋很好，并有較多觀眾詢問是否有更方便、快捷的體驗渠道用于再次觀賞和傳播分享，數字化工作者也一直致力于探尋、測試將線下展示項目更廣泛傳播出去的途徑。互聯網是如今信息傳播的最佳途徑，其優勢是速度快、范圍廣，但局限性是對于數據在網絡上的實際應用有一定的限制，例如對數據量的承載、視覺效果的呈現、互動功能的支持都有一定的要求和難度，所以線下展示項目如何高還原度地轉化為線上展示，甚至超越線下展示的效果，成為了數字化展示工作面臨的全新挑戰。

2 需求分析與關鍵技術

2.1 需求分析

數字化數據的優勢是可重復循環再利用，資源二次開發能節約成本，縮短開發時間，利用已有數據進行創新設計和應用是最經濟有效的開發捷徑。首要前提是，上述線上展示項目的數據在前期制作時就已經考慮到要適應技術的可持續性發展，因而將原始數據盡可能制作為條件所允許下的最高精度級別。由于留存模型數據精度夠高，滿足展示效果的需求，數據可以再利用，無需重新制作三維模型數據。即使最高精度數據在當時的條件下并不適合于展示項目，因為運行數據的設備對于數據加載及功能實現有局限性，所以是將數據壓縮、調整到能均衡視覺顯示效果與數據承載能力的量度級別。雖然數據已經精簡，但對于線上展示的要求和限制來說，現存的線下展示項目數據量還是太大，并且展示引擎、參數設置方式不同，展示平臺之間也存在不兼容等客觀問題，導致無法直接移植成為線上展示項目，因此需要根據留存數據的情況和將要呈現的展示需求進行分析，并均衡開發時間、資金、難度系數等因素，選擇適合的開發技術路線。

此次展示項目的創新點就在于如何同時滿足現場觀眾和遠程游覽者的參觀需求。現場游覽者可以通過個人移動終端，例如手機、平板電腦等設備，快速訪問所在參觀點的詳細情況，并感受現場實景與個人設備里虛擬場景交融的虛實體驗;遠程游覽者可以通過網絡終端，例如個人電腦或移動設備了解展示內容，并達到足不出戶就能感受身臨其境的虛擬體驗。

鑒于上述已有數據的特性和受眾訴求的主導方向的情況，項目有待解決的問題細化為：數據能滿足網頁端的展示，在網絡運行時不出現卡頓;展示效果能保留三維顯示效果，凸顯模型數據優勢;降低應用學習成本，即學即會模式，滿足現場觀眾便捷快速的使用;具有簡單的互動功能，加強觀者使用程序的粘性;具備豐富的多媒體輔助展示手段，使傳達的信息量足夠觀者的需求;便于數據的傳播和推廣，擴大宣傳力度等等。根據以上線上項目轉化為線下項目的具體需求，研究分析主要利用的技術為能展示三維全景效果和支持網絡尤其是移動端應用需求的技術，所以將主要利用三維全景技術和基于HTML5的移動互聯網的應用來開展此項目。

2.2 全景技術助力三維顯示效果

三維全景技術是將靜態圖像通過計算機平臺實現虛擬現實的一種技術，即首先通過專業相機捕捉整個場景的圖像信息或者使用建模軟件渲染生成圖片，將這組水平視角360度、垂直視角180度的圖像，以某種幾何關系進行映射無縫拼接成具有三維立體感的360度全方位場景圖像，此圖像結合JavaScript腳本語言實現全方位、身臨其境的虛擬現實場景瀏覽、展示模式。可以在全景展示中嵌入文字介紹、圖片說明、音視頻解說、漫游、導航等輔助功能及互動體驗功能，以多媒體集合的方式全方位進行虛擬展示，使觀者不僅可以獲得整體的認識，亦可深入其中某個場景、某個細節進行瀏覽觀看。相對于文字介紹和圖片說明，三維全景技術以其交互性強、真實呈現、漸變快速、深沉全景等特點，有效地彌補了傳統展示中不夠逼真、信息單一等缺陷，且滿足了現代虛擬展示領域的基本交互要求，提供給觀者具有真實性、沉浸感、參與度的全新體驗模式。身臨其境的“現場感”和“交互感”讓三維全景技術廣泛應用于電子商務、虛擬旅游、遠程教育、在線展示等方面。

全景技術較于其他虛擬現實展示技術來說，具有制作周期短、人力投入少、資金需求少、數據輕量化、配置要求低、展示效果好等優勢。全景技術是采用兼容性極高的Flash播放技術或HTML5技術，將高精度全景圖通過專業的合成軟件，開發出運行于不同環境的虛擬場景，開發難度與復雜程度較低，耗費時間較短。全景技術以高清圖像為基礎，全景漫游系統合成的獨特超清晰動態影像可實現超高精度放大，可供觀看細節信息，展示效果還可以根據需求調整。全景展示可以在多種平臺上運行，平臺兼容性好，并且根據不同的展示需求定制各種輔助功能。

鑒于以上優勢及基于圖像的全景展示輕量化的特點，相對于基于模型的虛擬展示，它可以大大降低加載三維模型及運行渲染效果的龐大數據量及計算量，所以網絡端就可以承載輕量級展示內容。全景技術展示是基于網絡技術發展基礎上的，融合了多種技術，隨著網絡帶寬的不斷增加和瀏覽器功能接口的擴展與兼容，網絡端數據承載能力有所增加，終端視覺效果顯示、功能操作的實現也都能更全面地支持，并依托HTML5技術可以擴展提供高清流暢、方便快捷的在線漫游體驗，三維全景技術在各領域的應用率越來越高。

2.3 HTML5助力網頁應用實現

HTML5是互聯網的下一代標準，是構建及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一，廣義上包括HTML、CSS和JavaScript在內的一套技術組。它旨在減少瀏覽器對于插件應用服務的需求，并且能提供更多可以有效增強網絡應用的標準集。1HTML5為開放網絡平臺的奠基石，也就是說HTML5不僅是面向傳統計算機的網頁設計，而且是適應所有智能終端的使用需求，為移動互聯時代的網頁應用提供更加豐富、強大的開發標準，為移動互聯網產業帶來新的發展模式和契機。

較之HTML4，HTML5做出了大幅的改良，能夠適應移動互聯應用“富內容、富交互、富體驗、跨平臺”的要求，支持離線訪問、支持全媒體內容展示、支持交互式的2D/3D 圖像渲染、提供豐富的API以調用移動設備的硬件，所以HTML5標準成為打造豐富網頁應用的首選，并且其具有更優越的安全性、跨平臺訪問性。更重要的是，開發難度大幅降低，易用性更高。HTML5徹底顛覆了HTML4以呈現網頁文本為主的功能定位，適應當前移動智能終端的強大功能，定位于提供一個功能完整、開放易用的網頁應用開發平臺。基于HTML5開發程序，能夠實現豐富的交互操作以及多線程處理，能夠完成復雜的操作任務。

3 虛擬線上展示的設計與實踐

靈沼軒坐落于故宮東六宮的延禧宮內，但它卻是唯一一座裸露著鋼結構的西洋式建筑，而且它是一座并未完工的“爛尾樓”，更神奇的是它矗立在水池之中，所以也俗稱它為水晶宮。觀眾看見它時會冒出無數個“為什么”，并猜想它本該有的樣子，靈沼軒線上展示項目在移動終端將這座西洋建筑的實景完整地呈現了出來，并解答這座神奇建筑背后所蘊含的秘密，同時引入了虛擬修復這一新亮點，在故宮專家的指導下用數字技術復原了其竣工后的面貌，在現場將觀眾充滿無限想象的畫面呈現出來，體驗現實與虛擬的跨越感，如圖1，圖2所示。

靈沼軒線上展示項目主體對象為這個神奇的水晶宮建筑，展示設計以建筑信息為主線展開介紹與之相關的前世今生故事，以下簡要敘述程序的展示邏輯與操作架構。首先從靈沼軒建筑的外立面選取四個不同的觀測點，既能展示不同角度的建筑細節，又能起到對現場觀眾分流的作用，觀眾可以通過掃描每個觀測點的二維碼進入相對應的參觀初始點，也可以通過搖一搖功能進入最近的觀測點，這樣也能起到分流的效果。在設計中，設置了三個特殊參觀點，即現場觀眾也無法親臨現場的地點：建筑內中心大廳、地下“水中”觀魚處、頂層瞭望遠景處。一共七個參觀點，觀眾可以更換參觀點，也可以近距離觀察每個點的建筑細節，并可以轉換場景，切換到這七個原狀參觀點相對應的虛擬復原場景中，體驗時空穿越的景觀。配合虛擬參觀也會有信息點彈出文字、圖片介紹說明，并配以語音介紹講述建筑相關的歷史信息，詳細、全方位地介紹靈沼軒，通過這種創新模式能帶給觀眾不一樣的體驗。

3.1 靜態圖像處理

全景展示的基礎就是處理靜態圖像，需要在已有模型數據基礎上進行渲染生成全景圖片，首先根據上文提到的七個觀景點，分別調整好場景視角范圍內的模型，避免產生因為視覺差出現不合理的景象，為了達到主體建筑呈現的最佳情況，在不影響院落結構的前提下調整修改周邊建筑、植被模型，然后選擇與現實情況相符的最佳光線條件參數，調節場景光影效果，添加真實天空的環境貼圖，以達到全景展示的真實感。

模型調整好后渲染全景圖像，根據網絡承載能力盡可能渲染高精度圖片，以便放大觀察細節畫面時滿足觀看需求，再通過圖片修改技術調整畫面細節，完善展示效果。根據展示需求一共渲染十四張高清全景圖像。由于頂層瞭望遠景處可以觀看到較遠處周邊環境，為了精準度又單獨渲染了周邊大環境的全景圖。

3.2 動態效果呈現

為了避免靜態圖像顯示的全景展示的枯燥感，此次設計加入動畫效果，以增強畫面的靈動性，增強虛擬顯示的真實感。由于動畫數據量較大，只能有選擇性的加入部分動畫效果，針對展示內容的特性，靈沼軒也稱水晶宮，修建此建筑于此的目的是取以水鎮火之說將這里設計成“水殿”，水也是最靈動之物，所以在修復場景中，池中設計為水波蕩漾的景象，水面占據畫面幅度也比較多，會讓整個畫面增添真實感和代入感。在技術層面將水面用波紋形式動畫展示即可體現出靈動的效果，在模擬微風拂過的水面有細微波紋的狀態則需要耐心調試，以防程序卡頓造成波紋抽動的情況。

地下“水中”觀魚處是此次虛擬復原的亮點，地下一層窗外的水池中設計了錦鯉游動的畫面，地下觀魚層有多扇窗戶，觀眾可以隨意旋轉角度觀看，所以每扇窗都要能隨機看到游魚。根據多種技術的測試，最終選用嵌入一個序列幀動畫的方案，將地下全景圖窗戶處做透明處理，再嵌入游魚全景動畫。數據量再次與顯示效果出現沖突，要想能展示清楚魚的細節，數據量就會提高，但是游動效果就會出現卡頓，所以經過反復的測試和調整，修改魚模型、設計游魚路線和時長，將顯示效果調整至盡可能滿足正面視角的幾扇窗戶的觀看效果，如圖3所示。

除了加入水效的動畫，在環境場景中還在植被區加入了葉片飄落的動畫，使場景視覺效果絢麗、靈動，樹葉飄落動畫與水面波動效果相結合，能更真實地反映出微風的效果，使觀者有沉浸帶入感。由于植被區離主建筑物較遠，葉片精度不必太高，落葉密度稀疏，飄落速率低，所以落葉動畫數據量沒有對程序造成壓力，但加入后的效果非常好，圖4所示。

3.3 雙模式觀賞

在展示效果方面，除了能使用方便操作的常規全景模式，同時也根據雙眼視差原理制作了VR模式，雙模式通過一鍵即可切換體驗模式，并為游客提供簡易折疊紙質VR眼鏡，只需將個人終端設備插入鏡片后就可以體驗，遠程觀者也可適配到個人VR眼鏡中去使用，在VR模式下沉浸效果更佳，如圖5，圖6所示。

3.4 操作界面精簡

從展示畫面上來看，現狀展示完全依照現場情況布局，空間占用率比較高，畫面內容較為豐滿，同時展示主要針對的平臺為個人移動終端，普遍顯示屏幕不會太大。為了充分顯示全景圖像，且不破壞場景畫面，畫面上所顯示的操作鍵設計就需要少而精，只在左右下角手持設備處，將最常用的場景轉換鍵和功能性最強的模式轉換鍵設置為常用控鍵始終顯示在畫面上。按鍵為了不占用太多空間以最簡潔的圖形顯示，兩個按鍵分別設置為不同的操作方式以免操作混淆。

其他畫面內的標示也盡量用簡潔易懂、符合用戶使用習慣的方式展現，例如方向轉換用最常用的箭頭表示，信息點標注清楚，彈出信息隨視角移動表示閱讀完畢，會自動消失，減少操作次數，總之畫面簡潔，操作界面精簡，即利于觀賞又降低使用學習成本，一舉兩得。

3.5 數據壓縮處理

此項目最大的問題就是數據量的控制與網絡承載力的協調，大部分精力都用于數據精簡和畫面調整的測試工作上。首先，在圖片、動畫等元素制作過程中就一直控制數據量的增長。其次，在完成整個數據包后，多次排除冗余數據。

此外，還有其他問題有待解決，例如初次進入程序需要從云端加載程序包，等待時間略長，為了增加觀眾等待的耐心，設計了以靈沼軒元素組合的加載動畫。這就要求加載動畫數據量也要精小，所以采用了以序列幀組成的動畫，序列幀由多個量級很小的文件組成，在測試過程中沒有出現問題。但在首次宣傳推送時，由于瞬間訪問量暴增，雖然序列幀文件單個數據量小，但數量多，調用整個動畫要發出很多命令，超出服務器承載范圍，出現了程序訪問困難的情況。根據服務器的特性，及時將動畫文件合成為一個文件，這樣只需產生一次調用命令，且不容易出現跳幀的現象，再在畫面精度上做調整壓縮此文件的數據量后，在后續使用中能保證觀眾順利訪問。

在實施中，還有很多細節上的問題需要處理，主要核心就是多考慮觀眾的需求和使用習慣才好開發一款實用性的數字展示程序，在推送后也得網友們的反饋和留言，據此可進一步完善。

4 結語

博物館作為文化傳播的重要組成部分，基于全景技術的博物館網絡虛擬展示的設計與實現，改變了傳統網絡平淡、單向的特點，實現了展項與觀眾之間的零距離交流與互動，增強了在線漫游式體驗感，讓更多觀眾方便了解展覽的詳細內容。故宮靈沼軒展示項目的設計與實現，使得公眾在千里之外便可通過移動終端等設備多角度、交互式觀看三維全景展覽，擁有身臨其境般的感覺;也使展覽現場的觀眾增加了更便捷獲取展覽信息的新途徑和感受虛實結合、“穿越時空”展覽方式的新體驗。

在網絡虛擬展示方面，須依據展示內容的需求定制不同的展示方式、互動模式，嘗試加入更豐富的視覺效果、交互體驗，并且將繼續重點研究如何利用已有三維數據在網絡展示平臺上嵌入實體模型，研究嘗試基于Web 3D技術的線上虛擬展示方案，利用三維模型的特性更好地助力博物館展示與研究工作。

“互聯網+文化”的應用思維模式下，掌握高節奏生活環境下人們利用移動終端獲取知識的習慣與需求，發揮 “移動互聯+智能終端”的信息時代優勢拓展文化知識傳播的廣度與效度，開啟了博物館網絡展示的新模式，實現了實體展示、 網絡展示、移動展示三者的有機結合。與此同時也體現了以科技助力文化傳播，以文化傳播惠及大眾的科技、文化教育理念，提升了博物館的網絡展示能力，加強了科技與文化的合作凝聚力。

參考文獻

[1] 陳剛.數字博物館概念、特征及其發展模式探析[J].中國博物館，2007（3）：88-93.

[2] 蔡田露，高俊強.360°全景技術與應用分析[J].現代測繪，2012（6）：28-30.

[3] 任金波.HTML5在移動互聯網中的應用[J].電腦與電信，2012（12）：38-39.

Design and Practice of Digital Online Display Projects in Mobile Terminals

——Taking the Lingnumu Online Exhibition Project as an example

HOU Chen-chen

（Ministry of Information and Information， National Palace Museum， Beijing? 100009）

Abstract：With the trend of further strengthening the social life form shaped by the mobile Internet， we can take advantage of the fast spread and wide range of the Internet， and combine the speed and convenience of the mobile terminal to solve the above problems， and combine the recyclability of digital data. Explore innovative ways to demonstrate and disseminate a cost-effective culture based on the mobile Internet. Take the online exhibition project of Linggu Museum of the Palace Museum as an example to verify the feasibility of lightweight and diversified online display based on mobile terminals， explore the balance between display effect and transmission effectiveness， and share the mobile terminal as the main communication channel. Demonstrate the design concept and practical experience of the project.

Key words：mobile terminal; internet; museum; recycling; digital display