mcpField
A
ar-vr-xr

ar-vr-xr

github.com/travisjneuman开发106112 次安装1 天前更新
代码仓库

关于 ar-vr-xr

面向 AR、VR 和 XR 开发的技能指南，涵盖 Unity XR、WebXR、ARKit、ARCore、Meta Quest 与 visionOS。内容结合 SDK 示例及性能、舒适度、交互和无障碍设计建议。

主要功能

  1. 01平台与 SDK 概览
  2. 02Unity XR 和 WebXR 示例
  3. 03RealityKit 与 Vision Pro 示例
  4. 04性能优化建议
  5. 05舒适度与无障碍设计原则

适用场景

  1. 01为 XR 项目选择平台与 SDK
  2. 02规划舒适的空间交互
  3. 03优化移动 VR 或 PCVR 渲染

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/travisjneuman/.claude --skill ar-vr-xr

安装后在 Claude Code 中输入/ar-vr-xr确认已加载。

详细介绍

AR/VR/XR 开发

平台概览

平台SDK目标设备
Unity XRXR Interaction ToolkitQuest、Vision Pro、PCVR、移动设备
WebXRThree.js、A-Frame、Babylon.js任何支持 WebXR 的浏览器
ARKitRealityKit、ARKitiPhone、iPad、Vision Pro
ARCoreSceneform、ARCoreAndroid 设备
Meta QuestMeta XR SDKQuest 2/3/Pro
Apple Vision ProvisionOS、RealityKitVision Pro

Unity XR

// XR Interaction Toolkit setup
using UnityEngine.XR.Interaction.Toolkit;

public class GrabbableObject : XRGrabInteractable
{
    protected override void OnSelectEntered(SelectEnterEventArgs args)
    {
        base.OnSelectEntered(args);
        // Object grabbed
    }

    protected override void OnSelectExited(SelectExitEventArgs args)
    {
        base.OnSelectExited(args);
        // Object released
    }
}
Unity XR 最佳实践
  • 目标帧率为 72-120 FPS（视平台而定）——掉帧会引起恶心
  • 使用单通道实例化渲染实现立体效果
  • 尽可能烘焙光照，将动态光源限制在 1-2 个
  • 绘制调用：移动 VR 少于 100 次，PCVR 少于 500 次
  • 积极使用 LOD 组——用户在 VR 中看不到远处的细节

WebXR

// Three.js WebXR
import * as THREE from 'three';
import { VRButton } from 'three/addons/webxr/VRButton.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

renderer.setAnimationLoop((time, frame) => {
    if (frame) {
        const session = renderer.xr.getSession();
        const inputSources = session.inputSources;
        // Handle controller input
    }
    renderer.render(scene, camera);
});

Apple Vision Pro（visionOS）

import SwiftUI
import RealityKit

struct ImmersiveView: View {
    var body: some View {
        RealityView { content in
            let sphere = MeshResource.generateSphere(radius: 0.1)
            let material = SimpleMaterial(color: .blue, isMetallic: true)
            let entity = ModelEntity(mesh: sphere, materials: [material])
            entity.position = [0, 1.5, -1]
            content.add(entity)
        }
        .gesture(TapGesture().targetedToAnyEntity().onEnded { event in
            // Handle tap on entity
        })
    }
}

XR 设计原则

  • 舒适度： 避免人工移动，使用传送或房间尺度移动
  • 交互： 优先采用直接操控（抓取、指向），而非抽象 UI
  • UI 放置： 将世界空间 UI 放在舒适距离（1-3 m），避免头部锁定的 HUD
  • 性能： 帧率不容妥协——全力优化
  • 无障碍： 提供坐姿模式、可调节缩放和色盲选项
  • 空间音频： 使用 3D 音频增强沉浸感和寻路体验（HRTF、ambisonics）

评论

支持 Markdown