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

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

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

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

にー兄さん

August 24, 2020
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. はじめに

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 技術検証

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide