じゅころぐAR

ARのブログ

WebAR-Articleを動かしてみた

WebARに注目して定点観測しているGoogle ARのGithubプロジェクトにWebAR-Articleなるリポジトリが追加されていました。
実際に動かしてみたところ、WebサイトにARコンテンツを埋め込むサンプル(Google非公式扱い)でした。

github.com

動かしてみる

READMEのGetting Startedに従って、インストール&実行していきます。

Macのターミナルを起動し、以下のコマンドを実行します。
実際にはインストールログがたくさん出ます。

$ git clone https://github.com/google-ar/WebAR-Article.git
$ cd WebAR-Article/
$ npm install

無事インストールができたら、npm run devで実行してみます。

$ npm run dev
...
webpack: Compiled successfully.

上記のメッセージが出たら、webpackでローカルサーバが立ち上がっています。この状態のままブラウザ(Chrome等)でhttp://localhost:8000/public/にアクセスするとWebページが閲覧できるはずです。
プロセスを停止したいときは、ターミナルでCtrl+Cです。

PCブラウザで見ると以下のようなWebページになっています。 f:id:jyuko49:20171206124957p:plain

宇宙服の3Dモデルが表示されているcanvas(画像の右下)でthree.js,three.ar.jsが使われています。
フルスクリーンボタンをクリックすると全画面で3Dモデルをグリグリ動かすことができ、✕ボタンで元の記事に戻ります。 f:id:jyuko49:20171206231230p:plain

WebARブラウザで見る

現状ChromeやSafariにWebARの機能は実装されていないため、Google ARからWebARブラウザをインストールする必要があります。

各ARプラットフォームに対応したスマートフォンを用意してブラウザアプリをインストールします。
ARCore、Tangoはリンク先からAPKファイルを使ってインストールするだけでOKで、ARKitだけXcodeでのビルド&インストールが必要です。

jyuko49.hatenablog.com

WebARブラウザをインストールしたら、MacのローカルIPを使い、先程立ち上げたローカルサーバに同一のローカルネットワークから接続します。
MacのIPは、ターミナルでifconfigを実行すれば調べられます。

$ ifconfig
...
    inet 192.168.0.4 netmask 0xffffff00 broadcast 192.168.0.255
...

localhostの部分をこのIPアドレスに変えて、http://192.168.0.4:8000/public/をアドレスバーに入力すると、WebARonTangoでWebAR-ArticleのWebページが見えました。 f:id:jyuko49:20171206223323j:plain

canvasには、WebARブラウザで見たときだけ、AR閲覧用のボタン(右下)が表示されています。

このボタンをタップするとARモードに切り替わり、平面に3Dモデルを置いて見ることができます。フルスクリーンと同様に✕ボタンで元記事に戻れます。 f:id:jyuko49:20171206223240j:plain

ざっくり構成を理解して使う

WebAR-ArticleはApache 2.0ライセンスのため、ライセンス表記さえ守ればで、一部改変して利用ができます。

サンプルのWebページはpublic/index.html内でindex.min.jsを読み込んでおり、id="arapp"を付与したcanvasにWebAR対応コンテンツを埋め込んでいます。
その他の部分は、通常のWebと同様に記事を書けばよさそうです。

<canvas id="arapp" height=400></canvas>
<script src="js/index.min.js "></script>

canvasに表示するコンテンツの実体はsrc以下のスクリプトで、npm run buildを実行するとwebpackでバンドル・圧縮されて/public/js/index.min.jsが作られます。

$ npm run build

開発の手順としては、

src以下のソースを改変
npm run build
→index.htmlでindex.min.jsをinclude
→canvas要素(id="arapp")を追加 →public以下のファイルをWebで公開

になります。

srcに手を入れると言ってもそこそこ複雑な作りなので、three.jsに詳しくなければ、以下の3ファイルをざっと見て、3Dモデルを差し替えて使う程度がベターだと思います。

  • src/index.js
    コンテンツを表示するcanvas要素のタグを定義しています。実質的なメイン処理はApp.jsです。
  • src/app/AppBase.js
    App.jsの基底クラスです。three.ar.jsを使って3Dシーンの基本構成を行なっています。
  • src/app/App.js
    シーンを構成するコンテンツをセットアップするメイン処理です。

3DモデルはApp.jsのloadMaterialloadModelでloadしており、このメソッド内に記載されているファイルパスを書き換えれば変更できます。

import DRACOLoader from '../../third_party/draco/DRACOLoader';

...

  loadMaterial = () => {
    let mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('../public/models/Astronaut/');
    mtlLoader.load('Astronaut.mtl', materials => {
      materials.preload();
      this.loadModel(materials.materials.Astronaut_mat);
    });
  };

  loadModel = material => {
    let dracoLoader = new DRACOLoader('../third_party/draco/', {
      type: 'js',
    });

    dracoLoader.load('../public/models/Astronaut/Astronaut.drc', geometry => {
      geometry.computeVertexNormals();

      this.setupModel(new THREE.Mesh(geometry, material));
      this.setupModelShadow();
      this.setupLights();
      this.setupARControls();
      this.setupAREffects();
      this.setupReticle();
      this.setupModelTween();
      this.parseURL();
      this.HUD.hideLoadingIndicator();
    });
  };

ファイルフォーマットにDracoが使われているので、別のフォーマットを使いたい場合はパスの変更だけでなく、loaderも切り替える必要があります。
three.jsのリポジトリにサードパーティ製ライブラリが揃っているので、必要なライブラリをimportして使えば問題ないと思います。

所感

Webサイトの記事にAR対応の3Dコンテンツを埋め込んで使う利用方法は、画像やブラウザ内の3D表示よりも実物をイメージしやすくてよいと感じます。
ショッピングサイトやニュースなど、利用シーンも想像しやすいです。

ただ、WebAR全般の課題としてARCore/ARKitの対応デバイスが普及し、機能がChromeやSafariに標準搭載されてくれないと利用者が限定されてしまうため、実際にこのような使い方ができるのは、もう少し先の話になりそうです。

また、このサンプルだとthree.jsやwebpackを使えないとWebARコンテンツが変更できないので、A-FrameのようにHTMLレベルでモデルデータを指定して埋め込めるとより手軽に使えてよいですね。