ar-vr-xr

v2026.09.24

AR/VR/XR development with Unity XR, WebXR, ARKit, ARCore, Meta Quest SDK, and spatial computing. Use when building augmented reality, virtual reality, mixed reality applications, or spatial experiences.

GitHub
Install command
npx skhub add travisjneuman/ar-vr-xr
Markdown
SKILL.md

AR/VR/XR Development

Platform Overview

PlatformSDKTarget Devices
Unity XRXR Interaction ToolkitQuest, Vision Pro, PCVR, mobile
WebXRThree.js, A-Frame, Babylon.jsAny WebXR browser
ARKitRealityKit, ARKitiPhone, iPad, Vision Pro
ARCoreSceneform, ARCoreAndroid devices
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 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)
Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

MIT

Source path

skills/ar-vr-xr

Default branch

master

Latest commit

0508788

Tree SHA

a5bf98b