アプリ不要?AR.jsで簡単WebAR開発


こんにちは。
製造建設ソリューションサービス部の菱沼です。

昨今、ARという言葉を至るところで目にする機会が多くなったかと思います。

ARが世間に広まると同時に、AR開発ツールも世に出回るようにもなりました。
代表的な開発ツールとしてAppleの「ARKit」やGoogleの「ARCore」などが有名ですが、今回はWebAR開発ツール「AR.js」でWebARコンテンツ開発を行いたいと思います。

ARについて詳しく知りたい場合は、こちらをご覧ください。

AR.jsとは

  • JavaScriptライブラリでインストールの必要性がない
  • オープンソース(無料)
  • 軽量かつ高速
  • WebGLとWebRTCで動作可能
  • iOS端末ではiOS11から動作

「AR.js」は無料で誰でも簡単にAR開発ができ、気軽にAR体験ができるWebAR開発ツールです。
「AR.js」とWebVRフレームワークである「A-Frame」を利用してWebARコンテンツ開発を行っていきます。

webARコンテンツを開発してみよう!

今回はマーカータイプと呼ばれる、
スマートフォンのカメラを利用して特定の位置に3Dモデルを表示するWebARコンテンツを開発します。

次のようなステップで説明をしていきます。

  1. Webページ作成
  2. 3Dモデルのダウンロード
  3. コーディング
  4. ホスティングサービスにアップ
  5. マーカーの用意
  6. WebAR体験!

1.Webページ作成

web開発するには欠かせない、HTMLファイル(ここでは「index.html」)を作成します。
「index.html」に以下の内容(HTMLの初期設定)を書き込みます。

書き込んだ後、新しくフォルダ(ここでは「WebAR」)を作成し、「index.html」を格納します。

2.3Dモデルのダウンロード

Googleが公開しているVR/AR向け無料3Dオブジェクトライブラリ「Poly」から3Dモデルをダウンロードします。
今回は金魚の3Dモデルを利用しています。
金魚3Dモデル

ダウンロードファイルを解凍し、展開したデータを「index.html」と同じフォルダに配置します。
また、ファイル名にスペースが入ってしまっているのでファイル名を変更します。
※テクスチャファイル『.png』の拡張子のファイル名は変更しないでください。表示がされなくなります。

各ファイルの詳細は以下になります。
「.png」 :テクスチャ
「.mtl」:マテリアル(材質)
「.obj」 :3Dモデル本体

3.コーディング

コーディングというと難しいイメージがありますが、冒頭に述べた通り、「AR.js」は簡単に開発を行うことができますので、心配ありません。
以下の新規追加と書かれている内容を「index.html」に書き込みます。

コメントでも解説していますが、ソースコードの流れとしては以下のようになります。

  1. A-Frameライブラリを読み込む
  2. AR.jsライブラリを読み込む
  3. A-Frameの空間にAR.jsライブラリを紐付ける
  4. 3Dモデルの読み込み(オブジェクトとマテリアル)
  5. マーカーの読み込み(マーカーは5.マーカーの用意で用意します)
  6. マーカーの位置にモデルを配置する(サイズ・位置・配置するオブジェクトとそのマテリアルを指定)
  7. AR用のカメラを配置する

4.ホスティングサービスにアップ

スマートフォンで確認するため、無料ホスティングサービス「BitBalloon」を利用します。
サイトにアクセスし、「WebAR」フォルダを『Drag Your Site Folder Here』にドラッグ&ドロップします。

ドラッグ&ドロップすると「~.bitballon.com」といったURLが表示されるので、『https://』+『表示されたURL』をスマートフォンのWebブラウザで開きます。(カメラを利用するため、https接続が必要になります)
するとカメラへのアクセスを求められるので『許可』を押します。

5.マーカーの準備

「AR.js」がデフォルトで用意している「Hiro」マーカーを利用します。こちらの画像をPC上に表示させるか、プリントアウトしてください。

6.WebAR体験!

それでは最後に、WebARを体験してみましょう。
スマートフォンで開いたカメラをマーカーに合わせます。

すると、金魚がマーカー上に表示されました!
今回は3Dモデルを配置しただけでしたが、移動させたり回転させたりすることも簡単にできますので、興味のある方は是非お試しください。

最後に

WebAR開発お疲れ様でした。いかがでしたか?
開発と聞くと難しそう・時間が掛かるようなイメージがあると思われますが、
簡単なものですとこのようにすぐ作成することができます。

様々なAR開発ツールが世に出回っていますが、目的に合わせて使い分けをすることも重要かと思います。
今後もAR開発ツールで簡単なコンテンツ制作を行っていきたいと思います。

 

 

株式会社キャパでは、AR・VR・CADの開発・改善についてご相談を承っています。

作業効率化したいので、具体的な提案が欲しい。頭の中にあるアイデアを本当に実現できるのか知りたい。予算内に収まるのか?
などのお客様のご相談に、親身に応じます。
VR開発:サービスのご紹介

保存保存


関連記事一覧

  1. capa amazon echo
we love develop
アプリやシステムの開発を通じて、お客様のビジネスを成長させることが私たちのビジネスです。お気軽にお問い合わせください。
 お問い合せ

お電話でのお問い合わせはこちらから
TEL:03-5297-2871

メールマガジンの登録

キャパでは誰かに話したくなるようなIT小ネタを、週に一回メルマガで配信しています。
ぜひ購読してみませんか?
 購読する

ホワイトペーパーの入手

ITブログ月間20万PV達成!自社オウンドメディアの運用ノウハウを無料公開しています。
 ダウンロード

記事カテゴリ記事カテゴリ

月別投稿記事

PAGE TOP