移动终端数字线上展示项目的设计与实践

侯琛琛

摘要：随着移动互联网塑造的社会生活形态进一步加强的趋势，可以利用互联网传播速度快、范围广的优势，结合移动端的快捷性、便利性去解决上述问题，并且结合数字化数据的可循环利用性，探索基于移动互联网的经济有效的文化展示和传播的创新方式。以故宫博物院灵沼轩线上展示项目为例，验证基于移动终端的轻量化、多样化线上展示的可行性，探寻展示效果与传输效力的均衡点，并分享以移动终端为主要传播渠道的展示项目的设计理念与实践经验。

关键词：移动终端;互联网;博物馆;循环利用;数字展示

中图分类号：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