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

のえる のえる 2019.05.24

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

 

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

はじめに

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

カメラ

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

 

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

HTTPS通信(SSL)

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

実装してみる

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

 

今回は AR.jsaframe を使っていきます。

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

 

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

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

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

 

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

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

 

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

さいごに

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

POPULAR

のえる

書いた人

のえる

Full-stack Developer / Guitarist