<!-- title: 《WebGL-Fluid-Simulation》一根手指，搅碎一池星云 -->
<!-- domain: games -->
<!-- repo: PavelDoGreat/WebGL-Fluid-Simulation -->

你大概率刷到过这段视频：纯黑屏幕上，一根手指划过去，颜料"啪"地炸开，翻卷、拉伸、晕染，像把整条银河搅碎在果冻里。评论区齐刷刷地问：这是什么App？

答案可能让你意外——它不是App，不是独立游戏，甚至没有名字里的"游戏"两个字。它是一个挂在GitHub上的开源仓库：`PavelDoGreat/WebGL-Fluid-Simulation`。点开网页就能玩，不用下载、不用注册、不用花一分钱。而写下它的，是一个人在业余时间攒出来的副作用：约三千行JavaScript加一堆着色器，一个文件，零依赖。

今天把它当成一个"能玩的点子"来拆：为什么一个没有目标、没有分数、没有存档的东西，能让人一划就是半小时；以及一个普通开发者，能从这池颜料里捞出什么钱。

## 仓库档案

- **仓库**：[PavelDoGreat/WebGL-Fluid-Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation)
- **作者**：Pavel Dobryakov，个人账号，游戏行业程序员，这是他的业余作品
- **Star**：上万量级，物理/视觉类玩具仓库里的常年前排（据仓库页面）
- **语言**：JavaScript + GLSL（WebGL着色器）
- **License**：MIT
- **维护状态**：核心代码多年前就写完了，后续主要是兼容性和细节修补，属于"一次成型的稳定仓库"（据仓库页面）
- **在线Demo**：仓库README里的GitHub Pages地址，手机浏览器直接打开就能玩

## 这游戏是什么

一句话：**你负责搅，物理负责惊艳。**

打开网页，一整屏黑色流体安静地待着。鼠标或手指划过去，一坨彩色颜料顺着你的推力砸进流体，涡流把它撕开、卷起、晕染成烟雾状的纹路。停手，它慢慢扩散、变淡、归于平静。右边面板上十几个滑杆：密度耗散、速度耗散、涡量强度、泼溅半径、颜色更新速度……还有一个"随机泼溅"按钮，专治选择困难。

它没有关卡，没有输赢，没有金币。它的"回合"是这样转的：

```mermaid
flowchart TD
    A[手指划过屏幕] --> B[当帧注入颜料与推力]
    B --> C[GPU解算流体<br>涡流翻卷颜料晕染]
    C --> D[视觉奖励<br>每一笔都和上一笔不一样]
    D --> E[忍不住再画一笔]
    E --> B
    C --> F[效果太好看<br>录屏或截图]
    F --> G[发群发短视频]
    G --> H[有人问这是什么App]
    H --> E
```

注意左边那条主循环：**输入→反馈→更强的输入欲**，一圈不到一秒。右边那条是它的第二引擎：社交分享，把"我划了一笔"变成"我给你看个东西"。大多数游戏要设计半年才能同时踩中这两条循环，这个仓库用一屏黑底全踩中了。

## 为什么上头

拆开看，它把休闲游戏设计里最值钱的几个开关，全按在了最省成本的位置。

**第一，零失败感。** 传统游戏的多巴胺曲线建立在"可能输"上——输了才想要赢回来。流体反向操作：你随便怎么划，结果都好看，不存在玩砸。玩家没有挫败积累，就没有退出理由。这类设计有个名字叫"无压力玩具"（toy），《Sandspiel》《Line Rider》都是同门——但流体的反馈密度比它们更高，因为你的输入是连续的，每一帧都在出画面。

**第二，延迟为零。** 鼠标动，颜料当帧就跟上，因果链完全无缝。心理学上，反馈延迟超过0.1秒，"掌控感"就开始流失；这个仓库把延迟压在60分之一秒级别，你的手会觉得"这滩东西是我身体的一部分"。上头感里最底层的就是这种掌控感。

**第三，永远不可预测。** 流体由Navier-Stokes方程驱动，本质是非线性的——同一笔从屏幕左上角划和从正中间划，纹理完全不同。可预测性是无聊之母，它保证"下一笔永远有惊喜"。你以为没有随机奖励的玩具留不住人，其实"混沌本身就是老虎机"。

**第四，参数面板即二周目。** 把"涡量"拉满，颜料变成一团团打转的小龙卷；把"密度耗散"调到最小，整屏变成洗不掉的油画。普通玩家搅十分钟，硬核玩家能调参调一小时——十几个滑杆，就是一个隐藏的进阶玩法层，而且开发成本几乎为零：这些本来就是引擎内部的uniform变量，作者只是把它们摆到了台面上。**"把调试面板做成玩法"，这一招所有游戏都能抄。**

**第五，成果天然可分享。** 每一次搅动都是一段可录屏的高光时刻，视觉冲击不需要任何解释成本。解压类内容是短视频平台的常青标签，这个仓库等于自带发行渠道。

## 技术拆解

对开发者来说，这个仓库比它作为玩具更值钱——它可能是网上被抄得最多的流体实现，而它就那么大大方方地躺在MIT协议下。

**学术根基一步到位。** 它的骨架是Jos Stam在SIGGRAPH 1999年提出的"Stable Fluids"方法——用半拉格朗日回溯把Navier-Stokes方程改造成游戏机都跑得动的实时算法。二十多年过去，这仍是实时流体的标准起点，仓库等于替你把论文消化完了。

**计算全部扔给GPU。** 密度场、速度场、压力场全是纹理，解算全在fragment shader里跑，CPU侧的JavaScript只负责发指令。关键的工程技巧是**ping-pong双缓冲**：两块framebuffer轮流当"上一帧"和"这一帧"，读写不冲突。这套模式是所有GPU模拟的通用底座——粒子、波浪、烟雾、布料，学会一次到处能用。

**单文件、零依赖、无构建。** 核心逻辑集中在一个约三千行的`main.js`里（据仓库页面），没有npm、没有打包器、没有框架。clone下来双击index.html就跑。对一个想学WebGL的人来说，这是最友好的阅读路径：所有魔法都在一个文件里，从头读到尾就是一门完整的GPU流体课。

**工程细节全是可直接搬走的零件**：自动探测WebGL1/WebGL2并降级；移动端touch事件完整支持；**透明背景模式**——让它可以嵌进任何网页当"活背景"；截图导出；bloom辉光等后处理开关；配置项支持导入导出。想做"网页流体背景"或"小程序解压页"，这些现成的开关能省掉你至少一半工作量。

顺带说一句它的分发史：这个项目当年在Hacker News上被顶到过很显眼的位置，随后被无数教程、CodePen、毕设和商业项目引用——一个零推广的个人仓库，靠"打开就能玩"这一条，完成了大多数产品烧钱都买不到的传播。

## 变现观察

先说实话：**这个仓库本身几乎不产生直接收入。** MIT协议，代码白送，README里最多挂着个打赏链接（据仓库页面）。它是"开源礼物"路线的典型——赚声誉、赚机会、不赚账面。

但围绕它，钱是真实存在的，而且分三层：

**第一层：它早已被商用，只是没给作者分钱。** 广告背景、发布会大屏、音乐视频、博物馆互动装置、直播间虚拟背景……按MIT协议这些用途全部合法且无需付费。这是给开发者的第一课：MIT玩具的价值会被市场吃干抹净，**你想分钱，就得在协议之外加一层"服务"**——主题、托管、定制，这些不在协议覆盖范围里。

**第二层：解压是已被验证的休闲品类。** 捏泡泡、切肥皂、史莱姆、挤痘痘……"解压神器"类App和小游戏多年来一直是插屏广告+激励视频的稳定产粮区，国内微信小游戏里同类玩法跑通的不在少数。流体解压是同一品类里视觉上限最高的形态之一，却少见认真做的中文版本——这是个空档。

**第三层：无目标玩具的变现天花板在"皮肤"，不在"内购"。** 这类产品没有数值养成，用户不会为进度付费，但会为好看付费：颜料配色包、背景主题（星云/水墨/岩浆/极光）、粒子样式、录制带水印的分享视频。参照同类：壁纸类、白噪音类App靠主题订阅活得很好，流体是同一批付费动机。

## 给我的灵感

**点子一：给颜料池装上胜负——双人抢地盘（1周MVP）。** Fork仓库，加一层覆盖率统计：同屏两名玩家（同设备对碰或简单房间制）轮流泼颜料，30秒后按染色面积判胜。物理引擎一行不用改，只加一个像素采样的面积统计和一局结束的结算页。适合挂微信小游戏，插屏+激励视频（看广告解锁新配色），这是双人休闲小游戏最成熟的变现组合。

**点子二：助眠专注场景——"活的"流体屏保（2周）。** 把参数预设成低速度、低耗散、暗色调，流体像深海烟囱一样缓慢呼吸，配上白噪音。做一个"专注/助眠"定位的App或小程序，主题包（水墨、星云、篝火）走订阅或单卖。白噪音App已证明用户愿意为"背景氛围"付订阅费，流体比静态壁纸多一层"活着"的感觉，恰好卡进这个付费动机。

**点子三：卖给开发者——流体背景模板（周末级）。** 仓库原生支持透明背景和嵌入，包装成"三行代码给网站加流体背景"的模板，上架CodeCanyon、Gumroad这类市场，单价10-20美元卖断。Web开发者愿意为酷背景付费有长期先例，这条路一个人一个周末就能试错。

三个点子共用同一个判断：**这个仓库把最难的物理和最贵的打磨都做完了，剩下的全是"加一层钩子"的轻活**——而钩子，恰恰是决定这类产品能不能收到钱的那一层。

## 上手

- 仓库：https://github.com/PavelDoGreat/WebGL-Fluid-Simulation
- 在线Demo：README给出的GitHub Pages地址，手机浏览器可直接体验
- 建议动作：先玩五分钟，再把`main.js`的配置对象通读一遍——十几个参数名，就是这个玩具的全部说明书，也是你下一个解压产品的需求清单

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)
