顔検知やARレンダリングに関する実験プロジェクト
Home Page: https://faciop-cojt.github.io/faciop-face-detection-sandbox/
COJTのプロジェクトの一つ。facemeshとthree.jsを使って簡易的なARフィルターを作るための実験用プロジェクト。
なにかございましたらこちらのTwitterアカウントにご連絡いただけると幸いです。
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
このプロジェクトが何をするためのものなのかを明確にする
でもプロジェクトをgh-pagesで見れるようにする
顔のメッシュに陰面処理用のシェーダを適用して、本来顔に隠れて見えない部分をマスクする
いまは眼鏡に対して特定のポリゴンのtransformをもたせているが、
他のファッションアイテムのカテゴリに対してもちゃんと適用できるように抽象化する。
ファッションアイテム用のオブジェクト型を定義してそれに対して操作するのがいいかも
外部URLからglTFのバイナリをDLしてthree.jsのシーンに配置する
urlは適当にgithubとかの使ってもいいかなって思ってる。
理想的にはfiresotreみたいなBlobストレージから落としてくること。
眼鏡、マスク、帽子、最低限この3つ用意したい
facemeshで取得したメッシュに対して、顔のファッションアイテムを配置して、
facemeshの姿勢に合わせて3Dオブジェクトを追従させる
結構突貫工事しているので、一回リファクタを入れようと思う
実際にレンダリングしたものをビデオストリームの上に配置し、あたかもARでオブジェクトが配置されたかのようにする
facemeshによって読み込んだ顔のメッシュから、顔の姿勢を推定する。
モバイルで開いたときにすごい重くなっちゃう。0.3fpsとか普通になる
なんかiOS safariとかだとビデオが固まったりするらしい
特徴点のデータから顔のメッシュを貼る
後にシェーダの足掛かりにする
facemeshをtypescriptで読み込んで、顔の特徴点を取得する
three.jsのレンダリングをnuxt.js上で実行する
cubeとPlaneだけでもいいので適当なシーンをレンダリングしたものを出す。
顔の大きさ(顔が手前にあるか、奥にあるか)によってファッションアイテムの大きさを変える
facemeshで顔のジオメトリを形成するリポジトリがあったのでそこからコードを拝借、実装を試みる
videoサイズを決め打ちでやっているので、デフォルトで自分の環境に合わせて4:3を指定している
やっぱり16:9とかだと動かないっぽい
getUserMediaの時点でカメラのサイズをこちらから指定せずに取得する方法があればよいのだが…
バーチャルカメラとかがあるとすごいめんどくさいので、getUserMediaで使用するカメラを切り替えられる機能を付ける
なんとなく、domとロジックの連携がめんどくさそうなので、一回設計を見直してからやる必要があるかもしれない
ロジック部分の実装をpluginsいかに配置して、ライブラリ的に使いまわす
完全にノリでロジックを分けてしまっているので、クラス構造をきれいにしたい
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
