市民身边的“文旅元宇宙”—上海凯旋路桥AR方案技术与应用

一、引言

  2023年，为推进“一江一河”民心工程建设，进一步提升苏州河两岸景观品质，市绿化市容局、市住建委、市交通委联合制订了《苏州河桥梁景观提升计划》（下称《计划》）。凯旋路桥建成于2000年，是苏州河上独具特色的轨交桥，也是《计划》要求完成景观提升工作的15座重点桥梁之一。本文介绍了在凯旋路桥的景观提升工作中采用的增强现实（Augmented Reality，AR）互动技术方案（下称“AR方案”）。本方案充分结合凯旋路桥及邻近地区实际情况，并积极响应2023年上海市文旅局正式发布《上海市打造文旅元宇宙新赛道行动方案（2023-2025年）》，为凯旋路桥打造虚实结合的AR沉浸式体验，向市民和游客提供“身边的元宇宙”，打造上海文旅视域下的全新数字文化场景。

二、凯旋路桥AR方案在移动设备领域的创新

  AR互动是一种新型人机交互方式，在文化、传媒、娱乐领域具有蓬勃潜力，也是文旅元宇宙建设的重要技术手段。移动设备是AR互动的常见载体，在凯旋路桥景观提升工作中，笔者团队对AR互动在移动设备领域的应用方案展开探索，取得了创新与突破。

  1.研发基于GPS陀螺仪的跟踪定位技术，解决移动适配问题

  （1）现有实物跟踪技术方案的局限性

  实物跟踪（Object Tracking）是AR方案中最根本也最具含金量的一环，在移动设备上实现这一环节，需要借助GPS（Global Positioning System，全球定位系统）陀螺仪等内置传感器。目前常见的解决方案是对现实场景进行全景扫描，在引擎中将扫描数据复现为3D模型，最后在模型的指定位置设定实物跟踪的触发器，从而达到虚拟场景与现实场景相匹配的效果，实现对真实物体的识别与追踪。

  团队在尝试多家厂商提供的定位服务后，发现现有服务在移动设备适配方面均存在一定的局限性。上述定位服务在识别速度和跟踪精度方面均表现良好，能够完美适配苹果研发操作系统（ios），但在安卓（Android）操作系统上无法达到理想的制作效果。使用安卓操作系统的手机涉及品牌、芯片种类多，不同的机型性能差异大，对微信小程序等开放能力的支持也不尽相同，这导致一部分主流品牌的安卓手机不能通过定位服务实现准确的跟踪效果。团队与厂商和微信平台积极沟通，经过多番努力仍未能彻底解决上述问题，于是在广泛调查研究后，决定采取自主研发GPS陀螺仪的方案，最终彻底解决了实物跟踪技术在移动设备上的适配问题。

  （2）基于GPS陀螺仪的定位技术原理

  团队采取的方案是在小程序最原始的相机跟踪接口基础上，自主开发程序对接手机内置陀螺仪设备，实现协同定位。Visionkit是微信小程序基础库提供的一种视觉能力，包含了AR在内的多种基础视觉算法。经测试，在部分主流品牌的安卓手机上，Visionkit接口在模式6DOF下，易出现无法识别平面导致空间定位物体漂移；在3DOF模式下，主流安卓手机易出现物体抖动或随固定夹角偏转的情况。为解决上述问题，本方案采取了调用手机内置陀螺仪数据并直接控制AR摄像头的方式，实现了更为精准和平稳的定位效果，有效避免了物体异常漂移和旋转的情况。

  具体流程包括：

  i.制作人员事先开展实地调研，确定AR物体在真实世界中的GPS坐标、高度及尺寸，所收集的数据将由开发人员导入定位程序。

  ii.用户进入AR互动模式时，定位程序自动开启并且以Android系统原生方式获取手机GPS，实时判断手机GPS坐标是否处于可显示AR物体的范围内，当定位满足条件时，程序算法以手机坐标与目标坐标之间的距离、夹角和弧度作为参数，计算得出理论上AR物体的位置及尺寸，在移动设备上呈现VR物体形态。

  iii.定位程序开启陀螺仪，在用户体验AR互动模式期间，持续获取陀螺仪的alpha、beta和gamma值，计算手机摄像头当前姿态，对数据实时平滑处理后，同步地移动、旋转虚拟摄像头，使其在场景中的运动轨迹更加自然。

  2.结合xr-frame框架与threejs渲染库特性，提升模型渲染质量

  xr-frame是微信小程序提供的3D开发框架，可以帮助开发者便捷地生成含有AR互动功能的小程序。xr-frame具有良好的易用性，但是在后处理方面不能完全满足凯旋路桥AR方案的需求。凯旋路桥景观提升项目对美学效果要求较高，开发团队需要对不同画面进行区分和精细化处理。xr-frame目前仅提供了摄像头和虚拟画面一体化的后处理功能，难以实现更好的后处理效果。

  为解决上述问题，团队在xr-frame框架基础上引入threejs渲染库，结合两者特性，在确保后处理效果最优的同时，确保实际摄像头画面质量不受影响。

  具体流程包括：

（1）设置两块位置、尺寸相同的画布，分别用于承载实际摄像头画面与虚拟画面。

（2）开发用于处理虚拟画面的bloom特效脚本和抗锯齿脚本，替换xr-frame框架原有的渲染管线。

（3）设置alpha通道过滤，并调整两层画布的渲染顺序，程序运行时对虚拟画面进行单独后处理，显著提升了渲染效果。

  3.基于微信小程序平台，轻量化低成本实现AR效果

  在技术选型方面，团队展开广泛调研，最终决定基于微信小程序平台实现AR效果。微信小程序用户不需要提前下载软件应用，也无需额外的硬件设备，使用社交软件即可体验沉浸式AR互动效果，群众可以实景实地参与，又能在网络上广泛宣传，符合景观提升计划的目标与宗旨。

  相比全面自研的AR方案，第三方的全景扫描跟踪方案会产生比较高的价格，且复用性较差，如果后期将互动效果移植到不同的现实环境中，还需要重新扫描识别跟踪。团队自研的定位技术有效地弥补了这方面的缺陷，在使程序更加轻量化的同时也大幅降低了成本，让产品在市场上更具竞争力。

三、凯旋路桥AR方案的整体设计思路

  1.系统架构设计

  方案的总体系统架构如图1所示。制作团队使用三维软件（Cinema 4D或者blender）制作模型和动画，将产出的glb或glTF格式数据导入微信小程序项目，最终生成AR动画。此外，AR效果中的精灵粒子需要借助Free texture packer软件生成。

 2.AR内容设计

  在系统架构和技术支持的基础上，内容设计也是VR互动制作的重要环节。为了制作出彩的VR效果，笔者在以下四个方面着重研究，力求出创意、见新意。

  （1）追求反差

  在体验虚拟场景时，人们会对与现实反差强烈的事物印象深刻，例如摩天大楼边坐着的白米巨人、天空中飘浮着的鲸鱼等。用极致的反差吸引眼球，无疑是很好的AR切入点。在古朴凯旋路桥上飞驰而过的未来轻轨，也具有这样的视觉冲击力。

  （2）巧用光影

  阴影和高光能逐渐拉开画面层次，淋漓尽致地表现画面张力。高光来自发光材质，而阴影的刻画要依靠贴图来完成。AR制作与美术素描原理相似，只有厘清物体之间的结构关系，还原物体相互遮挡的阴影，才能避免“一眼假”的情况。

  （3）突出重点

  好的照片总是有一个明确的主体。笔者曾遇到一些想法很好的作品，例如一只老虎在建筑下面嬉戏玩耍，动画本身虽然十分精致，整体效果却很普通，这是因为主体太小，又太精致，抓不住人的眼球。AR制作需要有清晰明确的主体和大幅度的动画，让事物变化一目了然。相比“死磕”细节，抓大放小才是关键。

  （4）音效与音乐

  合适的声音效果能够让AR作品得到质的提升，使用户沉浸到虚拟画面的环境中。好的音效和音乐，能让AR与现实的结合锦上添花。

四、制作流程与最终效果呈现

  1.方案的实施难点与解决措施

  （1）克服平台对glb和glTF格式的支持限制

  glb和glTF是三维软件通用的输出文件格式，微信小程序原生对它们的支持有限。为了在小程序平台正常呈现VR内容，笔者在三维制作过程中注重优化，使模型符合xr-frame的限制，确保小程序加载模型后可正常渲染。

  （2）以精灵粒子图的方式实现粒子效果

  帅气的三维粒子效果通常以粒子发射器的方式实现，这种实现方式具有效果真实、有体积感的优势，但无法导出为平台支持的文件格式。团队经研究决定，选择以精灵粒子图序列的方式在AR中模拟粒子效果。精灵例子图只是一个面片上的序列，无法完全达到粒子发射器的功能，在画面立体感和粒子随机性大幅度受限制的情况下，团队在细节上着力优化，最终实现了比较好的粒子效果。

（3）实地调查落实AR场景灯光布置方案

  在微信小程序中对AR场景的灯光布置进行调整，效果无法实时可见。每一次在程序里修改灯光参数后，都必须重新发布并且亲临现场才能看到完整的实际效果，这是一个费时费力的过程。团队多次在不同时段、不同天气状况下实地调查，力求最终时段的现实场景，与VR场景灯光的强度、角度与颜色达到浑然一体的效果。

  2.凯旋路桥AR制作过程与效果呈现

  凯旋路桥AR的实际制作流程包括前期创意策划、利用三维软件建模、动画制作和程序开发几个阶段。重点制作过程与最终呈现效果如下文所述。

  （1）创意策划

  凯旋路桥是苏州河上唯一的轨交桥，3号线轻轨与桥面平行驶过的景象深入人心。为了在AR场景中复现这个附近居民熟悉的景象，团队根据凯旋路桥和3号线轻轨相关素材（图2），初步完成了整个AR模型的平面设计（图3），结合多种富有想象力与未来感的元素，如“赛博朋克”风格电脑、圆柱形车厢、飞行器、任意门等，达到用“未来畅想”点亮苏州河的效果。

  （2）建模、贴图与性能优化

  微信小程序的用户体验与载入时间直接相关。AR工程具有一定规模，合理优化工程大小能有效缩短载入时间。模型是AR工程的重要组成部分，模型制作者应条理清晰，尽可能地减少三角面数量。避免布线杂乱、破面、坏面等问题，结合实际情况控制模型的精细度。在微信小程序场景下，相同AR模型在2万面和2千面状态下的实际显示效果差别并不大。

  贴图在AR工程中同样占据较大的空间。团队在实践中发现，AR模型必须的贴图是颜色贴图和发光贴图，而法线贴图对实际效果的增益并不显著，如需节省空间可以放弃法线贴图，凯旋路桥AR就采取了这种策略，工程中仅包含两类贴图，如图4所示。

  在此基础上，贴图的大小还可以进一步优化，例如图5中尺寸仅有128×28的贴图，在实际AR场景中位置如图6所示，这样的效果在手机小程序上看来是完全可以接受的。在建模和贴图绘制期间做好效果与性能的平衡，可以有效减少后续优化的工作量。

  （3）精灵贴图的制作与放置

  方形贴图是一种节省资源的精灵贴图组织方式，根据动画长度的不同，精灵贴图可以被制作为8×8(64帧)，12×12(144帧)，25×25(625帧)等不同尺寸的方形贴图。为了将动画每一帧的画面整齐排放到方形贴图上笔者采用Free texture packer工具实现快速排列序列帧。工具的使用方式如图7所示，导入所有画面后，将每帧的尺寸和列数分别作为长宽值输入，即可得到如图8所示的方形精灵贴图。

  生成好的精灵贴图，可以通过在三维软件里插入面片的方式进行精确放置。如图9所示，需要将面片的名称和精灵粒子相互对应，再利用xr-frame程序统一置入。

  （4）利用隐藏空间实现遮挡逻辑

  AR物体运动时的遮挡逻辑也是本次AR制作的重点，当列车从桥的一端驶入并从另一端驶出，车体的部分区域会被遮挡。营造这种效果需要借助隐藏空间，如图10所示，在三维软件里预先放置两个方块（cube）作为隐藏空间并导入xr-Frame，就可以将它们设置为隐藏区域。

结语

 “文旅元宇宙新场景”是上海文旅将在未来三年里着重发力的重要领域。面向社交的“元宇宙”与旅游业有着天然的亲和性。打造更丰富的数字文化场景和创新智慧旅游场景，为游客提供“身边的元宇宙”体验，既能推进城市精神文明建设，也能带来一定的社会和经济效益。

  凯旋路桥的景观提升工作积极响应“面向一江一河、中心城区历史风貌区等打造虚实融合游览路线”的要求。在开展凯旋路桥VR方案工作的过程中，笔者深刻感受到虚实结合的魅力，并从中展望未来工作的种种可能性。我们既可以凭借丰富的想象力改造现实场景，还可以融入打卡、游戏、答题、抢福利等互动方式，在增加趣味性的同时，提高客户黏度。实践证明，微信小程序与AR互动的结合是一种轻便、高效、性价比可观的“元宇宙”实现形式，未来也将孕育更多具有文化性、艺术性和创新性的产品。

（作者单位：上海东方传媒技术有限公司-皮皮虾工作室）