glTF Size and Triangle Count for E-Commerce

This guide provides the standard file size, triangle count, and optimization specifications for deploying glTF/GLB models in e-commerce. Following these benchmarks ensures fast load times, high visual fidelity, and seamless real-time rendering across web browsers and mobile augmented reality (AR) viewers.

Target File Size Guidelines

Keeping asset sizes low is critical for maintaining high web performance and low bounce rates, especially on mobile networks.

  • Ideal Target: Under 3 MB to 5 MB per model.
  • Maximum Acceptable Limit: 10 MB to 15 MB (platforms like Shopify set a maximum hard cap at 15 MB, while Google recommends under 10 MB).
  • Optimization Methods:
    • Use Draco geometry compression to drastically reduce geometric data size.
    • Use KTX 2.0 / Basis Universal texture compression for GPU-friendly, lightweight textures.
    • Export the final asset as a single, self-contained binary file (.glb).

Triangle Count Guidelines

Triangle (polygon) budgets determine how smoothly an asset will render on user hardware without dropping frame rates.

  • General Rule: Aim for under 100,000 triangles for the entire asset.
  • Simple Products: 10,000 to 30,000 triangles (e.g., books, simple electronics, basic apparel, generic packaging).
  • Medium Complexity Products: 30,000 to 60,000 triangles (e.g., standard furniture, appliances, footwear).
  • High Complexity Products: 60,000 to 100,000 triangles (e.g., detailed armchairs, bicycles, intricate hardware).
  • Absolute Hard Limit: Avoid exceeding 100,000 to 150,000 triangles. Anything higher significantly increases the risk of mobile browser crashes and lag in WebGL viewports.

Texture and Material Specifications

Because textures typically occupy the vast majority of the glTF file size, strict limits must be placed on texture resolution and material complexity.

  • Resolution:
    • Primary view: 2048 × 2048 (2K) maximum.
    • Secondary or small components: 1024 × 1024 (1K) or 512 × 512.
    • Avoid 4K textures entirely for e-commerce web deployment.
  • Channel Packing (ORM): Combine the Occlusion, Roughness, and Metallic maps into a single texture file (Red = Ambient Occlusion, Green = Roughness, Blue = Metallic) to reduce network requests and memory usage.
  • Draw Calls & Materials: Limit models to 1 to 3 materials at most to prevent excessive draw calls, which degrade mobile rendering performance.