シリーズ目次
最小構成のコードを動かす
こちらも、シンプルなサンプルコードを動かしてみましょう。
適当なフォルダを作成し、その中にindex.htmlファイルを作成して、以下のコードを貼り付けます。
2023年3月現在、最新の1.2.1の顔認識のcdnが動作しないので、
https://github.com/hiukim/mind-ar-js/releasesのv1.2.0のdist.zipをダウンロードして、mindar-face-aframe.prod.jsとmindar-face.prod.jsをコピーして、index.htmlと同じ階層に置いてください。
画像認識ARを確認した時と同様に、ローカルサーバーを立ち上げてアクセスしてみましょう。
緑色のピエロのような鼻が表示されたら正解です！
※デベロッパーツールを開いていると、正しくモデルが表示されないことがあります。その場合、一旦デベロッパーツールを閉じて、画面をリロードしてみてください。
コードの解説
コードを上からざっくり解読していきます。
<head>の中で、メタタグと、いくつかのスクリプトを読み込んでいます。
読み込んでいるスクリプトは、A-Frameのスクリプトと、MindARのスクリプトです。
<body>の中には、画像認識同様、<a-scene>と呼ばれるエンティティ（要素）を一つ置きます。
引数は画像認識とほとんど同じですが、二つ追加されていますので、簡単に解説しておきます。
・mindar-face
これはMindAR専用の引数です。
・embedded
A-Frameの機能で、 <canvas>要素から、フルスクリーンのCSSを削除します。
これがないと、表示されるモデルが少し変形してしまいます。
<a-scene>の中に、<a-camera>と<a-entity>を置きます。
<a-camera>がARを表示するためのカメラで、
<a-entity>が顔を検知した時に表示されるオブジェクトです。
<a-camera>の引数でactive="false"が指定されています。
これは、複数カメラがあるシーンで、アクティブなカメラであるかどうかを指定する引数です。指定しないと、モデルが正しく顔に追随できなくなります。
<a-entity>の引数で、顔認識した際に、顔のどの部分にモデルを設置するかを設定しています。
・mindar-face-target="anchorIndex: 1"
このanchorIndexは、tensorflowの顔認識データの468箇所のポイントに対応しています。
対応箇所はリンク先の画像を参照してください。
画像サイズが大きく、どの部分が対応しているかを探しにくいので、こちらのリストも参照するとわかりやすいかと思います。
<a-entity>の中にある <a-sphere>がピエロの鼻に当たる部分です。
MindARは、顔の大きさに応じて、エンティティを拡大・縮小します。
radius="0.5"またはscale="0.5 0.5 0.5"を設定すると、ちょうど顔の幅くらいのサイズになります。
顔を左右に振ると、オブジェクトが追随するのは、MindAR側で、目の相対位置を使用して顔の向きを計算し、それに応じて回転を加えているためです。
オブジェクトを差し替える
ピエロの鼻の代わりに、画像を配置してみましょう。
こちらのツタンカーメンの画像を使ってみます。
画像をダウンロードして、フォルダ内に配置します。
<a-scene>の直下で、以下のようにアセットを呼び出します。
そして、
<a-sphere color="green" radius="0.1"></a-sphere>
と書いてある部分を、以下のコードに差し替えます。
<a-image>がA-Frameで画像を配置するためのコードです。
引数として、アセットのIDを渡すところは、画像認識で3Dモデルを配置した時と同じですね。
ポイントとして、縦横比に合わせてheightとwidthを設定しておくと、歪まずきれいに表示されます。
Zのpositionを0.05で設定しているのは、少し前に出さないと、鼻の部分が少しはみ出して、画像に穴が空いてしまうためです。
最終的なコードは以下のようになります。
このように、顔を認識してツタンカーメンになれたら正解です。
少々立体感に欠けてしまうのが難点ですが、画像は3Dモデルに比べるとフリー素材を探しやすいので、使いどころを工夫して使ってみましょう。
ぜひご覧ください。
0 コメント