太宰治を墓から蘇らせて一緒に撮影したい。ARで実現させる（Step1）

# (僕）待望の太宰治企画
<img width="600" alt="ARで_page-0001.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/b6839990-c829-6452-88b7-16bd9e1c19d8.jpeg">

AR.jsに触れて、すぐにこれを実現したいと思った。
太宰治を墓から蘇らせてツーショットを撮るのだ。なんなら妻の津島美知子と森鴎外も墓から出現させて4人で撮影をしたい。
# なぜつくりたいのか
三鷹の禅林寺に太宰治の墓がある。6月19日は太宰治の命日で、全国から熱心な太宰ファンが墓参りに訪れる。僕もそのうちの一人だった。

https://twitter.com/atoms50/status/685009831585923072?s=20&t=uo2kqT3E2ANXCMC8p4xkzQ

この墓の凄いところは、太宰と妻の墓の向かいに、森鴎外の墓もあることだ。禅林寺に訪れると、時空を超えて（とはいえ100年やそこらなのだが）彼らと空間を共にしているような不思議な感覚を味わうことができる。
ちょっと説明が難しいんだけれど、この空間を共にしている感覚を、もっと明瞭なものにしたいと思った。それが「太宰と森鴎外と一緒に写真撮影する」という企画を立てた動機だ

# 実現方法の検討
<img width="600" alt="太宰治説明２.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/cb73fccf-2c61-2563-c8d9-4c0daaf62a4c.jpeg">

**◯厳密なやり方**
①太宰治の墓をカメラで読み込むと
②墓の上部に太宰治の3Dモデルが出現する
 
こちらが最もテンションが上がる、厳密な再現方法だ。しかし実現すにはちょっとハードルが高い。
なので、実装可能そうな状態まで機能を簡略化した。これが僕の夢を実現するためのStep1となる。
 
**◯Step1**
①太宰の墓がある墓地の大まかな位置に
②太宰の静止画を表示させる
# 実装手段
**①について**
AR.jsのLocation Based ARをA-Fremeを使って実装する。
緯度・経度を指定することで、若干の誤差（10m程度）はあるが、大まかな位置にオブジェクトを表示することができる。
実装は[A-Frameのドキュメント](https://aframe.io/blog/arjs3/#location-based-ar)を参考にした。
 
**②について：**
こちらの画像を、AR.js内でイメージとして指定し表示する
<img width="300" alt="太宰治.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281755/de17ea7f-daf1-955a-3baf-770bcf5c167b.jpeg">
なお、作成したWEBアプリは[Netlify](https://www.netlify.com/)にデプロイして試験を行った。

# 実装するものの
結論から言うと、①②共に意図通りの動作をしておらず、現状まだ解決していない。
 
### ①について:
まずは、緯度・経度を指定して立方体のブジェクトの表示を試みた。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="Vwdvwap" data-user="atoms50" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/atoms50/pen/Vwdvwap">
  Soseki_distanceBox</a> by よしだじゅんや (<a href="https://codepen.io/atoms50">@atoms50</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

結果は、スマホのカメラをかざしてもオブジェクトは表示されない。
[こちらのサイト](https://bagelee.com/programming/location-based-ar/)に、建造物が多かったり、GPSが取得しづらい場所はうまく表示されないことがあるという記述があった。
 
建造物が少ない広い場所（墓地）で試してみたが、やはり表示はされなかった。
このことからGPS取得の要因ではなく、おそらくソースコード側の要因だと考えられる。一方で、エラーの根本原因は分からない状況である。
 
### ②について:
AR.jsでそもそもオブジェクトを表示できないため、同じくA-Frameを使って3D空間上に写真を表示できるか試みた。（うまくいったら３D空間に禅林寺を再現してもいいなという狙いもあった）
が、こちらもうまく表示されなかった
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYavmbX" data-user="atoms50" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/atoms50/pen/zYavmbX">
  太宰治</a> by よしだじゅんや (<a href="https://codepen.io/atoms50">@atoms50</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 今後について
①②の問題を早急に解決して、Step1までは実現したいところである。
 
最後に墓場でコーディングしている際の様子を共有する。

https://twitter.com/atoms50/status/1587113910959849473?s=20&t=uo2kqT3E2ANXCMC8p4xkzQ

これで成果が出なかった時本当に精神が崩壊しそうだった。