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