8th Wall の Face Effects を使い、カメラに映った顔に3Dサングラスをリアルタイムで重ねるWebARデモです。
xrextras-face-attachment で左右の目・鼻・耳の特徴点にサングラスの各パーツを配置し、顔の動きに合わせてリアルタイムで追従します。画面下部のボタンで黒・赤・青の3色を切り替えられます。
スクリプトはローカルに配置した xr-standalone/xrextras.js と xr-standalone/xr.js の組み合わせで構成しています。iOS Safari も WebXR 非対応のまま getUserMedia ベースで動くため、iPhone・Android・デスクトップの主要ブラウザで利用できます。