웹에서 3D가 가벼워지기까지

1. 웹 3D는 무겁다는 인상

웹에서 3D라고 하면 아직도 무겁고 버벅인다는 인상이 먼저 떠오릅니다. 예전엔 실제로 그랬죠. 브라우저에 WebGL이 들어온 뒤에도 모델 파일 하나가 수십 메가바이트씩 하는 일이 흔했으니까요. 그래도 3D를 웹 개발자의 도구로 만든 건 three.js였습니다. 2010년 리카르도 카벨로(mr.doob)가 공개한 이 라이브러리는 복잡한 WebGL 코드를 장면, 카메라, 조명 같은 익숙한 개념으로 감쌌습니다. 요즘은 React Three Fiber 덕분에 리액트 컴포넌트를 조립하듯 3D 장면을 짤 수도 있고요. 도구가 쉬워지자 남은 숙제는 무게였습니다.

2. 3D의 JPEG라고 불리는 glTF

먼저 달라진 건 파일 형식이었습니다. 그래픽 표준 단체 크로노스 그룹이 만든 glTF가 웹 3D의 공통 형식으로 자리를 잡았습니다. 2017년 6월 2.0이 나왔고 2022년에는 ISO 국제 표준이 됐습니다. 만든 쪽에서 스스로 3D의 JPEG라고 부를 만큼 처음부터 전송과 로딩을 염두에 둔 형식입니다. 여기에 압축 확장이 붙습니다. Draco나 meshopt 같은 압축은 모델의 뼈대인 지오메트리를 줄이고, KTX2에 담긴 Basis Universal 텍스처는 그래픽카드 메모리 안에서도 압축된 채로 머뭅니다. JPEG나 PNG는 그리기 전에 풀려서 메모리를 크게 차지하거든요. 휴대폰에서 3D가 버티느냐가 이 차이에서 갈리곤 합니다.

3. 실시간 조명 대신 구워 둔 빛

다음은 계산입니다. 3D 장면에서 가장 비싼 일 중 하나가 조명입니다. 빛과 그림자를 매 프레임 계산하면 휴대폰은 금방 뜨거워집니다. 그래서 많은 웹 3D 작업이 Blender 같은 도구에서 빛과 그림자를 미리 계산해 텍스처에 그려 넣는 베이킹을 씁니다. 화면에서는 그 그림을 입히기만 하면 되니 조명 계산이 거의 사라집니다. 빛이 움직이지 않는 공간이라면 티도 잘 안 나고요. 브라우저 쪽에서는 WebGPU가 들어오고 있습니다. 크롬이 2023년 113 버전에서 데스크톱부터 지원했고, 지난해 윈도우용 파이어폭스 141과 사파리 26이 합류했습니다. three.js도 WebGPU가 없는 기기에서는 WebGL 2로 돌아가는 렌더러를 갖추고 있습니다.

4. 세컨드펭귄의 시선: 보여줄 장면부터 정합니다

최근 마인크래프트 맵을 웹으로 옮긴 작은 3D 집(minecraft.secondpenguin.agency)을 열었습니다. 장면은 React Three Fiber로 그리고, 빛은 실시간으로 계산하는 대신 Blender에서 구운 텍스처에 담았고, 텍스처는 KTX2 형식을 씁니다. 카메라도 마음대로 돌리게 두지 않고 스크롤을 따라 정해진 경로로만 움직입니다. 보이는 각도가 정해져 있으면 보이지 않는 면까지 공들일 필요가 없거든요. 그래도 맵 하나를 통째로 옮긴 만큼 가볍다고 하긴 어려워서, 로딩 화면은 마인크래프트 메뉴처럼 꾸며 기다리는 시간도 장면의 일부가 되게 했습니다. 3D는 여전히 쉽게 무거워지는 재료라서, 우리는 무엇을 보여줄지부터 정한 다음에 모델을 엽니다.