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
52
2か月で軽率に WebARフェイスフィルターを作ってみた
WebXR Tech Tokyo #2 @ clusterにて登壇した資料
にー兄さん
August 24, 2020
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels
drumath2237
0
36
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.5k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.6k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
320
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
400
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
870
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
220
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
190
Other Decks in Technology
See All in Technology
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
190
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
310
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
350
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
260
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
730
日経のデータベース事業とElasticsearch
hinatades
PRO
0
250
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
210
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Designing for Performance
lara
604
68k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Faster Mobile Websites
deanohume
306
31k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How STYLIGHT went responsive
nonsquared
98
5.4k
A better future with KSS
kneath
238
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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