Every Neuron

这是马德里创意技术人 Federico Guardabrazo 的个人项目，讲的是 Google Research 的连接组学团队怎么帮 HHMI Janelia 画出第一张完整的雄性果蝇神经系统接线图。项目页写明它是独立作品，不隶属于 Google 或 Janelia，用的是公开发布的 CC-BY 数据。

科普这类成果的通常做法是请插画师画几张示意图。这个站定了一条相反的规矩，页面上不出现任何一张插图。一条 Python 流水线从公开数据里拉出细胞骨架、网格、突触位置和一片电子显微镜切片，然后由 three.js 在浏览器里渲染。所以你看到的蓝色单细胞 DNa01 是那个细胞真实的形状，275 个紫色的 LC10a 是 275 个真实的细胞，13 个黄色的 DA1 投射神经元上的每一个小点都是一个真实的突触，59,597 个输入，15,129 个输出。

故事分九拍，从整张图开始，到一个细胞，到这个细胞从脑一路伸进腿部回路，到一个类型的 275 份拷贝，到一条信息素回路的接线，再到为什么先画雄性，然后讲它是怎么做出来的，最后是接下来的老鼠大脑。每一拍都是一次相机飞行，文字换一侧，画面里只留下和这一拍有关的细胞，其余的退成半透明的灰色轮廓。

讲到制作方法那一章，画面里出现的是真的显微镜切片，8 纳米一个像素，上面叠着 AI 的分割着色。这一章比别的章都长，滚动的时候切片一层层往下翻，因为原始数据本来就是一叠切片。

故事讲完，页面把整个数据集交给你。Open the explorer 打开一个自由浏览器，12 组细胞可以逐组开关，两种配色方式，五个预设视角，拖动旋转，滚轮缩放，点任何一个细胞都能把它单独拎出来并报出它的类型名。

全站的字只有 Google Sans Flex 这一款，一个可变字体从 300 到 700 字重。主标题 84px，字重 400，字距收到 -2.52px。章节标题 56px，字距 -1.68px。正文 19px，行高 28.5px，颜色是 rgb(95, 99, 104) 的中灰，标题是 rgb(32, 33, 36) 的近黑。每章开头一行全大写的小标签，22px，字重 600，字距拉到 1.76px，ONE CELL、THE WIRING、HOW IT WAS MADE。统计数字用 36px 的 300 字重，比标题细，比正文大，166,000、125 million、275、262、114，每个数字下面一行小字说它是什么。

页面底色是纯白，文字只有两档灰。颜色全部留给了数据。整张图用的是按类型分配的一套粉彩色板，蓝、青、紫、橙、黄挤在一起，远看像一团糖粒。进入单个章节之后，配色收缩成一种饱和色，DNa01 是蓝，LC10a 是紫，DA1 是黄，突触是蓝点和洋红点，其余细胞全部退成半透明的灰色轮廓。到了探索器里，By group 模式换成 12 种按功能分的颜色，中央脑深蓝，神经索绿，下行神经元橙，运动神经元洋红。

版面是一套两栏交替。三维场景钉在整屏画布上，文字卡片 560px 宽，一章靠左贴在 114px 处，下一章靠右贴在 1,231px 处，卡片没有底色，文字直接落在白纸上，三维在后面。九拍里五拍靠左，两拍靠右，首尾两拍居左加宽。这个交替让每次换章都有一次明确的视线转移，相机往哪边飞，文字就让到另一边。

画面里的标注用的是细线引导标签，Brain、Optic lobe、Ventral nerve cord 各自用一根折线指向结构，旁边一根 1 mm 的比例尺。进到腿部回路时标签换成 Front leg circuits、Middle leg circuits、Hind leg circuits，进到嗅觉回路时换成 Antennal lobe、Lateral horn、Mushroom body calyx。这些标签跟着三维结构走，像教科书解剖图上的引线。

细节手艺在光标和进度条上。光标换成一个 14px 的细圈，1px 描边，在白底上几乎看不见，只在需要点击时提醒你。底部九个圆点是章节进度，当前拍的名字浮在圆点上方，到过的拍是实心。

这套形式，钉住的图加交替的文字卡，是新闻可视化里成熟的做法。它不同的地方在于拒绝了插画。同类科普站会把复杂的东西简化成示意图，这个站把 4.4 百万段管状几何原样交给显卡，让真实数据自己去当图。把这条规矩拿掉，剩下的就是一篇排得很好的长文章。

站点没有平滑滚动库，滚动是原生的。故事按拍推进，左右方向键、PageDown、空格都能翻页，每翻一拍相机飞过去，滚动位置在一秒多里从 1,408 缓动到 2,478 像素。用滚轮也行，相机会跟着滚动位置连续走。

每一拍的文字不是整段出现的。全页 722 个单词各自包在一个 span 里，按行淡入，截图里经常能抓到上半段已经清晰、下半段还是浅灰的段落。

加载本身就是第一段动画。页面打开后细胞按区域一批批画出来，左下角的计数器从 578 跳到 7,464 再到 10,526，标签依次写着 MOTOR NEURONS、NERVE CORD、CENTRAL BRAIN，全部画完大约要五到六秒，然后标题才淡入。

换章时不相关的细胞不是消失，而是褪成半透明的灰色壳，相机推进到目标结构，标注引线随之出现。整趟故事九拍，相机飞行期间帧率保持 60，最差的一帧 34 毫秒。

制作方法那一章是一段可以刮的显微镜堆栈。方向键在这一章里要按十七次才走完，每按一次切片平面翻过一层，九张切片图依次替换，黄色的 DA1 神经元始终从平面里穿出来。

探索器里光标变成抓手，拖动旋转，滚轮缩放，OrbitControls 的阻尼系数是 0.05。左侧面板 340px 宽，12 个细胞组是 role 为 switch 的按钮，关掉一组，右侧的计数立刻从 22,691 掉下去，只留中央脑时是 13,027。点击画面里任何一根纤维，那个细胞被单独拎出来，右侧读出 SLP126 Central brain right side 这样的类型名和位置。五个预设视角各是一次相机飞行，整个系统、脑、神经索、颈部通道、感觉器官。旋转和缩放期间帧率都是 60。

站点是 Vite 打出来的静态页，三个脚本，讲故事的 57 KB，探索器 697 KB，three.js r185 打在探索器那个包里，另外一个 Draco 解码器的包装层。内容全部在一个 HTML 里，没有框架。

数据是这个站的主体。打开首页要下载 52.9 MB，全部在页面开始解析后 1.45 秒的同一波请求里发出，之后再也没有新的请求，滚到底也没有。其中 29.5 MB 是 13 个 gzip 压缩的管状几何文件，按细胞类别分，中央脑内在神经元两个文件 7.9 MB 和 7.1 MB，神经索 6.1 MB，下行神经元 2.4 MB，上行 2.1 MB。浏览器端用 DecompressionStream 解 gzip，代码先读文件头两个字节确认是 gzip 再解。细胞体是 11 个 Draco 文件 4.8 MB，9 个脑区外壳也是 Draco，一共 405 KB。三个主角细胞的高精度网格 6.2 MB，DA1 的 74,726 个突触位置 1.1 MB。显微镜部分是一张 2.8 MB 的切片加 9 张堆栈图 5.4 MB。管状几何 4 秒内下完，显微镜图 8.9 秒下完。

这些数据上到显卡是 278.5 MB 的顶点缓冲。首屏那一帧画的是 1,204 万个三角形，只用 29 次绘制调用，22,691 个细胞按类别合并成一批批的几何，每一类一次调用，外壳另算。单细胞章节降到 8 次调用 83 万个三角形，探索器里 32 次调用 1,214 万个三角形，旋转时最多冲到 54 次 2,400 万个。这样的负载下帧率全程 60，p95 帧耗时 17 毫秒。

时序上，首字节 94 到 106 毫秒，首次内容绘制 312 到 324 毫秒，画的是加载计数器。body 从 loading-locked 变成 ready 在 5.2 到 6.0 秒之间，标题在那之后才出现，所以最大内容绘制记在 5.2 到 5.3 秒。加载期间有 10 个长任务，最长的一个 727 到 832 毫秒，是几何解码。布局位移 0.0001。JS 堆稳定在 317 MB。

连续滚动整页平均 58 帧，进入 The map 那一段 53 帧，p95 33 毫秒，显微镜堆栈那一段出过一帧 224 毫秒。点击拎出细胞用的是 GPU 拾取，把画面渲染成 id 再 readPixels 读回来。

可访问性做得完整。页面声明英文，header、nav、main、footer 四个地标齐全，一个 H1 下面八个 H2 再三个 H3，29 个控件全部有名字，探索器的开关是带 aria-checked 的 switch，行和模式按钮都写了 focus-visible 样式。减弱动画的偏好管三处，面板行、加载分组和逐行淡入的文字。唯一的图片有 alt。方向键、PageDown、空格、PageUp 全部映射到翻页。

FWA 只给一个总分，81 分落在获奖站常见的 81 到 84 区间的下沿。团队自述里把赢点放在三件事上，22,691 个真实细胞在浏览器里实时渲染，没有一张插画，以及故事讲完之后交出整张地图的探索器。实测和这三条对得上，浏览器里确实在每一帧画一千二百万个三角形，页面上确实找不到一张示意图。

档案里他写自己的工作是把复杂系统翻译成公共的视觉体验，客户有 Google、DeepMind 和 Meta。这个站讲的正是 Google Research 的成果，但站点的致谢页明确写着它是独立项目，不隶属于 Google、HHMI Janelia 或论文作者。数据来自 MaleCNS v1.0 公开发布，经 neuPrint 和 navis 取出，神经元形状是发布的分割网格降精度后的版本。这是他第一次拿 FWA，站点没有在 Awwwards 获奖。