Vision Pro开发实践（一）

VisionPro是苹果公司的首款头戴式“空间计算”显示设备，于2023年6月6日在“WWDC2023”正式发布，同时推出的还有专为VisionPro打造的操作系统平台visionOS，以及一整套“新的”开发工具，之所以打引号，是因为用于VisionPro开发的工具和编程语言并没有多少改变，而更多的是需要开发者的开发思维变化。

最近公司组织了几批人员，前往苹果实验室实地体验VisionPro，并在现场进行适配调试。我有幸参与其中，现在就把整个过程的体验分享给大家，同时分享一些visionOS开发的基础。



但是苹果显然认为这种交互方式不够理想，如果体验过其他苹果产品就会发现，苹果的设计师似乎一直倾向于利用用户自己的身体来实现目标需求，指纹识别，面部识别，多指手势以及“嘿，Siri”都是一贯如此。而在VisionPro上，苹果认为用户的眼睛和手完全就可以胜任手柄的工作，所以他们提出的交互方式是别具一格的“眼球追踪+手势识别”。

苹果通过遍布VisionPro眼部周围的传感器，实现了精读极高的眼球追踪技术：



这样一来，用户的眼睛就变成了鼠标的指针，想要选中哪个元素，只要看向它就可以了。就我实际的体验而言，精度和准确率都非常之高，就连非常小的UI元素都可以准确的选中：



不止如此，苹果还通过VisionPro下面的一圈传感器进行手势的收集和识别：



苹果下了这么大的血本只为了一个目的：无论用户的手放在哪里，都可以实现高精度的手势识别，面前，腿上，沙发上都可以。在首次开机的学习引导里，苹果给出的提示语就能非常好的概括：“youcanplaceyourhandswhereveryoufeelcomfortable”

除了不限位置，VisionPro还可以准确的识别单击、捏住和双手手势：



DoubleTap：双击手势。

PinchandDrag：可用于滚动和移动窗口。您可以水平或垂直滚动，如果用户加快手势速度，交互界面也会相应地调整速度。

Zoom：双手手势之一，可以把手指捏在一起，通过拉开手势进行放大，窗口大小也可以通过在角落拖动来调整。

Rotate：另一个双手手势之一，它将涉及将手指捏在一起并旋转双手以操纵虚拟对象。

现在还无法断言苹果这套交互方案和手柄对比谁好谁坏，但是正如以往苹果率先提出的“触屏取代实体键盘”，“触摸板手势”以及“全面屏交互”等方案，经过长时间的市场检验，最终还是别广大厂商采用并效仿，这一次苹果在VisionPro上提出的这套全新的“空间交互方案”日后很有可能成为VR设备采用的主流方案。

不少研发同学都会有疑问：我的APP没有单独对VisionPro做过适配，那么它能直接在VisionPro上运行吗？可以的话它原始的适配逻辑又是什么？

首先对于第一个疑问，答案是肯定的，就算没有经过任何适配，app依然可以在VisionPro上正常运行，所有的交互都能执行，甚至可以通过盯住屏幕左侧用捏住并拖拽实现“左划返回”手势。

至于原始适配逻辑，如果有曾经在iPad，或者M系列芯片Mac电脑上运行手机App的经验，就能大致明白他们在VisionPro上的适配逻辑了，就是在屏幕上创建一个手机屏幕大小的“模拟器”，让app在上面运行。这里以我们“京东到家”的app为例



当然，如果app做过iPad的适配，那么在VisionPro上的展示样式则会优先展示为iPad的样式，比如京东主站app：



同时，在App下端会展示两个控制元素，一个小圆点和一个横条。眼睛看向小圆点的话，它会变成一个叉号，用于关闭App（退至后台），需要完全杀死App的话，逻辑则类似于Mac电脑的杀死进程，需要同时按住VisionPro的返回键和表冠2秒，然后再应用列表中找到App强制结束



那既然不需要适配也可以正常运行，我们是不是就不需要单独进行VisionOS的开发了呢？当然不是。未经适配的App虽然能够正常运行，但是它的展示样式毕竟是为了手机端而设计的，在VisionPro上，屏幕从2D的平面拓展到了3D的空间，而在“空间”中，VisionPro更着重于凸显“无界”的概念：



苹果更倾向于让App没有边界，不局限于手机屏幕的条条框框中，更加融入到空间之中，同时visionOS也允许UI元素超出App的界面边界。所以对于VisionPro的适配，更多的是从平面到空间的思维转变，如何让App在“空间”这一画布上更好地呈现设计者想要表达的意图才是重中之重。要进行“空间计算”开发，就要了解基础的visionOS开发机制，下面我将介绍一些入门的知识。

首先，在Xcode15中创建app时，除了以前的iOS、macOS等平台，现在可以选择visionOS平台进行开发，此时SwiftUI提供了许多专为VisionPro准备的新API，以供空间应用开发。



选择visionOS平台后，可以设置场景类型和氛围样式：



visionOS的app中可以创建三种场景类型：

Window形式





Volumes形式



苹果官方描述说这是最适合展示3D模型的场景，当在app中创建了Volumes类型的场景时，visionOS会开辟出一个3D的空间用于放置3D元素，如果我们想要放置商品的3D模型进行全景展示，可以创建这种场景

Spaces形式



在这种场景下，visionOS会将使用者周围全部设置为可以放置UI元素的区域，周围的所有空间都可以作为开发者的“画布”，你可以在任意位置放置2D、3D模型。但是需要注意的是这种场景理论上只应创建一个。

氛围样式是app的呈现形式，分为.mixed，.progressive，.full三种，我们可以通过一个图来清晰明了的理解它们分别代表的意思：



在工程当中也可以通过代码来进行设置，以实现在不同氛围之间切换：

@mainstructMyImmersiveApp:App{@StateprivatevarcurrentStyle:ImmersionStyle=.fullvarbody:someScene{WindowGroup(){ContentView()}//(id:"solarSystem"){SolarSystemView()}.immersionStyle(selection:$currentStyle,in:.mixed,.progressive,.full)}}

既然app是在VisionPro的空间中展示，那么最好可以遵循VisionPro统一的样式风格，比如：

圆角，毛玻璃半透明的背景



悬停效果





但是苹果似乎觉得这样简单粗暴的悬停效果不够高雅，所以提供了hoverEffect属性让我们可以自定义悬停效果：



这样设置后，眼睛停留在元素上时，我们可以实现高亮、突出、改变圆角等效果，而且高亮点会随着眼睛盯的点而改变，非常神奇。

在visionOSapp中，为了提高场景的沉浸感，苹果允许把导航栏、tab栏和工具栏等内容无关的元素设置到界面外，并且给他们起了一个独特的名字：ornament。使用系统自带的UIHostingOrnament：



当然也可以自定义，将原来的导航栏等元素改造成ornament：

改造前

structContentView:View{@Stateprivatevarselection:AppScreen=.backyardsvarbody:someView{NavigationSplitView{AppSidebarList(selection:$selection)}detail:{AppDetailColumn(screen:selection)｝｝}

改造后

structContentView:View{@Stateprivatevarselection:AppScreen=.backyardsvarbody:someView{View().ornament(visibility:isGoalPanelVisible,attachmentAnchor:.scene(.bottom),contentAlignment:.center){NavigationSplitView{AppSidebarList(selection:$selection)}detail:{AppDetailColumn(screen:selection)}}}}

visionOS使用了苹果布局多年的RealityKit，结合SwiftUI，从而使得加载3D和2D模型就像加载一张本地资源图片一样方便：

structSphereView:View{@Stateprivatevarscale=falsevarbody:someView{RealityView{contentinifletearth=try?awaitModelEntity(named:"earth"){(earth)}}update:{contentinifletearth={=scale?[1.2,1.2,1.2]:[1.0,1.0,1.0]}}.gesture(TapGesture().targetedToAnyEntity().oned{_()})}}

代码中RealityView就是专门用来展示模型资源的视图，就如同UIImageView加载图片一样，使用ModelEntity就可以很方便的加载本地的模型资源，并设置碰撞体积CollisionComponent和旋转缩放等等



需要注意的是苹果目前仅支持USDZ格式的模型，苹果给出了几个非常精美的模型资源以供下载：



另外我找到了几个可以免费下载USDZ格式资源的网站：





我们在进行实际业务场景适配的时候，如果是全新的VisionProapp，则首先要判断当前平台是否是visionOS，如果是像我们一样基于iPadapp进行改造，那么要判断是否是iPad设备，我们所采用的机型判断方法为：

funcosType(){==.phone{print("ThiscodeisrunningoniPhone")}==.pad{print("ThiscodeisrunningoniPad")}==.vision{print("ThiscodeisrunningonVisionPro")}}

以我们零售app的适配设计为例，是基于iPadapp进行改造，为了获得更好的展示效果，需要针对宽屏做UI改造：

iPhone设计稿：



iPad设计稿：



除了上文中提到的悬停效果等改造，资源位宽度，间距和排布等要素也需要进行相应的改变，来适配iPad或者VisionPro更宽阔的视野。我们的Feeds展示场景，入口求部分氛围中配置的楼层背景图拉伸，并根据设计稿进行适配；为你推荐资源位一行二的展示样式改为为一行四，在用户使用时能够获得更好的视觉体验。

本篇暂时就先介绍到这里，后续会有更多VisionPro适配和空间开发的文章，希望能帮助大家在即将到来的这场“空间计算战斗”先拔头筹。