Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2か月で軽率に WebARフェイスフィルターを作ってみた
Search
にー兄さん
August 24, 2020
Technology
0
56
2か月で軽率に WebARフェイスフィルターを作ってみた
WebXR Tech Tokyo #2 @ clusterにて登壇した資料
にー兄さん
August 24, 2020
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にプログラミング言語のシンタックスについて考えてみよう / lets-think-about-programming-lang-syntax
drumath2237
0
46
エンジニアが軽率に趣味から始める、OSS貢献を軸とした個人活動 / oss-contribution-as-a-hoby-project
drumath2237
0
32
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
140
フォークギター with VFXの 制作を軽率に振り返ろう! / look back fork guitar with vfx
drumath2237
0
31
軽率に始まった Babylon.js勉強会運営の 1年間をふりかえって / look back babylonjs japan activity
drumath2237
0
54
利己的利他、 あるいは軽率2.0に備えよ。 / prepare-for-keisotsu-2.0
drumath2237
0
44
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
110
あなたの知らないWebXR Device APIの話を軽率に / about-webxr-device-api-you-dont-know
drumath2237
0
34
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.6k
Other Decks in Technology
See All in Technology
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
340
ゼロからはじめる採用広報
yutadayo
4
1k
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
230
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
1.6k
推し書籍📚 / Books and a QA Engineer
ak1210
0
120
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
180
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
170
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
410
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
780
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
440
Automating Front-end Workflow
addyosmani
1370
200k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Facilitating Awesome Meetings
lara
54
6.5k
Designing Experiences People Love
moore
142
24k
Rails Girls Zürich Keynote
gr2m
95
14k
Code Reviewing Like a Champion
maltzj
524
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
BBQ
matthewcrist
89
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Music & Morning Musume
bryan
46
6.7k
Optimizing for Happiness
mojombo
379
70k
Transcript
2か月で軽率に WebARフェイスフィルターを 作ってみた にー兄さん(ninisan_drumath) WebXR Tech Tokyo #2 @ cluster
agenda はじめに 自己紹介 キッカケ 技術選定 そもそも可能なのか
はじめに
にー兄さん(@ninisan_drumath) 筑波大学情報科学類3年(coins18) 3DCGが好き;3Dセンサ, VFX, xR, Humanoidアバター制御, ...など もっぱらUnity使い 最近のマイブームはAzureKinect
きっかけ 大学のチーム開発の授業(筑波大学COJT20) Webを用いたチーム開発をすることになる WebはよくわからないけどARはやりたい →むりやりWebARでなんか作ろう せっかくなので コロナ時代の需要を考えたい
WebAR試着ができるサービス Faciop Web上で顔につけるファッションアイテムを AR試着できるECサイトのプロトタイプ 3Dモデラーが作ったファッションアイテムを投稿、収益 にできる 5月に発案、7月末に発表 2人で開発(自分はAR試着の検証開発を担当)
技術検証
そもそも可能なのか? フェイストラッキング用のライブラリくらいあるでしょw →顔検知はある →Webで顔の姿勢推定ライブラリが少ない......。 8th Wallが5月末くらいに出していた →すでに自作路線にかじを切っていた Nuxt.jsで実装したい →3Dのコンテンツと相性悪そう...。
tfjs/facemesh MediaPipeのデモプロジェクトのひとつ? 400個以上の顔の特徴点の 3次元座標を推定 デモプロジェクトがある 姿勢推定バックエンドは wasm/opengl/cpuで動作 スペックの高いモバイルなら軽快に動作
実装したもの 一応作ったものは公開 https://github.com/faciop-cojt/faciop