丐版眼动追踪 @mediapipe/tasks-vision + three.js

366 阅读1分钟

Preview

演示页: eye-track.lary-showcase.top/

20230718175324_rec_.gif

如图所示: 点击 Primary 按钮, 请求摄像头,开启眼动追踪后。运动的红点即为视线所在,可通过头部运动调整红点位置。
⚠️注: 仅在带摄像头的笔记本上调试通过。不知道换台电脑表现如何

How it Works

  1. 基于 three.js 的 morphtargets_webcam
    在此 example 中, 我调整观察方向,发现摄像头前的我前后运动,3D模型也跟着前后运动, 所以是包含完整的空间信息的。

    20230718180521_rec_.gif
  2. 需求降级。
    Mediapipe 的 face_landmarks 中是有眼动信息的。但我没想出来如何拿眼动的位置计算视线位置。 FaceLandmarker 体验地址
    不过仅捕捉头动,也可以得到一定的视线追踪的效果。

    20230718180946_rec_.gif
  3. 在场景中,添加上显示屏的平面、视线射线,然后计算交点,即可获得在[-2,2],[0,-2] 范围内移动的点的位置

20230718184456_rec_-convert.gif
  1. 将点换算为屏幕上的位置, 再换算为浏览器 viewport 中的位置。
    如图, 大红点为当前页面中视线位置;小红点为整个屏幕的 minimap,演示了视线从浏览器移除浏览器的过程。
20230718184658_rec_-convert.gif