写在前面：从一座漂浮小屋，到六个宇宙 博客的上一个主题叫做 June’s House。
它采用了一套偏动漫风格的设计：一座小房子漂浮在空中，加载页面是一段日夜轮转的动画。点击进入之后，背景还可以在晚霞、夜晚星空等不同场景之间切换。
June`s House加载页面 June`s House晚霞页面 June`s House夜晚星空页面 房屋本身也是整个网站的导航入口。点击小屋上的不同区域，可以进入六个功能各异的房间。每个房间都有独立的布景，也可以切换白天和夜晚。为了完成这个主题，我准备了大量场景图片，希望每个页面都能呈现出不同的氛围。
June`s House文章收藏室页面 这个主题前前后后花费了我很多时间，但最终，我还是决定放弃它。
主要有三个原因。
第一，它实在是太有“AI味”了。加载动画由 Seedance 2.0 生成，小屋图片和房间布局则主要由 GPT 完成。虽然单独看每一张图片都很精致，但当这些内容组合成完整网站以后，人工智能生成的痕迹反而变得非常明显。
第二，交互效果没有达到最初的预期。最开始，我想制作一座可以自由旋转、从不同角度观察的房子。但最终交付出来的版本仍然只是静态场景，用户只能在固定视角下点击导航，距离我最初设想的沉浸式空间还有很大差距。
第三，这套画风看久以后，多少有些幼儿化。刚开始设计时，我很喜欢它温暖、梦幻的感觉。但随着页面越来越多，这种偏动漫、偏童话的视觉风格逐渐显得有些单一，也不太符合我希望博客长期呈现的气质。
因此，我开始尝试把这座房子真正做成一个能够旋转的三维模型。
高斯泼溅模型的尝试 为了实现可以自由旋转的房屋，我尝试使用高斯泼溅技术，根据已有图片生成三维场景。不得不说，高斯泼溅模型的效果确实很惊艳。相比传统的三维建模，它能够很好地保留原始图片中的光影、材质和空间氛围，旋转观看时也有一种介于真实场景和梦境之间的感觉。
这里附上一个可以根据输入图片生成高斯泼溅模型的开源项目，有兴趣的可以自行尝试：
https://huggingface.co/GemosDodo/MLSharp-3D-Maker-by-GemosDodo/blob/main/MLSharp-3D-Maker-by-GemosDodo.zip
不过，在真正把模型接入网站以后，我又遇到了新的问题。
首先是模型体积过大。最终生成的房屋模型约为 61 MB，无法方便地和主题包一起上传到 Halo。即使通过其他方式单独部署，也会增加网站的加载压力。
其次是模型并不完整。由于输入图片主要是房屋正面的视角，最终生成的也只是正面效果较好的模型。一旦旋转到背面，就会发现整个房屋更像是一层空壳，无法真正实现完整的三维浏览。
最后是性能问题。即使在我自己的电脑上，模型加载也需要等待较长时间。如果将它部署到网页端，用户的设备性能和网络环境各不相同，最终的访问体验很可能会受到很大影响。对于手机和平板用户来说，这种问题会更加明显。
房屋场景高斯泼溅模型 经过几轮尝试，我最终决定放弃 June’s House，重新设计一个更加适合网页呈现、也更符合我个人审美的主题。
正文：六个宇宙的诞生 灵感来自一次航班延误 新主题的灵感，来自一次意外的航班延误。当时我正在济南机场等待前往首尔的航班。因为天气原因，航班迟迟无法起飞。在漫长的等待过程中，我突然想到：博客不一定非要是一座房子，也不一定要按照传统网页的形式展开。它可以是一个宇宙。不同的内容不再被放进不同的“房间”，而是分布在彼此独立、又相互连接的子宇宙中。
遗憾的是，当时我的电脑电源线已经被放进托运行李。如果电源线还在身边，我可能会直接在机场打开电脑，开始实现这个想法。回去以后，我首先把自己的构思描述给 GPT，并让它帮助我继续完善整个世界观、交互流程和页面结构。在此基础上，GPT 给出了一套初步的实现方案，并生成了第一张概念图。
最初的设计demo 项目早期主要使用 GPT 完成前端开发，但交付效果一直没有达到预期。在这次项目中，GPT 生成的初始版本三维空间感不足，界面设计也比较普通。页面虽然能够运行，但整体视觉效果、动画过渡和交互反馈都比较生硬，与最初设计图之间存在明显差距。另一个问题是额度。这种包含大量三维动画、粒子效果和交互逻辑的网站，需要不断修改代码、查看效果、发现问题，再继续调整。单次对话很难完成，必须经过很多轮迭代，而当时的 GPT 使用额度不足以支撑长时间开发。
后来，我在网上看到了一些使用 Kimi K2.5 制作网站的视频。它在前端设计和网页审美方面的表现给我留下了很深的印象，于是我花了 50 元购买 API 额度，并通过 Kimi K2.5 配合 Hermes Agent，完成了网站最早期的可运行版本。随后，我又使用课题组的 GPT Pro 账号，对网站进行了持续迭代和优化。
从最初的实验版本开始，整个项目前后经历了 18 次较大调整。目前正式使用的版本为：Version 1.0.18
不得不说，Kimi K2.5 的效果确实不错，但价格也是真的贵。非常贵。非常贵。还是非常贵。
我购买了 50 元额度，官方另外赠送了 15 元。整个建站过程不到一个小时，额度就已经全部用完。虽然最终交付的初始版本还算令人满意，但这个消耗速度依然让我印象深刻。
Kimi 3.0 API消耗 网站中的黑洞效果并不是从零开始编写，而是基于一个开源的黑洞着色器项目进行修改和整合。
项目地址：https://ebruneton.github.io/black_hole_shader/
网页介绍 进入网站以后，用户首先看到的并不是传统意义上的首页，而是一个宇宙解锁页面。页面中漂浮着六个粒子：H、He、Li、C、O、Fe
它们分别代表氢、氦、锂、碳、氧和铁。六个孤独的粒子漂浮在尚未成形的宇宙中。此时，背景中只有零散的星点，没有星系，也没有完整的空间结构。用户需要选择对应的粒子，并按照正确的顺序完成排列，才能解锁这个宇宙。
解锁页面图片 选择正确以后，页面中的粒子和星空会开始发生变化。黑洞逐渐出现，周围的星光被引力拉扯，所有粒子与星点开始向中心聚集。原本分散的物质被不断压缩、重组，最终共同参与宇宙的创建。这一段动画既是网站的加载过程，也是整个博客世界观的开端：从最简单的粒子开始，物质逐渐聚集，元素不断形成，最终演化出完整的世界。
粒子引力吸收
宇宙创建完成以后，页面会进入一个悬浮在太空中的立方体界面。立方体共有六个面，每一个面都对应一个独立的子宇宙：
六宇宙立方体 写在最后 这六个子宇宙并不是六个彼此割裂的普通页面，而是六种不同的内容空间。
“关于我”记录个人经历与自我介绍；“文章”保存日常生活、科研记录、阅读笔记与观影记录；“相册”用于收藏照片与影像；“足迹”记录曾经到访的城市和旅程；“好友册”收录朋友与友情链接；“联系我”则作为这个宇宙与外界交流的入口。
从一座漂浮在空中的小屋，到一个由粒子、黑洞、立方体和六个子宇宙构成的网站，这个博客最终变成了和最初完全不同的样子。
June’s House 被留在了过去。而现在，新的宇宙已经开始运行。
