ブラウザで簡単にAR機能を実装する

少し前は専用のアプリでARを実装していました。
しかしそれから時代は進み、ブラウザの機能だけでもARを実装することが可能になりました。

今回はそんな情報を掲載していこうと思います。

はじめに

AR機能を実装するにあたり、いくつか必要なものがりますので、先にご紹介します。

カメラ

当たり前ではありますが、AR機能を使うにはカメラが必要です。
スマホの場合、ほとんどはカメラがありますが、ない場合は実装してもご確認いただけません。

また、今回は スマホ を対象としています。
PCのブラウザでの動作は保証しておりません。
詳しい動作保証に関しては、各ライブラリをご参照ください。

HTTPS通信(SSL)

ブラウザでカメラ機能を使うには、HTTPSでの通信が必要です。
自己証明書（オレオレ証明書）によるSSL通信ができるサーバーが必要です。

実装してみる

では実装していきましょう。

今回は AR.js と aframe を使っていきます。

実装はたったこれだけです。
ここまで実装出来たら このマーカー をカメラでかざしましょう。

どうですか？
「カメラでマーカーを認識した時」 と 「カメラからマーカーを外したとき」 にそれぞれアラートが出ていると思います。

オリジナルマーカーを実装する

サンプルのマーカーでは味気ない、そんなときには自分でマーカーを作ることができます。
オリジナルマーカーは コチラ から作成できます。

上記サイト内の 「UPLOAD」 で画像をアップロードすると、サイト中央にマーカーが表示されます。
その下のスライダーで黒枠の大きさを調整し、中央のマーカーの上にある 「DOWNLOAD MARKER」 というボタンをクリックして、マーカーファイルをダウンロードしましょう。

ここまで作成したら、先ほどの画面で作成した黒枠がついたマーカーをカメラでかざしましょう。
先ほどと同じように、マーカーの表示・非表示でアラートが表示されると思います。

あとはIDやクラスをつけて、自由に操作していきましょう。

さいごに

この仕組みを知るまで、こんなに気軽にARが実装できるとは思いませんでした。
ARがどんどん身近になっていくのではないでしょうか？