🎨 视觉算法库

从 Shadertoy / B站视频 / 自有原型中提取并实现的网页着色器集成展示。每条都附完整算法提取说明、可交互运行、6 步可分解演示(适用时)。所有实现都是单文件、零依赖、可重现。

🜨 单文件 HTML ⚙️ WebGL 2 + GLSL ES 3.00 🚫 零 npm / bundler 📐 自适应 DPR 📚 算法提取说明同行 当前收录 2 个
已收录 / LIBRARY
点入即跑,进度条可拖;下方 6 步缩略图是 dielectric 6 步分解的快览。复制 / 修改 / 二次发表请保留原作者署名(见各页"算法提取说明")。

⚡ 芥电体电池 Dielectric Battery

2D-Procedural ● LIVE 6 步可分解 色相守恒模型
从基色分段 → 超级晶格 → 分形湍流(fBm + 域扭曲)→ 圆柱重入 → 三通道独立放电场 → 最终合成。把原 Shadertoy 6 步图做成可切换、单文件、可调参的实现。
— 6 步分解缩略(点击可直接进入该步) —
  • 1-6 切步骤
  • Space 暂停
  • A 自动巡演
  • 底部进度条 点击
运行 →

🌌 Protostar 2 · 通用版 Universal Edition

Raymarch ● LIVE 326 字符高尔夫 档位自适应
@XorDev 经典 326 字符 SRTM 光线步进体积渲染。桌面 200 步与原作一致;移动端按像素填充率自动降档到 96/72/56。可拖动鼠标轻微搅动旋转轴;支持手机陀螺仪(关/开)。
— 封面(自云端拉回本地,链接稳定) —
原算法为实时 raymarch,无静态封面。进入页面运行查看 →
运行 Protostar 2
  • 拖动 搅动旋转
  • 动作感应 关/开
  • 音乐 关/开
  • 双击 HUD 隐藏
本地路径:homepage/vislab/protostar2/
运行 →
算法上架约定 / CONVENTIONS
每收录一条新算法都要同步:① 单文件 HTML 实现 ② 算法提取说明 .md ③ 在 catalog.json 注册 ④ 主页加入口。详见 vislab/_lib/catalog.json → conventions。
技术栈WebGL2 + GLSL ES 3.00 + 单文件 HTML,零第三方依赖。
路径规范homepage/vislab/<slug>/index.html + 算法提取说明.md
HUD 壳层标题 / FPS / 分辨率 / 步骤名 / 控制提示 — 黑色半透明 + 等宽字体(建议统一)
错误显示全局 #err 覆盖层,编译失败时显示完整 GLSL 错误文本(不出现空白屏)
响应式DPR 上限 2;resize 重建画布;移动端按 FPS 档位或像素填充率降级
点击安全HUD 与按钮必须真实可点(不许在 HUD 上覆不可点击层;地图 SDK 是高发陷阱)
部署本地 curl 127.0.0.1:<port>/<slug>/ 先实测,再 SFTP 到 /opt/homepage/vislab/<slug>/
回滚rsync --backup(按日期生成 .bak_vislab_YYYYMMDD)
关联 URL主页 / → 卡片 /vislab/ → 算法页 /vislab/<slug>/
© 猿人的实验室 · 算法原作者署名见各页 更新:2026-09-13 · 库 v1.0