图形学物理引擎【免费下载链接】WebGL-Fluid-SimulationPlay with fluids in your browser (works even on mobile)项目地址https://gitcode.com/gh_mirrors/web/WebGL-Fluid-Simulation点击查看免费下载本指南围绕开源项目 WebGL-Fluid-Simulation 展开它是一个纯浏览器端、基于 WebGL 的二维流体仿真引擎项目定位是在浏览器里玩流体在手机上也能流畅运行。读完本文你将掌握该项目的运行方式、Stable Fluids 类 GPU 求解管线涡量、散度、压力 Jacobi 迭代、平流、全部可调参数的含义与默认值、dat.GUI 交互面板的使用以及移动端降级与截图导出等实战能力。一、项目概览与快速上手仓库根目录的 README.md 对该项目的定位非常简洁Play with fluids in your browser (works even on mobile)并给出了在线体验入口、三份参考文献以及 MIT 许可证声明。整个项目是零依赖构建的静态网页应用核心文件只有三个index.html页面骨架包含canvas、样式、移动端 App 推广弹层并通过script src./script.js引入主逻辑script.js全部仿真代码约 1600 行包括 WebGL 上下文初始化、全部着色器、求解管线、输入交互与 GUIdat.gui.min.jsdat.GUI 控件库用于生成右侧的参数调节面板。由于项目没有任何打包步骤运行方式非常简单直接用浏览器打开 index.html 即可需要支持 WebGL1/WebGL2 的现代浏览器若要部署到服务器将仓库内所有文件作为静态资源原样托管即可。页面加载后会立即在 canvas 上注入若干随机 splat色块随后用户用鼠标拖拽或手指滑动即可向流体注入扰动。从源码结构看index.html 中的canvas/canvas是唯一渲染目标script.js启动时的调用链为getWebGLContext→startGUI→updateKeywords→initFramebuffers→ 若干随机multipleSplats→update()主循环script.js。二、核心实现原理基于 GPU Gems 第 38 章的 Stable Fluids 求解README 的 References 部分列出了本项目的三条算法脉络GPU Gems 第 38 章Fast Fluid Dynamics Simulation on the GPU——这是本项目求解器的主干即 Jos Stam 的Stable Fluids稳定流体方法在 GPU 上的实现mharrys/fluids-2d与haxiomic/GPU-Fluid-Experiments——两个开源的二维/GPU 流体实验项目为具体着色器写法与效果组织提供了参考。围绕 GPU Gems 的思路script.js中step(dt)函数script.js每帧按固定顺序执行以下 GPU 计算链阶段对应着色器作用涡量计算curlShader由速度场计算旋度vorticityscript.js涡量约束vorticityShader施加涡量增强力弥补数值耗散、恢复湍流细节强度由CURL控制script.js散度计算divergenceShader计算速度场的散度用于检测不可压缩约束的偏差script.js压力初值清理clearShader以PRESSURE系数初始化压力场script.js压力 Poisson 求解pressureShader用Jacobi 迭代解压力场迭代次数由PRESSURE_ITERATIONS决定默认 20 次script.js压力梯度投影gradientSubtractShader从速度场减去压力梯度使速度场变为无散度不可压缩script.js速度/染料平流advectionShader沿速度场反向追踪采样semi-Lagrangian advection并施加耗散衰减script.js其中advectionShader值得单独说明它默认依赖 GPU 的线性过滤若设备不支持OES_texture_float_linear着色器会自动编译进MANUAL_FILTERING宏改用软件双线性插值bilerp完成采样script.js这也是项目兼容低端移动设备的关键设计之一。三、参数配置详解默认值与取值范围整个仿真的可调状态集中在config对象中script.js理解这些参数即可控制效果与性能的平衡参数默认值说明SIM_RESOLUTION128物理速度/压力场分辨率整数32/64/128/256越高物理细节越精细、越耗性能DYE_RESOLUTION1024染料颜色场分辨率高/中/低/极低对应 1024/512/256/128CAPTURE_RESOLUTION512截图导出分辨率DENSITY_DISSIPATION1染料密度耗散04越大颜色消退越快VELOCITY_DISSIPATION0.2速度耗散04越大流体减速越快PRESSURE0.8压力场初值系数01PRESSURE_ITERATIONS20压力 Jacobi 迭代次数越大越接近精确解、越耗性能CURL30涡量增强强度050步进 1增大后漩涡更卷SPLAT_RADIUS0.25单次注入半径0.011实际使用时除以 100 再经宽高比修正SPLAT_FORCE6000指针拖动时施加的速度力倍数SHADINGtrue是否启用伪光照法线扰动明暗COLORFULtrue是否随时间自动更换注入颜色COLOR_UPDATE_SPEED10颜色自动更换速度PAUSEDfalse暂停仿真按P键也可切换BACK_COLOR{r:0,g:0,b:0}背景色TRANSPARENTfalse透明背景模式启用后在画布显示棋盘格BLOOMtrue辉光后处理开关BLOOM_ITERATIONS8辉光模糊的降采样级数BLOOM_RESOLUTION256辉光缓冲分辨率BLOOM_INTENSITY0.8辉光强度GUI 可调 0.12.0BLOOM_THRESHOLD0.6辉光亮度阈值GUI 可调 01BLOOM_SOFT_KNEE0.7阈值过渡的软膝soft-knee系数SUNRAYStrue体积光god rays开关SUNRAYS_RESOLUTION196体积光缓冲分辨率SUNRAYS_WEIGHT1.0体积光强度GUI 可调 0.31.0从源码结构看getResolution()script.js会根据画布宽高比把分辨率换算为{width, height}二元组且保证长边对应分辨率数值因此DYE_RESOLUTION1024实际意味着长边 1024。四、dat.GUI 面板与快捷键操作startGUI()script.js使用 dat.GUI 构建了宽 300px 的右侧控制面板包含以下分组质量qualityDYE_RESOLUTION四档高 1024 / 中 512 / 低 256 / 极低 128修改后立即重建帧缓冲仿真分辨率sim resolutionSIM_RESOLUTION四档32/64/128/256基础滑块density diffusionDENSITY_DISSIPATION、velocity diffusionVELOCITY_DISSIPATION、pressurePRESSURE、vorticityCURL、splat radiusSPLAT_RADIUS开关shadingSHADING、colorfulCOLORFUL、pausedPAUSEDRandom splats 按钮随机注入 524 个色块Bloom 文件夹enabled / intensity / thresholdSunrays 文件夹enabled / weightCapture 文件夹background color取色器、transparent 开关、take screenshot截图导出外部链接Github / Twitter / Discord / Check out mobile app。快捷键方面script.js空格键触发一次随机多色注入P键切换暂停/继续。五、输入交互鼠标与多点触控项目同时支持鼠标与触摸输入pointers数组维护了最多可同时存在的指针实例script.js鼠标mousedown/mousemove/mouseup事件驱动单指针script.js触屏touchstart/touchmove/touchend支持多指同时注入每个触点按identifier追踪script.js。每个指针携带texcoordX/Y、prevTexcoordX/Y、deltaX/Y等状态pointerPrototypescript.js其中位移增量会被correctDeltaX/correctDeltaY按宽高比修正再乘以SPLAT_FORCE后写入速度场splatPointerscript.js。颜色方面generateColor()使用 HSV 随机色并整体乘以 0.15 保持暗色调script.js且COLORFUL开启时每COLOR_UPDATE_SPEED秒自动更换一次颜色updateColorsscript.js。六、渲染与后处理管线render()script.js负责把染料场合成到屏幕后处理按需启用Shading伪光照displayShaderSource中通过四邻域颜色梯度构造法线再与固定光源做点积得到漫反射明暗script.jsBloom辉光预滤波 → 逐级降采样模糊 → 反向累加 → 最终按BLOOM_INTENSITY输出applyBloomscript.js模糊使用bloomBlurShader的四邻域均值Sunrays体积光sunraysMaskShader依据亮度生成遮罩再以sunraysShader沿径向做 16 次累积采样并施加Decay0.95衰减script.js模拟光源散射抖动消除色带显示阶段叠加 LDR_LLL1_0.png 作为抖动纹理dithering texture在 Bloom 输出中混入 ±1/255 的噪声平滑渐变区域的色带script.js。这些效果通过Material.setKeywords机制按需编译着色器变体updateKeywords()script.js把SHADING/BLOOM/SUNRAYS宏注入 display shader并以宏组合哈希缓存 program避免每帧重复编译。七、截图导出帧缓冲读取流程Capture 面板的 take screenshot 按钮触发captureScreenshot()script.js完整流程为按CAPTURE_RESOLUTION默认 512创建目标帧缓冲执行一次离线render(target)framebufferToTexture用gl.readPixels(..., gl.FLOAT, ...)读回浮点 RGBAnormalizeTexture把浮点值 clamp 到 01 并转成Uint8Array同时翻转 Y 轴textureToCanvas写入 2D canvastoDataURL()生成 PNGdownloadURI(fluid.png, datauri)触发浏览器下载script.js。该功能对效果展示、壁纸制作与画面分享非常实用。八、移动端适配与低端设备降级works even on mobile 并非口号源码中有三处显式的移动端/低端设备策略分辨率降级isMobile()匹配Mobi|Android的 UA 正则script.js为真时DYE_RESOLUTION从 1024 降到 512script.js能力探测降级当设备不支持线性浮点过滤OES_texture_float_linear时关闭SHADING/BLOOM/SUNRAYS并把染料分辨率降到 512script.js同时平流着色器自动切换MANUAL_FILTERING软件插值交互适配移动端默认收起 GUI 面板script.js首次访问 20 秒后弹出 App 推广浮层带promo/promo-close关闭按钮见 index.html 与 script.js并提供 App Store / Google Play 徽标入口。WebGL 上下文初始化方面getWebGLContext()script.js优先尝试 WebGL2失败则回退到 WebGL1 /experimental-webgl纹理格式通过getSupportedFormat从R16F → RG16F → RGBA16F逐级探测保证在不同 GPU 上都能找到可渲染的半浮点格式script.js。九、参考文献与开源许可README 明确标注了本项目的算法与灵感来源GPU Gems 第 38 章GPU 上的快速流体动力学仿真Stable Fluids 方法是求解管线的主干mharrys/fluids-2d与haxiomic/GPU-Fluid-Experiments二维流体与 GPU 流体实验项目为着色器实现提供参考。许可证方面项目在 LICENSE 中以MIT License发布Copyright (c) 2017 Pavel Dobryakov允许自由使用、修改与再分发只需保留版权声明。若要在自己的页面中集成或二次开发直接以静态方式引入 index.html 与 script.js 即可无需任何构建工具或第三方依赖。赞分享图形学物理引擎【免费下载链接】WebGL-Fluid-SimulationPlay with fluids in your browser (works even on mobile)项目地址https://gitcode.com/gh_mirrors/web/WebGL-Fluid-Simulation点击查看免费下载相关推荐终极指南如何实现移动端丝滑WebGL流体模拟的Draw Call优化终极指南如何实现移动端丝滑WebGL流体模拟的Draw Call优化 WebGL Fluid Simulation是一款令人惊叹的开源项目让用户能够在浏览器图形学物理引擎Short项目测试策略全解析从单元测试到端到端测试的完整方案Short项目测试策略全解析从单元测试到端到端测试的完整方案 想要构建一个稳定可靠的URL短链接服务吗Short项目的完整测试策略为你提供了从单元测试到端到Label Studio架构深度解析从数据标注工具到AI数据基础设施的演进之路Label Studio架构深度解析从数据标注工具到AI数据基础设施的演进之路 在人工智能数据工程的演进历程中我们见证了从简单标注工具到复杂数据基础设施的范数据标注人工智能上一篇Middleman与Sass完美结合构建模块化CSS架构下一篇分子动力学模拟分析利器MDAnalysis安装与环境配置终极教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考