🔍 1단계: WebXR 지원 확인하기

// WebXR을 지원하는지 확인
if (navigator.xr) {
  console.log('야호! 이 브라우저는 WebXR을 지원해요! 🎉');
  
  // VR 모드를 지원하는지 확인
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
    if (supported) {
      console.log('VR 모드 사용 가능! 🥽');
      // VR 시작 버튼 활성화
      vrButton.disabled = false;
    }
  });
} else {
  console.log('아쉽지만 이 브라우저는 WebXR을 지원하지 않아요 😢');
  // 대체 콘텐츠 표시
}

navigator.xr 객체가 있으면 WebXR을 쓸 수 있다는 뜻이야. 그리고 isSessionSupported로 특정 모드(VR, AR)를 지원하는지 체크할 수 있어! 📝

🎬 2단계: XR 세션 시작하기

let xrSession = null;
let xrRefSpace = null;

// VR 버튼 클릭 시
async function startVR() {
  try {
    // VR 세션 요청
    xrSession = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor']  // 바닥 기준 좌표계 필요
    });
    
    console.log('VR 세션 시작! 🚀');
    
    // WebGL 컨텍스트를 XR 호환 모드로 설정
    const gl = canvas.getContext('webgl', { xrCompatible: true });
    await gl.makeXRCompatible();
    
    // XR 레이어 설정
    const layer = new XRWebGLLayer(xrSession, gl);
    xrSession.updateRenderState({ baseLayer: layer });
    
    // 참조 공간 요청
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor');
    
    // 렌더링 루프 시작
    xrSession.requestAnimationFrame(onXRFrame);
    
  } catch (error) {
    console.error('VR 세션 시작 실패:', error);
  }
}

여기서 중요한 포인트! 🎯
• requiredFeatures: 꼭 필요한 기능을 명시해. 'local-floor'는 바닥 높이를 자동으로 맞춰주는 기능이야.
• xrCompatible: true: WebGL 컨텍스트를 XR 모드로 만들어줘. 이거 안 하면 에러 나!
• XRWebGLLayer: WebGL로 그린 그림을 VR 헤드셋에 보내주는 다리 역할이야. 🌉

🎨 3단계: 매 프레임 렌더링하기

function onXRFrame(time, frame) {
  // 다음 프레임 예약 (재귀 호출)
  xrSession.requestAnimationFrame(onXRFrame);
  
  // 현재 프레임의 포즈(위치와 방향) 가져오기
  const pose = frame.getViewerPose(xrRefSpace);
  
  if (pose) {
    // VR은 양쪽 눈에 각각 렌더링해야 해!
    const glLayer = xrSession.renderState.baseLayer;
    const gl = glLayer.context;
    
    // 프레임버퍼 바인딩
    gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
    
    // 각 눈(view)마다 렌더링
    for (const view of pose.views) {
      const viewport = glLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
      
      // 여기서 3D 씬을 그려!
      renderScene(view.transform.matrix, view.projectionMatrix);
    }
  }
}

function renderScene(viewMatrix, projectionMatrix) {
  // Three.js나 Babylon.js 같은 3D 라이브러리로
  // 실제 3D 객체들을 그리는 코드가 들어가!
  // 큐브, 구, 캐릭터 등등... 🎨
}

이 부분이 핵심이야! 💎

pose.views는 보통 2개야. 왼쪽 눈, 오른쪽 눈! VR 헤드셋은 각 눈마다 다른 각도로 봐야 입체감이 생기거든. 마치 우리 눈이 두 개인 것처럼! 👀

각 view마다 transform.matrix(카메라 위치)와 projectionMatrix(원근감)가 다르게 설정돼 있어. 이걸 3D 렌더링 엔진에 넘겨주면 끝!

🕹️ 컨트롤러 입력 받기

// 입력 소스 감지
xrSession.addEventListener('inputsourceschange', (event) => {
  event.added.forEach((inputSource) => {
    console.log('새로운 입력 장치 발견!', inputSource.handedness);
    // handedness: 'left', 'right', 'none'
  });
});

// 매 프레임마다 입력 상태 확인
function onXRFrame(time, frame) {
  // ... 이전 코드 ...
  
  for (const inputSource of xrSession.inputSources) {
    if (inputSource.gamepad) {
      // 게임패드 버튼 상태
      const gamepad = inputSource.gamepad;
      
      if (gamepad.buttons[0].pressed) {
        console.log('트리거 버튼 눌림! 🔫');
        // 총 쏘기, 물건 집기 등
      }
      
      // 조이스틱 값 (-1 ~ 1)
      const x = gamepad.axes[0];
      const y = gamepad.axes[1];
      console.log(`조이스틱: x=${x}, y=${y}`);
    }
    
    // 컨트롤러 위치 가져오기
    const pose = frame.getPose(inputSource.gripSpace, xrRefSpace);
    if (pose) {
      const position = pose.transform.position;
      console.log(`컨트롤러 위치: ${position.x}, ${position.y}, ${position.z}`);
      // 3D 공간에 컨트롤러 모델 그리기
    }
  }
}

inputSource.gripSpace는 컨트롤러를 쥐고 있는 손의 위치야. 여기에 가상의 검이나 총을 붙이면 딱이지! ⚔️

inputSource.targetRaySpace도 있는데, 이건 레이저 포인터가 나가는 방향이야. UI 버튼 클릭할 때 유용해! 👆

✋ 손 추적 (Hand Tracking)

최신 VR 기기들은 컨트롤러 없이 맨손으로 조작할 수 있어! 오큘러스 퀘스트 2 이상이면 가능해. 진짜 마법 같지? 🪄

// 세션 시작 시 손 추적 요청
xrSession = await navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: ['local-floor'],
  optionalFeatures: ['hand-tracking']  // 손 추적 기능
});

// 매 프레임마다
function onXRFrame(time, frame) {
  for (const inputSource of xrSession.inputSources) {
    if (inputSource.hand) {
      // 손가락 관절 위치들
      const joints = [
        'wrist',
        'thumb-tip', 'index-finger-tip', 'middle-finger-tip',
        'ring-finger-tip', 'pinky-finger-tip'
      ];
      
      joints.forEach(jointName => {
        const joint = inputSource.hand.get(jointName);
        if (joint) {
          const pose = frame.getJointPose(joint, xrRefSpace);
          if (pose) {
            // 손가락 끝 위치로 뭔가 할 수 있어!
            console.log(`${jointName}: ${pose.transform.position.x}`);
          }
        }
      });
      
      // 핀치 제스처 감지 (엄지와 검지 붙이기)
      const thumbTip = inputSource.hand.get('thumb-tip');
      const indexTip = inputSource.hand.get('index-finger-tip');
      // 두 손가락 사이 거리 계산해서 가까우면 "집기" 동작!
    }
  }
}

손 추적은 정말 미래적이야! 🚀 각 손가락 관절의 위치를 실시간으로 알 수 있어. 이걸로 핀치, 그랩, 포인팅 같은 자연스러운 제스처를 구현할 수 있지. 마치 마이너리티 리포트 영화처럼! 🎬

🌍 AR 세션 시작하기

async function startAR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['local-floor'],
      optionalFeatures: ['hit-test', 'dom-overlay']  // AR 전용 기능들
    });
    
    console.log('AR 세션 시작! 📱');
    
    // DOM 오버레이 설정 (UI 버튼 같은 거)
    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
      domOverlay: { root: document.getElementById('ar-overlay') }
    });
    
    // 나머지는 VR과 동일!
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor');
    xrSession.requestAnimationFrame(onXRFrame);
    
  } catch (error) {
    console.error('AR 세션 시작 실패:', error);
  }
}

immersive-ar 모드를 쓰면 카메라 화면이 배경으로 보여! 그 위에 3D 객체를 그리는 거지. 📸

dom-overlay는 AR 화면 위에 HTML UI를 띄울 수 있게 해줘. "사진 찍기" 버튼 같은 거 만들 때 좋아! 📷

🎯 Hit Test: 바닥이나 벽에 객체 배치하기

AR에서 가장 중요한 기능 중 하나가 바로 Hit Test야! 사용자가 화면을 터치한 곳의 실제 3D 위치를 알아내는 거지. 예를 들어 "이 테이블 위에 가상 꽃병을 놓고 싶어!"라고 할 때 쓰는 거야. 🏺

let hitTestSource = null;

// Hit Test 소스 생성
xrSession.requestReferenceSpace('viewer').then((viewerSpace) => {
  xrSession.requestHitTestSource({ space: viewerSpace }).then((source) => {
    hitTestSource = source;
    console.log('Hit Test 준비 완료! 🎯');
  });
});

// 매 프레임마다 Hit Test 실행
function onXRFrame(time, frame) {
  // ... 이전 코드 ...
  
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    
    if (hitTestResults.length > 0) {
      // 첫 번째 히트 결과 사용
      const hit = hitTestResults[0];
      const pose = hit.getPose(xrRefSpace);
      
      if (pose) {
        // 이 위치에 3D 객체 배치!
        const position = pose.transform.position;
        console.log(`바닥 위치: ${position.x}, ${position.y}, ${position.z}`);
        
        // 화면 중앙에 조준점 표시
        // 사용자가 탭하면 이 위치에 객체 생성
        placeObject(position);
      }
    }
  }
}

Hit Test는 카메라 중앙에서 레이를 쏴서 현실 세계의 평면(바닥, 벽, 테이블 등)을 찾아내! 그 위치에 가상 객체를 놓으면 진짜 그 자리에 있는 것처럼 보여. 신기하지? 🤩

🚀 Three.js로 VR 앱 만들기

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

// 기본 설정
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;  // WebXR 활성화! 이게 핵심!
document.body.appendChild(renderer.domElement);

// VR 버튼 자동 생성
document.body.appendChild(VRButton.createButton(renderer));

// 3D 객체 추가 (큐브)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 1.6, -3);  // 눈높이에 배치
scene.add(cube);

// 조명
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

// 애니메이션 루프
renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
});

console.log('VR 준비 완료! 버튼을 눌러보세요! 🥽');

봤어? 엄청 간단하지! 😍

renderer.xr.enabled = true 한 줄이면 WebXR이 활성화돼! Three.js가 알아서 세션 관리, 프레임 렌더링, 양안 렌더링 다 해줘. 우리는 그냥 3D 객체만 만들면 돼! 🎨

VRButton.createButton은 "VR 시작" 버튼을 자동으로 만들어줘. 클릭하면 VR 모드로 들어가고, 다시 누르면 나와. 완전 편리하지? 🎮

🎯 컨트롤러 추가하기

// 컨트롤러 추가
const controller1 = renderer.xr.getController(0);  // 왼손
const controller2 = renderer.xr.getController(1);  // 오른손

scene.add(controller1);
scene.add(controller2);

// 컨트롤러에 레이저 포인터 추가
const geometry = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 0, -5)
]);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const line = new THREE.Line(geometry, material);

controller1.add(line.clone());
controller2.add(line.clone());

// 컨트롤러 이벤트
controller1.addEventListener('selectstart', () => {
  console.log('왼손 트리거 눌림! 🔫');
  // 총 쏘기, 물건 집기 등
});

controller2.addEventListener('selectstart', () => {
  console.log('오른손 트리거 눌림! 🔫');
});

Three.js는 컨트롤러도 쉽게 다룰 수 있어! getController로 컨트롤러 객체를 가져오면, 그냥 일반 3D 객체처럼 쓸 수 있어. 레이저 포인터도 간단히 추가 가능! 🎯

🚀 4. 코드 최적화

// ❌ 나쁜 예: 매 프레임마다 객체 생성
function onXRFrame() {
  const position = new THREE.Vector3();  // 매번 새로 만듦!
  // ...
}

// ✅ 좋은 예: 재사용
const tempVector = new THREE.Vector3();  // 한 번만 생성
function onXRFrame() {
  tempVector.set(x, y, z);  // 값만 변경
  // ...
}

// ❌ 나쁜 예: 불필요한 계산
function onXRFrame() {
  mesh.position.y = Math.sin(Date.now() * 0.001);  // 매번 계산
}

// ✅ 좋은 예: 캐싱
let time = 0;
function onXRFrame(timestamp) {
  time = timestamp * 0.001;
  mesh.position.y = Math.sin(time);
}

가비지 컬렉션을 최소화하는 게 핵심이야! 매 프레임마다 객체를 새로 만들면 메모리가 금방 차서 끊김 현상이 생겨. 🐌

📊 3. 성능 프로파일링

// 프레임 시간 측정
let lastTime = 0;
function onXRFrame(time, frame) {
  const deltaTime = time - lastTime;
  lastTime = time;
  
  if (deltaTime > 16.67) {  // 60fps 기준
    console.warn(`프레임 드롭! ${deltaTime.toFixed(2)}ms`);
  }
  
  // 렌더링...
}

// Three.js Stats 사용
import Stats from 'three/examples/jsm/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
  stats.begin();
  // 렌더링 코드
  stats.end();
}

성능 문제는 조기에 발견하는 게 중요해! 나중에 고치려면 훨씬 힘들어. 🔧

🔄 폴백 전략

// 1단계: WebXR 지원 확인
if (navigator.xr) {
  // VR 지원 확인
  navigator.xr.isSessionSupported('immersive-vr').then(supported => {
    if (supported) {
      showVRButton();
    } else {
      // VR은 안 되지만 AR은 될 수도
      checkARSupport();
    }
  });
} else {
  // WebXR 미지원 - 대체 방안 제공
  showFallbackExperience();
}

function showFallbackExperience() {
  // 옵션 1: 일반 3D 뷰어 (마우스 드래그로 회전)
  // 옵션 2: 360도 파노라마 이미지
  // 옵션 3: 비디오 데모
  // 옵션 4: "지원되는 브라우저로 접속하세요" 메시지
  
  console.log('WebXR 미지원 - 대체 콘텐츠 표시');
}

점진적 향상(Progressive Enhancement) 전략을 써! 기본은 모든 브라우저에서 작동하고, WebXR이 있으면 더 좋은 경험을 제공하는 거야. 🎯