WebGL과 Three.js로 구현한 가상 피팅 시스템

서론

전자상거래의 급속한 발전과 함께 소비자들의 온라인 쇼핑 경험에 대한 기대치가 계속 높아지고 있습니다. 가상 피팅 기술은 온라인 쇼핑과 오프라인 매장 경험을 연결하는 다리 역할을 하며, 소비자들이 의류, 화장품 및 액세서리를 구매하는 방식을 근본적으로 변화시키고 있습니다. 본 글에서는 WebGL과 Three.js 기술을 활용하여 고성능 가상 피팅 시스템을 구축하는 방법과 구현 과정에서의 기술적 과제 및 해결책에 대해 심층적으로 살펴보겠습니다.

가상 피팅 기술의 시장 가치

Grand View Research의 자료에 따르면, 글로벌 소매 시장의 AR/VR 규모는 2025년까지 1,204.5억 달러에 이를 것으로 예상되며, 연평균 성장률은 68.5%입니다. 가상 피팅은 그 중요한 응용 시나리오로서 전환율을 크게 높이고 반품률을 낮추고 있습니다:

가상 피팅을 구현한 소매업체들은 전환율이 40% 이상 증가했다고 보고
평균 반품률이 25% 감소하여 운영 비용을 크게 절감
사용자 참여도가 60% 증가하고, 평균 세션 지속 시간이 2배 증가

WebGL과 Three.js의 기본 구조

WebGL의 기본 기능

WebGL은 플러그인 없이 브라우저에서 인터랙티브 3D 그래픽을 렌더링할 수 있게 해주는 JavaScript API입니다. OpenGL ES를 기반으로 하며, GPU를 직접 활용하여 가속화합니다:

// WebGL 기본 셰이더 예제
const vertexShaderSource = `
  attribute vec4 aVertexPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
  }
`;

Three.js의 역할

Three.js는 WebGL의 고급 래핑 라이브러리로, 3D 프로그래밍의 복잡성을 크게 단순화합니다:

// Three.js 장면 초기화 예제
// Three.js 장면 객체 생성, 모든 3D 객체, 광원 및 카메라를 포함
const scene = new THREE.Scene();

// 원근 카메라 생성, 매개변수는 다음과 같습니다:
// 1. 시야각(FOV) - 75도, 시야의 넓이를 결정
// 2. 종횡비 - 창 크기의 종횡비 사용, 왜곡 없는 렌더링 보장
// 3. 근접 클리핑 면 - 0.1, 카메라가 볼 수 있는 가장 가까운 거리
// 4. 원거리 클리핑 면 - 1000, 카메라가 볼 수 있는 가장 먼 거리
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// WebGL 렌더러 생성, 안티앨리어싱(antialias)을 활성화하여 모서리를 부드럽게 함
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 렌더러의 출력 캔버스 크기를 현재 브라우저 창 크기로 설정
renderer.setSize(window.innerWidth, window.innerHeight);

// 렌더러의 DOM 요소(canvas)를 HTML 문서의 body에 추가
// 이로써 3D 내용이 웹 페이지에 표시됨
document.body.appendChild(renderer.domElement);

가상 피팅 시스템의 핵심 기술 구현

1. 인체 모델링 및 추적

정확한 인체 모델은 가상 피팅의 기초입니다. 우리는 계층적 접근 방식을 채택했습니다:

// TensorFlow.js 기반 자세 추정 의사 코드
/**
 * 비디오 스트림에서 인체 자세를 추정하고 Three.js 호환 모델로 변환
 * @param {HTMLVideoElement} video - 사람이 포함된 비디오 요소
 * @return {Object} 변환된 Three.js 모델 데이터
 */
async function estimateBodyPose(video) {
  // PoseNet 신경망 모델 로드
  // posenet.load()는 초기화된 자세 추정 모델을 포함하는 Promise를 반환
  const net = await posenet.load();
  
  // PoseNet 모델을 사용하여 비디오 프레임에서 단일 인물의 자세 추정
  // estimateSinglePose 메서드는 비디오 프레임을 분석하고 키포인트 좌표 반환
  // flipHorizontal 매개변수를 true로 설정하면 입력을 수평으로 뒤집어 셀카 시점에 맞는 자세 추정
  const pose = await net.estimateSinglePose(video, {
    flipHorizontal: true
  });
  
  // PoseNet이 반환한 2D 자세 데이터를 Three.js에서 사용할 수 있는 3D 모델 데이터로 변환
  // 이 함수(코드에 정의되지 않음)는 키포인트를 3D 캐릭터 뼈대에 매핑
  return convertPoseToThreeJSModel(pose);
}

2. 의류 모델 및 물리 시뮬레이션

의류 렌더링은 재질, 조명 및 물리적 특성을 고려해야 합니다:

// 의류 재질 정의
// 의류 소재의 외관과 광학적 특성을 사실적으로 시뮬레이션하기 위한 물리 기반 재질 객체 생성
const clothMaterial = new THREE.MeshPhysicalMaterial({
  // 기본 색상(확산) 맵, 천의 기본 색상과 패턴을 정의
  map: textureLoader.load('fabric_diffuse.jpg'),
  // 노멀 맵, 기하학적 복잡성을 증가시키지 않고 천 표면의 돌출 세부 사항을 시뮬레이션
  normalMap: textureLoader.load('fabric_normal.jpg'),
  // 거칠기 맵, 재질의 각 부분의 거칠기를 제어하여 빛이 어떻게 분산되는지 영향
  roughnessMap: textureLoader.load('fabric_roughness.jpg'),
  // 환경 폐색 맵(AO), 주름과 그림자 세부 정보를 강화하여 천의 사실감 향상
  aoMap: textureLoader.load('fabric_ao.jpg'),
  // 재질을 양면 렌더링으로 설정하여 천의 앞뒷면이 모두 보이게 하며, 얇은 소재 시뮬레이션에 적합
  side: THREE.DoubleSide,
  // 투명도 활성화, 재질이 투명 효과를 가질 수 있도록 함
  transparent: true,
  // 빛이 재질을 통과하는 정도 설정, 0.15는 약한 반투명을 나타내며 얇은 쉬폰 같은 소재 시뮬레이션
  transmission: 0.15, // 투명도 시뮬레이션
  // 전체 거칠기 값, 0.65는 중간 이상의 거칠기를 나타내며, 전형적인 천 표면 효과
  roughness: 0.65,
  // 금속도 값, 0.05는 거의 비금속 재질을 나타내며, 대부분의 직물 소재에 적합
  metalness: 0.05,
});

3. 실시간 상호작용 및 충돌 감지

가상 피팅의 원활한 경험을 위해서는 효율적인 충돌 감지가 필요합니다:

// 최적화된 충돌 감지 알고리즘 의사 코드
function detectCollisions(clothMesh, bodyMesh) {
  // 공간 분할 알고리즘을 사용하여 충돌 감지 최적화
  const octree = new THREE.Octree({
    undeferred: false,
    depthMax: 8
  });
  octree.add(bodyMesh);
  
  for (const vertex of clothMesh.geometry.vertices) {
    const collisions = octree.search(vertex, 0.5);
    if (collisions.length > 0) {
      // 충돌 반응 처리...
    }
  }
}

성능 최적화 전략

구현 과정에서 특히 모바일 기기에서 몇 가지 심각한 성능 문제에 직면했습니다:

1. LOD(Level of Detail) 구현

// LOD 구현 예제
const lod = new THREE.LOD();
const highDetailModel = createHighDetailModel();
const mediumDetailModel = createMediumDetailModel();
const lowDetailModel = createLowDetailModel();

lod.addLevel(highDetailModel, 0);    // 근거리
lod.addLevel(mediumDetailModel, 10); // 중간 거리
lod.addLevel(lowDetailModel, 50);    // 원거리
scene.add(lod);

2. 셰이더 최적화

조명과 그림자 계산을 위한 셰이더 수준 최적화를 수행했습니다:

// 최적화된 프래그먼트 셰이더 예제
precision mediump float;

// 사전 계산된 조명 데이터
uniform sampler2D uLightMap;
uniform sampler2D uBaseTexture;
varying vec2 vUv;

void main() {
  // 실시간 계산 대신 사전 베이크된 라이트맵 사용
  vec4 lightingData = texture2D(uLightMap, vUv);
  vec4 baseColor = texture2D(uBaseTexture, vUv);
  
  gl_FragColor = baseColor * lightingData;
}

3. 작업 스레드 분리

// Web Worker를 사용하여 복잡한 계산 오프로드
const physicsWorker = new Worker('physics-worker.js');

physicsWorker.postMessage({
  type: 'simulate',
  clothVertices: clothMesh.geometry.vertices,
  bodyModel: serializeBodyModel()
});

physicsWorker.onmessage = function(e) {
  updateClothGeometry(e.data.updatedVertices);
};

결론 및 데모 체험 플랫폼

가상 피팅 기술은 빠르게 발전하고 있으며, WebGL과 Three.js의 결합으로 일반 브라우저에서 고성능 3D 피팅 경험을 구현할 수 있습니다. 이는 소비자의 쇼핑 경험을 향상시킬 뿐만 아니라 소매업체에게도 실질적인 비즈니스 가치를 가져다줍니다.

이것은 최적화된 데모 효과입니다. 관심 있는 분들은 체험해 보시거나, 솔루션을 통해 이 기술을 직접 플랫폼에 적용할 수 있습니다. 독립 개발자에게는 완전한 가상 시스템 개발 작업량이 너무 많기 때문입니다.

참고 자료

Fernando, R., & Kilgard, M. J. (2003). The Cg Tutorial: The definitive guide to programmable real-time graphics. Addison-Wesley Professional.
Dirksen, J. (2018). Three.js Cookbook. Packt Publishing.
Marschner, S., & Shirley, P. (2018). Fundamentals of Computer Graphics. CRC Press.
WebGL Fundamentals. (2021). Retrieved from https://webglfundamentals.org/
Three.js Documentation. (2023). Retrieved from https://threejs.org/docs/