Overload (2019)

基于 AR 空间交互与屏幕界面的交互艺术装置

日期
2018年9月 - 2019年6月
项目来源
台北科技大学 · 毕业设计
设计职责
团队负责人
AR 开发者
UI/UX 审核
技术栈
使用 Sketch & Adobe XD 进行交互原型设计
基于 Unity3D 与苹果 ARKit 的 AR 空间开发
基于 Node.js 与 Photon (PUN) 的网络多人同步

《Overload》概念介绍影片 720p, 带声音 14.5 MiB

面临的挑战

具有社会化命题的多人共享 AR 空间体验

Welcome to Overload, the AR interaction installation

欢迎来到多人 AR 交互艺术装置《Overload》

探讨网络社会行为的概念性交互装置

我们的项目探讨了台湾社群网络(PTT、Dcard 和 Facebook 等平台)上的热点舆论事件,以及围绕这些事件所展开的公众讨论特质。我们希望剖析线上的言论交互如何沦为同温层回音室、网络暴力或恶意引战(trolling)的温床,进而淹没理性的建设性讨论。

为了用荒诞、讽刺的手法呈现这套交互装置,我们需要攻克以下技术与设计难关:

  • 在 AR 空间中设计具象化呈现网络戾气与引战行为的 3D 粒子视觉效果;
  • 打磨直观的移动端界面,以无缝支持 AR 空间物理交互操作;
  • 通过专用服务器,构建多人实时同步的 AR 共享空间。

AR 数字叠加层如何与实体的中心装置进行对齐并映射玩家输入 720p, 静音 11.3 MiB

我的角色

Unity 开发、苹果 ARKit 与多人实时同步

作为技术开发者,我的核心职责是构建一个实时同步的多人 AR 共享空间环境:

  • 在 3D 空间中高精度追踪移动端相机的六自由度位姿,以准确生成虚拟数字元素;
  • 对齐 ARKit 空间图景(WorldMap),使多位现场玩家共享完全一致的 3D 空间坐标系;
  • 通过 Node.js 服务器与 Photon 联合网络(PUN)对空间地图进行序列化并分发同步;
  • 在 Unity 中编写 3D 视觉特效,并将其牢固地锚定在实体的“网络星球”装置上;
  • 开发自适应响应式布局,以完美适配各种不同视口尺寸的 iOS 移动设备。
System architecture outlining Unity, ARKit, Node.js, and Photon synchronization

融合了 Unity、ARKit、Node.js 与 Photon 同步机制的系统网络架构图

挑战 #1:多人空间地图(WorldMap)的网路同步

最大的技术瓶颈在于多台移动设备之间空间对齐坐标的完全一致性。我的解决方案是:使用 SerializeToByteArray() 将苹果 ARKit 实时生成的空间 WorldMap 数据进行字节化序列化,上传至自建的 Node.js 服务器,并利用 Photon 远程过程调用(RPC)在所有并发接入的玩家设备之间进行高频分发与实时重载反序列化。

How ImageAnchor works

空间图像锚定机制(ImageAnchor)的工作原理

挑战 #2:将虚拟数字图形完美锚定于实体装置

该艺术装置由两个关键要素虚实结合构成:展览现场实体的“主星球”中心构件,以及动态叠加在视口中的 AR 虚拟视觉图层。

我利用 ARKit 的图像锚定(ImageAnchor)机制实现了两者的精确重合。在 Unity 中配置追踪目标图像并导出至 Xcode 后,我对实体装置上的参考图像进行了精细的物理尺寸校准,以达到像素级的对齐。配合上同步的虚拟空间地图,这使得实体的中心雕塑装置与虚拟的 AR 视觉元素在视口中以浑然一体的姿态无缝叠合。

The exhibition space featuring the physical centerpiece and the ImageAnchor tracking target

展出空间:包含物理实体中心装置与用于 ImageAnchor 追踪的空间对齐图像靶标

方法论

跨越设计与工程开发之间的天堑

Satirical UI elements and vector assets

充满讽刺意蕴的 UI 界面视觉元素与矢量资产

研发与设计协同流中的双向共情

这个项目是我首次完全担纲主程序角色,去攻克网络通信与空间追踪等底层逻辑。我们的团队由我、两位设计师兼产品经理,以及一位硬件搭建监理组成。

得益于我自身的平面设计背景,我能在开发早期发现潜在的可用性摩擦或屏幕适配瓶颈。这使我们能更高效地迭代交互细节,在代码侧直接修正细微的像素偏差。

Player's flow and UI logic

玩家的操作流程与 UI 状态跳转逻辑

实体空间的物理校验

我与硬件监理紧密配合,频繁对物理实体中心的位置与数字端的 AR 图像原点进行校准。这些微调对于减少 AR 镜头的抖动和偏移非常关键,能让现场观众获得更稳定的空间体验。

尾声

恶意引战、众声喧哗与虚拟视觉批判

People enjoying our work

观众在毕业展现场体验我们的装置

致谢与参考
(UI, UX) 邹祁云, 蔡梦云,
(展位监理) 吴雨坤
团队成员
邹祁云 (Chi-Yun Tsou) - Overload 视觉设计案
https://www.chiyun-tsou.com/overload
蔡梦云 (Meng Yun Tsai) - Overload 设计案
https://www.mengyuntsai.com/project-overload
“Poooooof 啵” 毕业设计展 · 台北科技大学互动设计系
http://www.poooooof.cc