イノシシのネタって何もねえな
今年もこの季節がやってきた。そう、年賀状だ。
今どき年賀状なんて出してる人のほうが減少してきているのに、昔からの習慣（多分中学生くらいか？）で惰性となりながらも毎年10枚くらいは出している。
変に律儀な性格なので、宛名は手書きで、文面にも必ず一言は手書きの分を添えるようにしている。あまり字が綺麗な方ではないのに、だ。
毎年受け取って下さる皆様、雑な字で申し訳ございません。あれでも精一杯丁寧に書いている方なのです。
さて、こう毎年出していると絵柄にもなにかこだわりを出したいな、と思うのがぼくの悪い癖であり、そのせいで毎年12月になるとうんうんいいながら頭を抱えている。
ここ数年は結構サクッとネタが思い浮かんだからわりとすんなりと作成に取り掛かれたのだけれど、イノシシ、正直ネタがない。
ちなみに今年や去年のネタはこんな感じ。
ひよこのやつは結構気に入ってます。
さて、本題に戻って、イノシシだ。真っ先に思い浮かんだのは『花札』。でもただ花札風の絵柄にするだけじゃあなんもおもしろくねえよな、と思い、椅子に座って天を仰ぐこと数分。
「――そうだ、ARにしよう」
AR年賀状、いっちょ作ってみましょうか！
とはいえいつものごとく「とりあえず思いついてみたはいいもののなにも知識がない」という状態だったので、広大なインターネットの海に「AR 年賀状」と入力したら欲しい情報がワンサカ出てきた。ありがとうグーグル。ありがとうインターネット。
こちらのWebページを参考にして割とすぐにAR年賀状が作れました。
iti.hatenablog.jp
AR.jsとA-Frameを使ったお手軽WebAR
もともとレンタルサーバは借りていて、ドメイン取得もしていたので、やったことといえばhtmlをちょろっと書いてARマーカーと適当な3Dモデルを持ってきたことくらい。
さて、ネタの根幹となるAR.jsとA-Frameだけれど、前者はWebでARを実装可能にするjavascriptライブラリで、後者はWeb VRをhtmlで簡易に実装するためのフレームワークとのこと。
github.com
aframe.io
これらを使ってたった数行のhtmlを書くだけでARが実装できるんだから世の中便利になったもんだ。
以下が実際に書いてみたコード。
<!doctype HTML> <html> <head> <meta charset="utf-8"> <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> <title>Happy New Year 2019!</title> </head> <body style="margin : 0px; overflow: hidden"> <a-scene embedded arjs="debugUIEnabled: false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false"> <a-assets> <a-asset-item id="boar" src="boar.gltf"></a-asset-item> </a-assets> <a-marker preset="custom" type="pattern" url="pattern-marker.patt"> <a-entity gltf-model="#boar" scale="0.5 0.5 0.5" rotation="0 90 0"></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
たったこれだけ。これでWebサイトにスマホでアクセスするとカメラへのアクセスを求められて、そのままARマーカーを読み込めばこんな感じに3Dモデルが飛び出てくる。
今回はARマーカーとWebサイトへのアクセスのためのQRコードを同一にすることで、QRコードを読む→アクセスする→イノシシやんけ！を一連の流れにした。
上記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>
まずこの部分がA-frameとAR.jsの読み込み部分。これが心臓部分であり、これで90%終わりと言っても過言ではない。
<a-scene embedded arjs="debugUIEnabled: false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false"> <a-assets> <a-asset-item id="boar" src="boar.gltf"></a-asset-item> </a-assets> <a-marker preset="custom" type="pattern" url="pattern-marker.patt"> <a-entity gltf-model="#boar" scale="0.5 0.5 0.5" rotation="0 90 0"></a-entity> </a-marker> <a-entity camera></a-entity> </a-scene>
次にこの部分。＜a-scene＞＜/a-scene＞で3D空間を構築して、その中にARオブジェクトの定義（＜a-asset＞＜/a-asset＞）とマーカーの定義（＜a-marker＞＜/a-marker＞）とカメラの定義（＜a-entity camera＞＜/a-entity＞）を書くだけで終了。超簡単。
3Dモデルはひたすらググってフリーで使えるイノシシの良さげなモデルを探してきました。
