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

仁木

2021/07/14

どうやってWebARを作る？
1. 実装はHTMLファイルにマークアップするだけ
自分の名刺を表示させる
まとめ

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

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

どうやってWebARを作る？

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

（左が「A-FRAME」サイト、右が「AR.js」サイト）

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

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

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

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

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

自分の名刺を表示させる

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARテスト</title>

  <!-- AFRAME読み込み -->
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <!-- AR.js読み込み -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

</head>
<body style="margin : 0px; overflow: hidden;">
  <!-- ライブラリの読み込みが完了するまでのローディングメッセージ -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene embedded vr-mode-ui="enabled:false;" arjs="debugUIEnabled:true; detectionMode: mono_and_matrix; matrixCodeType: 3x3; patternRatio:0.6">
    <!-- 名刺の画像を準備 -->
    <a-assets>
      <img id="front" src="card-front.jpg" />
    </a-assets>
    
    <!-- マーカーのタグの中に表示させたいオブジェクトをマークアップする -->
    <a-marker type='pattern' url='pattern-logo.patt'>
      <a-plane
        position="0 .75 0" 
        rotation="0 0 0"
        width="1.75"
        material="src: #front;">
      </a-plane>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ARテスト</title>

</head>

<div>Loading, please wait...</div>

</div>

<a-scene embedded vr-mode-ui="enabled:false;" arjs="debugUIEnabled:true; detectionMode: mono_and_matrix; matrixCodeType: 3x3; patternRatio:0.6">

<a-assets>

</a-assets>

<a-marker type='pattern' url='pattern-logo.patt'>

<a-plane

position="0 .75 0"

rotation="0 0 0"

width="1.75"

material="src: #front;">

</a-plane>

</a-marker>

<a-entity camera></a-entity>

</a-scene>

</body>

</html>

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

まとめ

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