Back to portfolio

Landmark colorization

End-to-end systems work: PBR landmarks, style-time color parameters, DCC export, and pilots—so 3D buildings could ship in full color without forking materials or breaking Mapbox Standard.

In progress — case study under development

3D buildings on the basemap with colored facades and readable silhouettes — Production-shaped goal: expressive facades and roofs that still read at navigation zoom—same tile budget and lighting story as the rest of Standard.

HSV-style control on logical mesh parts · vertex-friendly encoding · JSON overrides next to style · Blender authoring with validation before export · pilots on real city scope · handoff to ongoing 3D content leadership.

Context

Landmarks shipped with physically based materials and conservative color to keep Mapbox Standard calm and fast. That was the right trade early: one neutral treatment, predictable in tiles and in the renderer. Once vector layers and partner branding demanded richer control, landmarks could not stay the only “frozen” layer—without a real parameter model, every new ask became a mesh fork or a demo hack.

The research ran in parallel with a high-visibility customer map demo: it proved appetite for full-color buildings, and it also exposed how expensive a fully bespoke shader story would be to review, ship, and own. The product bet shifted to a production system: real-world grounded palettes, explicit segmentation, and data that could ride the same style and tooling paths as other basemap layers.

Competitor scan: TomTom, Yandex Maps, and Apple Maps—three shipped baselines for how 3D massing colour reads against roads, labels, and terrain at city scale.

TomTom map: 3D buildings and city context for competitor analysis — TomTomReference frame for massing colour and legibility in dense corridors.

Yandex Maps: 3D landmark colour treatment against the basemap — Yandex MapsAlternate consumer language for facades, glass, and roof reads.

Apple Maps 3D: landmarks with warm facades and cool glass against the basemap — Apple MapsStrong hierarchy and restrained accents on landmark silhouettes.

Comerica Park

Early Standard versus color pass on the same landmark: how contrast behaved when we pushed saturation and hue without breaking navigation hierarchy.

Same geography with colorized landmarks at higher chroma contrast — Colored passTuned hue and contrast—stress-test for “too loud” versus still shippable.

Hard constraints

Renderer · tiles · studio

Anything we designed had to survive mesh budgets, lighting from Standard, and the style spec—not a one-off GL branch. Color could not multiply draw variants per building, and map designers needed levers that felt like the rest of the map: data-driven, diffable, and reviewable in QA—not buried in artist-only Blender settings.

Diagram comparing color pipelines and material complexity — Constraint diagram from research: fewer material explosions, more shared parameters.

Research arc

San Francisco as the first metro exercise—city-scale color, an early palette pass, then a landmark detail (Grace Cathedral) to see stained-glass reads on the map.

San Francisco 3D map view with colored landmark massing — SF · colored cityCorridor-scale pass: how massing colour sits next to water, parks, and grid.

First San Francisco color palette strip for landmark materials — First SF paletteInitial material palette before tightening ranges and segmentation.

Grace Cathedral on the map with colored stained-glass treatment — Grace CathedralLandmark detail: stained-glass colour at zoom without blowing out the frame.

Stages

Exploration prototyped a more open-ended system for flagship demos—enough to test stakeholder reaction and renderer ceilings.

De-scope: the “everything is pluggable” direction failed on engineering surface area and review load; we parked it before it forked the stack.

Production-shaped bet: real-world hue references, logical parts (walls, roofs, glass, accents), and style-time overrides instead of renaming materials per city.

Pipeline fit: align 3D content, map design, and rendering on one vocabulary so work could land in the standing landmark program—not a science project branch.

What broke at scale

Authoring conventions that work for ten models collapse at catalog scale:

Semantic drift: labels like wall_brick_red on non-brick geometry—automation and style logic cannot reason about intent.
PBR roadmap: color locked in material names fights upcoming shading work—parameters need to live in data, not in filenames.
Operational cost: changing a palette forced mesh edits or duplicate assets instead of bounded style updates.
Demo traps: one-off colors for presentations did not generalize—cities diverged visually when teams improvised.

HSV on parts, not names

Slide: same neutral label applied to different real-world materials, showing semantic drift — Before standardizationConflicting reads of “neutral” and accent: one label, many incompatible surfaces.

Diagram: moving from long opaque material ID lists to a small set of logical roles — Roles, not filenamesFrom opaque material IDs to editable logical parts the style can address.

Building model with walls, roof, glass, and trim split into separately addressable logical parts — Segmentation model: each part is addressable for hue, saturation, and brightness without duplicating geometry.

System model

Parameters & caps

The control space is hue bands with optional saturation and brightness ceilings on logical parts. Artists stay inside believable ranges for stone, glass, and painted surfaces; map designers can still steer a city or a partner program without reopening every blend file.

Hue: Target interval in degrees (for example 33° ± 5°) so brick stays brick when zooming across neighborhoods.
Saturation / brightness: Caps keep night modes and print-safe contrast from turning into neon.
Overrides: Serialized next to the style—diffable, reviewable, reversible—instead of embedded-only in mesh names.
Compatibility: Existing assets keep valid topology; color intent upgrades through data where possible.

{
  "landmark_color": {
    "parts": {
      "walls":    { "hue_deg": [28, 40],  "sat_max": 0.42, "val_min": 0.35 },
      "roof":     { "hue_deg": [210, 230], "sat_max": 0.28 },
      "glass":    { "hue_deg": [190, 210], "sat_max": 0.18 },
      "accent":   { "hue_deg": [15, 35],   "sat_max": 0.55 }
    }
  }
}

Illustrative shape—actual keys and ranges ship with map design and rendering contracts.

Technical diagram: HSV cone with acceptable hue wedge highlighted — Hue wedge + saturation caps: expressive but bounded variation across a metro area.

Mesh ↔ style contract

DCC (digital content creation—e.g. Blender, Maya, 3ds Max) assigns stable part IDs; the pipeline bakes color intent into vertex channels the services already consume. Style-time JSON points at those channels—so QA can compare “what art authored” vs “what the map shows” without a parallel preview mesh.

Blender viewport: landmark mesh with part IDs and material slots before export — Blender: parts and slots stay stable across exports—what authoring sees is what the pipeline ingests.

Blender viewport: shaded landmark with Standard-like lighting and readable massing — Blender: same asset family under viewport lighting—previewing how colour reads before it hits the map runtime.

DCC and export

Blender · validation · glTF

Workflow stays in Blender with references from real imagery where it matters. Before geometry hits processing, validation catches missing parts, out-of-range values, and export settings that used to fail late—at the handoff between artists and pipeline engineers.

Pipeline

Logical parts → validated export → glTF with color intent → tile-friendly payloads → style JSON applies global and regional tuning. Failures surface as actionable errors instead of broken previews in the map SDK.

Blender viewport: landmark with material slots mapped to parts — DCC: slots map to pipeline semantics, not one-off shader hacks.

Export checklist and validation summary panel — Pre-flight checks: stop bad assets before they enter the build graph.

Pilots on real geography

We ran focused pilots where road geometry, landmark density, and partner expectations differ—proving the system under different lighting and camera distances. Success required one material definition for Standard and color passes, a shared palette signed off with map design, and a dedicated review style so color QA did not collide with unrelated basemap experiments.

Side by side: Standard basemap and colorized landmark style — A/B under the same geography: Standard versus colorized landmark treatment.

Field views

Pilot city: dense 3D corridor with color landmarks — Corridor-scale readability: colour carries at navigation distance.

Night-mode map view with colored buildings — Night UI: saturation caps keep contrast under control.

Aerial-style view of colorized downtown blocks — Downtown massing: colour supports silhouette, not noise.

Map frame showing landmark icons and building color linkage — Landmark icons and 3D color stay aligned for zoom transitions.

Wide horizontal timeline of pilot milestones — Operational cadence: material unification, export hardening, palette lock, style setup—without publishing internal dates.

Collaboration slide: roles across map design, 3D, rendering — Cross-functional handoffs: who owns palette, who owns shader limits, who owns QA entry criteria.

Internal review surfaces

We stood up map-integrated review so color passes are judged in situ—not only in DCC. That cut disagreement between “looks good in Blender” and “reads wrong beside highways and POIs.”

Internal web tool: 3D building preview with map context — Web review: model + basemap context + parameter toggles.

UI panel for color-mix and intensity review — Style-side intensity: tune without re-exporting every asset.

Evidence grid

Street-level 3D navigation frame with colored facades — Street-scale: materials hold up near the camera.

Vertical screenshot of landmark detail and roof color — Roof and trim separation under oblique view.

Map overview with multiple colored landmarks — Regional consistency: palette keeps cities cohesive.

Full-height UI capture of review queue with map — Queue-based review: move from single-asset heroics to repeatable throughput.

Handoff

After pilots, estimation, staffing, and daily delivery moved to art and team leadership inside the 3D content organization—the system was designed so operations could scale without the research thread becoming a permanent bottleneck. My focus stayed on constraints, contracts, and alignment between map design, rendering, and content tooling.

Outcome

Landmarks joined the rest of the map’s customization story: fewer material forks, clearer content-to-rendering handoff, and a path to richer shading when the product palette evolves—without renaming the catalog on every brand refresh. The work defined what “flexible color” means in a tiled, performance-bound basemap, and gave production teams a shared, reviewable language to operate from.