首屏 WebGL 流体背景

  • WebGL
  • 视觉

首屏 intro 可选接入 Pavel Dobryakov 的 WebGL 流体模拟（WebGL-Fluid-Simulation）。鼠标划过或手指拖动时，画面会泛起带 bloom 和 sunrays 的色块涟漪——和标题文字的呼吸光晕、底部的 enter 入口放在一起，整体氛围偏暗、偏静，但不算沉闷。

这是整个站点里最「重」的视觉组件，也是最需要谨慎对待性能预算的部分。

为什么选流体模拟

首屏是访客第一眼看到的东西。静态纯色背景能用，但很难传递「这个人在意细节」的信号。流体模拟的好处是：

  • 响应式： 用户一动鼠标就有反馈，不需要额外教程
  • 氛围感强： 暗色流体 + 高光涟漪，和站点的深色主题天然契合
  • 可配置： 分辨率、bloom、色散等参数可以按设备能力调节

代价也明确：WebGL 上下文、帧循环、移动端发热。所以它从第一天就被设计成可开关，而不是硬依赖。

开关与注入方式

是否加载流体背景由 config.json 里的 intro.background 控制。值为 true 时，scripts.pug 在编译阶段注入：

  • <canvas id="background">
  • 全局 window.config 对象（分辨率、bloom 等参数）
  • background.js 脚本标签

值为 false 时，这些标签根本不会出现在 HTML 里——不是运行时隐藏，而是编译期裁剪。首屏少加载一个大 JS 文件，对弱网环境友好。

注意：config.json 变更不会被 Gulp watch 自动捕获，改完开关需要重启 npm run dev 才能看到效果。这是开发流程里容易踩的坑。

运行时配置

scripts.pug 里定义的 config 对象会被 background.js 读取和修改。几个关键字段：

  • SIM_RESOLUTION / DYE_RESOLUTION： 模拟精度和染料分辨率，越高越细腻，GPU 压力越大
  • BLOOM： 高光溢出强度，决定涟漪边缘的「发光感」
  • SUNRAYS： 光束效果权重，开太高容易显「糊」
  • COLORFUL / PAUSED： 色彩模式和是否默认暂停

桌面端可以用相对高的分辨率；移动端 background.js 会根据 UA 自动下调 DYE_RESOLUTION 等参数，避免帧率崩盘。这套降级是上游脚本自带的，接入时只需要知道它存在。

和首屏其他元素的层叠

流体 Canvas 绑定在 #background 上，z-index 为负，铺在 intro 内容最底层。标题、副标题、enter 按钮、GitHub corner 都在上层，且 intro 区域 z-index: 100，确保文字和交互不被遮挡。

标题的呼吸光晕（whiteShadow 动画）和流体的光影是两套独立的视觉系统，但色调统一在暗色 + 白色高光上，放在一起不冲突。

页面切换时的销毁

用户通过以下方式触发 switchPage：

  • 点击 enter 按钮
  • 桌面端向下滚动滚轮
  • 移动端向上滑动
  • 鼠标悬停在底部箭头上

过渡动画由 anime.js 驱动：首屏向上推出 -200vh，SVG 波形形变，然后销毁流体画布，再进入 loadMain 初始化副屏网格。

销毁是必须的。如果 WebGL 上下文和副屏 Canvas 动画同时跑，低端设备很容易出现掉帧甚至闪烁。原则是：一次只保留一个重型背景。

WebGL 不可用时的表现

如果浏览器不支持 WebGL，或者 GPU 被禁用，background.js 初始化会失败。此时首屏仍然能正常显示标题、副标题和 enter 按钮——流体只是锦上添花，不是硬依赖。

这是接入第三方视觉特效时的基本素养：永远假设「特效可能起不来」，核心内容和交互路径不能绑死在 WebGL 上。

性能与体验取舍

实际使用中我会关注这些信号：

  • 笔记本不插电时风扇是否明显转动
  • 移动端 5 秒后页面是否发热
  • 切页后 GPU 占用是否回落（验证销毁是否彻底）
  • 弱网环境下首屏加载时间是否可接受（background.js 体积不小）

如果目标是「极致轻量」，关掉 intro.background 是最干脆的方案。站点气质会从「沉浸」转向「极简」，但没有对错——取决于你想传递什么。

和子页面背景的关系

子页面（Blog / About / Contact）没有用 WebGL，而是换了一套纯 CSS 的星球背景 + 鼠标视差联动。原因同样是性能分层：阅读场景不需要流体那么强的实时渲染，但需要保持一定的视觉延续性。

首页负责「惊艳第一下」，子页面负责「舒服地读」——同一套暗色主题，不同的动效强度，算是这个站点在视觉上的分工。

视觉效果要服务于体验，而不是反过来绑架性能预算。

流体背景是这个个人主页里最「炫」的组件，也是最容易翻车的组件。开关可控、移动端降级、切页销毁——这三件事做好，它才是加分项；做不好，它就是访客关掉标签页的理由。