Nguồn: Palantir Blog
Tóm tắt
Đội kỹ sư frontend của Palantir chia sẻ giải pháp kỹ thuật cho một vấn đề tưởng chừng đơn giản trong Zodiac — thư viện 3D globe tự xây dựng trên Three.js: rendering chính xác ở vùng cực. Hệ thống map tiling truyền thống (Web Mercator) chia thế giới thành các ô vuông đều nhau theo độ kinh/vĩ, nhưng khi render trên hình cầu 3D, các ô này trở thành những tam giác mỏng hội tụ ở cực, tạo ra hàng nghìn geometry không cần thiết và làm frame rate sụp đổ.
Vấn đề cốt lõi là không đồng đều diện tích bề mặt: một tile 5.625° × 5.625° ở xích đạo có diện tích ~394,000 km², trong khi cùng kích thước góc ở vĩ độ 84°N chỉ còn ~24,000 km² — chỉ 6% diện tích. Điều này có nghĩa là đang tạo ra gấp 16× lượng geometry so với cần thiết ở vùng cực.
Giải pháp là “polar scaled tiles” — định dạng tiling nội bộ mới trong Zodiac dựa trên công thức diện tích bề mặt cầu: A = R²(sin φ₁ − sin φ₂)(θ₁ − θ₂). Hàm getSpanForZoomAndY() tính số tile cần merge dựa trên tỉ lệ giữa diện tích tile tại latitude hiện tại và diện tích tile tối đa (tại xích đạo). Span luôn là lũy thừa của 2 (đảm bảo clean math khi apply textures) và ở mọi mức zoom, vùng cực luôn chỉ có đúng 4 tiles.
Đây là ví dụ điển hình về sự giao thoa giữa frontend engineering và spherical geometry trong các ứng dụng bản đồ mission-critical. Bài viết nằm trong series “Frontend Engineering at Palantir” nhằm giới thiệu các bài toán kỹ thuật thực tế mà đội ngũ frontend phải giải quyết, vượt xa scope của web app thông thường.