网站背景那团流动的光，到底是怎么做出来的？——写给非程序员的技术唠嗑

朋友划开我的个人网站，盯着背景里那团缓缓流动的光看了半天，说了句：“有点意思啊，这纯炫技呢。”

我说：“算你说对了一半——是炫技，但炫的是什么技，我得跟你唠唠。“

第一步：背景那团光，不是视频，是”算”出来的水墨

先破个题：那团随鼠标晃动、颜色不断交融的光，既不是一段循环播放的视频，也不是一张 GIF 动图，而是电脑实时演算出来的。

想象你往一盆清水里滴一滴墨——墨汁怎么散开、怎么打旋、怎么和周围的水搅在一起，靠的是流体力学的规律，不是谁提前画好的。我这背景干的就是这件事：网页里内置了一套简化版的流体方程（业内管这叫 Stable Fluids，稳定流体算法），你的鼠标一动、页面一滚动，就相当于往这盆”水”里点了一下，电脑立刻按照物理规律现算这滴”墨”该怎么散开、怎么打旋。

所以严格说，网页上此刻显示的每一帧，全世界都不会有第二份一模一样的——“逝者如斯夫，不舍昼夜”，这团光每一刻都在流走，也每一刻都不重复。

第二步：为什么要藏进一间”看不见的厨房”

这么复杂的计算，如果直接摆在网页最显眼的地方跑，页面很容易卡——就像饭店前厅的服务员一边端盘子一边还得顺手炒菜，手忙脚乱是必然的。

所以这套计算被塞进了一个”看不见的厨房”（技术上叫 Web Worker）：前台（也就是你看到、点击的那部分网页）只管端茶倒水、转达你的鼠标动作，真正”颠勺”算流体的活，全在后厨一个独立的线程里干，互不打扰。厨房和前厅各司其职，“井水不犯河水”，页面才能一直丝滑。

第三步：三道菜的降级方案，保证谁来了都有饭吃

不同电脑、不同浏览器的”火力”天差地别，所以这套系统准备了三道菜，从硬往软退：

头道菜——WebGPU：直接调用显卡的计算能力现场”颠勺”，还顺带撒了几十万粒会随波逐流的发光”芝麻”（粒子），是这套系统里最讲究的做法，像米其林主厨现场炒一道菜。
二道菜——WebGL2：如果电脑或浏览器撑不起头道菜的火力，系统会不动声色地换一套更省力的老办法重炒一遍，配方一样、卖相稍朴素一点，但绝不会让页面卡死。
兜底菜——纯 CSS 渐变：万一前两道都端不上来（比如某些手机浏览器、或者你开了”减少动态效果”），干脆上一份预先”备好菜”的静态渐变背景，色调一致，只是不会流动了。保证的是”宁可食无肉，不可居无竹”反过来的道理——宁可没有动效，也不能让页面打不开。

这三步全是自动判断、自动切换的，你压根感觉不到中间的”退菜、换菜”过程。

第四步：首页那个立体的”J”，没有用任何 3D 模型

再说说首页那个会转、看着像玻璃的立体字母 J。这个更有意思——它不是用建模软件搭出来、再摆到网页上的模型，而是纯用数学公式，每一帧现场”猜”出来的。

具体怎么”猜”：把 J 这个形状写成几条数学公式（专业叫”有向距离场”，说白了就是”给我任意一个点，我能告诉你这个点离 J 的轮廓有多远”），然后让一条条虚拟的光线从屏幕这头出发，一步步试探着往前挪，边走边问”我现在离 J 的表面还有多远”，直到贴到表面为止——这套手法叫光线步进（raymarching）。整个过程里，没有一个提前雕好的模型文件,J 的每一寸曲面都是当场算出来的。

摸到表面之后，还讲究了一手玻璃质感：红绿蓝三种颜色分别按略微不同的折射角度弯一下光路，这就是三棱镜能把白光拆成七彩的那个原理（色散），所以你仔细看字母边缘会有一丝若隐若现的彩虹感；再加上”看得越斜、反光越强”的菲涅尔效应，让它更像一块真玻璃，而不是一块死气的塑料。更巧的是，这块”玻璃”反射、折射出来的环境光颜色，和背景那团流动的光用的是同一套调色板——所以网站换个主题色，J 和背景会一起变调，像活在同一片天光下。

第五步：所以，到底是不是”纯炫技”

回到我朋友那句话。

《庄子·养生主》里有个故事，庖丁给梁惠王杀牛，手起刀落，动作行云流水，比着音乐的节拍。梁惠王看呆了，问他怎么练成这手艺的，庖丁说了句流传千古的话：“臣之所好者道也，进乎技矣。“——我喜欢的其实不是”技术”本身，而是技术练到头之后摸到的那点”道”。

一个人的网站，背景用一张静态图、首页 Logo 用一张切好的 PNG，三分钟能搞定，没人会说什么。我偏绕这么一大圈，让浏览器现场算流体力学、现场算光线追踪，说到底确实没什么”性价比”可言——朋友说得没错，这就是纯炫技。

但庖丁解牛何尝不是”炫技”？杀一头牛，直接下刀也能杀完，他偏要练到”以神遇而不以目视”的地步。技术这东西，练到某个份上，“炫”和”乐在其中”其实是一回事——不是做给别人看的，是做给自己看的。

朋友听完，想了想，说：“行吧，那这炫技，炫得有点讲究。”