新年あけましておめでとうございます🎍
本年もよろしくおねがいいたします！
さて、ARチョットデキルWebエンジニア、略してARエンジニアの私としましては、AR年賀状を作ろう！と毎年のように考えているのですが、師走って忙しいんですよね。
結果的に過去3年作らずに終わってしまったので、今年こそ突貫でいいから作ろうと思い、なんとか公開に至りました。
あらためて、あけぽよ🎍 pic.twitter.com/7TUn1dzbJA
— jyuko🐼 (@jyuko49) 2020年12月31日
まず年賀状を書く
こちらです。ハガキサイズじゃない気がするけど、気にするな。
全体的にやっつけ感が溢れるデザインですね。
5分で作った雰囲気があります（実際にはもう少しかかった）
見た人が体験しやすいのはWebARなので、予めアップ先のURLを決めておいてQRコードを付けています。
フレームワークを選ぶ
先程も書いたとおり、WebARの方がいいかなと思ったのと画像にARを重ねたいので、AR.jsのImage Trackingを使いました。
この手の用途としては、有償の8th Wall Webを除けばスタンダードな選択肢だと思います。
今回はコンテンツをA-Frameで作ることにします。
ARコンテンツを考える
派手なやつだと、アニメーション付きのglTFモデルをどどーんと表示したいのですが、モデリングがそこまで得意でもないですし、いかんせん時間がありません。
簡単に作れて、絵的にそこそこインパクトのある感じがいいです。
2021年の干支といえば、丑（牛）
牛といえば、キャトルミューティレーション👽
というわけで、牛を飛ばしてみます。
なお、キャトルミューティレーションはUFOにさらわれた家畜が内臓とかを失った状態で発見されることで、さらわれるだけだとアブダクションと言うそうです。
内臓えぐられるのはかわいそうなので、キャトられAR改め、アブダクションARを作ります。
WebARを作る
まず年賀状として作った画像をマーカーにします。
AR.jsからリンクされているこちらのサイトで作れます。
画像を選択して、Genarateを実行すると.fset、.fset3、.isetの3つのファイルがダウンロードされます。
これをWebサーバに配置して、<a-nft>のURLをアップ先と合わせます。
<a-nft type="nft" url="https://vr.jyuko49.com/newyear/2021/nft/newyear_2021" ... >
URLは3つファイル名の拡張子を除いた部分までのパスを書きます。
この辺は、AR.jsの一般的な実装方法なので公式ドキュメントを参照ください。
マーカー画像に重ねるコンテンツ（<a-nft>の中身）ですが、ARっぽさを出すために透過PNGを使いました。
planeのmaterialにテクスチャとして貼り付けると透過されないので、<a-image>を使います。
animationを記述した<a-antity>で囲むことで、上方向（y方向）に移動するようにしています。
<a-assets> <img id="cow" src="./c1.png"> </a-assets> <a-entity position="300 0 -400" scale="5 5 5" animation="property: position; to: 300 600 -400; loop: true; dur: 3000;"> <a-image width="54" height="30" src="#cow"></a-image> </a-entity>
全部同じ動きだと面白くないので、別の牛画像は回転しながら飛ばすようにしました。
移動と回転のanimationを2つ入れ子にすれば簡単です。
<a-entity position="100 0 -600" scale="5 5 5" animation="property: position; to: 100 600 -600; loop: true; dur: 3000; delay: 2000">
<a-entity rotation="0 0 0" animation="property: rotation; to: 0 0 720; loop: true; dur: 5000; delay: 2000">
<a-image width="54" height="30" src="#cow"></a-image>
</a-entity>
</a-entity>
無事、牛も飛んだところで、お正月っぽい要素が欲しくなってきました。
「謹賀新年」の文字を表示することにしました。
A-Frameで日本語を表示するには、<a-text>にカスタムフォントを設定してあげる必要があります。
自分でフォントを作るのはまあまあ大変なので、MITライセンスで公開されているこちらを利用させていただきました。
こんな感じです。
<a-text position="300 100 -450" rotation="-60 0 0" letterSpacing="10" align="center" value="謹賀新年" color="red" font="noto-sans-cjk-jp-msdf.json" font-image="noto-sans-cjk-jp-msdf.png" negate="false" scale="500 500 500"> </a-text>
できました
ARで牛？が飛びます pic.twitter.com/AzET9xq2Vc
— jyuko🐼 (@jyuko49) 2020年12月31日
作ったコンテンツはWebサーバにそのまま置いてあるので、こちらのURL、QRコードから体験できます。
https://vr.jyuko49.com/newyear/2021/
年賀状のイラストが水平になってないと見にくいので、そこはなんとかしてください。
おわりに
来年はアニメーション付きのglTFモデルをどどーんと表示するやつ作りたいですね。
