Inspect glTF Triangles and Textures Before GPU Load

Web applications can inspect glTF 3D model complexity—specifically triangle and texture counts—by reading the file's JSON structural metadata before dispatching resources to WebGL or WebGPU. By parsing the glTF JSON chunk rather than passing the file directly into a 3D engine loader, applications can evaluate memory footprints, enforce asset limits, and prevent out-of-memory crashes before allocating GPU buffers or textures.

Accessing the glTF JSON Header

A glTF asset is stored either as a plain .gltf JSON file with external buffers or as a binary .glb container.

• For .gltf files: Fetch the file and parse it directly with JSON.parse(). Because the manifest is pure JSON, you do not need to download the accompanying .bin files or image files to inspect metadata.
• For .glb files: The binary container begins with a 12-byte header followed by chunk data. The first chunk is always the JSON content chunk. You can read the JSON chunk without parsing the rest of the binary data:

async function extractGlbJson(arrayBuffer) {
  const dataView = new DataView(arrayBuffer);
  // Header: magic (4 bytes), version (4 bytes), length (4 bytes)
  const chunk0Length = dataView.getUint32(12, true);
  const chunk0Type = dataView.getUint32(16, true);

  // 0x4E4F534A is ASCII for "JSON"
  if (chunk0Type !== 0x4E4F534A) {
    throw new Error("First GLB chunk is not JSON.");
  }

  const jsonBytes = new Uint8Array(arrayBuffer, 20, chunk0Length);
  const jsonText = new TextDecoder("utf-8").decode(jsonBytes);
  return JSON.parse(jsonText);
}

For large remote files, you can use HTTP Range requests to fetch only the first few kilobytes containing the header and JSON chunk, avoiding downloading multi-megabyte geometry buffers and embedded textures entirely.

Counting Textures

Textures in glTF are declared in the top-level arrays textures and images.

• The images array defines the distinct image sources (either data URIs, external URLs, or bufferView indices for embedded PNGs/JPEGs/KTX2s).
• The textures array defines references linking an image source to a sampler configuration.

To determine unique texture resources:

function getTextureCount(gltf) {
  return gltf.images ? gltf.images.length : 0;
}

If memory consumption per texture is needed, inspect the bufferViews corresponding to the images (for embedded assets) or read MIME types and metadata headers without fully decoding pixel data to the GPU.

Calculating Triangle Counts

Triangles are computed by inspecting meshes, primitives, and accessors. Each mesh contains one or more primitives, and each primitive defines geometry topology via a render mode (which defaults to 4 for TRIANGLES):

• Mode 4 (TRIANGLES): Every 3 vertices form a triangle.
• Mode 5 (TRIANGLE_STRIP): Triangles = vertexCount - 2.
• Mode 6 (TRIANGLE_FAN): Triangles = vertexCount - 2.
• Other modes (0–3): Points and lines; count 0 triangles.

Geometry can be indexed (using the indices property) or non-indexed (using vertex counts directly from the POSITION attribute):

function getTriangleCount(gltf) {
  let totalTriangles = 0;

  if (!gltf.meshes) return 0;

  for (const mesh of gltf.meshes) {
    for (const primitive of mesh.primitives) {
      const mode = primitive.mode !== undefined ? primitive.mode : 4; // Default: TRIANGLES

      // Only evaluate triangle topologies
      if (mode < 4 || mode > 6) continue;

      let elementCount = 0;

      if (primitive.indices !== undefined) {
        // Indexed geometry: count comes from the index accessor
        const accessor = gltf.accessors[primitive.indices];
        elementCount = accessor.count;
      } else if (primitive.attributes && primitive.attributes.POSITION !== undefined) {
        // Non-indexed geometry: count comes from the POSITION accessor
        const accessor = gltf.accessors[primitive.attributes.POSITION];
        elementCount = accessor.count;
      }

      if (mode === 4) {
        totalTriangles += Math.floor(elementCount / 3);
      } else if (mode === 5 || mode === 6) {
        totalTriangles += Math.max(0, elementCount - 2);
      }
    }
  }

  return totalTriangles;
}

Pre-Allocation Validation

By combining these functions, a web application can validate an incoming file immediately after upload or download:

const gltf = await extractGlbJson(fileBuffer);
const triangles = getTriangleCount(gltf);
const textures = getTextureCount(gltf);

if (triangles > 1_000_000 || textures > 16) {
  throw new Error("Asset exceeds performance budget. Aborting GPU load.");
}

// Proceed to three.js, Babylon.js, or raw WebGL/WebGPU pipeline

Because this process only reads metadata fields already present in the JSON schema, validation completes in milliseconds with negligible CPU and memory overhead.