XR: Extended Reality
OpenXR & WebXR

// OpenXR C++ — create instance, get system, create session, run frame loop
#include <openxr/openxr.h>

// 1. Create an XrInstance — connects the app to the OpenXR loader/runtime
XrInstanceCreateInfo instanceCI = { XR_TYPE_INSTANCE_CREATE_INFO };
strncpy(instanceCI.applicationInfo.applicationName,
        "MyXRApp", XR_MAX_APPLICATION_NAME_SIZE);
instanceCI.applicationInfo.apiVersion = XR_CURRENT_API_VERSION;

const char* extensions[] = { XR_KHR_VULKAN_ENABLE_EXTENSION_NAME };
instanceCI.enabledExtensionCount = 1;
instanceCI.enabledExtensionNames = extensions;

XrInstance instance;
xrCreateInstance(&instanceCI, &instance);    // connects to the runtime

// 2. Get the XrSystemId for the head-mounted display
XrSystemGetInfo systemGI = { XR_TYPE_SYSTEM_GET_INFO };
systemGI.formFactor = XR_FORM_FACTOR_HEAD_MOUNTED_DISPLAY;
XrSystemId systemId;
xrGetSystem(instance, &systemGI, &systemId);

// 3. Create an XrSession — the active XR experience
XrSessionCreateInfo sessionCI = { XR_TYPE_SESSION_CREATE_INFO };
sessionCI.systemId = systemId;
// ... attach your graphics binding (Vulkan/D3D12/OpenGL) here ...

XrSession session;
xrCreateSession(instance, &sessionCI, &session);

// 4. The frame loop
XrFrameWaitInfo  frameWI    = { XR_TYPE_FRAME_WAIT_INFO };
XrFrameState     frameState = { XR_TYPE_FRAME_STATE };

while (running) {
  xrWaitFrame(session, &frameWI, &frameState);    // block until frame is due
  xrBeginFrame(session, nullptr);

  // ... locate views, render each eye to XrSwapchain images ...

  XrFrameEndInfo frameEI = { XR_TYPE_FRAME_END_INFO };
  frameEI.displayTime           = frameState.predictedDisplayTime;
  frameEI.environmentBlendMode  = XR_ENVIRONMENT_BLEND_MODE_OPAQUE;
  frameEI.layerCount            = layerCount;
  frameEI.layers                = layers;
  xrEndFrame(session, &frameEI);                  // submit to the runtime
}

// Three.js + WebXR — full setup with VRButton helper

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

// 1. Renderer with XR enabled
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;               // activate WebXR support
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. VRButton handles the full session lifecycle for you
document.body.appendChild(VRButton.createButton(renderer));

// 3. Scene
const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70,
  window.innerWidth / window.innerHeight, 0.1, 100);

// 4. Environment
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshStandardMaterial({ color: 0x222222 })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

const box = new THREE.Mesh(
  new THREE.BoxGeometry(0.5, 0.5, 0.5),
  new THREE.MeshStandardMaterial({ color: 0x00c8a0 })
);
box.position.set(0, 1, -2);
scene.add(box);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));

// 5. setAnimationLoop handles both flat and XR frames automatically
renderer.setAnimationLoop(function(time) {
  box.rotation.y = time * 0.001;
  renderer.render(scene, camera);
});

// WebXR Hit Testing — place objects on real-world surfaces (immersive-ar)

// Request an AR session with hit-test feature enabled
const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['local', 'hit-test']
});

const refSpace    = await session.requestReferenceSpace('local');
const viewerSpace = await session.requestReferenceSpace('viewer');

// Create a hit test source — tests along the viewer's forward ray
const hitTestSource = await session.requestHitTestSource({
  space: viewerSpace
});

// In the XR frame loop:
function onXRFrame(time, frame) {
  session.requestAnimationFrame(onXRFrame);

  const hits = frame.getHitTestResults(hitTestSource);

  if (hits.length > 0) {
    const pose = hits[0].getPose(refSpace);
    if (pose) {
      // pose.transform.matrix is where the real surface is in world space
      reticle.matrix.fromArray(pose.transform.matrix);
      reticle.visible = true;
    }
  } else {
    reticle.visible = false;   // no surface under the cursor
  }
}

// On tap: permanently place a 3D object at the reticle's pose
session.addEventListener('select', function() {
  if (reticle.visible) {
    placeObjectAt(reticle.matrix);   // your own function to spawn a mesh
  }
});

// Clean up the hit test source when done
session.addEventListener('end', () => hitTestSource.cancel());