Generated Models for Games, Web and AR

Real-time budgets

Games and websites need light models:

Use texture compression and keep the number of materials low; each material adds draw calls.

Showing 3D on a website

Google's <model-viewer> web component displays GLB models with rotation, zoom and AR:

<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.5.0/dist/model-viewer.min.js"></script>

<model-viewer src="/static/models/panda-mug.glb"
              ios-src="/static/models/panda-mug.usdz"
              alt="Panda mug 3D model"
              camera-controls auto-rotate ar
              shadow-intensity="1"
              style="width:100%;height:420px"></model-viewer>

Compress GLB files with tools such as gltf-transform (Draco or Meshopt geometry compression, WebP/KTX2 textures) to keep downloads small.

Game engines

Import GLB/FBX into Unity, Unreal or Godot. Check scale, pivot point (usually at the base) and collision shapes (use simple boxes or capsules, not the full mesh).

AR product previews

Customers can place a product in their room with AR (Quick Look on iOS via USDZ, Scene Viewer on Android via GLB). Accurate real-world scale is essential.

Exercise

Optimise a generated product model to under 50,000 triangles with compressed textures, display it on a web page with <model-viewer> including AR, and measure the file size before and after compression.

Check yourself

• Why keep material counts low?
• What does <model-viewer> provide?
• Why must AR models have real-world scale?