30代男子。ガンプラで遊んでます！
最近、自分の部屋ができたこともあり、久しぶりにガンプラを作っています。
作ったガンプラは部屋に飾ったり写真を撮ったりしているのですが、ガンプラ自体のクオリティが昔より上がっていたり、スマホのカメラ自体もすごく高性能になっていることで、簡単にカッコイイ写真が撮れるのでテンション上がります。
（バンダイ様のおかげです。私のようなパチ組専門でもすごくカッコイイです。）
実は今度クラファンにブンドド※用のカメラデバイスを出そうとしているのですが、最近AR.jsなるもので手軽にWebでARアプリができることを知ったので、これを使って超プロトタイプ的にブンドドを更に楽しくするARアプリを作ってみました。
※ブンドドっていうのはプラモデルやフィギュアを使ってやる所謂「ごっこ遊び」的なものです。
コックピット視点でブンドドしたいなーということで
作ってみました。
仕組みは単純でカメラ映像にAR.jsでコックピットの3Dモデルを重ねただけです。
↓ここから遊べます。
先日WEBアプリでもARできるって知ったんで、コックピット視点でガンプラ眺めるアプリ作ってみた。
— shoito66 (@shoito66) June 12, 2021
（スクショも撮れるよ。）
コックピット作りこんだり、カメラをリモートにしたりできると面白くなるかな。#ガンプラ#拡張現実 pic.twitter.com/BCEgMROtDc
動画はスマホで撮ったもので、PCで見るとこんな感じ。
（Webカメラのピントが上手く合わず・・・）
仕組みと作り方
今回のアプリは冒頭でも触れている通り、AR.jsというライブラリを活用したWebアプリケーションになっています。
PCやスマホのカメラで移した映像にAR.jsでコックピットの3Dモデルを重ねて表示しています。
↓イメージ的にはこんな感じ
3Dモデルの準備
コックピットの3Dモデルはこちらのサイトで無料のものをダウンロードして使用しました。
少しブレンダーで弄りました。
ブレンダーで書き出したモデルをAR.jsで使用する方法は以下の記事にまとめてあります。
Webアプリケーションの作成
今回作成したアプリケーションのコードはこちらです。
See the Pen コックピット視点を楽しもう！ by shoito66 (@shoito66) on CodePen.
スタイルやスクリプトにも色々書いてありますが、これはスクリーンショットを取ったり保存したりする部分ですので、ARについてはHTMLだけで完結しています。
スクリーンショットを取る部分はこちらの記事を参考にさせていただきました。
周りの人に使ってもらってみた
今回はクラファンに向けたプロトタイプという意味も強いので、折角ならと身近な人に使ってもらいました。
使ってもらった相手は私の奥さん。
頼む前は勝手に以下の様な想像をしていました。
・ガンダムはあまり知らないからこれを使ってブンドドの世界が楽しくなるかはあまり気にしなさそう
・エンジニアなので、起動時間やスクショ部分の使い勝手等についての意見ならもらえるかな
とか思っていたら、実際に使ってもらって返ってきたフィードバックは以下のようなものでした。
曰く「コックピットに3D感が薄いので視点に合わせてコックピットの中が見えたりすると良い」
曰く「コックピットからの眺めってこんなにクリアなの？もっと薄暗かったりしないの？」
曰く「このままだとプリクラのフレームと変わらんな」
はい。ガッツリ本質を突いてきてくれました。
ガンダムを知らない奥さんからしてもこれではコックピットに居る気分は味わえないようです。
プロダクトの本質に関わる部分なので、ここは早急に改善していかなければ！
とりあえず、今回の改善案としては3つほど
①コックピットの3D感を高める
⇒ Blender使ってもっとリアルなコックピットを作る
②コックピット内で視点を動かせるようにする
⇒ マウスや画面タッチで3Dモデルの確度が変わるようにすればできるか
③コックピットからの景色をリアルに
⇒ コックピットの窓部分に半透明のオブジェクトを置く
今後も色んな人からフィードバックをもらいながら自分の作りたいものに近づけていけたら良いなと思っています。