Project Overview
Savannai is a fully custom-built Web3 3D multiplayer experience set in a virtual African savanna. We designed and developed this project from the ground up — every element of the environment, from terrain generation to animal behavior, was crafted by our team.
The goal: create a shared online space where players can explore, socialize, and observe AI-driven wildlife in real time, all running inside a web browser with zero installs required.
Architecture
The system consists of several interconnected layers:
- 3D Rendering Layer — real-time 3D scene powered by WebGL, handling terrain, lighting, skybox, and all visual elements
- AI Behavior Layer — autonomous animal agents with state machines governing movement, feeding, resting, and social interactions
- Multiplayer Layer — real-time player synchronization allowing multiple users to coexist in the same world simultaneously
- UI Overlay Layer — custom HTML/CSS interface overlaid on the 3D viewport, providing controls, stats, chat, and navigation
- Web3 Layer — blockchain integration for token mechanics and decentralized ownership
3D Engine & World
Terrain
The savanna terrain was modeled with realistic elevation data — rolling hills, flat grasslands, and a river valley. Textures were hand-selected and blended to simulate dry season African landscapes with procedural grass placement.
Environment
- Dynamic skybox with time-of-day color shifts
- Volumetric lighting simulating sun position and atmospheric scattering
- Interactive objects — vehicles, structures, watering holes that respond to player proximity
- LOD system (Level of Detail) ensuring smooth performance across devices
Asset Pipeline
3D animal models were generated using Meshy AI and refined manually. Environmental assets from curated packs (Animal Pack Deluxe v2) were integrated and optimized for web delivery.
AI Animal System
Each animal species runs an independent AI agent with the following behavior model:
State Machine
IDLE → WANDER → GRAZE → DRINK → REST → SOCIALIZE
↓ ↓ ↓ ↓ ↓
FLEE (on threat detection)
Behavior Parameters
- Giraffes — long wander radius, frequent grazing, slow movement, high awareness
- Elephants — herd behavior, paths to water sources, territorial presence
- Rhinos — solitary, short temper radius, charge behavior on close approach
- Ostriches — high speed, erratic movement patterns, flock tendency
- Tortoises — minimal movement, long rest cycles, predictable paths
Perception System
Animals have a configurable perception radius. When players enter this radius, animals react — some flee, some approach, some ignore. This creates emergent, unscripted encounters that feel organic.
Multiplayer & Networking
The world supports real-time multiplayer with the following features:
- Player presence — see other players' avatars moving in real time
- Live chat — in-world text communication
- Shared state — all players see the same animals in the same positions
- Scalable rooms — automatic load balancing across server instances
Network synchronization uses WebSocket connections with delta compression to minimize bandwidth while maintaining responsive 30+ FPS visual updates.
Web3 Integration
Savannai is built with Web3 principles at its core:
- Token ($SAVANNAI) — native token powering the ecosystem, launched on Solana via pump.fun
- On-chain activity — key game events are logged to the blockchain for transparency
- Community governance — token holders participate in decisions about world updates, new species, and features
- Decentralized identity — wallet-based authentication, no email/password required
UI Overlay Layer
The entire user interface is a custom-built overlay rendered on top of the 3D viewport:
- Right panel — project info, controls reference, documentation links, real-time animal activity log
- Bottom bar — live animal population counters with animated numbers, player count, chat toggle
- Top icons — quick links to pump.fun, X (Twitter), Dexscreener, plus Copy CA button
- Chat system — slide-out panel for real-time player communication
All UI elements use a consistent pixel-art aesthetic with the Press Start 2P typeface and a warm savanna color palette (#f5e6a3, #e6c84a, #c9a227).
Responsive Design
The layout adapts to any screen size using CSS custom properties and media queries:
- Base (1920×1080) — optimized default layout
- Wide screens (>1920px) — right panel grows 1:1 with extra width, iframe stays fixed
- Tall screens (>1080px) — bottom bar grows 1:1 with extra height
- Tablets (≤900px) — compressed panel, adjusted iframe scale
- Mobile (≤600px) — panel hidden, full-width game, centered icons
- Portrait mode — masks stretch dynamically to cover iframe overflow
Deployment & Infrastructure
- Hosting — Vercel (automatic deploys from GitHub on every push to
main)
- Repository — GitHub (
brianweb3/safari-walk)
- CDN — Vercel Edge Network for global low-latency delivery
- 3D Runtime — Spatial.io engine for real-time 3D rendering and multiplayer
- CI/CD — push to
main → Vercel build → live in ~30 seconds
Tech Stack
HTML5
CSS3
JavaScript
WebGL
Spatial.io
Solana
Meshy AI
Vercel
GitHub
Press Start 2P
Roadmap
- Phase 1 — Core world, 5 animal species, multiplayer, basic UI ✓
- Phase 2 — Advanced AI behaviors, day/night cycle, weather system
- Phase 3 — Token-gated areas, NFT animals, breeding mechanics
- Phase 4 — Player-built structures, land ownership, DAO governance
- Phase 5 — Mobile app, VR support, cross-chain integration