AR/VR/XR Development Skill

AR/VR/XR Development

Platform Overview

| Platform | SDK | Target Devices | |----------|-----|----------------| | Unity XR | XR Interaction Toolkit | Quest, Vision Pro, PCVR, mobile | | WebXR | Three.js, A-Frame, Babylon.js | Any WebXR browser | | ARKit | RealityKit, ARKit | iPhone, iPad, Vision Pro | | ARCore | Sceneform, ARCore | Android devices | | Meta Quest | Meta XR SDK | Quest 2/3/Pro | | Apple Vision Pro | visionOS, RealityKit | Vision 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 Best Practices

Target 72-120 FPS (platform-dependent) — frame drops cause nausea
Use single-pass instanced rendering for stereo
Bake lighting where possible, limit dynamic lights to 1-2
Draw calls: <100 for mobile VR, <500 for PCVR
Use LOD groups aggressively — user can't see distant detail in 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 Design Principles

Comfort: Avoid artificial locomotion, use teleport or room-scale movement
Interaction: Direct manipulation (grab, point) over abstract UI
UI placement: World-space UI at comfortable distance (1-3m), avoid head-locked HUD
Performance: Frame rate is non-negotiable — optimize ruthlessly
Accessibility: Provide seated mode, adjustable scale, color-blind options
Spatial audio: 3D audio for immersion and wayfinding (HRTF, ambisonics)

Agent Skills: AR/VR/XR Development

Install this agent skill to your local