APP下载

基于ARKit和SceneKit技术的“思绸”App的设计与实现

2023-11-07王舒鋡侯俐康思为袁义邓晓军肖满生

电脑知识与技术 2023年26期
关键词:全景图盲盒视图

王舒鋡,侯俐,康思为,袁义,邓晓军,肖满生

(湖南工业大学计算机学院,湖南株洲 412007)

0 引言

近些年来,从海昏侯墓考古引发观展热潮,到《国家宝藏》等文博节目的热播,再到云端博物馆的蓬勃发展,历史与文化日益“飞入寻常百姓家”,丰富着全社会的文明滋养。其中,丝绸之路文化作为中华传统文化的重要组成部分,被赋予了更深刻的内涵和更重要的地位,也承载着中国人民与世界之间交流的智慧与情感。

目前,随着科技手段的不断发展,生硬的技术化传播形式已无法产生良好的文化传播效果,文化传播应具有更高的艺术手段和艺术价值,以及良好的实时性、交互性、形式多样性和内容丰富性[1]。目前,市场上新兴的文化传播类软件缺乏新颖性且形式单一,文物所涵盖的历史底蕴易被忽略,而用户学习传统文化的热情高涨,如何以更具趣味性和交互性的方式传播历史文化成为难题。

通过对国内外文献的查阅和软件新技术的分析,基于移动端的增强现实技术(Augmented Reality,AR)使文物具有可移动性、可调整性和可互动性。目前,AR 技术已趋于成熟,其环境探针(Environment Probes) 、平面锚点(AR WorldMap) 和人物遮挡效果(People Occlusion)等功能可以为用户提供更强的沉浸AR体验。例如LU Ping等研究了场景视觉感知和AR室内导航应用程序,使室内导航获得更高的定位精度[2]。Schmalstieg 等演示了多个用户如何使用不同的交互工具操作共享虚拟场景中的图形[3]。李丹将基于移动终端的AR 应用和基于移动浏览器的Web AR 对比研究,提出基于Native的AR算法实现机制[4]。蔡苏等研究了增强现实技术在教育中的应用潜力和应用价值[5]。此外,国内关于文化传播类软件已有一些相关的研究和应用。例如数字博物馆、畅游丝路、每日故宫和每日环球展览等。然而,上述应用在形式、体验和内容上存在部分问题:1)形式上:现有数字博物馆软件中的场景和文物趋于平面化;2)体验上:现有软件中的场景缺乏互动性,且互动形式较为单一;3)内容上:部分软件中的信息过于碎片化和单调化,通过长篇大论讲述历史的方式不具备趣味性和可读性。

针对上述问题,设计并实现一款趣味性强、交互性优和功能丰富的传播丝绸之路历史文化App 的需求已凸显。本文详细介绍了基于iOS的丝绸之路文化传播软件的设计与实现,软件采用ARKit 增强现实技术以三维形式呈现文物;SceneKit 全景图技术使场景以720°全景展示,不受时空的限制,使用户身临其境地感受城市场景;ItemCF协同过滤算法通过收集群体用户的偏好信息,以达到精准用户群的推送;PencilKit利用Apple Pencil 实现更具互动性的人机体验。同时,聚焦“考古+盲盒”、DIY“文物”和IP动画等创意形式,从用户角度思考和设计,做到“以思绪畅游历史,以指尖丈量丝路”。系统可以准确、高效地讲好中国故事、描述历史文化、以沉浸式的全景图体验让用户“乘兴而至,尽兴而归”,有效地传承和发扬丝绸之路历史文化,不断增强中华文明传播力影响力。

1 系统架构

系统架构的详细设计如图1 所示,系统架构主要分为三层,自上而下依次为业务层、工具层和SDK层。业务层主要包括业务模块与业务数据,主要负责对业务模块和业务数据的封装;工具层主要包括JSON 文件、缓存信息和模型封装,主要负责对系统组件的封装;SDK层则负责管理系统API。

业务层内部分别定义了自己的消息代理、实现内部和外部的消息通信处理。业务层的业务模块主要包括每日学习模块、盲盒收集模块、寓教于乐模块和个人勋章模块。业务层的业务数据主要包括文物数据、城市数据、答题数据、遮罩数据。业务层子模块内部职责划分为:模型(Model)、视图(View)、控制器(Controller)。

模型包括文物数据模型、城市数据模型和遮罩数据模型等。模型将数据和操作进行抽象和封装,以供视图的查询和更新,管理业务逻辑。视图包括沿途故事视图、文物预览视图和城市介绍视图等。视图用于渲染App的各级界面,模型与视图之间是一对多的关系。控制器包括地图控制器、城市控制器和AR 文物控制器等。控制器用于了解用户与视图之间的交互信息,并将之标准化为业务事件来提供模型,促使模型对程序动作进行输出,最终选择某个视图来更新用户数据[6]。

系统使用UIKit 框架,它为实施界面提供了窗口和视图架构,用于向App提供多点触控和其他类型的输入事件处理。前端基于MVC 设计模式,部分数据源视图控件具有dataSource 属性,数据源通过与控制器交互,从定义的数据模型中,间接地获取数据,从而实现了业务分离,降低代码之间的耦合性。利用JSON 文件存储数据,每个数据由key:value 键值对组成,采用SwiftyJSON解析JSON数据。

图1 系统架构图

2 系统设计

2.1 系统结构设计

系统主要包括每日学习模块、盲盒收集模块、寓教于乐模块和个人勋章模块四大功能模块,其结构设计图如图2所示。

2.2 功能模块设计

根据需求分析、竞品分析和用户调研明确了系统的各个模块及功能。

图2 系统结构图

1)每日学习模块。运用ItemCf协同过滤算法,预测用户的个人偏好,并根据用户的历史行为为用户生成学习资料列表。学习资料以西安、兰州、西宁、敦煌和乌鲁木齐五大城市为主体,围绕出土文物信息、城市风光、历史文化等进行展示和学习。学习模块设置了答题功能,答对一定数量的题目之后即可获得该城市的丝绸勋章。为增强用户体验感,在进入页面时使用AVPlayer设置IP动画引导,在帮助用户快速了解软件的同时,增强用户吸收知识和了解世界的趣味性。

2)盲盒收集模块。此模块是系统的主要功能模块,通过叠加视图和UIResponder 监测触摸事件绘制丝绸之路地图,地图分布着五个丝绸之路重要城市,通过选择场景,进入全景图模式。系统采用陀螺仪、SceneKit全景图技术将丝绸之路的沿岸风光展现给用户,盲盒利用视觉延伸效果,让二维平面图在视觉上呈现出立体感,将盲盒藏在全景图中,用户在领略场景的同时可寻找并收集盲盒。盲盒中可解锁AR文物或丝绸之路沿途小故事,让用户以更具互动性的方式了解丝绸之路的前世今生。同时,为了使系统的互动性更强且文物展示不趋于平面化,使用Object Capture进行文物3D 建模,ARKit 增强现实技术呈现文物,同时使用了ARKit 中的环境探针、平面锚点和人物遮挡等功能优化文物摆放。从“口传心授”到“身临其境”,以崭新的视角和跨越时空的交流联结历史与现实。

3)寓教于乐模块。运用PencilKit技术使用Apple Pencil,以刮画的形式展开DIY“文物”,以保留用户在探索丝绸之路过程中迸发出的灵感。通过笔下细致地描绘与记录,在激发创造思维的同时提高用户的绘画和动手能力。

4)个人勋章模块。在每日学习模块中学习并完成答题后即可获得该城市的丝绸勋章,丝绸勋章和用户基本信息等在本模块显示。为了保护个人的安全隐私,本模块不获取用户个人信息。

3 关键技术

3.1 SceneKit渲染全景图

SceneKit是一个高级的3D图形框架,它将高性能渲染引擎与描述性API 相结合,用于导入、操作和渲染3D图片,帮助开发者在应用程序中创建3D动画场景和效果[7]。系统使用SceneKit技术将3D模型渲染集成至项目工程中,设计并实现了以下功能:1)查看3D全景图;2)手势滑动;3)陀螺仪。其中,3D 全景图模拟了丝绸之路五大城市的沿途场景,陀螺仪使场景角度跟随手机移动,以沉浸式的体验将用户带入丝绸之路中。

ScencKit 使用SCNRender 渲染OpenGL 渲染器。全景图可被视为一张球形图片,若展示在平面上,则无法识别,当图片渲染到球体,并从中心观察球体上某一区域时,即可被识别。全景图的播放原理如图3所示,将图片渲染至球体模型内表面,智能手机处于球体中心,当旋转智能手机的时候,球体向相反的方向旋转,通过这种方式就可以看到球体上的画面。

图3 全景图渲染原理图

系统使用SceneKit 将图片渲染到球体模型上,渲染原理如4所示。首先,生成顶点数据,即球面上点坐标的数据。球体中的3D 物体都由三角形构成的,构建一个球体只需要利用球坐标系中的经度角φ、纬度角θ和半径r来计算球面点的三维坐标。最后,这些坐标点构成许多小矩形,每个矩形可以分成2 个三角形。

图4 图片绘制到球体原理图

在图4 的直角坐标系中,利用经度角φ、纬度角θ和半径r即可得到球面点坐标(x,y,z)的计算如式(1)所示:

但由于渲染时,图片渲染在球体的外表面,而智能手机处于球体中心,所以需对渲染的图片位置进行处理,处理代码如下所示:

将图形渲染到模型后,添加相机实现可视。SCNCamera 是SceneKit 中的相机属性,可以连接到节点,为显示场景提供视角。系统将SCNCamera相机添加到球体中心,设置观察区域。此时,当调整照相机观察的角度或旋转照相机,观察区域会随之改变,这样即可实现用户与全景图的交互。

SCNCamera 对象本身定义了渲染场景的形状和外观。默认情况下,相机定义透视投影,其视(FOV)以及近距离(Near) 和远距离(Far) 的可见性将限制开发者调整相机透视中的属性,如图5所示。

图5 相机坐标系和投影参数图

通过观察xFov 和yFov 可知,视角越大,屏幕上显示的体积越小;根据focusDistance可知焦距越大,视角越小。

3.2 Object Capture建立3D模型

Object Capture 主要包括设置和构建两方面。设置包括创建Photogrammetry session,通过信息流发送的回调信息进行监听,监测其状态和错误等。构建即利用session调用构建方法并发起请求。

系统使用CaptureSample中的相机捕捉以收集3D模型的全方位图像,相机不是围绕光学中心旋转,而是使用相机从不同角度获取模型的图像,根据其立体深度数据计算模型的立体信息,复原物体的真实尺寸,并利用重力方向自动让模型朝上。同时,利用HelloPhotogrammetry 命令行,在图片文件中创建并导出3D 模型。导出的模型共有三种格式:USDZ、USDA和OBJ,系统使用USDZ(Universal Scene Description)格式,USDZ是Apple与皮克斯共同研发的USD格式基础上的AR 素材存储格式。导出USDZ 模型后,利用Xcode 内置的Reality Composer 为3D 模型构建场景、添加交互动作等。

以文物模型为例建立3D 模型,系统将完成以下步骤:

1)利用CaptureSample 中的相机拍摄文物模型的全方位图像;

2)确定屏幕坐标系,将得到的图像进行处理;

3)利用HelloPhotogrammetry 命令行,创建三维文物模型;

4)导出USDZ格式的三维文物模型;

5) 使用RealityComposer 为三维文物模型添加交互动作。

3.3 ARKit增强现实

ARKit 框架通过集成iOS 设备摄像头和运动功能,在应用程序中产生增强现实体验。它是一种巧妙地将虚拟信息与现实世界相结合的技术,被广泛使用于多媒体、三维建模、智能交互、传感等技术手段,将文本、图像、视频和三维模型等计算机生成的虚拟信息模拟到现实世界中,这两种类型的信息相互补充,以实现对现实世界的“增强”[8]。

AR 从其技术手段和表现形式上,可以分为两类,分别是基于计算机视觉的AR 和基于地理位置信息的AR。系统采用基于计算机视觉的AR技术,利用计算机视觉收集的信息来模拟和重新输出人的视觉感受,以便将虚拟信息与真实信息叠加,并为人提供超越现实世界感受的视觉效果[9]。它的实现方法如图6所示。首先将预制的标志物放入真实场景中,用于确定真实场景中的平面。通过摄像头对其进行识别和姿态评估,将标志物的中心设置为标志坐标系的原点。从标志坐标系到真实的屏幕坐标系的转换需要旋转平移到摄像头坐标系,再从摄像头坐标系映射到屏幕坐标系。

屏幕坐标系是以智能手机屏幕为轴线建立的坐标系。通过标志坐标系和屏幕坐标系之间的差别变换,建立两个坐标系之间的映射关系。根据差别变换,在屏幕坐标系上绘制的图形可以实现附加在标志物上的图形的效果。

图6 基于计算机视觉的AR原理图

iOS 平台的AR 应用通常由ARKit 和渲染引擎组成。ARKit 是连接现实世界与虚拟世界之间的桥梁,渲染引擎则是将虚拟世界的内容渲染到屏幕上。系统使用Object Capture 建立三维文物模型,模型的外观、尺寸、纹理等都根据实际的文物设计;使用ARKit增强现实技术向用户展示文物,用户可以通过各种方式与文物互动,比如移动、旋转、放大和缩小等[10]。

在AR 增强现实环境中,为了给用户带来更沉浸式的体验,应确保虚拟文物在移动、旋转和放大缩小时能够有适应视觉的速度和虚拟成像,以满足用户的交互体验。防止因速度过快或过慢导致成像不清晰、文物移动到屏幕外、高速旋转等问题。

如图7所示,假设与旋转轴同向的单位向量是,旋转前向量是,θ是绕经过逆时针方向旋转的角度,根据罗德里格旋转公式[11]可以得到旋转后的向量ot。

图7 旋转速率计算图

首先对v→做正交分解如式(2),之后根据向量三重积展开公式得到的垂直向量。

图中给出的几何关系如式(3)所示:

根据以上关系式可以得出v→rot的垂直向量如式(4)所示:

当文物的旋转速度、速率和其他物理特征异常时,系统将及时响应并处理。系统通过AR 互动展示将古代展品带到身边,让古代壁画和器具都能利用AR 增强现实技术动态呈现,打破了时间和空间的限制,满足用户游览、欣赏和研究的需求。

4 系统实现与应用部署

4.1 系统主要功能的实现

当用户进入盲盒收集模块时,会显示出一张陆上丝绸之路地图,如图8(a)所示,地图上分布着丝绸之路沿途的重要城市,用户可通过选择城市进入该城市的全景图模式。全景图界面如图8(b)所示,进入全景图后可通过旋转智能手机或滑动界面来切换视角,寻找并收集盲盒,系统使用智能手机旋转的角度或手指移动的距离,以表示视角在三维空间中的旋转,从而实现陀螺仪、手势滑动等功能。

图8 盲盒收集模块界面

盲盒随机散列在全景图中,收集并打开盲盒后,将随机展示丝绸之路历史文化或AR文物,若为AR文物展示,则可直接预览文物、查看文物介绍,或进入AR 体验。虚拟文物模型主要使用了ARKit 技术和三维建模技术,使用Object Capture技术建立文物的三维模型,生成usdz 文件,投入项目使用。基于本文章节4.3 引入的基于计算机视觉的AR 技术,利用ARKit 扫描用户周围的平面,选择平面后利用平面锚点将虚拟文物添加到平面上,并为文物添加交互。实际效果如图9(a)和图9(b)所示,分别展示了西汉漆绘带盖陶钫和鎏金錾花铜函的三维模型。

图9 文物三维模型

4.2 系统的应用

目前该款App已上架至Apple App Store供用户下载,且被App Store 推荐至Today 模块。在开发后期,软件上架到TestFlight进行功能测试、内测预热。通过用户调研收集到部分用户的反馈意见,根据意见和评论,将软件充分调整和完善。目前,软件适配iPad 和iPhone端。

在系统编码实现阶段,不仅使用了iOS 原生开发技术,还运用了最新的ARKit 6 和SceneKit 技术。例如,在定位虚拟文物模型时使用了ARKit 6 中的平面锚点和环境探针技术,在虚拟文物模型的交互中使用到了人物遮挡效果,通过Object Capture工具生成了虚拟文物模型。在检测系统功能方面符合预期目标,经过大量的测试和验证,完成了一定程度上的优化。

5 结束语

本文基于SceneKit与ARKit6两项技术,设计并且实现了基于iOS平台的丝绸之路文化传播软件。软件采用业务层、工具层和SDK层三层架构、UIKit框架与MVC 设计模式,利用ItemCF 协同过滤算法智能针对用户智能推送各地区的历史文化资料,SceneKit 全景图技术模拟丝绸之路的沿途场景,通过Object Capture技术创建三维文物模型,ARKit6实现用户与三维文物的交互。

系统着重突出创意性、科技性和趣味性,聚焦“考古+盲盒”创意形式,做到“以思绪畅游历史,以指尖丈量丝路”,使用户足不出户即可身临其境地感受丝绸之路宏伟壮阔的场景,通过虚拟与现实的联结,让文物和场景都活起来,摆脱了传统学习历史文化的方式,更具趣味性,增强了用户的交互体验感。综合体现了历史文化价值以及民族美学艺术。

猜你喜欢

全景图盲盒视图
盲盒,玩的就是心跳
盲盒拆出的众生相
Cлово месяца
“盲盒”,盲在何处?
嫦娥四号月背之旅全景图
视图
Y—20重型运输机多视图
SA2型76毫米车载高炮多视图
奇妙岛全景图
奇妙岛全景图