기술 설명
웹에서 3D 가 어떻게 구동되나요?
웹브라우저가 그래픽 장치를 직접 불러 3D 를 그립니다. 그 통로가 WebGL 이고, 뒤를 잇는 것이 WebGPU 입니다.
한마디로
브라우저가 그래픽 장치에 그리기를 맡긴다
화면에 3D 를 그리려면 그래픽 장치에 무엇을 어떻게 그릴지 넘겨야 합니다. 웹페이지 안의 코드가 WebGL 로 이 일을 맡깁니다. 그래서 따로 설치할 것이 없습니다.
WebGL 2 는 주요 브라우저에 모두 들어가 있습니다. Chrome 56, Firefox 51, Safari 15 부터라 2021년에 이미 자리를 잡았습니다.
WebGPU 는 다음 세대입니다. 요즘 그래픽 장치 구조에 맞춰 다시 설계됐고 계산 작업도 맡길 수 있습니다. Chrome 113, 안드로이드 Chrome 121, Firefox 141, Safari 26 순으로 들어왔고, Firefox 는 아직 윈도우와 일부 맥에서만 됩니다. 2026년 10월 2일에 MDN 호환 데이터로 다시 확인했습니다.
그리는 순서
파일을 받아 화면에 나오기까지
앞의 두 단계는 한 번, 뒤의 두 단계는 매 프레임 구동됩니다.
파일을 받는다
3D 파일을 내려받아 모양, 재질, 텍스처로 풀어놓습니다. 첫 화면을 기다리는 시간은 대개 이 단계에서 생깁니다.
그래픽 장치로 올린다
꼭짓점 좌표와 텍스처를 그래픽 장치의 메모리로 보냅니다. 한 번 보내면 그다음부터는 그리기 명령만 갑니다.
매 프레임 그린다
카메라 위치와 빛을 계산해 초당 30번에서 60번 다시 그립니다. 이 횟수가 부드러움을 정합니다.
조작을 받는다
돌리고 확대하는 조작을 카메라 위치로 바꿔 다음 프레임에 반영합니다.
성능
왜 느려지나
느려지는 원인은 대개 아래 셋입니다. 만들기 전에 정해 두면 나중에 고치는 것보다 훨씬 쌉니다.
파일 크기
꼭짓점 수와 텍스처 해상도가 내려받는 시간을 정합니다. 모양은 Draco, 텍스처는 KTX2 로 줄입니다.
그리기 명령 수
물체를 잘게 나눠 두면 그래픽 장치에 보내는 그리기 명령이 늘어납니다. 재질이 같은 것끼리 합칩니다.
화면 해상도
화면 배율이 2배면 칠할 픽셀이 4배, 3배면 9배가 됩니다. 배율에 상한을 두면 초당 그리는 횟수가 다시 올라갑니다.
무엇으로 만드나
직접 쓰지 않아도 된다
WebGL 을 직접 부르는 일은 드뭅니다. 보통은 아래 도구로 만듭니다.
- three.js, Babylon.js 같은 라이브러리가 WebGL 과 WebGPU 위에서 구동되며 카메라, 빛, 파일 읽기를 대신합니다.
- 돌려 보기만 하면 되는 자리에는 model-viewer 처럼 태그 하나로 3D 를 보여 주는 도구를 씁니다.
- 어느 쪽이든 파일은 GLB 로 준비합니다. 아이폰의 AR 보기까지 쓰려면 USDZ 를 함께 내보냅니다.