Wiggle 视差壁纸

浏览器本地深度估计 + WebGL2 视差渲染。拖入一张图片或一段视频，即可得到可交互的 3D 视差壁纸；既可当普通网页玩，也可部署为 Wallpaper Engine 网页壁纸。所有计算都在本地浏览器完成，不上传任何数据。

功能

• 图片 / 视频输入：图片实时估计深度；视频在浏览器内抽帧生成深度序列后循环播放 + 视差
• 双深度模型：Depth Anything v2（默认，边缘更稳）与 YOLO26-depth（CPU 约 400ms/帧），面板内切换
• 视差参数：视差强度、零视差平面（支持屏幕取点）、深度模糊、缩放 / 水平垂直位移、水平 / 垂直反向、深度图预览
• Wallpaper Engine 适配：隐藏式设置面板（拖拽滚动、离焦淡化）、WE 的 CEF 缺少 H.264 解码时自动页内转码为 VP8 WebM 兜底
• 中英双语 UI：自动跟随浏览器语言，可手动切换

快速开始

需要 Node.js ≥ 20。

npm install
npm run fetch:model   # 下载 Depth Anything v2 权重（HuggingFace，失败自动回退 ModelScope）
npm run dev           # http://127.0.0.1:5173

可选：

npm run build && npm run preview   # 生产构建 + 预览
npm test                           # 单元测试（vitest）
npm run copy:wasm                  # 升级 onnxruntime-web / @ffmpeg/core 后重新复制 wasm（仓库已含副本）

YOLO26-depth 权重不入库：自行导出 yolo26n-depth.onnx 放到 public/models/yolo26/ 即可在面板中切换；缺失时仅 DAv2 可用。

脚本

命令	说明
npm run dev	Vite dev server（含 COOP/COEP 头与 /wasm 中间件）
npm run build	tsc --noEmit + Vite 构建到 dist/
npm run preview	预览 dist/
npm test	vitest
npm run fetch:model	下载 DAv2 量化权重到 public/models/
npm run copy:wasm	复制 ort / ffmpeg.wasm 运行时到 public/
npm run build:depth -- <视频>	离线生成视频深度序列（depth.bin + depth-meta.json）
npm run transcode:webm -- <输入> [输出]	离线转码为 WebM（VP9），供不支持 H.264 的环境使用

Wallpaper Engine 部署

1. npm run build
2. 将 dist/ 的内容复制到 wallpaper_engine/projects/myprojects/Wiggle/（不要动该目录下的 project.json 与 preview.gif）
3. 新建壁纸时 project.json 的 file 指向 index.html

注意：

• WE 的 CEF 不带专有编解码器，H.264/MP4 会被 <video> 拒绝（MediaError code 4）；此时壁纸自动用内置 ffmpeg.wasm 转成 VP8 WebM 再继续。首次需加载 32MB 转码器，且转码同步阻塞主线程，长视频会明显卡顿——长视频建议先用 npm run transcode:webm 离线转换。
• WE 无法设置 COOP/COEP，WASM 推理走单线程回退（首次加载约 7s）。

项目结构

src/
├── app.ts            入口与编排：输入处理、generation 防竞态、WE 环境检测
├── i18n.ts           中英文案
├── depth/
│   ├── estimator.ts  Depth Anything v2（transformers.js + onnxruntime-web）
│   ├── yolo26.ts     YOLO26-depth（原生 onnxruntime-web）
│   ├── transcode.ts  页内转码兜底（ffmpeg.wasm，VP8）
│   ├── resize.ts / downscale.ts / smoothing.ts
├── parallax/
│   ├── renderer.ts   WebGL2 渲染器
│   └── shaders.ts    颜色 / 深度 / 合成三段 GLSL
└── ui/panel.ts       设置面板
scripts/              模型下载、wasm 复制、深度序列生成、离线转码
public/
├── models/           深度模型权重（gitignore，fetch:model 获取）
├── wasm/             onnxruntime-web 运行时（入库）
└── ffmpeg/           ffmpeg.wasm 核心（入库，按需加载）

技术约定

• 深度图约定白 = 近；YOLO26 的米制输出会归一化到该空间
• dev/preview 设 COOP/COEP 以启用 SharedArrayBuffer 多线程 WASM
• ffmpeg.wasm core 覆盖 locateFile，只认 mainScriptUrlOrBlob 中 # 后的 base64 JSON 定位 wasm；该 build 的 libvpx-vp9 在大尺寸帧上会 trap，故页内转码固定用 VP8
• 设计文档与实施计划见 docs/superpowers/

联系作者

• Bilibili: https://space.bilibili.com/129385800
• X (Twitter): https://x.com/MannixWu