From 19984075f31a2fbfbfc08e776ce85db65c9bc15e Mon Sep 17 00:00:00 2001
From: Steve Seguin <steve@seguin.email>
Date: Fri, 5 Dec 2025 10:35:21 -0500
Subject: [PATCH] including new examples

---
 examples/webxr-ar-receiver.html | 451 +++++++++++++++++++++++++
 examples/webxr-ar-sender.html   | 579 ++++++++++++++++++++++++++++++++
 2 files changed, 1030 insertions(+)
 create mode 100644 examples/webxr-ar-receiver.html
 create mode 100644 examples/webxr-ar-sender.html
diff --git a/examples/webxr-ar-receiver.html b/examples/webxr-ar-receiver.html
new file mode 100644
index 0000000..7fec682
--- /dev/null
+++ b/examples/webxr-ar-receiver.html
@@ -0,0 +1,451 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>WebXR AR 6DoF Receiver</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<style>
+		* { margin: 0; padding: 0; box-sizing: border-box; }
+		body {
+			font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+			background: #000;
+			color: #e6f1ff;
+			overflow: hidden;
+		}
+		#container {
+			position: relative;
+			width: 100vw;
+			height: 100vh;
+		}
+		/* Video layer - bottom */
+		#video-layer {
+			position: absolute;
+			top: 0; left: 0;
+			width: 100%; height: 100%;
+			z-index: 1;
+			background: #000;
+		}
+		#video-layer iframe {
+			width: 100%;
+			height: 100%;
+			border: none;
+		}
+		/* 3D layer - on top with transparency */
+		#three-canvas {
+			position: absolute;
+			top: 0; left: 0;
+			width: 100%; height: 100%;
+			z-index: 2;
+			pointer-events: none;
+		}
+		/* UI layer - on top of everything */
+		#controls {
+			position: absolute;
+			top: 10px;
+			left: 10px;
+			background: rgba(0,0,0,0.85);
+			padding: 15px;
+			border-radius: 10px;
+			z-index: 100;
+			max-width: 320px;
+		}
+		#controls h3 {
+			margin-bottom: 10px;
+			color: #4ecdc4;
+			font-size: 16px;
+		}
+		#controls label {
+			display: block;
+			margin: 8px 0 4px;
+			font-size: 11px;
+			color: #9fb1c7;
+		}
+		#controls input[type="text"] {
+			width: 100%;
+			padding: 10px;
+			border: 1px solid #3d455a;
+			border-radius: 6px;
+			background: #111827;
+			color: #e6f1ff;
+			font-size: 14px;
+		}
+		#controls input[type="range"] {
+			width: 100%;
+		}
+		#controls button {
+			margin-top: 12px;
+			padding: 12px 20px;
+			background: #4ecdc4;
+			border: none;
+			border-radius: 6px;
+			color: #0f1724;
+			font-weight: bold;
+			cursor: pointer;
+			width: 100%;
+		}
+		#controls button:hover {
+			background: #3dbdb5;
+		}
+		#stats {
+			position: absolute;
+			top: 10px;
+			right: 10px;
+			background: rgba(0,0,0,0.85);
+			padding: 12px;
+			border-radius: 10px;
+			z-index: 100;
+			font-family: monospace;
+			font-size: 11px;
+		}
+		#stats .row { margin: 2px 0; }
+		#stats .label { color: #888; }
+		#stats .value { color: #4ecdc4; }
+		.hidden { display: none !important; }
+		#no-video-msg {
+			position: absolute;
+			top: 50%; left: 50%;
+			transform: translate(-50%, -50%);
+			color: #666;
+			font-size: 14px;
+			z-index: 0;
+		}
+	</style>
+</head>
+<body>
+
+<div id="container">
+	<div id="no-video-msg">Waiting for video stream...</div>
+	<div id="video-layer"></div>
+	<canvas id="three-canvas"></canvas>
+
+	<div id="controls">
+		<h3>WebXR AR 6DoF Receiver</h3>
+		<label for="streamid">Stream ID</label>
+		<input type="text" id="streamid" placeholder="Enter stream ID">
+
+		<label>Pose Smoothing: <span id="smoothing-value">0.50</span></label>
+		<input type="range" id="smoothing" min="0" max="100" value="50">
+
+		<label>Position Scale: <span id="scale-value">1.0</span></label>
+		<input type="range" id="scale" min="10" max="500" value="100">
+
+		<button id="connect-btn">Connect</button>
+	</div>
+
+	<div id="stats" class="hidden">
+		<div class="row"><span class="label">Pos:</span> <span class="value" id="stat-pos">--</span></div>
+		<div class="row"><span class="label">Rot:</span> <span class="value" id="stat-rot">--</span></div>
+		<div class="row"><span class="label">FPS:</span> <span class="value" id="stat-fps">--</span></div>
+		<div class="row"><span class="label">Pose Age:</span> <span class="value" id="stat-age">--</span></div>
+		<div class="row"><span class="label">Messages:</span> <span class="value" id="stat-msgs">0</span></div>
+	</div>
+</div>
+
+<script type="module">
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+
+// Config - higher smoothing = more responsive (it's actually interpolation factor)
+let config = {
+	smoothing: 0.5,  // 0.5 = responsive, was 0.15 (too sluggish)
+	positionScale: 1.0
+};
+
+// Default vertical FOV - will be updated by sender
+const DEFAULT_VERTICAL_FOV = 40;
+
+// State
+let scene, camera, renderer;
+let iframe = null;
+
+// Pose tracking - camera at origin, matching sender
+let currentPose = {
+	position: new THREE.Vector3(0, 0, 0),
+	quaternion: new THREE.Quaternion()
+};
+let targetPose = {
+	position: new THREE.Vector3(0, 0, 0),
+	quaternion: new THREE.Quaternion()
+};
+let lastPoseTime = 0;
+let msgCount = 0;
+
+// Stats
+let frameCount = 0;
+let lastFpsTime = Date.now();
+let currentFps = 0;
+
+// Scene objects (for animation)
+let cube, sphere, torus, cone;
+
+function initScene() {
+	const canvas = document.getElementById('three-canvas');
+
+	scene = new THREE.Scene();
+	// Transparent background - video shows through
+
+	// Camera at origin - FOV will be updated by sender
+	const aspectRatio = window.innerWidth / window.innerHeight;
+	console.log(`Receiver initial FOV: ${DEFAULT_VERTICAL_FOV}° vertical`);
+
+	camera = new THREE.PerspectiveCamera(DEFAULT_VERTICAL_FOV, aspectRatio, 0.1, 100);
+	camera.position.set(0, 0, 0);
+
+	// Transparent renderer
+	renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+	renderer.setClearColor(0x000000, 0);
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+	// === OBJECTS SPREAD IN 360° - MUST MATCH SENDER EXACTLY ===
+
+	// FRONT (-Z direction)
+	cube = new THREE.Mesh(
+		new THREE.BoxGeometry(1, 1, 1),
+		new THREE.MeshBasicMaterial({ color: 0xff0000 })
+	);
+	cube.position.set(0, 0, -8);
+	scene.add(cube);
+
+	// FRONT-RIGHT
+	sphere = new THREE.Mesh(
+		new THREE.SphereGeometry(0.8, 32, 32),
+		new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+	);
+	sphere.position.set(5, 1, -6);
+	scene.add(sphere);
+
+	// RIGHT (+X direction)
+	torus = new THREE.Mesh(
+		new THREE.TorusGeometry(1, 0.3, 16, 32),
+		new THREE.MeshBasicMaterial({ color: 0xffff00 })
+	);
+	torus.position.set(10, 0, 0);
+	scene.add(torus);
+
+	// BACK-RIGHT
+	const cylinder = new THREE.Mesh(
+		new THREE.CylinderGeometry(0.5, 0.5, 3, 32),
+		new THREE.MeshBasicMaterial({ color: 0x00ffff })
+	);
+	cylinder.position.set(6, 0, 8);
+	scene.add(cylinder);
+
+	// BACK (+Z direction)
+	cone = new THREE.Mesh(
+		new THREE.ConeGeometry(1, 2, 32),
+		new THREE.MeshBasicMaterial({ color: 0xff00ff })
+	);
+	cone.position.set(0, 0, 12);
+	scene.add(cone);
+
+	// BACK-LEFT
+	const octahedron = new THREE.Mesh(
+		new THREE.OctahedronGeometry(1),
+		new THREE.MeshBasicMaterial({ color: 0xff8800 })
+	);
+	octahedron.position.set(-7, 1, 7);
+	scene.add(octahedron);
+
+	// LEFT (-X direction)
+	const dodecahedron = new THREE.Mesh(
+		new THREE.DodecahedronGeometry(0.8),
+		new THREE.MeshBasicMaterial({ color: 0x8800ff })
+	);
+	dodecahedron.position.set(-10, 0, 0);
+	scene.add(dodecahedron);
+
+	// FRONT-LEFT
+	const icosahedron = new THREE.Mesh(
+		new THREE.IcosahedronGeometry(0.7),
+		new THREE.MeshBasicMaterial({ color: 0x0088ff })
+	);
+	icosahedron.position.set(-5, -1, -7);
+	scene.add(icosahedron);
+
+	// UP (above)
+	const ring = new THREE.Mesh(
+		new THREE.TorusGeometry(2, 0.2, 16, 32),
+		new THREE.MeshBasicMaterial({ color: 0xffffff })
+	);
+	ring.position.set(0, 8, 0);
+	ring.rotation.x = Math.PI / 2;
+	scene.add(ring);
+
+	// DOWN (below) - Ground grid
+	const grid = new THREE.GridHelper(50, 50, 0x4ecdc4, 0x333333);
+	grid.position.y = -2;
+	grid.material.opacity = 0.5;
+	grid.material.transparent = true;
+	scene.add(grid);
+
+	console.log('Scene initialized with', scene.children.length, 'objects in 360° space');
+
+	window.addEventListener('resize', onResize);
+}
+
+function onResize() {
+	const aspectRatio = window.innerWidth / window.innerHeight;
+	camera.aspect = aspectRatio;
+	// FOV is managed by sender - just update aspect ratio
+	camera.updateProjectionMatrix();
+	renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function connect() {
+	const streamId = document.getElementById('streamid').value.trim();
+	if (!streamId) {
+		alert('Please enter a Stream ID');
+		return;
+	}
+
+	// Construct URL - go up from /examples/
+	const pathParts = window.location.pathname.split('/');
+	pathParts.pop();
+	pathParts.pop();
+	const basePath = pathParts.join('/') || '';
+	// cleanoutput removes UI; autostart/muted to dodge autoplay blocks
+	// Sensor data forwarding to parent is automatic when VDO.Ninja is in an iframe
+	const url = `${window.location.origin}${basePath}/?view=${encodeURIComponent(streamId)}&cleanoutput&debug&autostart=1&mute=1`;
+
+	console.log('Connecting to:', url);
+
+	// Hide controls, show stats
+	document.getElementById('controls').classList.add('hidden');
+	document.getElementById('stats').classList.remove('hidden');
+
+	// Create iframe for video
+	const container = document.getElementById('video-layer');
+	iframe = document.createElement('iframe');
+	iframe.allow = 'autoplay; camera; microphone; fullscreen; picture-in-picture; display-capture';
+	iframe.setAttribute('playsinline', '');
+	iframe.src = url;
+	container.appendChild(iframe);
+
+	// Listen for pose messages
+	window.addEventListener('message', handleMessage);
+}
+
+function handleMessage(event) {
+	const data = event.data;
+
+	// Log all messages to debug
+	if (!window.msgLogCount) window.msgLogCount = 0;
+	window.msgLogCount++;
+
+	// Log first 10 messages fully, then every 50th
+	if (window.msgLogCount <= 10 || window.msgLogCount % 50 === 0) {
+		console.log('postMessage #' + window.msgLogCount, 'from:', event.origin, 'keys:', Object.keys(data || {}), data);
+	}
+
+	// Specifically log if sensors present
+	if (data && data.sensors) {
+		console.log('SENSOR DATA RECEIVED #' + msgCount, data.sensors);
+	}
+
+	// Handle pose data from VDO.Ninja
+	if (data.sensors && data.sensors.pose) {
+		msgCount++;
+		document.getElementById('stat-msgs').textContent = msgCount;
+
+		const pose = data.sensors.pose;
+
+		if (msgCount <= 3) {
+			console.log('Received pose #' + msgCount, pose);
+		}
+
+		// Update target pose
+		targetPose.position.set(
+			(pose.p?.x || 0) * config.positionScale,
+			(pose.p?.y || 0) * config.positionScale,
+			(pose.p?.z || 0) * config.positionScale
+		);
+		targetPose.quaternion.set(
+			pose.q?.x || 0,
+			pose.q?.y || 0,
+			pose.q?.z || 0,
+			pose.q?.w || 1
+		);
+
+		// Update FOV if sender provided it
+		if (pose.fov && pose.fov !== camera.fov) {
+			camera.fov = pose.fov;
+			camera.updateProjectionMatrix();
+			console.log('Updated camera FOV to match sender:', pose.fov);
+		}
+
+		lastPoseTime = Date.now();
+
+		if (msgCount === 1) {
+			document.getElementById('no-video-msg').style.display = 'none';
+		}
+	}
+}
+
+function animate(time) {
+	requestAnimationFrame(animate);
+
+	// Smooth interpolation toward target pose
+	const t = config.smoothing;
+	currentPose.position.lerp(targetPose.position, t);
+	currentPose.quaternion.slerp(targetPose.quaternion, t);
+
+	// Apply to camera
+	camera.position.copy(currentPose.position);
+	camera.quaternion.copy(currentPose.quaternion);
+
+	// Objects stay FIXED in world space - no animation
+	// This ensures they match sender's view exactly
+
+	renderer.render(scene, camera);
+
+	// Update stats
+	frameCount++;
+	const now = Date.now();
+	if (now - lastFpsTime >= 1000) {
+		currentFps = frameCount;
+		frameCount = 0;
+		lastFpsTime = now;
+	}
+
+	const pos = currentPose.position;
+	const rot = currentPose.quaternion;
+	const poseAge = lastPoseTime ? (now - lastPoseTime) : '--';
+
+	document.getElementById('stat-pos').textContent =
+		`${pos.x.toFixed(2)}, ${pos.y.toFixed(2)}, ${pos.z.toFixed(2)}`;
+	document.getElementById('stat-rot').textContent =
+		`${rot.x.toFixed(2)}, ${rot.y.toFixed(2)}, ${rot.z.toFixed(2)}`;
+	document.getElementById('stat-fps').textContent = currentFps;
+	document.getElementById('stat-age').textContent = typeof poseAge === 'number' ? `${poseAge}ms` : poseAge;
+}
+
+function setupUI() {
+	document.getElementById('connect-btn').addEventListener('click', connect);
+
+	document.getElementById('smoothing').addEventListener('input', function(e) {
+		config.smoothing = parseInt(e.target.value) / 100;
+		document.getElementById('smoothing-value').textContent = config.smoothing.toFixed(2);
+	});
+
+	document.getElementById('scale').addEventListener('input', function(e) {
+		config.positionScale = parseInt(e.target.value) / 100;
+		document.getElementById('scale-value').textContent = config.positionScale.toFixed(1);
+	});
+
+	// Auto-connect from URL params
+	const urlParams = new URLSearchParams(window.location.search);
+	const streamId = urlParams.get('streamid') || urlParams.get('view') || urlParams.get('id');
+	if (streamId) {
+		document.getElementById('streamid').value = streamId;
+		setTimeout(connect, 500);
+	}
+}
+
+// Initialize
+initScene();
+setupUI();
+requestAnimationFrame(animate);
+</script>
+
+</body>
+</html>
diff --git a/examples/webxr-ar-sender.html b/examples/webxr-ar-sender.html
new file mode 100644
index 0000000..d0d401f
--- /dev/null
+++ b/examples/webxr-ar-sender.html
@@ -0,0 +1,579 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>WebXR AR 6DoF Sender</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<style>
+		* { margin: 0; padding: 0; box-sizing: border-box; }
+	body {
+		font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+		background: #0f1724;
+		color: #e6f1ff;
+		min-height: 100vh;
+		overflow: hidden;
+	}
+	/* VDO.Ninja video layer (captures and shows webcam) */
+	#video-layer {
+		position: fixed;
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+		z-index: 0;
+		background: #000;
+	}
+	#video-layer iframe {
+		width: 100%;
+		height: 100%;
+		border: none;
+		display: block;
+		background: #000;
+	}
+	/* Intro screen */
+	#intro {
+		position: fixed;
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 20px;
+			text-align: center;
+			gap: 12px;
+			background: radial-gradient(circle at 30% 20%, rgba(78, 205, 196, 0.12), transparent 35%),
+				radial-gradient(circle at 70% 60%, rgba(255, 102, 170, 0.12), transparent 35%),
+				#0f1724;
+			z-index: 100;
+		}
+		#intro.hidden { display: none; }
+		h1 { color: #4ecdc4; margin: 0 0 6px 0; font-size: 22px; }
+		p { color: #9fb1c7; margin: 0 0 10px 0; line-height: 1.4; max-width: 360px; font-size: 14px; }
+		#status { color: #f39c12; font-size: 14px; }
+		#status.ok { color: #4ecdc4; }
+		.input-group {
+			width: 100%;
+			max-width: 300px;
+			margin: 10px 0;
+		}
+		.input-group label {
+			display: block;
+			font-size: 12px;
+			color: #9fb1c7;
+			margin-bottom: 6px;
+			text-align: left;
+		}
+		.input-group input {
+			width: 100%;
+			padding: 12px;
+			border: 1px solid #3d455a;
+			border-radius: 8px;
+			background: #111827;
+			color: #e6f1ff;
+			font-size: 16px;
+		}
+		#start-btn {
+			padding: 18px 38px;
+			font-size: 18px;
+			font-weight: bold;
+			background: #4ecdc4;
+			color: #0f1724;
+			border: none;
+			border-radius: 12px;
+			cursor: pointer;
+			box-shadow: 0 12px 30px rgba(78, 205, 196, 0.25);
+			margin-top: 10px;
+		}
+		#start-btn:disabled { background: #445268; color: #8894a7; cursor: not-allowed; box-shadow: none; }
+	/* HUD - visible during AR session */
+	#hud {
+		position: fixed;
+		bottom: 14px; left: 10px; right: 10px;
+		padding: 12px;
+			background: rgba(0, 0, 0, 0.8);
+			border-radius: 10px;
+			font-family: monospace;
+			font-size: 11px;
+			color: #4ecdc4;
+			z-index: 200;
+			display: none;
+			pointer-events: auto;
+		}
+		#hud.active { display: block; }
+		#hud .row { margin: 2px 0; }
+		#hud .label { color: #888; }
+		/* Exit button */
+		#exit-btn {
+			position: fixed;
+			top: 16px; right: 16px;
+			padding: 12px 18px;
+			background: rgba(231, 76, 60, 0.92);
+			border: none;
+			border-radius: 10px;
+			color: #fff;
+			font-weight: 700;
+			font-size: 14px;
+			z-index: 200;
+			display: none;
+			cursor: pointer;
+			pointer-events: auto;
+		}
+		#exit-btn.active { display: block; }
+		/* VDO.Ninja iframe - fullscreen camera */
+		#vdo-frame {
+			width: 100%;
+			height: 100%;
+			border: none;
+			display: block;
+		}
+		/* Overlay container for dom-overlay */
+	#overlay {
+		position: fixed;
+		top: 0; left: 0;
+		width: 100%; height: 100%;
+		z-index: 5;
+		pointer-events: none;
+	}
+	#overlay > * {
+		pointer-events: auto;
+	}
+</style>
+</head>
+<body>
+
+<!-- VDO.Ninja layer: handles the actual webcam/video stream -->
+<div id="video-layer">
+	<iframe
+		id="vdo-frame"
+		allow="autoplay; camera; microphone; fullscreen; picture-in-picture; xr-spatial-tracking"
+		title="VDO.Ninja push"
+		playsinline
+	></iframe>
+</div>
+
+<!-- DOM Overlay container - contains everything that should appear over WebXR -->
+<div id="overlay">
+
+<div id="intro">
+	<h1>WebXR AR 6DoF Sender</h1>
+	<p>Streams camera + 6DoF pose data via VDO.Ninja. Requires ARCore (Android) or ARKit (iOS) support.</p>
+
+	<div class="input-group">
+		<label for="stream-id">Stream ID</label>
+		<input id="stream-id" type="text" placeholder="Enter stream ID">
+	</div>
+
+	<button id="start-btn" disabled>Checking AR support...</button>
+	<div id="status"></div>
+</div>
+
+<button id="exit-btn">Exit AR</button>
+<div id="hud">
+	<div class="row"><span class="label">Pos:</span> <span id="pos">--</span></div>
+	<div class="row"><span class="label">Rot:</span> <span id="rot">--</span></div>
+	<div class="row"><span class="label">Rate:</span> <span id="rate">--</span></div>
+	<div class="row"><span class="label">Sent:</span> <span id="sent">0</span> <span class="label">Dropped:</span> <span id="dropped">0</span></div>
+	<div class="row" style="margin-top:8px;">
+		<span class="label">Vertical FOV:</span> <span id="fov-value">40</span>°
+		<input type="range" id="fov-slider" min="20" max="120" value="40" style="width:100%;margin-top:4px;">
+	</div>
+	<div class="row" style="font-size:9px;color:#666;">↑ increase if AR moves too fast, ↓ decrease if AR moves too slow</div>
+</div>
+
+</div><!-- end overlay -->
+
+<script type="module">
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+
+const intro = document.getElementById("intro");
+const startBtn = document.getElementById("start-btn");
+const statusEl = document.getElementById("status");
+const exitBtn = document.getElementById("exit-btn");
+const hud = document.getElementById("hud");
+const streamIdInput = document.getElementById("stream-id");
+const vdoFrame = document.getElementById("vdo-frame");
+
+let renderer, scene, camera, arButton;
+let animId = null;
+
+// Stats
+let poseCount = 0;
+let lastTick = performance.now();
+let fps = 0;
+let messagesSent = 0;
+let messagesDropped = 0;
+
+// Throttling
+let lastSendTime = 0;
+const MIN_SEND_INTERVAL = 33; // ~30 Hz
+let pendingPose = null;
+
+// Scene objects
+let cube, torus, cone;
+
+// Orientation state (non-immersive fallback so VDO can own the camera)
+let hasOrientation = false;
+const currentPose = {
+	position: new THREE.Vector3(0, 0, 0),
+	quaternion: new THREE.Quaternion()
+};
+
+function buildRenderer() {
+	renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+	renderer.setPixelRatio(window.devicePixelRatio);
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	renderer.setClearColor(0x000000, 0);
+	renderer.domElement.id = "ar-canvas";
+	renderer.domElement.style.position = "fixed";
+	renderer.domElement.style.top = "0";
+	renderer.domElement.style.left = "0";
+	renderer.domElement.style.width = "100%";
+	renderer.domElement.style.height = "100%";
+	renderer.domElement.style.zIndex = "2";
+	renderer.domElement.style.pointerEvents = "none";
+	document.body.appendChild(renderer.domElement);
+}
+
+// FOV - Direct vertical FOV control
+// Three.js PerspectiveCamera uses VERTICAL FOV
+// Let user calibrate directly since camera FOV varies by device and orientation
+let currentFOV = 40; // Starting guess - adjust until AR matches camera motion
+
+function updateCameraFOV(verticalFOV) {
+	currentFOV = verticalFOV;
+
+	console.log(`Camera vertical FOV set to: ${verticalFOV}°`);
+
+	if (camera) {
+		camera.fov = verticalFOV;
+		camera.updateProjectionMatrix();
+	}
+	// Send vertical FOV to receiver so it can match
+	if (vdoFrame && vdoFrame.contentWindow) {
+		vdoFrame.contentWindow.postMessage({ arFOV: verticalFOV }, '*');
+	}
+}
+
+function buildScene() {
+	scene = new THREE.Scene();
+
+	const aspectRatio = window.innerWidth / window.innerHeight;
+	console.log(`Initial FOV: ${currentFOV}° vertical, aspect: ${aspectRatio.toFixed(2)}`);
+
+	camera = new THREE.PerspectiveCamera(currentFOV, aspectRatio, 0.1, 100);
+	camera.position.set(0, 0, 0);
+
+	// Lighting
+	const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2);
+	scene.add(hemi);
+	const dir = new THREE.DirectionalLight(0xffffff, 0.8);
+	dir.position.set(5, 10, 5);
+	scene.add(dir);
+
+	// === OBJECTS SPREAD IN 360° AT VARIOUS DISTANCES ===
+	// All objects use MeshBasicMaterial for consistent visibility
+
+	// FRONT (-Z direction)
+	cube = new THREE.Mesh(
+		new THREE.BoxGeometry(1, 1, 1),
+		new THREE.MeshBasicMaterial({ color: 0xff0000 })
+	);
+	cube.position.set(0, 0, -8); // 8m in front
+	scene.add(cube);
+
+	// FRONT-RIGHT
+	const sphere = new THREE.Mesh(
+		new THREE.SphereGeometry(0.8, 32, 32),
+		new THREE.MeshBasicMaterial({ color: 0x00ff00 })
+	);
+	sphere.position.set(5, 1, -6); // 5m right, 6m forward
+	scene.add(sphere);
+
+	// RIGHT (+X direction)
+	torus = new THREE.Mesh(
+		new THREE.TorusGeometry(1, 0.3, 16, 32),
+		new THREE.MeshBasicMaterial({ color: 0xffff00 })
+	);
+	torus.position.set(10, 0, 0); // 10m to the right
+	scene.add(torus);
+
+	// BACK-RIGHT
+	const cylinder = new THREE.Mesh(
+		new THREE.CylinderGeometry(0.5, 0.5, 3, 32),
+		new THREE.MeshBasicMaterial({ color: 0x00ffff })
+	);
+	cylinder.position.set(6, 0, 8); // Behind and right
+	scene.add(cylinder);
+
+	// BACK (+Z direction)
+	cone = new THREE.Mesh(
+		new THREE.ConeGeometry(1, 2, 32),
+		new THREE.MeshBasicMaterial({ color: 0xff00ff })
+	);
+	cone.position.set(0, 0, 12); // 12m behind
+	scene.add(cone);
+
+	// BACK-LEFT
+	const octahedron = new THREE.Mesh(
+		new THREE.OctahedronGeometry(1),
+		new THREE.MeshBasicMaterial({ color: 0xff8800 })
+	);
+	octahedron.position.set(-7, 1, 7); // Behind and left
+	scene.add(octahedron);
+
+	// LEFT (-X direction)
+	const dodecahedron = new THREE.Mesh(
+		new THREE.DodecahedronGeometry(0.8),
+		new THREE.MeshBasicMaterial({ color: 0x8800ff })
+	);
+	dodecahedron.position.set(-10, 0, 0); // 10m to the left
+	scene.add(dodecahedron);
+
+	// FRONT-LEFT
+	const icosahedron = new THREE.Mesh(
+		new THREE.IcosahedronGeometry(0.7),
+		new THREE.MeshBasicMaterial({ color: 0x0088ff })
+	);
+	icosahedron.position.set(-5, -1, -7); // Front-left, slightly lower
+	scene.add(icosahedron);
+
+	// UP (above)
+	const ring = new THREE.Mesh(
+		new THREE.TorusGeometry(2, 0.2, 16, 32),
+		new THREE.MeshBasicMaterial({ color: 0xffffff })
+	);
+	ring.position.set(0, 8, 0); // 8m above
+	ring.rotation.x = Math.PI / 2; // Flat horizontal
+	scene.add(ring);
+
+	// DOWN (below) - Ground grid
+	const grid = new THREE.GridHelper(50, 50, 0x4ecdc4, 0x333333);
+	grid.position.y = -2; // 2m below camera
+	grid.material.opacity = 0.5;
+	grid.material.transparent = true;
+	scene.add(grid);
+
+	console.log('Scene built with', scene.children.length, 'objects in 360° space');
+}
+
+function sendPose(poseData) {
+	const now = Date.now();
+	const timeSinceLastSend = now - lastSendTime;
+
+	if (timeSinceLastSend < MIN_SEND_INTERVAL) {
+		pendingPose = poseData;
+		messagesDropped++;
+		document.getElementById('dropped').textContent = messagesDropped;
+		return;
+	}
+
+	const poseToSend = pendingPose || poseData;
+	pendingPose = null;
+	doSendPose(poseToSend);
+	lastSendTime = now;
+
+	setTimeout(flushPendingPose, MIN_SEND_INTERVAL);
+}
+
+function flushPendingPose() {
+	if (pendingPose && Date.now() - lastSendTime >= MIN_SEND_INTERVAL) {
+		const pose = pendingPose;
+		pendingPose = null;
+		doSendPose(pose);
+		lastSendTime = Date.now();
+	}
+}
+
+function doSendPose(poseData) {
+	if (vdoFrame && vdoFrame.contentWindow) {
+		try {
+			const msg = { sensors: { pose: poseData, UUID: 'webxr-sender' } };
+			vdoFrame.contentWindow.postMessage(msg, '*');
+			messagesSent++;
+			document.getElementById('sent').textContent = messagesSent;
+		} catch (e) {
+			console.error('postMessage failed:', e);
+		}
+	}
+}
+
+function animate(time) {
+	const now = performance.now();
+
+	// Build a pose from latest orientation (no positional tracking)
+	if (hasOrientation) {
+		const p = currentPose.position;
+		const o = currentPose.quaternion;
+		document.getElementById('pos').textContent =
+			`X ${p.x.toFixed(2)} Y ${p.y.toFixed(2)} Z ${p.z.toFixed(2)}`;
+		document.getElementById('rot').textContent =
+			`x${o.x.toFixed(2)} y${o.y.toFixed(2)} z${o.z.toFixed(2)} w${o.w.toFixed(2)}`;
+
+		sendPose({
+			t: Date.now(),
+			p: { x: p.x, y: p.y, z: p.z },
+			q: { x: o.x, y: o.y, z: o.z, w: o.w },
+			fov: currentFOV  // Include FOV so receiver can match
+		});
+	}
+
+	// FPS counter
+	poseCount++;
+	if (now - lastTick > 1000) {
+		fps = poseCount;
+		poseCount = 0;
+		lastTick = now;
+		document.getElementById('rate').textContent = `${fps} fps`;
+	}
+
+	// Apply orientation to camera
+	if (camera && hasOrientation) {
+		camera.quaternion.copy(currentPose.quaternion);
+	}
+
+	// Objects stay FIXED in world space - no animation
+	// This ensures sender and receiver views match exactly
+
+	renderer.render(scene, camera);
+	animId = requestAnimationFrame(animate);
+}
+
+function startSensors() {
+	// Reusable quaternions for orientation calculation
+	const zee = new THREE.Vector3(0, 0, 1);
+	const q0 = new THREE.Quaternion();
+	const q1 = new THREE.Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)); // -90deg around X
+	const euler = new THREE.Euler();
+
+	function handleOrientation(evt) {
+		if (evt.alpha === null) return;
+
+		const alpha = THREE.MathUtils.degToRad(evt.alpha); // Z axis (compass)
+		const beta = THREE.MathUtils.degToRad(evt.beta);   // X axis (tilt front/back)
+		const gamma = THREE.MathUtils.degToRad(evt.gamma); // Y axis (tilt left/right)
+
+		// Standard Three.js device orientation conversion
+		euler.set(beta, alpha, -gamma, 'YXZ');
+		currentPose.quaternion.setFromEuler(euler);
+
+		// Rotate to align camera (phone held upright, looking through rear camera)
+		currentPose.quaternion.multiply(q1);
+
+		// Adjust for screen orientation
+		const screenOrientation = window.screen?.orientation?.angle || window.orientation || 0;
+		q0.setFromAxisAngle(zee, -THREE.MathUtils.degToRad(screenOrientation));
+		currentPose.quaternion.multiply(q0);
+
+		hasOrientation = true;
+	}
+
+	if (typeof DeviceOrientationEvent !== "undefined" && typeof DeviceOrientationEvent.requestPermission === "function") {
+		DeviceOrientationEvent.requestPermission().then(result => {
+			if (result === "granted") {
+				window.addEventListener("deviceorientation", handleOrientation, true);
+			} else {
+				statusEl.textContent = "Motion permission denied; pose data unavailable.";
+			}
+		}).catch(err => {
+			statusEl.textContent = "Motion permission error: " + err;
+		});
+	} else {
+		window.addEventListener("deviceorientation", handleOrientation, true);
+	}
+}
+
+function startVDO() {
+	const streamId = streamIdInput.value.trim();
+	if (!streamId) return;
+
+	// Construct URL for VDO.Ninja - data relay only (no camera needed here)
+	const pathParts = window.location.pathname.split('/');
+	pathParts.pop();
+	pathParts.pop();
+	const basePath = pathParts.join('/') || '';
+	// Full webcam capture lives inside the iframe; parent only overlays Three.js
+	// facing=environment for rear camera
+	const url = `${window.location.origin}${basePath}/?push=${encodeURIComponent(streamId)}&facing=environment&webxrbridge=1&autostart=1&mute=1`;
+
+	console.log('VDO.Ninja URL:', url);
+	vdoFrame.src = url;
+}
+
+async function startAR() {
+	const streamId = streamIdInput.value.trim();
+	if (!streamId) {
+		statusEl.textContent = 'Please enter a stream ID';
+		return;
+	}
+
+	try {
+		startBtn.disabled = true;
+		startBtn.textContent = "Starting...";
+
+		// Build renderer and scene
+		if (!renderer) {
+			buildRenderer();
+			buildScene();
+			hud.classList.add('active');
+			exitBtn.classList.add('active');
+		}
+
+		// Start VDO.Ninja for data relay + video
+		startVDO();
+
+		// Start sensors + animation loop
+		startSensors();
+		if (!animId) {
+			animId = requestAnimationFrame(animate);
+		}
+
+		intro.classList.add('hidden');
+	} catch (e) {
+		statusEl.textContent = "Failed to start AR: " + e.message;
+		startBtn.disabled = false;
+		startBtn.textContent = "Start AR Stream";
+	}
+}
+
+async function checkSupport() {
+	startBtn.disabled = false;
+	startBtn.textContent = "Start AR Stream";
+	statusEl.textContent = "Uses device motion for pose; camera stays with VDO.Ninja.";
+	statusEl.classList.add('ok');
+}
+
+// Event listeners
+startBtn.addEventListener('click', startAR);
+
+// FOV calibration slider - direct vertical FOV control
+document.getElementById('fov-slider').addEventListener('input', (e) => {
+	const fov = parseInt(e.target.value);
+	document.getElementById('fov-value').textContent = fov;
+	updateCameraFOV(fov);
+});
+
+exitBtn.addEventListener('click', () => {
+	if (animId) {
+		cancelAnimationFrame(animId);
+		animId = null;
+	}
+	hud.classList.remove('active');
+	exitBtn.classList.remove('active');
+	intro.classList.remove('hidden');
+	startBtn.disabled = false;
+	startBtn.textContent = "Start AR Stream";
+});
+
+window.addEventListener('resize', () => {
+	if (camera && renderer) {
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+		renderer.setSize(window.innerWidth, window.innerHeight);
+	}
+});
+
+// Check AR support on load
+await checkSupport();
+</script>
+
+</body>
+</html>
