OBSIDIAN 社区插件 · 已上架 · 开源 MIT

把笔记库,
变成一座能飞进去的星系。

Obsidian 把几千篇笔记用双链织成一张网,但自带的 2D 图谱到这个规模就糊成一团。Galaxy View 把它变成一座能飞进去的 3D 星系——几万条边照样跑满 60 帧。

看看怎么做的 ↓
  • 已上架 Obsidian 社区插件
  • 4 天 · 14 commit
  • 16 → 60 fps
  • 22,000 → 19 draw calls
  • 性能超越全部 4 个前辈
拖拽背景旋转 · 切换配色 · 这是程序化星云;点「飞进我的知识库」进真实笔记库的实时 3D
为什么做

颜值即生产力——但惊艳来自克制

我赌一件事:对个人知识库来说,颜值和可玩性本身就是生产力。一个让你愿意一头扎进去的图谱,比任何整理方法论都管用。 但「惊艳」不靠特效堆砌。NASA 的 Eyes on Asteroids 给了答案:纯黑底、选择性辉光、慢镜头。高级感来自克制——这成了整个视觉系统的纲领。

01

一团糊,和四座墓碑

THE WALL
问题与前人死因

我的库有 3,225 篇笔记、近 2 万条双链。Obsidian 自带的 2D Graph 在这个规模下只剩一团糊——想看「哪些笔记其实连在一起」,根本看不出来。

市面上有 4 个 3D 图谱插件。我一个个翻过去:全停更了 10 个月以上,全是同一个库的薄封装,全死在同一堵墙——逐对象渲染。一个节点一个 Mesh、一条边一个 Line,真实库规模下一帧约 2.2 万次 draw call,GPU 扛不住。其中一个作者在 README 里直接写:"performance issue that I don't know how to fix"

obsidian-3d-graph
AlexW00
374 ★ · 2023-10 起停更
3D Graph New
HananoshikaYomaru
作者自述:不知道怎么修
New 3D Graph
Apoo711
停更 10+ 个月
Tags Routes
kctekn
停更 10+ 个月
决策

不 fork,全新构建。

它们都是 MIT、都停更、都死于同一堵墙。fork = 继承那块天花板。被否决:fork 最活跃的 Apoo711 版本。参考可以,继承不行。

02

性能与美学,在同一个方案里汇合

AGGREGATE RENDER
核心突破

我押的方案是聚合渲染。不再一个节点一个对象——全部节点压成一次 THREE.Points,配一个径向衰减的发光球 shader;全部链接压成一次 LineSegments。整帧含辉光不到 20 次 draw call。

0 0
每帧 draw calls · 同机同库实测

关键在于:这个点精灵发光 shader,本身就是 NASA 那种「发光球」的观感来源。同一个方案,一边把前辈撞死的那堵墙拆了,一边给了我要的颜值——它俩在这儿汇合。点开「飞进我的知识库」,跑的就是这套渲染器,喂的是我自己 3,225 篇笔记的真实双链。

03

数字

BENCHMARKS
同一台 Mac、同一个库,三代留痕
16.2 0
环绕帧率 fps
22,000 0
draw calls / 帧
61s 0 ms
冷布局主线程阻塞
1.3MB 0 KB
包体
场景M0 stockM1 聚合M3 +Worker
S1 沉降后环绕(含 bloom)16.2 fps60.0 fps60.0 fps
S2 冷布局主线程阻塞61s(最长 860ms)5.2s5.8s · 0 阻塞
S3 含未解析 9,437 节点13.8 fps60.0 fps60.0 fps
每帧 draw calls约 22,0001919
S4 开关 ×10 堆增量+13.7 MB−1.0 MB−3.7 MB
包体1.3 MB606 KB665 KB
04

不是模仿,是逆向

NASA EYES, REVERSED
观感从何而来

我没靠感觉去模仿那种观感。直接把 NASA「Eyes on Asteroids」的生产 JS 抓下来 grep 了一遍,确认它到底用了什么配方——然后照着复刻:

  • three.js r167 + WebGLRenderer
  • UnrealBloomPass,且 bloom 强度运行时可调
  • DOM 浮层标签,不是画布内文字(CJK 清晰、可换肤)
  • 细的、低饱和的轨道线,辉光交给 bloom 给
  • 远处精灵、近处网格的 LOD
  • 无雾、无暗角、无颗粒

结论就一句:高级感来自克制(premium feel = restraint)。

05

4 天,每一步先定数字再开工

MILESTONES
14 次 commit · M0 → M5
决策

每个里程碑先定 pass/fail 数字,再开工。

M0 判红(16.2 fps)触发的是预设的「聚合渲染提前」分支——把风险前置成可量化的 go/no-go,坏结果是计划内转向,不是临场救火。

  1. M0 06-12

    真实数据性能尖刺

    先用真实 vault 跑 stock 方案,预先定好 45/30 fps 红黄绿门槛。结果 S1 = 16.2 fps,判红。按预案:把「聚合渲染」从 M3 提前到 M1。坏结果是计划内的分支,不是临场救火。

  2. M1 06-12

    聚合渲染器

    全部节点 1 次 draw call、全部链接 1 次 draw call,弃用 3d-force-graph 运行时。16 → 60 fps,22,000 → 19 draw calls,冷布局 61 秒卡死变成 5 秒星系成形动画。

    战争故事 ↘

    泄漏金丝雀首读 +181MB 触发红灯。连续两轮对照发现第二轮起始堆比第一轮还低——根源是 d3 每 tick 重建八叉树产生海量短命垃圾,忙循环里 GC 不跑。修正测量方法后终判 −1MB。教训:真泄漏判据是多轮起始堆持续抬升,单轮 delta 不可信。

  3. M1.5–M2.6 06-12 ~ 13

    反馈驱动的几轮打磨

    辉光/力学/外观控制面板、Lightroom 式滑杆、FPS 飞行与平移、聚焦模式、双视觉方向、4 种风格预设、6 组配色主题、亮星眨眼、创世动画。每一轮都是我看着跑起来的版本提反馈、再翻译成实现。

    战争故事 ↘

    「⌘/Ctrl 拖平移没反应」排查到最后,根因不是触控板——macOS 把 Ctrl+点击征用为系统右键模拟,事件根本到不了插件。改成 ⌘ / Shift / 右键三通道平移。

  4. M3 06-13

    性能硬化:Worker 布局

    d3-force-3d 完全搬到 Web Worker,坐标用 transferable 双缓冲零拷贝回传。冷布局主线程阻塞 61s → 0ms。「布局期间编辑笔记零卡顿」从此是架构保证。

    战争故事 ↘

    真机实测抓到镜头穿进星团内部掉到 8fps——满屏大发光精灵打爆 GPU 填充率。用 shader 里 uMaxPoint = 110dp 钳制点尺寸修复(背景这座星云也用了同一招)。

  5. M4–M4.1 06-13

    移动端三档质量

    high / low / mobile 三档:mobile 关 bloom(热核保住约 80% 观感)、节点帽 1500(保 94% 链接质量)、卡片改底部抽屉。FPS 看门狗连续 <30fps 单向降档。iPhone 实测 61fps、6 draw calls。

    战争故事 ↘

    底部卡片与系统操作栏重叠。Obsidian 没暴露 .mobile-navbar 高度、且该栏在某些形态下根本不存在——改用运行时实测重叠像素写入 CSS 变量,无栏时为 0,零空白。

  6. M5 06-13 ~ 15

    发布 · 上架社区插件

    esbuild define 门控剔除开发期命令、MIT LICENSE、中英 README、GitHub Actions 打 tag 自动发版;官方审核通过,正式上架 Obsidian 社区插件市场——现在任何人搜「Galaxy View」就能装。

06

品味落到细节

THE CRAFT
颜值即生产力的具体兑现

星星只挑最亮的 3% 眨眼

同一时刻最多一颗、泊松随机间隔——做成偶发的大气闪烁,不是圣诞彩灯。

扁平星系要一股额外的力

自然引斥力只会形成球。加一个只作用于 Y 轴的向心力,才把球压成旋转盘——还做成可连续调的滑杆。

浅色不是把深色调亮

另设计了一套「晨昼制图室」:暖纸底、关辉光、墨水圆盘节点、铅笔线链接。是两套设计,不是一套的明暗。

飞向节点时不正对它

落点偏 15°、优先扫过邻居密集的那一侧——像飞船靠近,而不是被瞬移正对。

怎么做出来的

写第一行代码前,我先并行做了技术调研和多视角设计(架构 / 视觉 / 风险),产出一份带数字门控的实施计划,而不是边写边想。整个研发我和一个 AI 编码 agent 协作完成——方向、取舍和审美判断我来定,靠对每一版运行结果的反馈一轮轮收敛。上面那些「反馈驱动的打磨」,就是这套节奏。

07

现在就能装

GET IT
已上架,搜名字就行
✅ 已上架 Obsidian 社区插件 MIT 移动端随首发 · iPhone 61fps 4 天 · 14 commit

在 Obsidian 里:设置 → 社区插件 → 浏览 → 搜「Galaxy View」→ 安装。运行时 three.js 0.184 + d3-force-3d(Web Worker)+ TypeScript,esbuild 打成单个 665KB main.js;31 个 TS 文件、约 4,040 行、8 个单测。

想跟 beta 通道:用 BRAT 装 Longwind1984/galaxy-view