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
43
2か月で軽率に WebARフェイスフィルターを作ってみた
WebXR Tech Tokyo #2 @ clusterにて登壇した資料
にー兄さん
August 24, 2020
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.3k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
290
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
6
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
51
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
310
Snapdragon Spacesを通して Unity XRプラグインフレームワーク について軽率に学ぶ / about snapdragon spaces sdk and unity xr framework
drumath2237
0
300
Babylon.jsユーザのためのCLIを軽率にnpmで公開した話 / about create babylon app CLI
drumath2237
0
470
軽率な執筆活動 / writing books roughly
drumath2237
0
29
軽率にBabylon.jsへ WebXR Featureを実装して OSSコミットした
drumath2237
1
850
Other Decks in Technology
See All in Technology
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
AMLD 2024 - Build Your Own GPT
donlelef
1
260
Autify Company Deck
autifyhq
1
30k
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.8k
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
データマネジメントを支える武器としてのメタデータ管理
10xinc
2
940
Challenges - Open Farming Hackdays 2024
loleg
0
570
AWS アーキテクチャクイズ
yuu26
2
700
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
260
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
230
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3.1k
依存ライブラリはどこに?
takesection
0
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
4 Signs Your Business is Dying
shpigford
174
21k
Done Done
chrislema
178
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Music & Morning Musume
bryan
39
5.5k
A Philosophy of Restraint
colly
195
15k
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