← Back to live globe
UC23 · Global Skyscraper Race

Global Skyscraper Race

Sixty-six of the world's tallest and most notable buildings rendered as altitude-encoded points on a globe.gl WebGL sphere. Filter by construction status, sort the leaderboard by height or completion year, click country borders for per-country stats, and track the race to 1000m.

66

Buildings mapped

1008m

Tallest (Jeddah Tower)

3

Status categories

1931

Oldest (Empire State)

2030

Latest (proposed)

20+

Countries covered

globe.gl

Visualisation engine

WebGL

Rendering backend

Notable Buildings

Jeddah Tower

1008m

Est. 2028

First building to break 1000m. Foundation work restarted 2021 after a 5-year suspension.

Burj Khalifa

828m

2010

World's tallest completed building for 15+ years. 163 floors, 3 residential, hotel, office & observation.

Merdeka 118

679m

2023

Second tallest completed building, completed 2023. Kuala Lumpur's new skyline anchor.

Shanghai Tower

632m

2015

Twisting glass spiral by Gensler. World's second tallest building at completion.

Burj Azizi

725m

Est. 2028

Under construction in Dubai since 2023. Will become world's second tallest upon completion.

Nakheel Harbour Tower

1000m

Est. 2030

Proposed for Dubai Harbour. Would rival Jeddah Tower if built as planned.

Architecture & Pipeline

🏗
01

Hardcoded Building Dataset

All 60+ buildings are stored as a static TypeScript array — no external API calls, no loading states, instant availability. Each entry carries id, name, city, country, lat/lng, height in metres, floor count, completion year, construction status, primary use type, and lead architect. The data was assembled from the Council on Tall Buildings and Urban Habitat (CTBUH) Skyscraper Center, cross-referenced with Wikipedia and official developer announcements for accuracy. Status values reflect April 2026 information.

Static TypeScript arrayCTBUH Skyscraper Center60+ entries8 fields per building
🌐
02

globe.gl WebGL Globe

The visualisation uses globe.gl — a Three.js-based WebGL globe renderer. It loads satellite night-lights imagery (earth-night.jpg) plus a topology bump map and starfield background, giving a photorealistic appearance with no tile server required. The initial point-of-view centres on the Arabian Peninsula (lat 25°, lng 45°, altitude 2.0) to spotlight the Gulf supertall cluster. Auto-rotation, damping, and a Pause/Spin toggle let users explore at their own pace.

globe.gl + Three.jsearth-night.jpg satellite imageryTopology bump mapAuto-rotate with damping
📐
03

Point Altitude Height Encoding

Buildings are placed as globe.gl points whose altitude is proportional to height. The tallest building in the active filter set is mapped to altitude 0.55 (55% of Earth radius above the surface), and all others scale linearly. At globe.gl's altitude scale this creates dramatic spikes for supertalls like the Jeddah Tower and Burj Khalifa. Point radius is 0.06 — small enough to avoid overlap in dense urban clusters like Dubai Marina or Manhattan, yet large enough to be comfortably clickable.

pointsData() + pointAltitude()altitude = (heightM / max) × 0.55pointRadius: 0.06pointsMerge: false
🎨
04

Status Colour Encoding

Three CSS colours encode construction status at a glance: yellow (#fde725 — Viridis endpoint) for completed buildings, orange (#ff8c00) for those under active construction, and cornflower blue (#6495ed) for proposed towers. Hovering a point reveals a rich tooltip with name, height, floor count, city, country, and year. Clicking flies the camera to the building at altitude 1.4 and opens a detail panel with a height-comparison bar against the Burj Khalifa.

Yellow #fde725 — completeOrange #ff8c00 — under constructionBlue #6495ed — proposedRich HTML tooltips
🏆
05

Top-10 Leaderboard, Country Borders & Click Interaction

A top-10 leaderboard panel (sortable by height or completion year) occupies the top-right corner. Clicking any row or any point animates the camera to that building and opens a detail panel. Country borders are rendered as globe.gl polygons from a 110m-resolution GeoJSON: white at 0.18 opacity by default, brightening to 0.6 on hover and turning yellow on selection. Selecting a country opens a stats panel showing building count, tallest tower, and status breakdown. The status filter chips update the point data in real time via React useMemo.

Country polygons — 110m GeoJSONHover + selection highlightCountry stats panelReal-time status filtering

The Jeddah Tower — First Building to Break 1000m

The Jeddah Tower (formerly Kingdom Tower) in Jeddah, Saudi Arabia, was conceived in 2008 by Prince Al-Waleed bin Talal to be the world's first kilometre-tall building. Designed by Adrian Smith + Gordon Gill Architecture — the same firm responsible for the Burj Khalifa — the 167-floor mixed-use tower will house offices, luxury apartments, a Four Seasons hotel, and the world's highest observatory at approximately 664m.

Construction began in 2013 but was suspended in 2017 due to a combination of contractor disputes and broader Saudi economic pressures tied to the oil price cycle. Work resumed in 2021 under the Vision 2030 programme, with the foundation and lower cores already in place. As of early 2026, the tower is estimated to reach its 1008m pinnacle by approximately 2028, though supertall projects of this scale routinely slip by 1–3 years.

The tower's aerodynamic profile — three tapered wings radiating from a triangular core — was engineered to minimise wind loads. Its structural system combines a reinforced-concrete core with outrigger trusses and a perimeter moment frame, achieving stiffness ratios comparable to the Burj Khalifa despite being 180m taller. Once complete it will hold the record as the world's tallest building, overtaking Burj Khalifa after more than 18 years of uncontested dominance.

Key Insights

The Race to 1000m

The Jeddah Tower (Kingdom Tower) in Saudi Arabia will be the first human structure to exceed 1000m when completed around 2028, reaching 1008m. Designed by Adrian Smith + Gordon Gill Architecture — the same team behind the Burj Khalifa — it eclipses Dubai's current record holder by 180m. The Nakheel Harbour Tower (1000m, proposed for Dubai) and Burj Azizi (725m, under construction) signal that the Gulf's supertall ambitions show no signs of slowing.

China's Supertall Surge

Of the world's 20 tallest completed buildings, 11 are in China. The cluster of Pudong skyscrapers in Shanghai — Burj Khalifa's nearest competitors — represents a 30-year programme of record-setting construction. Four buildings in the 500–635m range (Shanghai Tower, Ping An Finance Centre, Guangzhou CTF, CITIC Tower) were all completed between 2015 and 2018, an unprecedented concentration of supertall completions. Goldin Finance 117 in Tianjin, long stalled, finally topped out at 597m in 2024.

globe.gl Point Altitude Encoding

Rendering height on a WebGL globe requires careful normalisation — real building heights range from 160m to 1008m, negligible at Earth scale. globe.gl's pointAltitude maps these to a 0–0.55 range (fraction of Earth radius), creating dramatic spikes for supertalls while preserving relative ratios. Country polygons from Natural Earth 110m data provide geographic context with minimal geometry overhead. The bounding-box centroid algorithm (walk all coordinate pairs, average min/max lat and lng) correctly centres the camera on countries of any shape, including non-convex territories.

Tech Stack

🌐

Globe renderer

globe.gl — Three.js WebGL sphere, dynamic import

🏗

Building markers

pointsData() — altitude-encoded, colour-coded points

🗺

Country borders

polygonsData() — 110m GeoJSON, hover + select states

🌍

Globe imagery

earth-night.jpg + topology bump + night-sky background

📊

Data

Static TypeScript array, 66 buildings

🎨

Status colours

Yellow / Orange / Blue — complete / building / proposed

⚛️

Framework

Next.js — 'use client', React, useEffect globe init

🔍

Interaction

Click point or leaderboard row → fly to + detail panel