arsentsn/brc-background

# marble 单文件 WebGL 背景：通过迭代正弦/余弦 domain warp 并在 128 节点色阶上采样实现。无依赖，无构建步骤，约 270 行代码。 **[在线演示 →](https://arsentsn.github.io/brc-background/)** 或者克隆仓库并直接打开 `index.html` —— 无需构建步骤，也不需要服务器。  ## 控件 | | | |---|---| | **scale** | 缩放 —— 值越大，区域越宽广、越平静 | | **warp speed** | 每秒变形周期数（`0.010` ≈ 100 秒循环） | | **palette offset** | 色阶的固定偏移量；它*不会*滚动 | | **iterations** | warp 迭代次数（18 为调优后的默认值） | | **colors** | 五段色带；它们之间的过渡是在线性空间下通过插值完成的 | | **presets** | `menu` 和 `splash` 还原了两种原始配色方案；`ember`、`indigo`、`slate` 则是本项目自带的 | | **panel mask** | 将场裁剪为矩形，而不是填满整个 viewport | URL 参数（用于可复现的截图和 headless 渲染）： ``` index.html?preset=indigo&t=0.744&scale=1&iter=18&speed=0.010&panel=1&ui=0 ``` `t` 会将动画定格在固定的时钟值，因此相同的 URL 总是会渲染出相同的帧。`ui=0` 会隐藏控制面板 —— 可用于壁纸、嵌入内容和 headless 截图： ``` chrome --headless=new --window-size=1600,900 --virtual-time-budget=3000 \ --screenshot=out.png "file://$PWD/index.html?ui=0&t=0.744&preset=ember" ``` ## 工作原理 针对每个 fragment，在以屏幕像素除以基于宽度计算的除数后的坐标系中进行操作（两个轴使用同一个除数，因此在任何长宽比下 warp 都能保持正方形）： ``` acc = uv; for (i = 1; i <= 18; i++) { acc.x = i*4.0 + amp.x*sin((i*3.0)*acc.y + phase) + acc.x; acc.y = i*4.0 + amp.y*cos((i*3.0)*acc.x + phase) + acc.y; } m = cos(0.358*acc.x + 0.642*acc.y) * 10.97 + offset; col = ramp[fract(m)]; ``` 有两个细节比表面看起来更重要。累加计算使用的是**余弦**而不是正弦 —— 如果用正弦，会产生嘈杂的高频混乱，而不是宽广平静的区域。此外，`0.358/0.642` 的权重使结果落在余弦极值附近，这正是使色带保持宽广的原因；如果仅向 `acc.x` 倾斜权重，结果会落在斜坡中点，并产生大约密集五倍的色带。 色阶是点采样且被截断的：它是一个查找表，而不是一张图像。 ## React React 移植版位于 [`react/`](react/README.md) —— 包含四个变体（JS/TS × CSS/Tailwind）、shadcn registry items 以及一个 demo。`ogl` 是其唯一的依赖项。 ``` ``` ## 出处 该算法是通过研究某款商业游戏的主菜单 shader 推导出来的。 **请阅读 [PROVENANCE.md](PROVENANCE.md)** —— 其中说明了本项目哪些内容是原创的，哪些不是，以及刻意省略了哪些内容。本仓库不包含任何游戏资产、捕获画面或 shader 转储。本项目与 Team Reptile 无关联，也未获得其认可。 研究笔记：[FINDINGS.md](FINDINGS.md)。 ## 许可证 本项目的原创代码采用 MIT 许可证 —— 请参阅 [LICENSE](LICENSE) 及其末尾的范围说明。

标签：WebGL, 前端组件, 数据可视化, 游戏UI, 着色器, 自定义脚本, 视觉特效