渡邉 浩和 こんにちは、大阪事業所の渡邉です。
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も表示できるようになっているようです。
また新しい企画を考えて使ってみようと思います。
