一个历史问题变成了一个数据项目
有一天我突然意识到：四川菜那么辣，但辣椒在明朝末年才从美洲传入中国。短短几百年，它是怎么彻底改变了整个西南的饮食文化的？
顺着这个问题往下查，我发现番茄、玉米、红薯、花生——餐桌上至少一半的食材都不是「本地的」。它们的迁移史比文字记录更诚实，也更难被删除。
我想把这些「餐桌下的历史」变成可以交互的东西——不是一篇文章，是一个可以转动、搜索、筛选的工具。
食物的传播路径记录着人类的迁移史。如果把这些路径放到一个可以交互的 3D 地球上，历史会变得更直观。
三个核心交互模块
从零搭建全栈可视化项目
没有使用前端框架，所有交互逻辑用 Vanilla JS 实现。地球上的省份标签层是 HTML 覆盖层，叠加在 WebGL canvas 之上，通过坐标转换保持位置同步。
传播路径的可视化用的是 BFS 广度优先搜索算法生成有向无环图（DAG），将 spread_routes 数据渲染为时间轴与地理层级结合的树形结构。
HTML 标签层的性能瓶颈
问题：几百个 HTML 标签拖垮了渲染性能
最初的实现是把每个省份/食材的标签都渲染成 DOM 节点，叠加在 WebGL canvas 上。当地图显示全部数据时，几百个 HTML 元素同时存在，导致滚动和旋转时帧率严重下降。
解法：按视口虚拟化。 只渲染当前视角内可见的标签，旋转到背面的省份标签不创建 DOM 节点。同时将标签更新的频率和 globe 渲染频率解耦，降低 DOM 操作次数。
优化后旋转流畅度从卡顿恢复到正常，在大多数设备上可以流畅运行。
数据整理是最耗时的部分
WebGL 渲染和算法实现花了 3 天，但整理食材数据集（起源地、传播路径、代表菜系、历史故事）花了将近一周。数据质量直接决定这个项目有没有意义，不能靠 AI 生成，需要查文献核实。
一个回答好奇心的工具
这个项目没有「用户需求」，也没有「业务目标」，只有一个想弄清楚的问题——然后用代码来回答它。它是纯粹由好奇心驱动的项目，最终验证了这类数据可以被可视化，并且可以做得比一篇文章更有交互性。