About

GLB is the binary container format for glTF 2.0 (GL Transmission Format), the ISO/IEC standard for runtime 3D asset delivery. A single .glb file packs the JSON scene descriptor and all binary buffers (vertex positions, normals, texture coordinates, indices) into one contiguous blob. Misinterpreting accessor component types or byte strides during parsing corrupts geometry silently. Getting the node transform hierarchy wrong (applying T × R × S in incorrect order) produces invisible or inverted meshes. This tool parses the raw binary, reconstructs the scene graph, and renders via WebGL 2 with Phong shading. It handles accessor types 5120 - 5126 (BYTE through FLOAT), all primitive modes, and quaternion node rotations. Limitation: embedded textures and morph targets are not rendered. Skinned meshes display in bind pose only. Models exceeding 100 MB are rejected to prevent browser tab crashes.

Formulas

The GLB binary layout follows a strict structure. The file begins with a 12-byte header:

Header = magic (4 bytes, 0x46546C67) + version (4 bytes) + length (4 bytes)

Each subsequent chunk has an 8-byte preamble: chunkLength (4 bytes) + chunkType (4 bytes).

Node local transform matrix is composed as:

M_local = T ⋅ R ⋅ S

where T = translation matrix from 3-vector, R = rotation matrix from unit quaternion q = (x, y, z, w), S = scale matrix from 3-vector.

Quaternion to rotation matrix conversion:

R = 1−2(y²+z²)2(xy−wz)2(xz+wy)2(xy+wz)1−2(x²+z²)2(yz−wx)2(xz−wy)2(yz+wx)1−2(x²+y²)

Phong illumination per fragment:

I = k_a + k_d ⋅ max(0, n ⋅ l) + k_s ⋅ max(0, r ⋅ v)^n_s

where n = surface normal, l = light direction, r = reflection vector, v = view direction, n_s = shininess exponent.

Reference Data

glTF Accessor Component Type	GL Enum	Byte Size	JS Typed Array
BYTE	5120	1	Int8Array
UNSIGNED_BYTE	5121	1	Uint8Array
SHORT	5122	2	Int16Array
UNSIGNED_SHORT	5123	2	Uint16Array
UNSIGNED_INT	5125	4	Uint32Array
FLOAT	5126	4	Float32Array
glTF Accessor Types & Component Counts
SCALAR	-	1 component	Index buffers, weights
VEC2	-	2 components	Texture coordinates
VEC3	-	3 components	Positions, normals
VEC4	-	4 components	Tangents, colors, quaternions
MAT2	-	4 components	Rare
MAT3	-	9 components	Rare
MAT4	-	16 components	Joint matrices
Primitive Modes
POINTS	0	Point cloud rendering
LINES	1	Line segments (pairs)
LINE_LOOP	2	Connected line loop
LINE_STRIP	3	Connected line strip
TRIANGLES	4	Default face mode
TRIANGLE_STRIP	5	Shared-edge strip
TRIANGLE_FAN	6	Fan from first vertex

Frequently Asked Questions

This viewer supports static meshes with positions, normals, and texture coordinates. It handles all six accessor component types (BYTE through FLOAT), VEC2/VEC3/VEC4/SCALAR accessor types, all primitive modes (POINTS through TRIANGLE_FAN), and the full node hierarchy with TRS transforms including quaternion rotations. PBR baseColorFactor is used for material color. Textures, morph targets, animations, and skin/joint deformation are not rendered.

Three common causes: (1) The model has no normals - the Phong shader needs normals for lighting; this viewer generates flat normals as fallback. (2) The model's scale is extremely small or large relative to the camera - use the Reset Camera button to auto-fit. (3) The model uses extensions like KHR_materials_unlit which this viewer ignores, defaulting to a gray material. Check the Model Info panel for vertex/triangle counts to confirm the geometry loaded.

The limit is 100 MB. The entire GLB is loaded into an ArrayBuffer in browser memory. Parsing creates additional typed array views for every accessor, and WebGL buffers duplicate the geometry data on the GPU. A 100 MB file can easily consume 300-400 MB of total memory. Exceeding this risks crashing the tab, especially on mobile devices with 2-3 GB RAM limits per tab.

After parsing all mesh positions, the viewer computes an axis-aligned bounding box (AABB). The center of this box becomes the orbit target. The bounding sphere radius is calculated as half the AABB diagonal. The camera distance is set to 2.5 times this radius, ensuring the entire model fits within the perspective frustum with a 45-degree field of view.

No. All processing happens entirely in the browser using the File API and WebGL. The binary data never leaves your device. No network requests are made. The file is read via FileReader.readAsArrayBuffer and parsed in JavaScript on the client side.

glTF specifies counter-clockwise winding order for front faces. If a model was exported with flipped normals or clockwise winding, backface culling hides those triangles. Toggle the wireframe mode to see all edges regardless of face orientation. Some exporters (especially from CAD software) produce inconsistent winding. The viewer enables backface culling by default for performance but you can observe the geometry in wireframe mode.