把科学实验室装进浏览器:Ergalics Studio 是如何做到的
体验地址:https://snowleopard-io.github.io/ErgalicsStudio/app/
代码仓库:
- GitHub:https://github.com/SnowLeopard-io/ErgalicsStudio
- Gitee:https://gitee.com/cnt-code/ergalics-studio
全部功能在浏览器中直接运行:无需安装、无需注册、无需付费。
一、总起:一个完整的科学研究环境
Ergalics Studio 是一个开源的浏览器端科学研究工作站,致力于将科学计算、数值仿真、数据可视化、统计分析、实验管理与版本控制整合到同一个网页应用之中。它内置 60 个覆盖物理、化学、生物、地理、环境与人工智能等学科的科学插件,19 个整页化科研工具,以及一套以 Git 为存储底座的可复现性基础设施。
项目的设计目标可以概括为三个"消灭":
- 消灭门槛——专业科学计算软件动辄数 GB、许可昂贵、部署复杂;Ergalics Studio 打开浏览器即可使用,设备条件参差的教室也能统一开课;
- 消灭玩具感——网络上的"科学模拟"大多是无参数的预设动画;本项目的每个插件背后都是可查证的真实数值内核,并以四级元数据徽章明确标注其验证等级;
- 消灭断点——传统工作流中"计算用 Python、画图用 Origin、记录用 Excel"三者互不衔接;本项目用统一内核、统一图形语言与自动提交的 Git 历史把整条研究链路焊成一个整体。
以下演示视频完整展示了平台的主要工作流:
图 1 · 标准模式欢迎页:环境自检、示例项目与插件入口集中于一个页面
二、四种工作模式:同一份研究的四种表达
Ergalics Studio 提供四种可无缝互转的工作模式,分别面向不同基础的使用者与不同形态的任务。
| 模式 | 面向人群 | 形态 | 典型场景 |
|---|---|---|---|
| 标准模式 | 全体使用者 | 侧边栏选择插件,参数面板即时计算 | 单点分析、课堂演示 |
| 流程模式 | 有一定基础的学生 | 40 余种区块拖拽连线,增量执行 | 数据清洗→分析→可视化的完整流水线 |
| 积木模式 | 编程启蒙阶段 | Blockly 积木生成真实代码 | 中小学计算思维教学 |
| 代码模式 | 进阶使用者 | Python / R / JavaScript 三语言内核,支持多语言互译 | 自定义算法、迁移既有脚本 |
图 2 · 流程模式:区块化数据流水线,支持增量执行与局部重算
图 3 · 积木模式:Blockly 积木直接生成可执行代码
图 4 · 代码模式:Python / R / JavaScript 三语言运行时
模式互转依赖核心层的共享 IR(中间表示)中枢:三种结构化模式编译后汇入同一份 IR,由统一执行器增量运行,mergeFlowIR与签名守卫保证互转过程中语义不变、资产不丢。这使教师可以用积木模式讲授逻辑、学生用流程模式完成实验、进阶者在代码模式中自由扩展——三者共享同一份实验资产,没有人被语言门槛挡在研究之外。
代码模式值得展开说明。它的三语言运行时各有明确分工:Python由浏览器内 Pyodide(WebAssembly 版 CPython)驱动,NumPy、SciPy 等科学计算栈可用——电磁本征求解器的稠密/稀疏特征值分解即运行于此;R面向统计建模使用者,可直接沿用课堂上教授的 R 语法做假设检验与回归;JavaScript则与平台自身内核共享同一运行环境,适合与插件结果做即时交互分析。三语言之间提供多语言互译,帮助使用者把既有脚本迁移到团队统一的语言栈。所有代码运行都在沙箱中完成,实验产物统一进入项目的版本控制体系。
三、六十个插件:一个按学科组织的仿真生态
平台目前内置60 个科学插件,按学科分组组织于侧边栏。每个插件都携带科研级元数据,以四级徽章标明其可靠程度——从"教学演示"到"文献对照验证",学生可以在插件列表中直接看到每个工具的可信度边界;每个插件运行后,其结论、方法与局限以结构化形式写入统一的科学输出栏,而非隐藏在帮助文档中。
图 5 · N 体引力插件:数千粒子在 GPU 上实时演化
图 6 · 电磁本征求解器:谐振腔内真实本征模式的 3D 场分布
图 7 · 蛋白质交互网络:图算法驱动的生物网络分析
三个学科场景速览
地理:气候图插件按 FAO-56 与标准气候学方法,从逐月气温降水序列绘制出版级气候图,配合 GPX 轨迹插件可直接导入户外采集的路径数据完成里程、坡度与高程分析;
图 8 · 气候图:逐月气温-降水复合图,支持科学输出栏结论
图 9 · GPX 轨迹:户外采集路径的高程与坡度剖面
生物:传染病插件内置 SIR / SEIR / SIRS 等仓室模型,可实时调整传播率与恢复率,观察疫情曲线对参数的敏感性——这是流行病学教学中最直观的实验台;
图 10 · 传染病仓室模型:SIR / SEIR 参数敏感性实验
信号:信号实验室将 FFT 内核与出版级绘图结合,时域信号的频谱分解在 GPU 上瞬时完成,相位谱、功率谱与窗函数对比一页呈现。
四、WebGPU 计算管线:浏览器里的并行科学计算
Ergalics Studio 在计算层的核心投入,是一套自研的WebGPU 计算管线。这是"真仿真"得以成立的技术前提——没有并行算力,浏览器中的科学仿真只能停留在玩具尺度。
14 个可复用的 WGSL 计算内核
项目在核心层(src/core/wgsl.ts)实现了 14 个数据驱动的 WGSL 计算着色器模板,每个内核都显式文档化其绑定位布局与 uniform 结构,供全部插件按需取用:
| 内核 | 用途 | 采用的插件 |
|---|---|---|
nbodyKernel | N 体引力两两作用积分 | N 体引力 |
particleKernel | 粒子平流积分 | 粒子系统 |
fluidCollide / Stream / Curl | LBM 格子玻尔兹曼的碰撞、迁移与涡量三段求解 | 流体模拟 |
waveKernel | 波动方程显式时间步进 | 波动干涉 |
histogram / binningKernel | 并行归约直方图统计 | 统计图表 |
heatmapKernel | 场量热力图渲染 | 热力图 |
pointCloudKernel | 点云变换与着色 | 点云 3D |
matmulKernel | 分块矩阵乘法 | 线性代数 |
fftKernel | 快速傅里叶变换 | 信号实验室 |
kmeansKernel | 并行聚类 | 数据画像 |
spmvKernel | 稀疏矩阵-向量乘 | 本征求解器 |
以 LBM 流体插件为例,格子玻尔兹曼求解被拆分为碰撞、迁移、涡量三个计算通道,每帧在 GPU 上完成数十万格子的状态更新——这是"流场真实演化"而非"播放水波动画"的本质区别。
图 11 · 波动干涉:波动方程 GPU 显式时间步进的实时波场
图 12 · LBM 格子玻尔兹曼流体:GPU 上逐帧求解的真实流场
一条计算管线的解剖
以 N 体插件的一次 GPU 求解为例,管线的工作方式如下:插件声明内核模板(nbodyKernelWGSL)与数据规模后,计算层依次完成存储缓冲区创建(粒子状态以[x, y, vx, vy]交错布局写入STORAGE缓冲)、绑定组装配(storage + uniform 各就其位,uniform 结构严格按 16 字节对齐)、按 workgroup 派发(每 64 粒子一个 workgroup,边界做溢出保护)、结果回读(WebGPU 禁止直接映射 storage 缓冲,故先COPY_SRC至独立的MAP_READ | COPY_DST回读缓冲,再异步取回)。整个链路对插件作者只暴露三四个调用点——并行算力的工程复杂度被管线吸收,插件作者只需声明"算什么"。
工程可靠性设计
计算管线在工程层面做了三项关键处理:
- 能力检测与降级——插件运行时通过统一的 GPU 能力接口探测设备;无 WebGPU 环境自动回退 CPU 路径,结果一致、仅性能不同,绝不报错;
- 设备丢失自愈——监听 GPU 设备丢失事件,自动重建设备与缓冲区,长时间运行的仿真不会因驱动重置而中断;
- 可复现性绑定——GPU 随机性与种子由可复现性内核统一供给(mulberry32 确定性序列),同一实验在不同设备上可重放。
此外,平台的统计推断引擎(Bootstrap 不确定性量化、贝叶斯后验采样)同样运行在这条 GPU 管线上,使得"万次重抽样"级别的计算在课堂笔记本上秒级完成。
图 13 · Inference Forge:GPU 加速的贝叶斯后验采样
五、数据驱动的空态设计:示例是入口,不是内容
值得单独说明的是平台对"示例数据"的处理原则:数据分析类插件打开即空态——不预置任何演示数据,全部示例通过顶栏示例栏一键载入,或直接拖入使用者自己的 CSV 文件。参数驱动的仿真类插件则按物理默认值开箱渲染。
这一设计并非细节洁癖。工具的默认行为决定了使用者的第一课:数据是分析的起点,而不是装饰。以环境学套件为例,空气质量插件依据 HJ 633-2012 与 GB 3095-2012 断点计算 IAQI 并给出健康建议,水质插件按 GB 3838-2002 单因子法判定类别并输出加权 WQI——学生拖入自己城市的数据,得到的是针对真实环境的结论。
图 14 · 地理套件:地图投影失真的 Tissot 指标线可视化
六、科研闭环:从一次运行到一篇报告
插件产出只是起点。Ergalics Studio 将"研究"拆解为一条完整流水线,并以 19 个整页化实验室工具覆盖全程:
图 15 · Figure Studio:出版级图形编辑与导出
图 16 · Sweep Studio:参数空间批量扫描与对比
图 17 · 不确定性引擎:GPU 加速的 Bootstrap 重抽样
每个项目都是一台 Git 机器
平台最具差异化的基础设施是:项目本身即 Git 仓库。
- 浏览器端内嵌 isomorphic-git 与 LightningFS(IndexedDB 承载工作区),无需命令行;侧边栏 Git 面板实时显示分支、领先/落后计数与提交历史;
- 每次运行完成、每张图形保存、每次手动保存、每次导出补充材料,均自动生成一次 Conventional Commit——
git log即完整的实验年表; - 标准项目模板预装工程钩子:
pre-commit校验repro.lock(锁定环境与依赖指纹),pre-push执行单元测试;克隆到本地后可直接对接预置的 GitHub Actions 工作流; - 协作场景下,在面板中填入仓库地址即可完成 pull / push / fetch,远程同步经由可配置的 CORS 代理。
图 18 · Repro Lock:环境与依赖指纹锁定
图 19 · 补充材料:图表、数据与运行记录一键打包
对研究者而言,这一层回答的是那个最棘手的问题:三个月后,你依然可以拿出当时的每一步。
七、若干工程决策
1. 纯 TypeScript 手写内核 + Rust WASM 混合。可视化、统计与数值方法以纯 TypeScript 实现,每一行数学开放可查;性能关键路径由 Rust 编译的 WASM 模块承担。不依赖黑盒,也不牺牲性能。
2. 双语同步。全部 60 个插件、19 个实验室页面与 3D 场景内标注的中英文在 i18n 层同步维护,中文使用者为第一等公民。
3. 性能可观测。FPS、GPU、内存与数据规模监控常驻状态栏——使用者从第一天起就建立"我的实验跑了多大规模"的量化直觉。
4. 出版级输出。绘图引擎输出矢量 SVG,可直接进入 LaTeX / Illustrator 工作流;3D 场景导出透明底 PNG。图表不是"截图凑合",而是论文素材。
八、常见问题
没有 WebGPU 的电脑能用吗?
可以。计算管线在启动时探测设备能力,无 WebGPU 环境自动回退 CPU 路径——结果一致,仅性能不同。状态栏会实时显示当前使用的计算后端与资源占用。
数据会被上传到服务器吗?
不会。项目文件、实验记录与 Git 仓库全部存储在浏览器本地的 IndexedDB 中;只有在主动执行远程同步(push / pull)时,数据才会经由你配置的仓库地址与 CORS 代理离开本机。
我的数据格式不标准怎么办?
平台的导入层支持 CSV / TSV 等分隔文本的容错解析(自动识别表头别名与编码),并提供二进制科学格式的导入能力;数据画像与清洗工具可在正式分析前完成类型推断与异常值处理。
可以用于正式发表吗?
绘图引擎输出矢量 SVG 与透明底 PNG,可直接进入 LaTeX 排版流程;补充材料打包包含运行记录与可复现锁,满足期刊对数据与过程可溯性的普遍要求。
如何参与贡献?
插件契约公开且稳定:一个携带 manifest 声明的纯函数模块,即可接入整个平台并获得参数面板、3D 场景、科学输出栏与版本控制的全套支持。文档站附有完整的插件开发指南。
九、开始使用
Ergalics Studio 以 MIT 许可证完全开源,欢迎用于教学、科研与二次开发:
体验地址
https://snowleopard-io.github.io/ErgalicsStudio/app/
代码仓库
GitHub:https://github.com/SnowLeopard-io/ErgalicsStudio
Gitee:https://gitee.com/cnt-code/ergalics-studio
插件系统的契约公开且稳定:一个携带 manifest 声明的纯函数模块,即可接入整个平台并获得参数面板、3D 场景、科学输出栏与版本控制的全套支持。若这个项目对你的课堂或研究有所助益,欢迎 Star、提 Issue、撰写插件。
科学工具不应当是奢侈品,也不应当是玩具。它应当像实验室的桌凳一样——就在那里,坐下即可开始工作。