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