2020/1 A-Frame + AR.jsをつかって年賀状をつくりました。

渡邉浩和

2020年1月8日に公開大阪

こんにちは、大阪事業所の渡邉です。
ARで何かしらを作りたかったのでカジュアルに作ってみました。

なにをつくったの？

↑これを作りました。

スマホをとりだして、

QRコードをスマホで読みとり、
カメラへのアクセスを許可して、
カメラを正の字に向けてみてください。

3Dモデルが表示されたかと思います。

どうやってつくったの？

AR.jsという「WebARを簡単お手軽に実装できる」ライブラリを使いました。 https://github.com/jeromeetienne/AR.js

ソースはこんな感じです。

<!doctype HTML>
<html>
<!-- ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<body style='margin:0px; overflow:hidden;'>
<!-- A-FrameにAR.jsを紐づける、ARマーカーのパターンレシオを設定 -->
<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;patternRatio:0.90;" vr-mode-ui="enabled: false">
    <a-assets>
        <!-- 3Dオブジェクトを設定 -->
        <a-asset-item id="nenga-obj" src="model_obj/nenga/nenga.obj"></a-asset-item>
        <a-asset-item id="nenga-mtl" src="model_obj/nenga/nenga.mtl"></a-asset-item>
    </a-assets>
    <!-- 自作したARマーカーを指定 -->
    <a-marker type="pattern" url="pattern-syou.patt">
        <a-obj-model id="nenga" src="#nenga-obj" mtl="#nenga-mtl" position="0 0 0" scale="0.5 0.5 0.5" rotation="0 0 0"></a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

上のgithubからget-startedのところに書いてあるサンプルをコピペして、用意した3Dオブジェクトを表示するように書き換えたら完了です。
ARマーカーは、画像をアップロードするだけでマーカーを作ってくれるサイトがあるので、こちらを使用してください。

3Dオブジェクトはどうやってつくるの？

blenderというオープンソースの統合型3DCGソフトウェアを使ってモデリングしました。
(平面に画像張るだけで2日溶けました。)
blenderの使い方等は、紹介している方がたくさんいらっしゃるので、リンクだけ置いておきます。

モデル作成のいろは
 Blenderがサポートする出力
 brender2.8の操作、動画紹介
 blenderとar.jsとのオブジェクトの向きの違い
 3Dな文字の作り方
 平面に動画を張る(これを参考に画像を張る)

blenderで頑張るのは嫌だ！

3Dデータ素材共有サイトがあります。
.obj形式を選択してダウンロードしてくれば良いだけです。
商用利用する際はライセンスを確認して使用してください。

どうやって公開してるの？

AWS S3にソースや、3Dオブジェクトを配置して、AWS CloudFrontにキャッシュさせて配信しています。
S3にはWebサイトホスティングの機能もあるので、より簡単に公開することも可能です。

まとめ

A-Frame + AR.jsで簡単にAR年賀状を作成しました。
今回の開発ではじめてA-FrameとかAR.jsを触りましたが、何も考えないで使えます。便利便利。

開発にかかった時間は（帰宅後の4時間*1週間）くらいでした。ほとんどblenderに持っていかれました。

AR.jsはv2.0.0からロケーションベースのARも表示できるようになっているようです。また新しい企画を考えて使ってみようと思います。

お借りしたもの

年賀状デザイン
 Mouse