(本記事)認識精度の高い画像認識AR用マーカーを作るコツ【はじめてのWebAR入門(3)】サーバーにデプロイして、スマホでARを体験する手順【はじめてのWebAR入門(4)】MindARで顔認識ARを作る手順【はじめてのWebAR入門(5)】MindARで画像認識ARを作ったが、表示されない時の対処法【はじめてのWebAR入門(番外編)】MindARについて今回は、MindARというライブラリを使っていきます。ドキュメンテーションはこちらです。ARを作るにあたって、A-FrameというWebフレームワークを使うやり方と、Three.jsというJavaScriptライブラリを使うやり方があります。今回は、A-Frameを使ったやり方をご紹介します。最小構成のコードを動かすまず、シンプルなコードを動かしてみましょう。適当なフォルダを作成し、その中にindex.htmlファイルを作成して、以下のコードを貼り付けます。クロスドメイン制約があるため、ローカルサーバーを立ち上げてアクセスしないと、カメラが立ち上がらないので注意が必要です。ChromeというChromeの拡張機能を使うと、とても簡単です。2023年6月現在、こちらの拡張機能がDeprecatedになっているようです。同じように使えるサービスがこちらです。folderのボタンをクリックして、先ほど作ったフォルダを指定しましょう。その後、http://127.0.0.1:8887にアクセスすると、画面が立ち上がります。カメラが立ち上がったら、こちら画像をかざしてみましょう。以下のように、マーカーの上に、青い長方形が重ねて表示されたら成功です!コードの解説コードを上からざっくり解読していきます。<head>の中で、メタタグと、いくつかのスクリプトを読み込んでいます。読み込んでいるスクリプトは、A-Frameのスクリプトと、MindARのスクリプトです。<body>の中には、<a-scene>と呼ばれるエンティティ(要素)を一つ置きます。これが、カメラが立ち上がった時に映るシーンとなります。a-sceneは以下の引数を持っています。https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.1/examples/image-tracking/assets/card-example/card.mind;"マーカー画像のパスを指定しています。false"A-Frameを使ってVRワールドを作ることもできるため、VRワールドに入るボタンや、互換性モーダルなどのUIが提供されています。falseを設定しておきます。false"デバイスモーションセンサーの使用許可を求めるモーダルの表示を設定します。falseを設定しておきます。<a-scene>の中に、<a-camera>と<a-entity>を置きます。<a-camera>がARを表示するためのカメラで、<a-entity>がマーカー画像を検知した時に表示されるオブジェクトです。<a-camera>も二つの引数を持っています。0"カメラの位置を決めます。原点に置いておきましょう。ヘッドマウントディスプレイやマウスを動かした時や、画面をドラッグした時に、オブジェクトをぐりぐり動かすかどうかを決めます。falseを設定しておきます。<a-entity>の引数は以下の通りです。ここまで設定してきた引数は、A-Frameでデフォルトで使えるものですが、次の引数はMindAR固有の引数です。0"複数画像をマーカー登録した場合に、targetIndexを指定します。単一画像マーカーを生成した場合は、0を入れておきましょう。<a-entity>の中には、<a-plane>が入っています。これを<a-box>や<a-gltf-model>などに置き換えれば、自由に表示オブジェクトを差し替えることができます。<a-plane>は平面を表示するためのエンティティで、引数でサイズや色などを指定しています。このあたりはA-Frameの記法なので、詳細は公式サイトなどから確認してみてください。マーカーを任意の画像に差し替えるマーカーを好きな画像に差し替えてみましょう。マーカー用ファイルを生成するマーカーは、専用コンパイラから作成します。任意の画像をアップロードします。複数画像アップすることも可能です。compiledボタンをクリックします。複数画像を登録した場合も、生成されるmindファイルは一つです。作成できたら、フォルダ内にmindファイルを置いて、<a-scene>のmindar-image="imageTargetSrc:の中のパスを書き換えてみましょう。※ファイル名はtarget.mindではなく、targets.mindであることに注意!新しい画像を認識させて、青い長方形を表示できたら成功です。良いマーカーの作り方については、別途こちらの記事(明日公開予定です)を参照してください。認識精度の高い画像認識AR用マーカーを作るコツ【はじめてのWebAR入門(3)】3Dモデルを配置する次に、planeの代わりに、3Dモデルを配置してみましょう。Sketchfabでモデルを探してみます。モデルによっては、商用利用が制限されていたり、帰属表記をしないといけなかったりするので、使用の際は必ず確認しましょう。Downloadボタンを押すと、ライセンスが以下のように表示されます。今回は、パブリックドメインとなっている、こちらのモデルを使っていきます。sizeが最も小さい(一番軽い)glbをダウンロードして、フォルダの中に入れておきます。<a-scene>タグの直下に、以下のようにアセットを追加しておきます。してアセットを別途事前に読み込んでおくことで、パフォーマンスが向上します。上のコードでは、ただアセットを読み込んだだけなので、実際にシーンに配置する必要があります。<a-plane>タグの部分を消して、以下のように書き換えます。srcの部分で、先ほどa-asset-itemの中で指定したidを呼び出し、表示します。<a-scene>の引数として、以下を追記しておきましょう。これを入れることで、glbモデルの色がより正確にARで表示されるようになります。physicallyCorrectLights"設定前後を見比べると、色味がかなり明るくきれいになったことがわかりますね。BeforeAfterさて、ここまでの全体のコードは、以下のようになりました。document.write('');Serendipityボタンを押すと、記事がランダムで表示されます。おみくじ代わりに遊んでもよし、今日のメッセージを受け取るもよし。週1回、限定コラムを配信しています。イベント・講座のお知らせを、読者の方限定でご案内することがあります。登録無料で、購読解除もワンクリックでできます。登録Loading...登録Loading...登録完了まであと少し!登録ありがとうございます!メールアドレスの確認メールをお送りしましたので、ボタンを押して登録を完了させてください。※迷惑メールボックスやプロモーションフォルダに入っていることがありますので、ご確認ください。