在 visionOS 中使用透视功能渲染 Metal

准备好扩展适用于 visionOS 的 Metal 体验吧。了解利用透视功能将渲染的内容与用户所处的物理环境整合起来的推荐做法。了解如何放置渲染的内容以使其完美融入现实世界、使用可跟踪锚点预测来降低延迟，等等。

章节

0:00 - Introduction
1:49 - Mix rendered content with surroundings
9:20 - Position render content
14:49 - Trackable anchor prediction
19:22 - Wrap-up

资源

相关视频

WWDC24

使用 ARKit 打造更出色的空间计算体验

WWDC23

下载

大家好欢迎各位我叫 Pooya 是 Apple 的工程师今天我将展示如何充分利用 visionOS 的强大功能将 Metal 从完全沉浸样式扩展到混合式沉浸最棒的是将 Metal 扩展到混合式沉浸所用的工具和框架很可能正是你已经非常熟悉的那些

去年我们展示了如何使用 ARKit、 Metal 和 Compositor Services 通过你自己的渲染引擎来提供完全沉浸式体验而今年我很高兴为你介绍 Metal 如何帮助你以混合沉浸样式进行渲染从而模糊现实世界与想象力之间的界线

你可能已经在使用 Compositor Services 来实现自己的渲染引擎并将 Metal 和 ARKit 作为 RealityKit 中的替代渲染方法你可以使用 Compositor Services 来创建渲染会话使用 Metal API 来渲染精美图像帧还可以使用 ARKit 来实现现实场景跟踪和手部跟踪在今天的讲座中我将介绍如何使用 Metal、 ARKit 和 CompositorServices API 来创建能够提供混合沉浸式体验的应用程序第一步是将渲染的 App 内容与周围的物理环境无缝融合接下来我将展示如何改进渲染内容相对于物理环境的定位最后我将讲解如何获取和使用可跟踪锚点位姿的正确预测时间例如当你跟踪某个人的手部以及这双手与之交互的虚拟物体时接下来我要介绍第一步将渲染内容与周围环境进行混合如果你之前有过使用 Compositor Services API、 Metal API 和 Metal 渲染技术的经验你就能充分利用这次讲座介绍的内容如果你以前从未使用过这些工具可以观看我们之前发布的一些视频还可以访问 developer.apple.com/cn/ 获取代码示例和文档我们这就开始吧

在混合沉浸样式中用户既能看到渲染内容也能看到周围的物理环境你可以完成以下几个步骤来确保混合沉浸效果尽可能逼真首先将可绘制对象的纹理清除至正确的值这个值将会不同于可能在完全沉浸式样式中使用过的值第二步是确保你的渲染管道能够生成正确的颜色值和景深值比如预乘 alpha 以及 visionOS 应有的 P3 色域

然后使用 ARKit 提供的场景理解功能将渲染内容锚定在现实世界中并进行物理模拟最后指定适合你的 App 体验的上肢可见性类型要让 App 采用混合沉浸样式这个过程的第一步非常简单只需在设置 immersionStyle 时添加 mixed 作为选项即可默认情况下 SwiftUI 会创建窗口场景即使 App 中的第一个场景是 ImmersiveSpace 也是如此你可以将 PreferredDefaultSceneSessionRole 键添加到应用程序场景清单中来更改默认场景行为如果你要使用包含 Compositor Space Content 的空间则需要使用 CPSceneSessionRoleImmersiveApplication 你还可以根据应用程序场景调整 InitialImmersionStyle 键如果你打算启动进入混合沉浸则需要使用 UIImmersionStyleMixed

在渲染循环开始时应该清除可绘制对象的纹理正确的颜色值会根据渲染时采用的沉浸样式而有所变化以下是一个典型的渲染循环 App 获取了一个新的可绘制对象通过载入和清除操作来配置管道状态对它的 GPU 工作负载进行编码呈现可绘制对象最后提交

在编码阶段首先需要清除颜色和景深纹理因为渲染可能不会处理纹理中的每个像素景深值始终应该清除至 0 值但是正确的颜色纹理值具体取决于所使用的沉浸样式在完全沉浸样式中应该将颜色纹理清除至 (0,0,0,1) 在混合沉浸中应该一律使用 0 值以下是相关代码在这个示例中我创建了 renderPassDescriptor 并定义了它的颜色和景深纹理然后我调整了载入和储存操作以确保在开始渲染之前清除纹理我已将景深和颜色附加项全部清除至 0 值因为这个示例需要使用混合沉浸样式所以将颜色纹理中的 Alpha 值设置为 0

接下来确认 App 采用支持的惯例来渲染颜色值

你可能已经非常熟悉 alpha 融合了这种方法用于以逼真的方式将背景和前景中的纹理结合在一起 visionOS 上的颜色管道采用的是预乘 alpha 颜色惯例这意味着你会先将着色器中的颜色通道乘以 alpha 值然后再将它传递给 Compositor Services

visionOS 颜色管道在 P3 显示屏色域中运行为了提高 App 渲染内容和透视之间的颜色一致性素材应该处于显示屏 P3 色域内如需了解更多信息请参考 developer.apple.com/cn/ 上的文档

Compositor Services 同时使用渲染器提供的颜色和景深纹理来进行合成操作值得注意的是 Compositor Services 需要景深纹理采用反向 Z 轴惯例给定像素的渲染内容如果具有大于 0 的 alpha 通道和有效的透视景深值就会显示在显示屏上为了避免出现视差效果渲染器需要提供所有像素的正确景深值此外为了提升系统性能对于 alpha 值为 0 的像素渲染器应该传递深度值 0 接下来使用 ARKit 提供的数据将场景理解与渲染内容整合在混合沉浸样式中用户可以同时看到渲染内容和周围的物理环境为了确保体验更逼真需要将场景理解整合到 App 的渲染逻辑中借助 ARKit 你可以将渲染内容与现实世界中的物体和表面锚定执行所需的任何物理模拟以实现渲染内容与环境中物理对象之间的逼真交互或者遮挡显示在物理对象后面的任何渲染内容要进一步了解 visionOS 上的 ARKit 请观看 “了解用于空间计算的 ARKit” 快要完成了！最后一步是指定 visionOS 对用户双手和双臂可见性的处理方式称为“上肢可见性” 在混合沉浸样式中上肢可见性有三种模式可供选择第一种模式是 Visible 如果选择 Visible 模式则无论对象的相对景深如何手部会始终显示在上方

第二种模式是 Hidden 在这个模式下手部会始终被渲染内容遮挡最后还可以选择 Automatic 模式在这个模式下手部可见性会根据渲染内容的景深而发生变化如果手部位于对象前方就会显示出来让用户看见如果手部的景深增加就会逐渐隐去系统会为你代劳我们来详细了解一下这其中的工作方式假设佩戴头显的用户采用了混合沉浸样式场景中有两个渲染对象红色圆形和黄色立方体用户的手部也位于视野范围内渲染场景之后可绘制对象的景深和颜色纹理就是这样的此外值得强调的是在 Compositor Services API 中渲染器提供的深度纹理应该具有反向 Z 值如果你为上肢可见性指定了 Automatic 模式 Compositor Services 就会使用你为纹理设置的景深值框架会利用这些值根据手部位于对象前方来确定手部应该部分隐藏如果手部位于对象后方或内部则确定手部应该完全可见

以下是实现这项功能的代码使用 upperLimbVisibility 可以让系统知道你的 App 请求的是哪一种上肢可见性模式在这里我请求的是 Automatic 模式在视觉效果上将渲染内容与周围物理环境进行混合后务必要确定内容的位置让内容看起来与环境浑然一体为此你需要首先将内容从现实环境坐标空间变换到归一化设备坐标空间我将展示如何利用具有场景感知能力的投影矩阵来改进内容的定位然后我将介绍 Compositor Services 框架输入支持哪个归一化设备坐标惯例最后我将提到一些可在你的渲染引擎中使用的替代中间惯例在渲染对象时就 Vision Pro 的位置和方向而言你需要将 3D 现实场景空间中的内容变换到 2.5D 空间也称为归一化设备坐标空间这个矩阵称为 ProjectionViewMatrix ProjectionViewMatrix 结合了 ProjectionMatrix 和 ViewMatrix ViewMatrix 可以扩展为两种变换第一种变换是从原始空间到设备空间的变换称为 deviceFromOrigin 第二种变换是从设备空间到观察空间的变换称为 viewFromDevice

为了与 visionOS API 相匹配 ProjectionViewMatrix 等于 ProjectionMatrix 乘以 originFromDevice 与 deviceFromView 相乘的逆矩阵 deviceFromView 变换可通过在 Compositor Services API 中调用 cp_view_get_transform 来获得这个方法会返回能够将渲染视图引入设备空间的矩阵对于 originFromDevice 当你调用 ar_anchor_get_origin_from_anchor 时 ARKit API 会提供这一数据今年为了改进渲染内容相对于现实场景对象的定位你可以获取具有场景感知能力的投影矩阵这个矩阵可将两个相机内在函数与实时逐帧场景理解因素相结合通过改进渲染内容相对于现实场景对象的定位来优化混合沉浸样式的使用体验如果应用程序通过 Compositor Services 请求混合沉浸样式则必须使用这个新的 API 将内容从现实场景空间变换到纹理坐标空间之后 App 的可绘制对象颜色和景深纹理渲染后的效果就是这样在纹理空间中 X 轴的方向为从左到右 Y 轴的方向为从上向下请注意深度值应该采用反向 Z 轴惯例

鉴于 visionOS 使用的是注视点颜色管道我们来进一步了解一下这就是可绘制对象纹理在屏幕上和物理空间中的效果这意味着物理空间的尺寸小于屏幕空间纹理的尺寸屏幕空间是用户感知这些值的位置而物理空间是内存中储存实际值的位置

要进一步了解注视点渲染的工作方式请访问 developer.apple.com/cn/ 观看“以不同的光栅化速率进行渲染” 我们来更深入地了解一下 Compositor Services 需要的可绘制对象归一化设备坐标空间归一化设备坐标空间有 3 个坐标轴水平方向上的 X 轴垂直方向上的 Y 轴以及正交绕序所有这三个轴都会影响渲染器的方向

Compositor Services 需要使用归一化设备坐标空间来渲染颜色和景深这两种纹理以便让 X 轴方向为从左到右让 Y 轴方向为从下到上让绕序方向为从前到后但是你的渲染引擎可能会在其他归一化设备坐标空间中渲染中间纹理 Compositor Services 还可以采用多种惯例来提供场景感知投影矩阵翻转 Y 轴或翻转绕序从根本上说渲染引擎需要负责确保最终的可绘制对象纹理采用 Compositor Services 需要的惯例接下来我要通过深入探讨一个代码示例来详细说明如何通过 visionOS API 构建投影视图矩阵获得给定显示时间的 deviceAnchor 之后应该将 deviceAnchor 传递给 Compositor Services API

对于给定的 deviceAnchor 现在可以遍历可绘制对象上的视图计算出每个视图的 projectionViewMatrix 首先获取相应的视图然后使用 ARKit API 获取 originFromDevice 变换然后使用 Compositor Services API 获取 deviceFromView 变换然后构建由这两者组成的 viewMatrix 这个矩阵会提供原点处的视图调用 computeProjection API 并采用 Compositor Services 需要的惯例 .rightUpBack space 来获取给定视图的投影视图最终通过将投影与视图矩阵变换相乘构建出一个 projectionViewMatrix 还要注意一点你的应用程序应该在每一帧都获取一次这些变换其中任一变换都不应重复使用来自较早图像帧的变换确定渲染内容的位置之后这时候就需要思考用户与它交互时会发生什么锚点表示了现实世界中的位置和方向可跟踪锚点是一种实体列表系统可能会在会话过程中获得或丢失这些实体的跟踪状态可以使用可跟踪锚点来定位渲染内容例如一个人的手是可跟踪的锚点实体要设置可跟踪锚点首先需要授权与 ARKit 进行连接你需要通过会话请求你想要访问的数据类型的授权接下来设置数据提供程序通过数据提供程序你可以轮询或观察锚点变化等数据更新最终通过 ARKit API 获取可跟踪锚点以每帧一次的频率在渲染循环内首先更新渲染器的逻辑然后将数据提交到 Compositor Services 我们来详细了解一下渲染循环它由两个阶段组成第一个阶段是更新阶段其中包括模拟端的逻辑比如交互和模拟物理定律这个阶段通常发生在 CPU 端你需要获取可跟踪锚点和设备位姿这两者才能正确计算模拟逻辑第二个阶段是提交阶段会将最终结果渲染到纹理中这个阶段发生在 GPU 端随着图像帧显示时间接近调用预测查询的时间锚点位姿预测函数的准确性也会有所提高为了获得更准确的锚定结果需要再次查询锚点和设备位姿以确保结果尽可能准确这个示意图界定了时序对图像帧不同部分的影响你可以从 Compositor Services 获取四种时序图像帧时间线表示应用程序正在完成的工作

最佳输入时间是指 App 完成交互和物理定律模拟等非关键任务的时间在更新阶段开始时 App 会查询可跟踪锚点和设备锚点最佳输入时间刚过的时候是查询延迟关键型输入并开始渲染图像帧的最佳时机渲染截止时间是指 CPU 和 GPU 渲染一帧的工作应该完成的时间可跟踪锚点时间是指摄像头观察周围环境的时间对于可跟踪锚点应该利用这个时间来进行锚点预测最后显示时间是指图像帧在显示屏上显示的时间这个时间应该用于进行设备锚点预测想象一下设备视野中有这样一个场景有一个红色球体被用户拿在手中还有一个黄色立方体放置在环境中进行渲染后这个场景在设备显示屏上的效果是这样的现在对于任何没有附加到可跟踪锚点的渲染内容比如这个黄色立方体可以通过查询显示时间的设备位姿来计算它相对于设备变换的变换但是对于任何附加到可跟踪锚点的渲染内容例如红色球体则需要同时使用可跟踪锚点位置和设备位置对于可跟踪锚点预测请使用可跟踪锚点时间接下来我要深入探讨一个代码示例在渲染循环中在获取头部位姿和可跟踪锚点位姿之前应用程序应该完成它的非关键工作负载这有助于提高预测准确性非关键工作完成之后应用程序会在最佳时间过后开始运行它的工作负载依赖于锚点的工作负载开始运行时你应该会首先从帧时序数据中获取 presentationTime 和 trackableAnchorTime

然后将这些时间戳转换为秒

使用 presentationTime 查询 deviceAnchor 并使用 trackableAnchorTime 查询可跟踪锚点然后如果跟踪到可跟踪锚点则执行相对于它的位置的逻辑如需进一步了解 ARKit API 可以观看视频 “使用 ARKit 打造更出色的空间计算体验” 现在你已拥有所有必要的工具能够在 visionOS 上打造令人惊叹的混合沉浸体验借助 Compositor Services 和 Metal 你可以设置渲染循环并显示 3D 内容最后你可以使用 ARKit 来实现交互式体验如需了解更多信息请参考这些视频感谢观看！

3:07 - Add mixed immersion

@main
struct MyApp: App {
    var body: some Scene {
        ImmersiveSpace {
            CompositorLayer(configuration: MyConfiguration()) { layerRenderer in
                 let engine = my_engine_create(layerRenderer)
                 let renderThread = Thread {
                     my_engine_render_loop(engine)
                 }
                 renderThread.name = "Render Thread"
                 renderThread.start()
            }
            .immersionStyle(selection: $style, in: .mixed, .full)
        }
    }
}

4:43 - Create a renderPassDescriptor

let renderPassDescriptor = MTLRenderPassDescriptor()
        
renderPassDescriptor.colorAttachments[0].texture = drawable.colorTextures[0]
renderPassDescriptor.colorAttachments[0].loadAction = .clear
renderPassDescriptor.colorAttachments[0].storeAction = .store
renderPassDescriptor.colorAttachments[0].clearColor = .init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)            

renderPassDescriptor.depthAttachment.texture = drawable.depthTextures[0]
renderPassDescriptor.depthAttachment.loadAction = .clear
renderPassDescriptor.depthAttachment.storeAction = .store
renderPassDescriptor.depthAttachment.clearDepth = 0.0

9:08 - Set Upper Limb Visibility

@main
struct MyApp: App {
    var body: some Scene {
        ImmersiveSpace {
            CompositorLayer(configuration: MyConfiguration()) { layerRenderer in
                 let engine = my_engine_create(layerRenderer)
                 let renderThread = Thread {
                     my_engine_render_loop(engine)
                 }
                 renderThread.name = "Render Thread"
                 renderThread.start()
            }
            .immersionStyle(selection: $style, in: .mixed, .full)
						.upperLimbVisiblity(.automatic)
        }
    }
}

13:37 - Compose a projection view matrix

func renderLoop {
    //...
   
    let deviceAnchor = worldTracking.queryDeviceAnchor(atTimestamp: presentationTime)
    drawable.deviceAnchor = deviceAnchor
    
    for viewIndex in 0...drawable.views.count {
        let view = drawable.views[viewIndex]
        let originFromDevice = deviceAnchor?.originFromAnchorTransform
        let deviceFromView = view.transform
        let viewMatrix = (originFromDevice * deviceFromView).inverse
        let projection = drawable.computeProjection(normalizedDeviceCoordinatesConvention:
                                                    .rightUpBack,
                                                    viewIndex: viewIndex)
  
        let projectionViewMatrix = projection * viewMatrix;
        
        //...
    }
}

18:27 - Trackable anchor prediction

func renderFrame() {
    //...

    // Get the trackable anchor and presentation time.
    let presentationTime = drawable.frameTiming.presentationTime
    let trackableAnchorTime = drawable.frameTiming.trackableAnchorTime

    // Convert the timestamps into units of seconds
    let devicePredictionTime = LayerRenderer.Clock.Instant.epoch.duration(to:     presentationTime).timeInterval
    let anchorPredictionTime = LayerRenderer.Clock.Instant.epoch.duration(to:     trackableAnchorTime).timeInterval

    let deviceAnchor = worldTracking.queryDeviceAnchor(atTimestamp: devicePredictionTime)
    let leftAnchor = handTracking.handAnchors(at: anchorPredictionTime)

    if (leftAnchor.isTracked) {
        //...
    }

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。