Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2か月で軽率に WebARフェイスフィルターを作ってみた

2か月で軽率に WebARフェイスフィルターを作ってみた

WebXR Tech Tokyo #2 @ clusterにて登壇した資料

E123f0d70182268563d4e63e23d8c55c?s=128

にー兄さん

August 24, 2020
Tweet

Transcript

  1. 2か月で軽率に WebARフェイスフィルターを 作ってみた にー兄さん(ninisan_drumath) WebXR Tech Tokyo #2 @ cluster

  2. agenda はじめに 自己紹介 キッカケ 技術選定 そもそも可能なのか

  3. はじめに

  4. にー兄さん(@ninisan_drumath) 筑波大学情報科学類3年(coins18) 3DCGが好き;3Dセンサ, VFX, xR, Humanoidアバター制御, ...など もっぱらUnity使い 最近のマイブームはAzureKinect

  5. きっかけ 大学のチーム開発の授業(筑波大学COJT20) Webを用いたチーム開発をすることになる WebはよくわからないけどARはやりたい →むりやりWebARでなんか作ろう せっかくなので コロナ時代の需要を考えたい

  6. WebAR試着ができるサービス Faciop Web上で顔につけるファッションアイテムを AR試着できるECサイトのプロトタイプ 3Dモデラーが作ったファッションアイテムを投稿、収益 にできる 5月に発案、7月末に発表 2人で開発(自分はAR試着の検証開発を担当)

  7. 技術検証

  8. そもそも可能なのか? フェイストラッキング用のライブラリくらいあるでしょw →顔検知はある →Webで顔の姿勢推定ライブラリが少ない......。 8th Wallが5月末くらいに出していた →すでに自作路線にかじを切っていた Nuxt.jsで実装したい →3Dのコンテンツと相性悪そう...。

  9. tfjs/facemesh MediaPipeのデモプロジェクトのひとつ? 400個以上の顔の特徴点の 3次元座標を推定 デモプロジェクトがある 姿勢推定バックエンドは wasm/opengl/cpuで動作 スペックの高いモバイルなら軽快に動作

  10. 実装したもの 一応作ったものは公開 https://github.com/faciop-cojt/faciop