Repos / panna-arts / dog-eye OWN

dog-eye

狗眼 DogEye 🐶🐱🐝🐍🪰🦐🐟🦎

在 GitHub 查看 ↗

狗眼 DogEye 🐶🐱🐝🐍🪰🦐🐟🦎

who's eye? —— 用摄像头，看见动物眼中的世界。

纯前端、零依赖、零构建的实时动物视觉滤镜。九种视角（狗、猫、蜜蜂、蛇、苍蝇、螳螂虾、深海鱼、壁虎 + 人类对照）全部在本地 GPU 上实时渲染，不上传任何数据，支持 PWA 离线使用。

快速开始

npm start
# → http://localhost:8888

没有 Node？任何静态服务器都行，例如 python3 -m http.server。
（摄像头 API 要求安全上下文，localhost 天然满足；直接双击打开 file:// 拿不到摄像头。）

玩法：开启摄像头 → 切换六种视角 → 打开「左右对比」拖动分割线 → 「录制」导出 WebM 短视频或「截图」保存 PNG，直接发短视频平台。
没有摄像头或想讲原理，点「示例画面」：里面有纯色色卡、水果、弹跳的小球和飘动的云，静止时看色彩塌缩、动态时看运动高亮。

滤镜如何模拟动物视觉

感官差异 人类 动物 滤镜实现
视锥细胞 三色 狗 / 猫：蓝黄双色（猫更低饱和） Machado et al. (2009) 绿色盲模拟矩阵 + 去饱和
视力 1.0 狗 ≈ 0.2–0.3，猫 ≈ 0.2 可分离高斯模糊（半径按分辨率缩放）
夜视 1× 猫 ≈ 6×（照膜反光） 1 − e^(−x·gain) 软曝光提升
色彩 三色 蜜蜂：紫外 + 蓝 + 绿，红色近盲 白色 ≈ 紫外强反射 → "蜜蜂紫"，红色压暗
红外感应 无 蛇：颊窝热成像 亮度 → 铁红色带（黑紫→红橙→黄→白热）
眼睛结构 单眼 苍蝇：数千小眼复眼 六边形镶嵌网格 + 边缘描暗
色彩通道 三色 螳螂虾 ≈ 12 通道 色相 12 带量化 + 高饱和 + 紫外紫高光（艺术近似）
光谱环境 全谱 深海鱼：只剩蓝光 亮度 → 蓝色明暗，红色最先"消失"
夜视色觉 弱 壁虎：暗处仍有色觉 强曝光提升 + 保留色差
动态感知 基准 狗远超人类，苍蝇 ~250Hz 逐帧亮度差分，运动区域亮度脉冲
时间分辨率 基准 更高的闪烁融合率 「运动拖影」：上一帧缓冲做指数滑动平均
视野 ≈ 180° 狗 ≈ 240°，猫 ≈ 200° 广角形变 + 外周去饱和（体验近似）

注：动物视觉研究仍在演进，以上均为近似模拟而非精确复现；蜜蜂的紫外通道来自估算（相机没有紫外传感器）。

画面识别与物种解说（可选，需联网）

开启摄像头后点「画面识别」，通过 MediaPipe Tasks Vision（EfficientDet-Lite0）在本地实时标注画面中的物体（中文标签），与任意动物视角叠加显示。再点「物种解说」，识别到的物体会得到当前动物的专属解说——比如蛇视角下看到人：「一团 36°C 的热源，黑暗里无所遁形」——并附带中文语音（浏览器本地语音合成，不联网朗读）。模型从 CDN 加载并被 Service Worker 缓存，加载过一次后离线也能用。

快捷键

1-9 人类 / 狗 / 猫 / 蜜蜂 / 蛇 / 苍蝇 / 螳螂虾 / 深海鱼 / 壁虎 · C 左右对比 · M 运动高亮 · T 运动拖影 · V 广角视野 · E 画面识别 · J 物种解说 · R 录制 · S 截图 · D 示例画面 · F 翻转摄像头

部署（手机扫码体验）

摄像头要求 HTTPS。仓库已内置 GitHub Pages 自动部署（.github/workflows/deploy.yml）：推送到 main 即自动发布，然后在仓库 Settings → Pages 里确认启用即可，地址形如 https://<user>.github.io/dog-eye/。也可用 ngrok / cloudflared 隧道穿透本地端口。

接入 OBS 直播

OBS 添加「浏览器源」加载本页地址（或窗口捕获浏览器画面），即可把动物视角实时推流进你的直播；「录制」按钮也能直接产出可用于剪辑的 WebM 素材。

项目结构

index.html                     页面结构
style.css                      暗色观测仪风格 UI（强调色随视角切换）
main.js                        WebGL 管线 + 识别/录制 + 动画示例场景
server.js                      零依赖静态服务器
.github/workflows/deploy.yml   GitHub Pages 自动部署

Roadmap

  • [ ] 识别模型本地化进仓库（彻底离线安装）
  • [ ] 录制支持混入麦克风音频
  • [ ] 直播间观众投票实时切换视角（需轻后端）
  • [ ] 更多物种：章鱼（偏振视觉）、驯鹿（紫外）

参考

  • Machado, Oliveira & Fernandes (2009), A Physiologically-based Model for Simulating Color Vision Deficiency
  • Jay Neitz 等关于犬类视锥细胞（429nm / 555nm 双峰）的研究
  • MediaPipe Tasks Vision (EfficientDet-Lite0)