GLB 뷰어 — GLB·glTF 파일을 온라인에서 보기

GLB 파일은 glTF 2.0의 바이너리 형식으로, 3D 모델의 메시, 머티리얼, 텍스처, 애니메이션을 파일 하나에 모두 담습니다. Khronos Group이 2017년에 glTF 2.0을 발표했고, 2022년에는 국제 표준 ISO/IEC 12113이 되었습니다. 그래서 Blender, AI 모델 생성기, 3D 스캔 앱에서 만든 .glb 파일을 이 GLB 뷰어는 물론 웹 페이지와 대부분의 게임 엔진에서도 열 수 있습니다.

.glb 뷰어는 파일을 읽어 화면에 그리기만 하면 됩니다. 편집, 텍스처 교체, 다른 형식으로 내보내기는 3D 편집기가 할 일입니다.

GLB와 glTF: 파일 하나냐, 폴더냐

같은 모델을 두 가지 방식으로 저장할 수 있습니다. .gltf 파일은 사람이 읽을 수 있는 JSON으로, 지오메트리를 담은 .bin 파일과 텍스처마다 하나씩 있는 이미지 파일을 따로 가리킵니다. .glb는 JSON, 바이너리 데이터, 이미지를 파일 하나에 담기 때문에 이메일로 보내거나 업로드하거나 한데 모아 보관하기가 더 쉽습니다.

GLB의 내부: 헤더, JSON 청크, 바이너리 청크

12바이트 헤더

모든 GLB는 glTF라는 글자, 버전 번호, 전체 파일 길이로 시작합니다. 뷰어는 이 바이트를 가장 먼저 확인하는데, 덕분에 "GLB"가 실제로는 FBX나 glTF 1.0 파일일 때 이를 알려 줄 수 있습니다.

JSON 청크

다음에는 장면을 설명하는 JSON 블록이 옵니다. 메시, 머티리얼, 텍스처, 애니메이션, 그리고 각 부분의 정점 수가 여기에 들어 있습니다. 모델 리포트는 여기서 읽어 오므로, 화면에 무엇이 그려지기도 전에 개수가 먼저 표시됩니다.

바이너리 청크

마지막은 바이너리 데이터입니다. 정점 위치, 노멀, 애니메이션 키프레임, 그리고 대개 텍스처 이미지 자체가 PNG, JPEG, WebP, KTX2 형식으로 들어 있습니다.

모델을 여는 것은 일의 절반입니다. 나머지 절반은 그 모델이 쓰일 곳, 즉 웹 페이지, 휴대폰, AR 앱, 게임에 넣을 준비가 되었는지 아는 것입니다. 이 GLB 뷰어는 그 질문에 답해 주는 숫자를 읽어 냅니다.

정점, 삼각형, 메시

삼각형 수는 모델을 그리는 부담을 가장 분명하게 보여 주는 지표입니다. 웹 페이지용 상품 모델은 보통 수만 개 수준이지만, 스캔한 조각상은 수백만 개에 이르러 휴대폰에서 버벅일 수 있습니다. 여러 부분이 공유하는 정점은 한 번만 세므로, 표시되는 숫자는 파일에 실제로 저장된 값과 일치합니다.

텍스처: 용량의 대부분을 차지하는 곳

많은 사람이 복잡한 지오메트리 때문에 GLB가 커진다고 생각하지만, 실제로 그런 경우는 드뭅니다. "정보" 탭에는 파일을 텍스처, 지오메트리, 애니메이션, 나머지로 나눈 막대가 표시되는데, 정적인 모델은 대부분 텍스처가 압도적입니다. 아보카도(Avocado) 샘플은 삼각형이 682개뿐인데도 용량이 7.73MB이며, 그 거의 전부가 2048 × 2048 이미지 세 장입니다.

Khronos glTF Sample Assets의 GLB 파일 13개를 이 뷰어의 자체 파서로 측정했습니다. 텍스처가 파일에서 차지하는 비율은 중앙값이 95%였습니다. 지오메트리가 대부분을 차지한 것은 애니메이션 캐릭터들과 삼각형 109,000개짜리 장난감 자동차뿐이었습니다. 전체 수치는 아래 표에 정리했습니다.

애니메이션과 모프 타깃

애니메이션이 있는 파일은 모든 클립을 길이와 함께 보여 줍니다. 클립을 고르고, 일시정지하고, 타임라인을 앞뒤로 움직이거나 속도를 4분의 1로 낮춰 걷기 동작을 한 프레임씩 확인할 수 있습니다. 캐릭터와 표정에 쓰이는 스킨과 모프 타깃도 리포트에 함께 집계됩니다.

디코딩할 수 있는 압축 확장

많은 GLB가 압축되어 있으며, 이를 디코딩하지 못하는 뷰어에서는 아무것도 보이지 않습니다. 이 뷰어는 흔히 쓰이는 확장을 모두 처리합니다.

• Draco(KHR_draco_mesh_compression)는 지오메트리를 크게 줄이지만, 모델을 그리기 전에 디코더가 필요합니다.
• meshopt(EXT_meshopt_compression)는 지오메트리와 애니메이션을 압축하며 디코딩이 매우 빠릅니다.
• KTX2(KHR_texture_basisu)는 텍스처를 GPU가 바로 쓸 수 있는 형식으로 유지해 비디오 메모리를 덜 사용합니다.
• WebP(EXT_texture_webp)는 텍스처 파일을 더 작게 만들며, 브라우저가 자체적으로 디코딩합니다.

각 디코더는 파일이 해당 확장을 선언했을 때만 다운로드되므로, 일반 GLB는 그 부담을 지지 않습니다.

.gltf 파일 자체는 JSON으로 된 설명일 뿐입니다. 지오메트리는 그 옆의 .bin 파일에, 텍스처는 이미지 파일에 들어 있으며, 이미지는 흔히 textures 폴더 안에 있습니다. 이 glTF 뷰어에는 이 파일들을 한꺼번에 넘겨 주세요. 파일 선택 창에서 함께 선택하거나 폴더 전체를 뷰어에 끌어다 놓으면 됩니다.

뷰어는 각 파일을 .gltf에 적힌 경로와 맞춰 보므로 폴더 구조가 그대로 반영됩니다. .bin 파일이 없으면 아무 말 없이 실패하는 대신 정확한 파일 이름을 알려 줍니다. 텍스처가 빠졌을 때는 모델을 그대로 열고 빠진 파일 목록을 보여 주므로, 어떤 파일을 찾아야 하는지 알 수 있습니다.

모델이 열리지 않을 때 원인은 거의 항상 아래 다섯 가지 중 하나이며, 이 GLB 뷰어는 빈 화면을 띄우는 대신 그 원인을 알려 줍니다.

실제로는 GLB가 아닌 경우

FBX, OBJ, STL 파일의 확장자를 .glb로 바꾸면 열리지 않을까 기대하는 경우가 있습니다. 하지만 바이트는 여전히 다른 형식이므로 소용이 없습니다. 뷰어는 첫 바이트를 읽어 파일의 실제 형식을 알려 주므로, Blender나 그 파일을 만든 프로그램에서 GLB로 다시 내보내면 됩니다.

모델이 검거나 회색이거나 텍스처가 없는 경우

이미지 파일을 빠뜨린 .gltf는 표면이 밋밋한 회색이나 흰색으로 보입니다. 모델이 검게 보인다면 대개 빛이 부족한 것입니다. "장면" 탭에서 "스튜디오 조명"을 켜거나 노출을 높이세요.

너무 작거나, 너무 크거나, 옆으로 누운 경우

glTF는 미터 단위를 쓰고 +Y가 위쪽입니다. 밀리미터 단위로 내보낸 모델은 1,000배 크게 들어오고, 다른 축을 위쪽으로 삼아 만든 모델은 옆으로 눕습니다. 뷰어는 어떤 모델이든 항상 화면 안에 들어오도록 자동으로 맞춰 주지만, 크기나 축은 내보낼 때 바로잡으세요.

glTF 1.0 파일인 경우

2017년 이전에 내보낸 파일은 glTF 1.0일 수 있는데, 현재 도구들은 이 형식을 더 이상 읽지 않습니다. Cesium의 오픈 소스 도구인 gltf-pipeline으로 대부분을 glTF 2.0으로 업그레이드할 수 있습니다.

휴대폰에서 페이지가 느려지거나 멈추는 경우

휴대폰은 많지 않은 메모리를 브라우저와 그래픽 칩이 나눠 씁니다. 8K 텍스처가 들어간 120MB 스캔 모델은 이 메모리를 전부 써 버릴 수 있어서, 휴대폰에서는 한도를 50MB로 두었습니다. 큰 파일은 컴퓨터에서 열거나 먼저 텍스처를 줄이세요.

GLB 뷰어는 물리 기반 렌더링과 반사용 스튜디오 환경을 사용해 초당 여러 프레임을 실시간으로 그립니다. 반면 Blender의 Cycles 렌더러는 이미지 한 장에 몇 초에서 몇 분을 들여 빛의 경로를 추적하며, 부드러운 그림자와 표면 사이를 오가는 반사광까지 계산합니다. 머티리얼은 같아도 조명이 다른 것입니다.

색도 달라질 수 있습니다. 이 뷰어는 상품 색상을 정확하게 유지하도록 설계된 Khronos PBR Neutral 톤 매핑을 사용하지만, 다른 도구는 영화 같은 느낌의 톤을 적용하기도 합니다. 모델이 너무 어둡거나 밝게 보이면 머티리얼을 고치기보다 "장면" 탭에서 노출을 조절하세요.

카메라 버튼을 누르면 보이는 화면 그대로 PNG 이미지로 저장됩니다. 고해상도 화면에서도 선명하도록 뷰어 크기의 1×, 2×, 4× 중에서 고르고, 스튜디오 배경을 없애려면 "투명 배경"에 체크하세요. 부드러운 바닥 그림자는 남기 때문에 어떤 색의 페이지에서도 모델이 자연스럽게 놓입니다.

덕분에 이 GLB 뷰어로 상품 목록, 문서, 썸네일, 포트폴리오에 쓸 GLB를 PNG로 빠르게 바꿀 수 있습니다. 이미지를 더 가볍게 하려면 PNG를 압축하거나 WebP로 변환하고, 사이트가 요구하는 정확한 크기로 크기를 조정하세요.

이 뷰어라면 안전합니다. 파일은 브라우저 탭 안에서 읽히고 렌더링되며, 업로드되지 않고 파일에 관한 어떤 정보도 저장되지 않습니다. 다른 웹사이트의 텍스처 주소를 가리키는 .gltf라도 그 주소에서 파일을 가져오는 것이 허용되지 않으므로, 모델을 연다고 해서 그 모델 때문에 나가는 요청은 없습니다.

추가로 다운로드되는 것은 뷰어 자체의 구성 요소뿐입니다. 3D 엔진, 그리고 압축된 파일에 필요할 때 받는 Draco 또는 KTX2 디코더입니다. 이들은 모든 사람에게 똑같은 프로그램 코드이며, 사용자의 데이터는 전혀 들어 있지 않습니다. 모델을 여는 동안 브라우저 개발자 도구의 네트워크(Network) 탭에서 직접 확인해 보세요.