8. WebXR 최적화 기법 ⚡

VR은 일반 웹 앱보다 훨씬 더 많은 컴퓨팅 파워를 필요로 해요. 90Hz 이상의 프레임 레이트를 유지해야 사용자가 멀미를 느끼지 않거든요. 그래서 WebXR 앱을 최적화하는 것은 정말 중요해요! 이번에는 WebXR 앱의 성능을 향상시키는 방법에 대해 알아볼게요.

폴리곤 수 줄이기

3D 모델의 폴리곤(삼각형) 수는 성능에 직접적인 영향을 미쳐요. 너무 디테일한 모델은 렌더링 속도를 크게 저하시킬 수 있어요.

해결책:

1. LOD(Level of Detail) 기법 사용: 거리에 따라 모델의 디테일 수준을 조절
2. 3D 모델 최적화 도구 사용: Blender, Maya 등에서 폴리곤 수 줄이기
3. 불필요한 디테일 제거: 사용자가 보지 않는 부분은 간소화

Three.js에서 LOD를 구현하는 예제:

// LOD(Level of Detail) 객체 생성
const lod = new THREE.LOD();

// 고품질 모델 (가까울 때 보임)
const highDetailGeometry = new THREE.SphereGeometry(1, 64, 64);
const highDetailMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const highDetailMesh = new THREE.Mesh(highDetailGeometry, highDetailMaterial);

// 중간 품질 모델 (중간 거리에서 보임)
const mediumDetailGeometry = new THREE.SphereGeometry(1, 32, 32);
const mediumDetailMesh = new THREE.Mesh(mediumDetailGeometry, highDetailMaterial);

// 저품질 모델 (멀리 있을 때 보임)
const lowDetailGeometry = new THREE.SphereGeometry(1, 16, 16);
const lowDetailMesh = new THREE.Mesh(lowDetailGeometry, highDetailMaterial);

// LOD 레벨 추가
lod.addLevel(highDetailMesh, 0);    // 0~5 거리
lod.addLevel(mediumDetailMesh, 5);  // 5~10 거리
lod.addLevel(lowDetailMesh, 10);    // 10+ 거리

// 씬에 LOD 객체 추가
scene.add(lod);

텍스처 최적화

고해상도 텍스처는 메모리를 많이 차지하고 로딩 시간을 늘려요.

해결책:

1. 텍스처 크기 줄이기: 2의 제곱수 크기 사용 (512x512, 1024x1024 등)
2. 밉맵 사용: 거리에 따라 텍스처 해상도 자동 조절
3. 텍스처 압축 포맷 사용: WebP, BASIS 등
4. 텍스처 아틀라스 사용: 여러 텍스처를 하나의 이미지로 통합

Three.js에서 텍스처 최적화 예제:

// 텍스처 로더 생성
const textureLoader = new THREE.TextureLoader();

// 텍스처 로드 및 밉맵 활성화
const texture = textureLoader.load('texture.jpg');
texture.generateMipmaps = true;
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

// 재질에 텍스처 적용
const material = new THREE.MeshStandardMaterial({ map: texture });

렌더링 최적화

렌더링 과정 자체를 최적화하는 방법도 있어요.

해결책:

1. 오클루전 컬링(Occlusion Culling): 보이지 않는 객체는 렌더링하지 않기
2. 인스턴싱(Instancing): 동일한 객체를 여러 번 효율적으로 그리기
3. 셰이더 최적화: 복잡한 셰이더 효과 줄이기
4. 포스트 프로세싱 효과 최소화: 화면 후처리 효과는 성능을 크게 저하시킴

Three.js에서 인스턴싱 예제:

// 인스턴스 수 정의
const instanceCount = 1000;

// 기본 지오메트리 생성
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);

// 인스턴스 속성 배열 생성
const offsets = new Float32Array(instanceCount * 3);
const colors = new Float32Array(instanceCount * 3);

// 각 인스턴스의 위치와 색상 설정
for (let i = 0; i < instanceCount; i++) {
  // 랜덤 위치
  offsets[i * 3] = (Math.random() - 0.5) * 10;
  offsets[i * 3 + 1] = (Math.random() - 0.5) * 10;
  offsets[i * 3 + 2] = (Math.random() - 0.5) * 10;
  
  // 랜덤 색상
  colors[i * 3] = Math.random();
  colors[i * 3 + 1] = Math.random();
  colors[i * 3 + 2] = Math.random();
}

// 인스턴스 속성 추가
geometry.setAttribute('offset', new THREE.InstancedBufferAttribute(offsets, 3));
geometry.setAttribute('color', new THREE.InstancedBufferAttribute(colors, 3));

// 인스턴스 메시 생성을 위한 셰이더 재질
const material = new THREE.ShaderMaterial({
  vertexShader: `
    attribute vec3 offset;
    attribute vec3 color;
    varying vec3 vColor;
    
    void main() {
      vColor = color;
      vec3 pos = position + offset;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
    
    void main() {
      gl_FragColor = vec4(vColor, 1.0);
    }
  `
});

// 인스턴스 메시 생성
const instancedMesh = new THREE.InstancedMesh(geometry, material, instanceCount);
scene.add(instancedMesh);

에셋 로딩 최적화

VR 앱에서는 초기 로딩 시간도 중요한 요소예요.

해결책:

1. 프로그레시브 로딩: 필요한 에셋부터 순차적으로 로드
2. 에셋 번들링: 여러 작은 파일보다 적은 수의 큰 파일이 효율적
3. 캐싱: 이미 로드한 에셋은 다시 로드하지 않기
4. 압축: gzip, Draco 등의 압축 기술 활용

Three.js에서 로딩 관리자 사용 예제:

// 로딩 관리자 생성
const loadingManager = new THREE.LoadingManager();

// 로딩 이벤트 핸들러
loadingManager.onStart = function(url, itemsLoaded, itemsTotal) {
  console.log('로딩 시작: ' + url);
  console.log('로드된 항목: ' + itemsLoaded + '/' + itemsTotal);
};

loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) {
  console.log('로딩 중: ' + url);
  console.log('로드된 항목: ' + itemsLoaded + '/' + itemsTotal);
  
  // 로딩 진행률 표시
  const progressPercent = (itemsLoaded / itemsTotal) * 100;
  document.getElementById('loading-bar').style.width = progressPercent + '%';
};

loadingManager.onLoad = function() {
  console.log('모든 리소스 로드 완료!');
  
  // 로딩 화면 숨기기
  document.getElementById('loading-screen').style.display = 'none';
  
  // 렌더링 시작
  renderer.setAnimationLoop(animate);
};

// 로딩 관리자를 사용하는 로더들
const textureLoader = new THREE.TextureLoader(loadingManager);
const gltfLoader = new THREE.GLTFLoader(loadingManager);

// 여러 에셋 로드
textureLoader.load('texture1.jpg');
textureLoader.load('texture2.jpg');
gltfLoader.load('model1.glb');
gltfLoader.load('model2.glb');

메모리 관리

메모리 누수는 성능 저하와 크래시의 주요 원인이에요.

해결책:

1. 불필요한 객체 제거: 더 이상 필요 없는 객체는 메모리에서 해제
2. 객체 풀링: 객체를 재사용하여 가비지 컬렉션 최소화
3. 텍스처와 지오메트리 공유: 동일한 리소스는 여러 번 로드하지 않기

Three.js에서 객체 제거 예제:

// 객체 제거 함수
function removeObject(object) {
  // 재질 해제
  if (object.material) {
    if (Array.isArray(object.material)) {
      object.material.forEach(material => disposeMaterial(material));
    } else {
      disposeMaterial(object.material);
    }
  }
  
  // 지오메트리 해제
  if (object.geometry) {
    object.geometry.dispose();
  }
  
  // 자식 객체 제거
  if (object.children) {
    while (object.children.length > 0) {
      removeObject(object.children[0]);
      object.remove(object.children[0]);
    }
  }
  
  // 씬에서 제거
  if (object.parent) {
    object.parent.remove(object);
  }
}

// 재질 해제 함수
function disposeMaterial(material) {
  // 텍스처 해제
  for (const key in material) {
    const value = material[key];
    if (value && typeof value === 'object' && 'minFilter' in value) {
      value.dispose();
    }
  }
  
  // 재질 해제
  material.dispose();
}

// 사용 예: 더 이상 필요 없는 객체 제거
removeObject(myObject);

최적화는 끝이 없는 과정이에요. 항상 성능을 모니터링하고, 병목 현상을 찾아 개선해나가는 것이 중요해요. Chrome DevTools의 Performance 패널이나 Stats.js 같은 도구를 활용하면 성능 문제를 쉽게 발견할 수 있어요!

다음 섹션에서는 실제 WebXR 프로젝트 사례를 분석해볼게요! 🔍