Voxel Colosseum Scene Specification - Ancient Rome (Offline, High-Performance)

Objective

Design an elaborate, detailed, and vibrant voxel-art scene depicting the Colosseum in Ancient Rome.

---

User Controls

Camera

• Free-orbit + zoom camera
• Controls should feel lightweight and responsive:
  • Minimal inertia/damping
  • No "heavy" feel

Re-centre

• Include a Re-centre button
• Resets focus/target back onto the Colosseum

---

Scene Requirements

Colosseum

• Accurate Colosseum architecture rendered in colorful voxel detail
• Rich structure definition and readable silhouette

Arena & Action

• Gladiators in the arena:
  • Engaged in combat or
  • Preparing for battle (staging, ready poses, etc.)

Crowds

• Crowds populating the seating tiers
• Visual variety (densities, colors, groupings) to avoid repetitive patterns

Artefacts & Props

• Ancient Roman artefacts placed thoughtfully around the scene (e.g., statues, banners, shields, weapon racks, crates, amphorae, standards)

Background & Environment

• Ancient Roman background environment
• Visually rich atmosphere that clearly conveys Ancient Rome (city hints, roads, surrounding structures, greenery, distant silhouettes, etc.)

---

UI / Overlay Constraints

• Keep the control panel minimal and unobtrusive
  • Only essential controls
  • Include compact stats only
• Remove extra on-screen commentary / help panels

---

Technical Specifications

Deliverable

• Output a full implementation (provided in full in chat)

Offline Only (No Network Calls)

• Must run from file:// in the latest Chrome
• All code and assets embedded/inlined
  • Use data URIs where needed
  • No external requests / no CDNs

Performance Target

• Smooth rendering + interaction
• Sustain >= 55 FPS on modern desktop hardware

---

Implementation Guardrails (Pre-emptive Fixes)

Module Resolution (No Bare Imports)

If importing anything:

• Provide a <script type="importmap"> before the module script
• Map every specifier to an inline module using data: URLs defined inside the same deliverable

If using Three.js (or examples):

• Embed minimal inline modules
• Import map must include:
  • "three"
  • "three/addons/"
• No network URLs

Alternative:

• Use no third-party libraries and implement directly in WebGL2 / Canvas

Naming & Scope Safety

• Use "use strict"
• Never redeclare identifiers in the same scope
• Avoid single-letter names in nested blocks Use descriptive names (e.g., prevTime / currTime, rCh / gCh / bCh)
• No global leaks

---

Performance Tactics

Geometry & Rendering

• Precompute / merge geometry
• Instance voxels wherever possible (aim for single draw per material)
• Pack data in typed arrays

Culling & LOD

• Frustum + distance culling for crowds/props
• Dynamic LOD for:
  • Crowds
  • Arena detail
• Adaptive spawn/budget to maintain >= 55 FPS

Runtime Discipline

• Avoid per-frame allocations
• Reuse objects / pools
• Clamp devicePixelRatio <= 2
• Use requestAnimationFrame

Stats

• Track and display:
  • FPS
  • Draw counts

Controls

• Orbit yaw about world-up
• Pitch about camera-right
• Clamp pitch to +/-(pi/2 - epsilon) to avoid flips
• Keep damping low for a light/immediate feel
• Re-centre re-targets the camera on the arena/Colosseum focus point

Assets

• Textures/fonts must be embedded as data URIs
• Prefer procedural sprite/texture generation where practical

Quality Bar

• Zero console errors/warnings
• Runs offline with 0 network calls