Zenn
Linux Club - 東京工科大学Publicationへの投稿
🐦

【MindAR】サークルのチラシにARを実装した話【+Cloudflare Pages】

Mikuto
に公開
HTML
AR
大学生
Cloudflare Pages
MindAR
tech

ことの始まりと記事の概要

LinuxClub(以下LC)という東京工科大学のサークルでは、毎年4月に行われる大学の新入生歓迎会にてチラシを配布しています。
もちろん今年も開催されたので、フレッシュな新入生を集めるためにチラシの作成を行いました。
ただ、毎年同じ紙媒体を配るのは味気ないですし、ClubPortal(現在停止中)という学校のサークルを集めたLCのWebサービスも普及しきれてないため、「何か変わったことができないか」と部員でアイデアを考えました。
その結果、「ARを付けよう」ということになり、わずか2週間でARを実装することになりました。

本記事では、MindARというオープンソースのWeb拡張現実(AR)ライブラリを使用して、チラシ(画像)にARを実装するまでの過程をまとめています。MindARの基本的な使い方と、作成したWebサイトのCloudflare Pagesを使用した公開までを書いていますので、最後までご覧ください！

こんな人におすすめ

  • 基本的なHTMLが読める・書ける人
  • ARを使ってみたい人
  • 3Dモデルの使い道に迷っている人
  • Cloudflare PagesでWebページを公開したい人

この記事でやらないこと

  • Git/Githubの標準的な使い方
  • Cloudflaareの標準的な使い方
  • フェイストラッキング
  • 2つ以上のトラッキング・表示
  • MindARの細かい設定
  • DNSの設定方法

ARの実装 - MindAR

MindARでは、画像トラッキングとフェイストラッキングをサポートしています。今回、トラッキング対象とするのはチラシであるため、画像トラッキングを使用しています。

1. 表示する3Dアセット、または画像を用意する

MindARでは、3Dアセットの表示を行うことができます。もちろん2D画像の表示もできますが、ARとなると3Dアセットを表示したほうがなんかよくみえる気がします。
今回まとめている開発の中では、blenderを使用してロゴを3Dモデル化し、それを表示させました。

用意するべき3Dモデルは、gltfにフォーマットされた3Dモデルです。とはいえ、AFRAMEという(MindARのドキュメントにほぼ統合されている)ライブラリは基本的にすべての標準3Dフォーマットをサポートしてるため、ほかの3Dモデルも簡単に使用できます。

2. ターゲットにする画像をコンパイルする

トラッキングを行うターゲット画像を用意しただけでは、すぐにトラッキングすることはできません。ターゲット画像を取り込む前に、前処理を行う必要があります。この前処理では、ターゲット画像から特徴点を取り出すコンパイルを行います。このコンパイルは、MindAR公式が用意しているコンパイラを使用することで簡単に行えます。

コンパイル後、ダウンロードできるtargets.mindを入手できれば準備完了です。早速トラッキングしてみましょう。

3. ARを表示するWebページを作る

トラッキング対象の画像をカメラで読み取り、その上にアセットを表示する画面を作成します。見た目を大きく変更させない限り、ドキュメントと同じ構成のindex.html targets.mindがあれば簡単にWebページを構築できます。
以下は3Dアセットを表示するHTMLです。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 3.1 -->
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
</head>

<body>
<!-- 3.2 -->
  <a-scene
    mindar-image="imageTargetSrc: ./targets.mind; filterMinCF:0.1; filterBeta: 10"
    vr-mode-ui="enabled: false"
    device-orientation-permission-ui="enabled: false"
  >
<!-- 3.3 -->
    <a-assets>
      <a-asset-item id="avatarModel" src="./lc.gltf"></a-asset-item>
    </a-assets>
    <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<!-- 3.4 -->
    <a-entity mindar-image-target="targetIndex: 0">
      <a-gltf-model rotation="0 0 0" position="0 -0.7 0" scale="0.3 0.3 0.3" src="#avatarModel">
    </a-entity>
  </a-scene>
</body>

</html>

(説明のために4つコメントアウトを入れています。)

3.1 スクリプトの読み込み

以下の2つを読み込むことで、MindARを使用することができます。

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>

3.2 ターゲット画像を読み込む/トラッキング準備

ターゲットとする画像を、a-sceneタグを使用して読み込みます。
また、このタグではトラッキングやUIのカスタムを行うことができます。

<a-scene mindar-image="imageTargetSrc: ./targets.mind; filterMinCF:0.1; filterBeta: 10" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

3.3 表示する画像・3Dモデルを読み込む

画像の場合は標準のimg、3Dモデルの場合はa-assetsを使用してアセットを読み込みます。
これらのタグにidを指定しておくと、表示する際に楽に指定することができます。

<a-assets>
    <!--<img id="card" src="./example.png" />-->
    <a-asset-item id="avatarModel" src="./lc.gltf"></a-asset-item>
</a-assets>

3.4 画像・3Dモデルの向きやアニメーションを調整して表示する

先ほど読み込んだ表示する画像・3Dモデルのidをsrcに指定します。
また、a-gltf-modelでは、rotationやposition scaleを以下のように調整することができます。

<a-entity mindar-image-target="targetIndex: 0">
    <a-gltf-model rotation="0 0 0" position="0 -0.7 0" scale="0.3 0.3 0.3" src="#avatarModel">
</a-entity>

画像や、単色の平面を表示したい際は、以下のような例になります。

<a-entity mindar-image-target="targetIndex: 0">
    <a-plane src="#card" position="0 0 0" height="0.4" width="1" rotation="0 0 0"></a-plane>
</a-entity>

ちなみに、MindARでは複数アセットを同時に表示することができます。その場合、重なり順序を決めるために、a-entityでtargetIndex: 0のように指定する必要があります。

ARを表示するページの公開 - Cloudflare Pages

ARを表示する準備は整いました！
とはいえ、Live Goなどを使ったlocalhostでの公開では、いつでもチラシを受け取った方にARを体感してもらえないので、サーバーから公開したいところです。
家やVPSサーバがあれば解決できますが、今回はCloudflare Pagesというサービスを使用してCI/CDからhttpsを使用した公開までを簡単に行います。

1. Github レポジトリの準備

Github上のレポジトリを連携して、自動的にWebページを公開させる形になります。手始めに、先ほどまで用意していた2つ(以上)のファイルが含まれるリモートレポジトリを作ります。
試すだけ、簡単にするだけであればindex.htmlをレポジトリのルートディレクトリ配置すると楽にできます。

2. Cloudflare Pagesの設定

次に、Cloudflare PagesにGitHubのレポジトリとディレクトリの設定を行います。
Cloudflareのダッシュボードにアクセスすると、サイドバーにWorkers&Pages(以下の画像にある赤矢印のさす場所)という項目があります。

こちらを選択すると、WorkersとPagesでそれぞれタブ出てきます。今回使用するのはPagesですので、そちらを選択してください。

2.1 レポジトリの選択

「既存の Git リポジトリをインポートして作成する」という項目にある「Gitに接続」を選択すると、レポジトリの選択画面が出てきます。
こちらで、先ほど用意したレポジトリを選択します。

2.2 ビルドとデプロイのセットアップ

レポジトリ選択後、本番環境のブランチとビルドについて設定を行えます。
今回は、GitHub Flowをベースとすること、HTMLを使用するためbuildの必要がないため、何も変更を加えずに次へ進みます。

2.3 デプロイ

最後に「保存とデプロイ」を押すと自動的にドメインが割り当てられ、全世界に公開されます！
HTMLのサイトであればこれで完了です。888888

3. カスタムドメインの設定

デプロイした後に自動的にドメインが割り当てられますが、<example>.pages.devと決められたドメインのサブドメインが割り振られています。団体や個人が保有するドメインに変更する場合、カスタムドメインの設定を行うことで、任意のドメインに設定することができます。
Workers&Pagesから、先ほど作成したプロジェクトを選択して以下の画像の場所を開きます。

上記の画面にある、カスタムドメインという項目から設定を行います。
「カスタムドメインの設定」を選択すると、カスタムドメインの入力を求められます。
Cloudflareで管理しているドメインであれば、そのドメインとサブドメインを書けば自動で追加されます。
自身で用意したDNSで管理している場合は、使用したいカスタムドメインを入力後、CNAMEで<example>.pages.devをDNS上で設定する必要があります。こちらを設定した後に、Cloudflareから確認があるので開通するまでしばらく待つことになります。

4. 確認！

設定したカスタムドメイン、もしくは自動的に割り振られたドメインからページを確認してみましょう！
うまくいっていれば、手元の環境と同じものが表示されるはずです。

終わりに

今回は、MindARとCloudflare Pagesを使用して、簡単にARサービスを構築する流れを紹介しました。
読み込み速度や、UIの独自性など、改善できる点はたくさんあるとはいえすごく簡単に作成することができます。
サークルや個人で作成したものに、ちょっとしたものを追加させたいときにぜひ使ってみてください！

LinuxClub

チラシにARを実装させてもらったサークルです。一緒に技術を学ぶ・遊びたい東京工科大学の学生さんや、「一緒にイベントや企画してみませんか？」というお話大歓迎です！
https://www.linux.it.teu.ac.jp

Linux Club - 東京工科大学
Linux Club - 東京工科大学Publication

東京工科大学公認サークル ソフトウェア開発/ネットワーク/電子工作/オンプレサーバ/セキュリティなど、ITを中心に創作活動を通して得た知見・経験をお届けします。 ※このPublicationは東京工科大学「Linux Club」所属部員による見解であり、所属する大学・サークルの公式見解ではありません。

Discussion