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
880
今こそ軽率に理解したい 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
AIエージェント入門
minorun365
PRO
33
19k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
250
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
46k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
890
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
350
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
530
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
330
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
360
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.9k
Facilitating Awesome Meetings
lara
53
6.3k
Building Applications with DynamoDB
mza
93
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Navigating Team Friction
lara
183
15k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
A designer walks into a library…
pauljervisheath
205
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Being A Developer After 40
akosma
89
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
605
68k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
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