WebARで自分の名刺を表示して遊んでみた

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. WebARで自分の名刺を表示して遊んでみた

WebARで自分の名刺を表示して遊んでみた

WebARで自分の名刺を表示して遊んでみた

昨今スマホではAR(拡張現実)を活用したアプリやWebサービスがたくさんリリースされていますよね。
先日、スマホアプリの「落書きAR」というアプリにハマって「自分もARをやってみたい!」と思い、超簡単なWebARを作ってみました。

ちなみにWebARとは、AR(拡張現実)をWeb上で体験できるサービスやサイトのことです。

どうやってWebARを作る?

ARってWeb上で実装するのは難しいのかなと思っていましたが、「A-FRAME」と「AR.js」という2つのライブラリを使うとめちゃくちゃ簡単に作成できました。
A-FRAMEAR.jsはどちらもJavascript製のライブラリです。

 
(左が「A-FRAME」サイト、右が「AR.js」サイト)

実装はHTMLファイルにマークアップするだけ

実装はシンプルです。
A-FRAMEとAR.jsのスクリプトを読み込んで、A-FRAME独自のHTMLタグでマーカー3Dオブジェクトをマークアップしていきます。

マーカーに設定した画像をカメラ内で認識すると、そこに3Dオブジェクトが表示されます。

上のスクショは、Webページでスマホのカメラを起動して、球体を表示するARです。
球体の下に表示させている弊社ロゴがマーカーです(iPadにマーカー画像を表示させています)。指定してあるマーカーを認識するとそこに3Dオブジェクトが表示されるんですね。
ビックリするくらい簡単にできました。

何も調整していないので、精度はそこまで高くなくマーカーから少し離れたり近づきすぎたりするとオブジェクトが消えてしまいます。

自分の名刺を表示させる

今度は球体ではなく、自分の名刺を出現させてみたい。

実装はほとんど変わらず、変える箇所は2点だけです。

  1. オブジェクトを球体から平面に変える。
  2. 平面のマテリアルに名刺の画像ファイルを設定する

マテリアルとは3Dオブジェクトの材質や質感です。マテリアルを調整するとオブジェクトの質感を金属みたいに光沢のあるものや、ブロックのようなざらざらした質感を表現できます。
名刺をカメラで撮影して、Photoshopで綺麗に整えた画像を平面オブジェクトのマテリアルに指定しました。

平面で正面からのキャプチャなので分かりづらいですが、3Dで名刺が浮かび上がっています。

名刺を表示させたWebページのソースコードは下記となります。

たったこれだけのコードでWebARができるとは、拍子抜けするくらいお手軽でした。
手っ取り早くWebARを作って体験したいという方はオススメです。

まとめ

AR自体はもう数年以上も前からスマホアプリなどでずいぶんと普及し始めていると思います。
アプリでは「ポケモンGO」が2016年にブームになっていましたよね。公園とか、道端でスマホ片手に人々がたむろしている光景が思い出されます。
もう5年前からのことですが、Webの体験としてARが定番化されるにはまだもう少し時間がかかりそうです。それでもARサービスをパッケージングしてビジネスにしている企業も昨今見られるようになったので、近い将来もっと幅広い業種で活用されるようになりそうです。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら