工具定位 / Positioning
WebGL Fluid Simulation 是一款运行在浏览器中的开源实时流体模拟工具，由开发者 Pavel Dobryakov（PavelDoGreat）基于 WebGL 技术打造，并以 MIT 协议在 GitHub 上开源。
它的本质是一个把流体力学 Navier-Stokes 方程转化为实时图形渲染的交互式 Demo。你不需要任何专业知识，只需移动鼠标或手指，就能在黑色画布上「搅动」出如同彩色油墨溶于水般的流体漩涡。它既不是传统意义上的「修图软件」，也不是「排版工具」，而是一件可交互的生成艺术作品——每一次拖动都会产生独一无二的图案。
对于设计师而言，它是一个取之不尽的科技感背景素材库；对于普通用户，它是一个随手减压、随手出图的创意玩具；对于教育者，它则是直观演示流体运动与计算机图形学的绝佳教具。
核心功能与主要特性 / Features
工具以「零门槛交互 + 专业级可调参数」为核心，既可以让新手随便玩，也能让进阶用户精细雕琢。
实时流体交互
- 拖拽生成：按住鼠标左键（或触摸屏滑动）即可在画布上「泼洒」彩色流体，松手后流体继续自然扩散、旋转、消散。
- 点击换色：每次点击会切换流体色相，连续点击可形成丰富的色彩层次。
- 60fps 流畅渲染：基于 GPU 着色器（Shader）运算，在支持 WebGL 2.0 的设备上能保持极高的帧率与顺滑手感。
丰富的可调参数
点击画面右上角的 设置面板，可对流体行为做精细控制：
| 参数 | 说明 |
|---|---|
| Quality（质量） | 渲染质量档位，高/中/低/极低，影响整体清晰度与性能消耗。 |
| Sim Resolution（模拟分辨率） | 流体运算网格密度（32–256），越高漩涡越细腻但越吃 GPU。 |
| Dye Resolution（颜色分辨率） | 色彩细节精度，决定喷溅边缘的清晰程度。 |
| Density Diffusion（密度扩散） | 色彩浓度的消散速度，数值越大颜料越「稀」。 |
| Velocity Diffusion（速度扩散） | 流体动量衰减，影响漩涡持续旋转的时间。 |
| Pressure（压力） | 流体压力的迭代强度，关系到流动的「蓬松感」。 |
| Vorticity（涡度） | 漩涡强度，调高后会出现更多细小卷曲的湍流纹理。 |
| Splat Radius（喷溅半径） | 每次拖拽产生的流体团大小。 |
| Shading（着色） | 为流体添加立体明暗，增强体积感。 |
| Colorful（多彩） | 开启后自动循环彩色；关闭则变为单色流体。 |
| Paused（暂停） | 冻结当前画面，便于精准构图后再截图。 |
| Random Splats（随机喷溅） | 一键在画面各处随机生成彩色流体爆发。 |
| Bloom（辉光） | 为亮部增加光晕，让画面更具「发光」质感。 |
| Sunrays（阳光射线） | 模拟光线穿过流体形成的光束效果。 |
| Capture（捕获） | 设置背景色、透明背景，并一键 Take Screenshot 导出 PNG。 |
跨平台与导出
- 全平台可用：桌面浏览器（Chrome / Edge / Safari / Firefox）与手机浏览器均可流畅运行。
- 透明背景导出：在 Capture 中开启 Transparent，可导出带 Alpha 通道的素材，方便在 Photoshop 等软件中叠加使用。
- 截图即素材：Take Screenshot 直接保存当前帧为 PNG，无需第三方录屏。
- 移动端 App：官方还推出了 iOS / Android 应用，可随时随地创作。
适用场景 / Use Cases
- 演示与 PPT 背景：截取一帧作为幻灯片背景，让汇报瞬间拥有高级科技氛围。
- 网页 / App 视觉：作为 Landing Page 的 Hero 背景或加载动画，提升页面质感。
- 海报与封面：音乐节、科技发布会、产品宣传海报的抽象主视觉素材。
- 桌面 / 手机壁纸：随手生成一张专属动态感壁纸，永不撞图。>
- 数字艺术创作：作为生成艺术素材，进一步在后期软件中二次创作。
- 教学演示：直观展示流体力学、压力、速度与计算机图形学原理。
亮点与价值 / Highlights
- 完全免费且开源：MIT 协议开源，无任何付费墙、广告或注册要求，代码可直接二次开发。
- 无需安装：纯浏览器运行，打开网页即可创作，不占用本地存储，跨设备即用。
- 所见即所得：实时交互渲染，每一次操作立刻看到结果，创作门槛极低。
- 素材永不重复：基于物理模拟与随机性，每次生成的图案都截然不同，彻底告别「素材撞车」。
- 专业级可控：从分辨率到涡度的十余项参数，兼顾「随手玩」与「精细雕琢」两种需求。
- 教育价值：将抽象的数学方程转化为可触摸的视觉艺术，是科普与教学的优质载体。
使用贴士 / Tips
性能与画质平衡
在配置一般的设备上，建议将 Sim Resolution 控制在 128 左右，并选择「Medium」质量，可在流畅度与清晰度间取得平衡。
若希望导出高清大图，可临时把质量拉到 High 再截图，截完再调回以节省日常使用时的性能。
配色小技巧
想要冷静科技风，可关闭 Colorful 并手动设定单一冷色调；想要活泼节日感，则保留多彩并配合高 Bloom。
截图前可先 Paused 冻结，留出时间欣赏并确认构图，避免手快错过最佳瞬间。