日志

做这个站一路踩的坑都记在这里，写的时候尽量保留当时的想法和翻车现场，而不是事后整理过的漂亮话。

• 01
  我用 AI 从零搭了这个站

  2026 · 10 · 23

  从一句「帮我做个个人主页」到能在 1.4Mbps 上三秒打开：怎么分工、哪里翻车、最后留下了什么。

  建站AI 协作

  起点很粗糙：一台 2 核 2G 的 Windows 云服务器、一个没备案的 IP、以及「我想要个能看的小站」。 第一版是深色宇宙风，炫是炫，但首屏要等 8 秒——因为 three.js 从境外 CDN 拉，字体从 Google Fonts 拉。

  真正的转折不是加功能，而是把所有外链搬回自己服务器：首屏从 8 秒掉到 1 秒。

  后来我做了三件事：gzip 预压缩（three.js 669KB → 163KB）、中文字体按站点用字子集化（447KB → 21KB）、 以及给每个资源加内容哈希做长期缓存。这三件事没有任何视觉效果，但它们让「打开」这件事变得理所当然。

  再往后才是分页面：宇宙独立成 /cosmos，首页回到明亮的粉彩；加了日志、作品、标本室、星图。 回头看，最难的不是写代码，是决定「什么不放进首页」。

• 02
  给星系加辉光：90 行手写 bloom

  2026 · 10 · 23

  three r149 没有后处理可以装，只能自己写：亮度提取、两次半分辨率模糊、加法合成，以及为什么手机上要偷偷降参数。

  WebGLShader

  r149 的 EffectComposer 需要额外引入一堆模块，而我只有本地一个 three.min.js。 于是自己写了个最小 bloom：先把亮度超过阈值的像素提取到 1/4 分辨率的缓冲，再横向纵向各高斯模糊一次， 最后用加法混合叠回主画面。

  关键参数是阈值和强度。桌面用 0.72 / 0.6，手机上我偷偷降到 0.85 / 0.35—— 因为手机的屏幕密度高，同样的模糊半径看起来会糊成一团光。

  加了 bloom 之后帧率掉到 40 以下，才有了后来的四级自适应降级。

  顺手加了 ?bloom=0 的开关，排查问题时直接对比有无辉光的画面，比读日志快得多。

• 03
  你的名字值一颗星球

  2026 · 10 · 24

  同一个名字永远长出同一颗星：用 FNV-1a 把名字拆成六个参数，颜色、环、卫星、大气都从哈希里来。

  生成哈希

  核心只有一行：hash = (hash ^ ch) * 16777619，FNV-1a 把任意字符串压成 32 位整数。 然后从这个整数里按位切出六个参数：色相、环带密度、卫星数量、大气厚度、球体大小、纹理种子。

  好处是「同名同星」——你输入自己的名字，永远得到同一颗星球，可以截图发给朋友说「这是我的」。 想换一颗？加个盐值就好。

  它复用了 /cosmos 的程序化纹理工厂，所以「生成的星球」和「星系里的星球」是同一种物质。

  保存图片用的是 canvas.toDataURL，1080×1080，直接右键另存。URL 带参数就能复现同一颗星。