All projects

Browser Game · Technical case study

Fronte Planetario

A real-time strategy game on a living 3D planet — cities, traffic, aircraft, weather and environmental destruction — written in Three.js with no helper libraries. Playable in the browser; the interface is in Italian.

Role
Concept & direction, AI-assisted build
Engine
Three.js · WebGL · JavaScript
Status
Playable in the browser
Model
Free, no ads, no tracking

Overview

A control-point conquest game where the battlefield is a whole planet. You orbit it, zoom from the globe down to a city street, capture cities, build units and fight an AI opponent — while every crater, fire and smoke plume changes the planet's climate.

Problem

Make a planet feel alive and stay readable as a strategy map: smooth orbit and zoom, thousands of objects on a sphere, and destruction that has consequences — using nothing but Three.js.

My role

Concept, game design and direction: the rules, the balance and the look. The code was written with AI assistance and verified with automated play-throughs.

Challenges

  • Edit the terrain live — craters, scorching, flattened city ground — without rebuilding the mesh.
  • Draw trees, buildings, vehicles and aircraft on a sphere at once, day and night.
  • Build an orbit camera with no gimbal lock and no OrbitControls, from globe view to street level.
  • Make destruction matter: connect explosions to fire, pollution, sea level and the victory conditions.

Solution

A cube-sphere terrain whose height, colour and normals are updated locally on impact; instanced meshes for trees, buildings and vehicles; a quaternion-based camera; procedural shaders for clouds, atmosphere and ocean; and a small ecosystem model that feeds back into the game.

Architecture & approach

  • Deformable cube-sphere terrain with an exact height lookup, so units, roads and projectiles follow craters.
  • Instanced rendering: 15,000 trees, about a thousand buildings with procedural night windows, hundreds of cars, airliners and ships.
  • Hand-written HDR pipeline: MSAA scene buffer, bloom, tone mapping, depth of field, sun shadows, cloud shadows baked from a cube map, four quality presets with automatic downgrade.
  • A* pathfinding on a 9,000-node graph laid over the sphere; roads generated from the same graph.
  • Rules layer: a five-mission campaign with stars and guided tutorial, fog of war and six command stratagems (decoy armies, radio silence, espionage, blitz…) in the spirit of information-warfare strategy games, control points, tickets, economy, research, six unit types including indirect-fire artillery and an ecological engineer that repairs the damage, an AI that deceives and gathers waves, and an orbital strike.
  • Ecosystem model: burned forest and pollution lower the biosphere, raise the seas and darken the sky.

Technology

  • Three.js
  • WebGL
  • JavaScript
  • GLSL

Outcome

A complete, playable game on this site: free, with no ads and no tracking, and nothing beyond Three.js — camera, particles, shaders, audio and interface are all hand-written.

Lessons learned

  • Consequences need tuning: the first ecosystem model collapsed within minutes and had to be rebalanced so war hurts the planet without ending the game.
  • A headless simulation loop makes AI and economy tuning fast: play a whole match in seconds, then read the numbers.

Let's work together

Interested in working together, discussing a project or an opportunity? Let's talk.