资讯动态

拆解 Mirador 官方 Greenwich 示例项目:在世界本初子午线构建 AR 观景体验

发布时间:2026/8/25 10:02:11 来源:尧图企业网站定制
拆解 Mirador 官方 Greenwich 示例项目在世界本初子午线构建 AR 观景体验【免费下载链接】MiradorMirador makes it easy to build impressive “Point of Interest” AR experiences, on Apples new RealityKit framework.项目地址: https://gitcode.com/gh_mirrors/mi/MiradorMirador 是一个基于 Apple RealityKit 框架的开源 AR 库专门用于构建“兴趣点POI”观景体验。本文以官方 Greenwich 示例项目为例带你完整拆解它是如何利用格林威治本初子午线地面上的一块“世界遗产”铜牌作为定位锚点把金丝雀码头、O2 竞技场等伦敦地标的 AR 观景标签精准悬浮在真实天空中的以及这套体验如何在家中调试。 一、AR 观景应用为什么需要“锚点”做 AR 观景时最容易想到的方案是用 GPS 定位再把标签贴到天上去。但现实中这条路走不通AR 框架不知道“你在哪”RealityKit 只追踪手机的三维运动像第一人称游戏镜头一样它没有 GPS、更不懂真实世界坐标GPS 和罗盘并不可靠在繁华街道上定位偏 10 米、朝向偏 90° 是常态AR 标签会完全错位Mirador 的解法用一张锚点图片观景台的信息牌、地面标记等先判断出你的位置和朝向再由它来计算所有 AR 元素的正确位置。所以 Greenwich 示例的核心命题就是如何把本初子午线地面的一块铜牌变成整个 AR 场景的定位基准。 二、示例项目文件结构一个 AR 观景应用由哪些部分组成示例非常精简核心逻辑全部在Demo/目录的 3 个文件里文件作用Demo/MiradorApp.swiftSwiftUI 入口仅负责挂载主视图Demo/ContentView.swift核心演示代码构建锚点与 POI启动 AR 视图Demo/greenwich.json同一套 AR 体验的 JSON 配置另一条搭建路径Demo/Assets.xcassets/greenwich.imageset/heritage_4.png锚点图片世界遗产铜牌实拍Package.swift库定义iOS 16纯 Swift、零第三方依赖库本体源码在 Sources/Mirador/ 目录重点关注 LocationAnchor.swift锚点 兴趣点数据模型和 MiradorView.swiftRealityKit 渲染与 ScreenScale/FaceCamera 逻辑。️ 三、锚点图片详解一块铜牌如何成为 AR 定位基准演示的锚点图片是格林威治航海遗产步道地面上嵌入的“世界遗产World Heritage”铜牌在 Assets 中命名为greenwichContentView.swift 中创建LocationAnchor时的 5 个参数每个都对应一个现实事实参数Greenwich 的取值含义namegreenwich必须与 Assets 里的锚点图同名供图像识别匹配physicalWidth0.5铜牌实际宽 0.5 米用于换算真实尺度coordinate/altitude51.47787836, -0.00084588 / 46 米铜牌所在处的真实经纬度与海拔bearing-30°铜牌相对正北的朝向orientationhorizontal铜牌嵌在地面在家对着屏幕测试时可改为 vertical两条实用经验锚点照片要正面拍摄、避开阴影与反光——透视变形过的图片会被 RealityKit 拒绝识别不在现场时把这张图放大显示在电脑显示器上用手机直接扫描即可完成识别。️ 四、greenwich.json 逐行解读6 个伦敦地标的 AR 标签如何摆放兴趣点一多用代码写坐标就会很繁琐。Mirador 支持用一份 JSON 描述整套体验解析逻辑在 LocationAnchorJSON.swift。Greenwich 的完整配置里包含6 个真实地标兴趣点坐标经度, 纬度海拔米Canary Wharf 金丝雀码头-0.01948017, 51.50493780235O2 Arena 千禧巨蛋0.00321850, 51.5029611252Maritime Museum 皇家海军博物馆-0.00523010, 51.4809325530Queens House 王后宫殿-0.00373435, 51.4811533720City of London 伦敦金融城-0.08024839, 51.51438463200Prime Meridian 本初子午线-0.00116005, 51.4777685552你站在铜牌处、App 识别到锚点后Mirador 就基于锚点的 GPS 坐标和朝向算出这 6 个地点的相对方位把标签贴进天空的对应方向——镜头朝金丝雀码头标签就出现在金丝雀码头的方向全程不依赖手机 GPS。用代码方式ContentView.swift则是等价的每个 POI 只需Coordinate→Location→PointOfInterest三步。️ 五、ContentView.swift 关键流程AR 观景体验的启动与暂停主视图用 SwiftUI 组织关键动作只有三步创建容器MiradorViewContainer(locationAnchor:)内部封装了 RealityKit 的ARView并为每个 POI 自动生成带默认外观的标签添加自定义元素示例用addPOIImage()在伦敦金融城方向贴了一张城市天际线图见 Demo/ContentView.swift。这张图会保持 300 点屏幕大小、始终正对相机——ScreenScale与FaceCamera正是 Mirador 封装的两个实用属性生命周期管理onAppear时调用run()onDisappear时调用pause()避免重复启动、防止相机资源泄漏。完整的参数说明与权限配置参见 README.md 的 Setup 章节。 六、不在伦敦也能调试两个实用测试技巧观景体验不可能天天站在现场开发README 给出了两条调试路径电脑屏幕锚点法把锚点图显示在大屏上用手机扫描立刻能验证 6 个 POI 标签方向对不对、数量会不会太挤ARKit 会话录制回放在 Reality Composer 中录一段含视频与运动数据的第一视角会话保存到 Files注意别走相机胶卷会丢失嵌入数据然后在 Xcode 的 Run Options ARKit 中启用 Replay data 并选中该文件连真机运行即自动回放并识别锚点。注意 LiDAR 设备的录制只能在同类设备回放。 七、三步上手搭建自己的 AR 兴趣点观景应用获取代码git clone https://gitcode.com/gh_mirrors/mi/Mirador用 Xcode 打开Mirador.xcodeproj中的 Demo 工程集成到自有 App通过 Swift Package ManagerFile Swift Packages Add Package Dependency添加 Mirador在 Info.plist 中补充NSCameraUsageDescription并务必在真机上运行——RealityKit 依赖相机模拟器不可用替换内容把LocationAnchor的坐标、朝向、锚点图换成你自己的观景点即得到属于你景区的“本初子午线观景”。典型适用场景旅游导览 App、山景地标、城市观景台等。若需要自定义 UI可用 SwiftUI 的ImageRenderer把视图渲染成图片再通过addPOIImage()贴进 AR 空间。 八、已知限制锚点旁的内容为什么会“抖动”README 的 Known Issues 提到RealityKit 每一帧识别到锚点图都会更新锚点位置而当图片只露出边缘时更新并不精确导致锚定内容跟着抖动。Mirador 的对策是一份仅 23 行的 KalmanFilter.swift——用卡尔曼滤波对位置更新做加权平滑收敛出稳定朝向。这也是处理“传感器数据不精确”这类问题的一个经典工程范例。总结Greenwich 示例用百余行演示代码展示了 Mirador 的完整工作流锚点图片定位置 → GPS 坐标定方向 → POI 悬浮于天际线。如果你也想做一套 AR 观景应用只需回答三个问题我的锚点是什么图片名、物理宽度、坐标、朝向我要把哪些兴趣点放在哪里坐标 海拔什么时候启动和停止run()/pause()答案填进LocationAnchor剩下的交给 Mirador。【免费下载链接】MiradorMirador makes it easy to build impressive “Point of Interest” AR experiences, on Apples new RealityKit framework.项目地址: https://gitcode.com/gh_mirrors/mi/Mirador创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价