边缘跑者EDGE RUNNER
待机
FPS -- 边缘 -- 速度 -- 追踪 0.0
← → 移动 · 空格 跳 · 点击画面放置小人 · R 重置

调节

TUNE

边缘灵敏度 55
地面压暗 45
残影长度 4
跟随强度 1.0
画面清晰度
清晰度只影响上屏的画质;边缘检测始终跑在低分辨率网格上,所以调到高清不会改变小人的跑法。
帧率掉到 38 以下会自动降一档。
动画角色
两个角色都是 AI 生成 + 视频抽帧 的序列帧小人,最接近动画原画的质感。
两人共用同一套物理引擎与边缘追踪,换人只换素材(hero-run.png / hero-run-girl.png)—— 所以换人不会改变手感。
想换成自己的人物:把横向精灵图覆盖 app/ 里的同名文件,再到 SPRITE_SETS 改那一组标定数字(详见 README §9)。素材还没下完时,按钮会先变灰。

关于

ABOUT & ROADMAP

它是怎么跑的

  1. 画面走两级缓冲:先按屏幕分辨率渲染成「显示缓冲」直接上屏,再降采样成一张低分辨率网格专门喂给算法——所以画质和检测精度互不牵制;
  2. 网格上转灰度、做一次 3×3 高斯平滑,再用 Sobel 算子求梯度,超过阈值的像素即为「边缘」;
  3. 从画面正中那一点出发,沿着边缘向左右两侧行走,走出一条连续的曲线——这条曲线就是跑道;
  4. 比较相邻两帧边缘图的行/列投影,估出镜头整体位移,把它叠加到小人的位移上,于是镜头怎么动,它就跟着同速动,始终钉在同一个真实物体的边缘上;
  5. 跑道交给你看到的原始画面本身:不描边,只把曲线下方压暗,让边界由像素自己呈现。

隐私

画面全部在本地浏览器内实时计算,不上传、不存储。关掉页面即结束。

做成相机插件的路线

现在可安装的 Web App。用浏览器菜单「添加到主屏幕」即可全屏运行;已内置 manifest 与离线缓存。
下一步原生壳体。用 Capacitor / WKWebView 包一层,接系统相机权限,就能像普通相机一样启动,并加上录制与分享。
iOSAVFoundation 实时取景 + Metal 着色器跑 Sobel,把小人画在 CALayer 叠加层。对外表现为一个相机 App,或 ReplayKit 直播滤镜。
AndroidCameraX 的 ImageAnalysis 出帧 + OpenGL ES 渲染,每次拍照/录制时把跑者一起合成进去。
插件真正的「相机插件」需要宿主支持:Snap 相机 Kit、Sony 相机 App、或 GoPro 的第三方扩展。届时把这里的边缘追踪与角色渲染移植成一个滤镜模块即可。

WEBCAM × SOBEL × PHYSICS

边缘跑者

EDGE RUNNER

打开摄像头,程序在画面里挑出最中间的那一条边缘——
小人踩在这条边缘上奔跑、跳跃、翻越,
而你只要移动镜头,它就和镜头同速跟过去, 始终跑在同一件真实物体的轮廓上。

画面只在本地处理,不上传。 建议 Chrome / Edge · 手机端可用屏幕下方按钮移动与跳跃