← 返回案例

笑雨烟花 · 独立作品 · 浏览器 AR 实时互动

实时表情识别与互动体验

把表情识别变成有手感的互动:微笑下雨,大笑放烟花,粒子落到头上会弹开。手机浏览器可直接体验。

笑雨烟花开始页主视觉:微笑的人像,画面中落着雨、升起烟花
  • 独立作品 · 浏览器 AR 实时互动
  • 表情驱动 · 在浏览器里运行
  • 开源 · 可在线体验

01

目标

大多数互动都要人先做点什么:点、划、按住。这个作品试一种更轻的:开启体验后,以表情驱动画面反馈。微笑,画面下雨;大笑,屏幕升起烟花;烟花的粒子落到头上会真的弹开。要回答的问题是怎么把一个表情变成看得见、也说得通的反馈。

开始页
笑雨烟花开始页

02

我负责什么

互动规则与体验定义、反馈的视觉与手感、异常状态设计、逐轮验收与调校,直到手机浏览器上可以直接打开体验。

人像轮廓
识别到的人像轮廓,青色描边(人脸已做马赛克)

03

关键决策

“有数值”不等于“在笑”。 模型只给出嘴角和张嘴的程度,多大算笑是设计决定的。我把表情定为待机、微笑、大笑三个状态,进入门槛高于退出门槛,切换要稳住一小段才算数。通过持续判定与不同的进入、退出门槛,减少说话和临界表情带来的误触发与闪烁。两根进度条让人知道自己离触发还有多远。 反馈要说得通。 早期烟花从嘴里喷出,语义反了。改为从画面底部升空、顶点炸开、粒子落回人身上,上升的等待成了烟花的仪式感。雨不参与碰撞,避免脸前出现硬边空洞。 头不只是脸。 模型关键点止于额头,直接用会让粒子穿过头发。用整圈轮廓拟合稳定的头部范围并补出头顶,加上“静止时稳、甩头时跟得上”的平滑,碰撞才可信。

04

真实环境与可见成果

没有摄像头有手动模式;授权被拒有各浏览器的开启说明;模型加载可见进度;一段时间无人自动停止。作品开源,可以直接在线体验。 适用的委托类型:展览与活动现场互动、品牌页面的摄像头互动、需要先跑起来给人看的概念验证。

实机 · 微笑下雨
浏览器实机画面:识别到微笑后画面下雨,底部进度条显示“下雨中”(人脸已做马赛克)
实机 · 大笑烟花
浏览器实机画面:识别到大笑后烟花在人像两侧炸开(人脸已做马赛克)