MISW.github.io

WebARコンテンツを作ってみよう

はじめに

拡張現実（Augmented Reality）は、現実世界にコンテンツを重ね合わせて表示することを可能にする技術です。携帯電話のようなハンドル型、ヘッドセット、デスクトップディスプレイなど、いくつかのタイプのデバイスに提供することができます。(公式ドキュメントより引用)

AmazonのARビューやW大学のAR卒業式など、近年話題になっているARコンテンツを実際に作ってみましょう。アプリをインストールしなくてもブラウザ上で動くので、気軽に他の人に試してもらうことができ、AR名刺などにも応用ができます。

使用するサイト一覧

A-frame

A-frameはHTMLタグを用いて、箱や円柱などのオブジェクトをWeb上で表示できるライブラリです。まずは、箱を表示させてみましょう。 CodePenにアクセスして、HTMLの部分に以下のコードを貼り付けます。

<html>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <body>
        <a-scene>
            <a-box position="-1 1 -2"  color=blue></a-box>
        </a-scene>
    </body>
</html>

すると、このような画面になります。 W A S Dで移動、右クリックで視点移動ができます。

まず、A-frameのライブラリを読み込みます。次に、<body>の中の<a-scene>で空のシーンを作成し、その中の<a-box>で箱を生成します。 <a-box>の属性で位置と色を指定しています。箱以外にも、円柱や球などのオブジェクトがあったり、位置や色以外にも、様々な属性を設定できます。気になる人はA-frameの公式サイトで調べて見てください。

次に、インスペクター上で操作してみましょう。先程のシーンを選択した状態でCtrl+Alt+iを押すとこのようなインスペクター画面が開きます。

ｈキーを押すとこのようなヘルプ画面が出ます。

インスペクター上で球を生成してみましょう。左上の＋ボタンをクリックして、空のオブジェクトを生成します。

次に、Add componentの部分にgeometryと入力します。

今回は、球を作成したいので、primitiveの部分をboxからsphereに変更します。

このままでは、球が見えにくいので移動させます。動かす前に、componentにpositionを追加します。

マウスの左クリックで視点移動し、球を選択した状態でwキーを押すと、矢印が表示されます。この矢印を使って球を箱の隣まで移動させます。

次に、色を設定します。先程と同様に、componentにmaterialと入力し、materialを追加します。

materialのcolorのところから色を変更できます。

次に、ここまでの変更点をhtmlに書き込みます。右上のコピーボタンを押して、htmlをコピーします。

コピーしたものを左のHTMLの中の<a-scene>の中に貼り付けます。

すると、このように球も表示されます。

A-frameは理解出来ましたか？今度はこれをAR上で表示させてみましょう。

AR.js

まずは、以下のコードをコピーします

<html>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body>
        <a-scene embedded arjs>
            <a-marker preset="hiro">
                <a-box position="-1 1 -2"  color=blue></a-box>
                <a-entity geometry="primitive: sphere" position="0.63602 0.69981 -2.36964" material="color: #ff0000"></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

先程までのプログラムにAR.jsライブラリ、<a-scene>の中にarjsと<a-marker>とcameraが追加されています。

次に、Glitchにアクセスします。右上のNew Projectからhello-webpageを選択し、プロジェクトを作成します。

左からindex.htmlを選択し、中身を先ほどコピーしたものに変えます。

左上のShareからLive Appを選択してURLをコピーします。(このURLは人によって違います)

QRCode Monkeyにアクセスして Your URLの部分に先ほどコピーしたものを貼り付け、Create QR Codeをクリックします。

スマホでQRコードを読み込み、以下のマーカーにかざします。

以下のようになれば完成！

応用編

ここまで、A-frameとAR.jsの基本的な使い方について学んできました。ここからは、発展的な内容をやっていきます。

自作マーカーを使ってみる

AR.jsではプリセットのマーカーだけでなく、自作のマーカーを使うこともできます。まずは、AR.js Marker Trainingにアクセスしてマーカーをにしたい画像をアップロードして、マーカーと画像ダウンロードします。QRコードをマーカーとして、使う場合はQRCode MonkeyでBody Shapeを変えてください。

マーカーがダウンロード出来たら、Glitchのプロジェクトの左上のNew Fileの中のUpload Fileから先ほどダウンロードした拡張子が.pattのファイルをアップロードしてください。

アップロードが完了したら、assetsの中にある先ほどアップロードしたファイルを選択して、リンクをコピーします。

コピーが出来たら、<a-maker>の属性を以下のように書き換えます。画像のURLの部分は先ほどコピーしたものを貼り付けてください。

<html>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body>
        <a-scene embedded arjs>
        <a-marker type="pattern" url="画像のURL">
            <a-box position="-1 1 -2"  color=blue></a-box>
            <a-entity geometry="primitive: sphere" position="0.63602 0.69981 -2.36964" material="color: #ff0000"></a-entity>
        </a-marker>
        <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

これで、自作マーカーでも認識できるようになります。また、読み込みに時間はかかりますが、新しいバージョンのAR.jsから、画像認識に対応しています。気になる人は、公式ドキュメントを参照してください。

GitHub Pagesの利用

Glitchはログインしないと、５日でデータが消えてしまいます。消えないように、このサイトにも使われているGitHub Pagesを使ってみましょう。 GitHubにログインして、New repositoryをクリック Repository nameに好きな名前を付け、Create Repositoryをクリック

creating new fileをクリック

file nameにindex.htmlと入力 Edit new fileに先ほどコピーしたコードを貼り付けて Commit new fileをクリック

Settingsをクリック下にスクロールしてGitHub PagesのSourceを Noneからmaster branchに変更

https://ユーザー名.github.io/レポジトリ名前からアクセスできます。 Progateにも同様のことが書いてあるのでわからなかったそちらも参照してください。

自分で作った3Dモデルを使ってみよう

A-frameは、glTFやobj形式の3Dモデルを読み込むことができます。 glTFファイルはblender2.8などの3DCGソフトで出力することができます。今回は、blenderで作ったこのモデルを使います。

先ほど同様に、GitHubのリポジトリを作成して、index.htmlに以下のコードを貼り付けます。 idは何でも大丈夫です。3Dモデルのファイル名は、後でアップロードするファイルの名前を入れてください。 A-frameでは、他のファイルを使う場合は、<a-asset>でアセット化してから、読み込みます。

<html>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body>
        <a-scene embedded arjs>
            <a-assets>
                <a-asset-item id="suzanne" src="3Dモデルのファイル名"></a-asset-item>
            </a-assets>
            <a-marker preset="hiro">
                 <a-gltf-model src="#suzanne"></a-gltf-model>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

次に、GitHubにファイルをアップロードします。リポジトリ上のUpload filesからファイルのアップロードができます。

アップロード出来たらCommit changesをクリックして、保存します。

アップロードが完了したら先ほど同様にして、スマホから見ると以下のようになります。