見出し画像

新宿駆動開発 feat 未来都市withARハッカソン

41h0

はじめに

12/9金～12/18日に未来都市withARハッカソンが開催されたので、いつも一緒に開発しているYKNK(やきにく)チーム+ハッカソンで出会ってチームに参加してくれたメンバーでARを作りました。
結果的になにも受賞はできなかったのですが、ビジュアルが自分好みな良いものが作れた、そしてAR開発の大変な部分を味わい、色々思ったところもあったので感想記事としてまとめていこうと思います。

YKNK(withAR形態)

作ったもの「Kawaii CyberPunk Future city -Shinjuku-」

今回新宿東口をKawaii × CyberPunkな都市に変身させるARアプリ「Kawaii CyberPunk Future city -Shinjuku-」を作成しました。
インタラクト要素としてCyberPunkな義手を表示してビームを撃ったり、Twitterにスクリーンショットを共有できたりします。
最初はtoJ向け、Z世代にうけるものを作ろうという意思があったはずなのですが、最終的に自分が大好きなビジュアルの塊になりました。

個人的にこの青空とUFOの写真が好きです。
日本の都市の昼の風景に合うサイバーパンクっていいよね…

フォトショとかではなくアプリを起動すると直にこの光景が見られます

ちなみに企画段階で花譜ちゃんのMVや星街すいせいさんのMidnight Grand OrchestraのMVみたいなKawaii×CyberPunkが作れるといいねという話でイメージを合わせていました。
これを読んで、MV見たことないし曲も聞いたことない方はYoutubeで見られるので見ましょう。

PLATEAU SDK

「Kawaii CyberPunk Future city -Shinjuku-」を実装するにあたって、PLATEAUモデルを基準にモデラ―チームにモデリングを行ってもらい、モデルが完成したらPLATEAUモデルを非表示にし、GeospatialAPIで実際の位置に合わせてARで表示するという手法を取りました。

実はPLATEAU Hack Challenge 2021に参加したことがあるのでPLATEAUは扱ったことがあったのですが、その時はファイル形式を変換したり、軽量化したり…とUnityに導入する前にひと手間加える必要があったものの、SDK形式になったことでその手間がなくなったのでだいぶ導入が楽になりました。
(あとはPLATEAU SDK自体giturlでインポートできたり、扱う都市モデルをローカルからだけでなくオンラインからダウンロード出来たらもっと楽になるので頑張ってほしいところ)

Geospatial API

GeospatialAPIは以下サイトを参考に実装しました。

悪いことは言わないので初めて使う時は基本サンプルシーンをベースに使わないものをコメントアウトする方式にしたほうがいいです。自分でいろいろがちゃがちゃ作ったら全部動かなかったので…

新宿東口にモデルを表示するロジックはGeoSpatialAPIのGeospatialController内に以下のように実装し、カメラの位置情報の認識が完了したタイミング(Update内の_isLocalizingがtrueになったタイミング)で呼び出すようにしました。

public void ShowModel()
{
 　Debug.Log("ShowModel Start");
   var pose = EarthManager.CameraGeospatialPose;
   var quaternion = Quaternion.Euler(new Vector3(0, 0, 0));
   var anchor = AnchorManager.AddAnchor(latitude, longitude, altitude, quaternion);
　 // 緯度
   Debug.Log("latitude : " + latitude);
　 // 経度
   Debug.Log("longitude :" + longitude);
   // 高度
   Debug.Log("altitude :" + altitude);
　 // 方位
   Debug.Log("quaternion :" + quaternion);
   createModelObj = Instantiate(createModelPrefab, anchor.transform);
   modelCalibrationController.createObject = createModelObj;
}

緯度と経度はGoogleマップで調べることができます

Googleマップ上で右クリックすると緯度と経度が表示される

高度と方位は現地にいってちょうどよい情報を実際に調査、設定していました。
また、これが一番大事なのですが
緯度と経度の変数の型は必ずdoubleにしましょう
私はずっとfloatで実装し、緯度と経度が桁落ちし、いくら位置合わせをしてもずれるという悪夢のような体験をしました。

あとやはりGeospatialAPIを使ってもずれることはあるので、モデルの位置を調整するUIは作った方がいいです。
自分はY軸回転とXYZの位置を変更できるUIを作りました。

位置合わせ用のUIを作っておくと多少ずれても後から合わせることができる

ハンドトラッキング(未実装)

初期は画面内に手が映り込んだらその位置にCyberPunkな義手を表示、手の形によってさまざまなアクションが取れる機能を実装する予定でした。ただ当てにしていたTof ARがGeoSpatialAPIと一緒に動かそうとするとまったく動かず断念しました…

URPにしたことが悪いのか？GeoSpatialAPIと相性が悪いのか？もしなにかご存じの方がいれば教えていただけるととても助かります。

ダメもとでOpenCV for Unityを購入し、(一万円強の出費)画像検出でなんとかならないか試してみたりもしたのですが、十分な精度を出すことができませんでした。最終的にUIのボタンで手からビームを撃てるようにしました。

ビームはロマン

Tweet機能

Tweet機能の実装は以下のアセットを使わせていただきました。
使いやすいうえになんと無料です。

実装したコードはこちら
UIのボタンからTweetScreenShotを呼び出して使ってました。

using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;

public class TweetController : MonoBehaviour
{
	[SerializeField]
	private GameObject uiObj;

	public void TweetScreenShot()
    {
		uiObj.SetActive(false);
		StartCoroutine(TakeScreenshotAndShare());
		uiObj.SetActive(true);
	}

	private IEnumerator TakeScreenshotAndShare()
	{
		yield return new WaitForEndOfFrame();

		Texture2D ss = new Texture2D(Screen.width, Screen.height, TextureFormat.RGB24, false);
		ss.ReadPixels(new Rect(0, 0, Screen.width, Screen.height), 0, 0);
		ss.Apply();

		string filePath = Path.Combine(Application.temporaryCachePath, "shared img.png");
		File.WriteAllBytes(filePath, ss.EncodeToPNG());

		// To avoid memory leaks
		Destroy(ss);

		new NativeShare().AddFile(filePath)
			.SetText("💙Kawaii Cyber Punk💙")
			.SetCallback((result, shareTarget) => Debug.Log("Share result: " + result + ", selected app: " + shareTarget))
			.Share();
	}
}

上記コードで以下のようなスクリーンショット付きのツイートができるようになります。

大変だったこと

今回とてもいいものが作成できた自負はあるのですが、その分様々にトラブルや苦労があったハッカソンでした。ここからはどんなトラブルがあったのか書いていこうと思います。

その１.メインエンジニアがMacを持っていない

これに関しては完全に自分の準備不足ではあるのですが、iOSARアプリを開発することが決まったにも関わらず自分がMacを持っていないせいでハッカソンの前半満足に開発ができない事態になっていました。
当初チームにMacを持ってる人がいるのでその人に動作確認をお願いする予定だったのですが、実際にやってみると不具合が起こっても原因が推測できず結局急遽モノカリでMacBookProを借りることになりました。(2万円の出費)

そしてMacが来たのでいざ開発するぞとなったタイミングで利用しているアカウントに管理者権限がついておらず、sudoコマンドを打ってCocoapodsがインストールできないかもしれない事態に陥り、詰んだ…と頭を抱える事件もありました。
結局この事件はアカウントにパスワードが設定されてなかったので、パスワードを設定しなおしたらsudoコマンドを打てるようになって解決したのですが、今考えてもとてもギリギリの綱渡りをしていたと思います。

メインエンジニア(笑)という大ポカをしたのでチームの皆にはとても申し訳ない…
もしタイムリープ出来たら初日にビッ〇カメラに駆け込んでMacBookProを買ってくる。

次回のwithARハッカソンに参加しようと考えていて、エンジニア枠としての参加になりそうな読者の方々に言いたいことは

少しでもiOSモバイルアプリを作る可能性があれば事前に開発環境構築済みのMacを用意しましょう！
レンタルPCも管理者アカウントが連携されなかったら環境構築で詰む可能性があります。自分のMacを購入しましょう！

同じ悲劇が起きないことを祈ります

その２.メインエンジニアがApple Developer Programのアカウントを持っていない

第二の大ポカ、メインエンジニアがMacを持っていないということはApple Developer Programのアカウントなんかもちろん持っていません。

iOSアプリ開発ではTestFlightという開発チームのiPhone/iPadに開発途中のアプリを配信する機能があります。これを利用することでチームでアプリの動作を確認することができるのですが、Apple Developer Program(有料)に登録していないと使うことができません。

今回チームのMacを持っている方にApple Developer Programのアカウント登録をお願いすることにしたのですが、そのメンバーが学生でありさすがに学生にお金を払わせるのは良心が痛むので、登録料分アマギフを送ることで補填しました。(1万4千円の出費)

次回のwithARハッカソンに参加しようと考えていて、エンジニア枠としての参加になりそうな読者の方々に言いたいこと(2回目)は

少しでもiOSモバイルアプリを作る可能性があればチームに一人はApple Developer Programのアカウントを持っているチームメンバー構成にしましょう！
もしくはハッカソン前に自分でApple Developer Programに登録しましょう！

その３.ひきこもり×新宿駆動開発

今回新宿東口のARということで何度も現地に行って位置合わせを行ったり、動画や写真を撮影する必要がありました。
そのためワークスペースで作業→新宿東口へ移動→ワークスペースへ戻って作業→新宿東口へ…というループを何回も繰り返しています。
普段引きこもって在宅勤務、個人開発をしている身からするとそれを朝から夜までやると頭も腰も足も腕もぼろぼろになりました…

今回お金も時間も体力ももってかれたのでHack + MarathonのハッカソンというよりかはHack + Triathlonに近いかもしれない

ハッカソンの感想とかARの未来とか

なんやかんや大変でしたが終わりよければすべて良しということで素敵な良いものを作れたので個人的に参加できて良かったなと思いました。PLATEAU SDKやGeospatialAPIの経験ができたり、AR開発のトラブルにもぶつかって学びも多かったです。(人は痛みがないと成長しないのだ…)

ただちょっと思ったのは、いまだにAR開発の参入障壁はとても高いなと感じました。

withARハッカソンの目指すものとしてtoD（＝デベロッパー）よりtoJ（＝女子高生・女子大生）を含めた大衆向けのコンテンツを作りたいという考えがあります。実のところ toJ向けコンテンツを作る可能性が高いのは女子高生の気持ちが分かる女子高生でしょう。なので、女子高生がARを開発しやすい環境を用意すべきだとは思うのですが、MacBookやMetaQuestProの購入費、Apple Developer Programの登録料などは女子高生が払うには高く気軽に手を出すことは難しいのが現実です。
望まれるコンテンツは toJ、開発手段はtoDになってしまっている現状をまず変える必要があるのではないかと思いました。

今一番利用しやすいAR開発プラットフォームというと無料かつブラウザ上で開発ができるSTYLYが思い浮かぶのですが、ちょっとアート方面に傾倒しすぎて一般のユーザーがとっつきにくい印象もあります。

無料で利用でき、モバイルやブラウザで開発ができ、一般のユーザーやToJ向けに特化したAR開発プラットフォームが生まれるとAR分野は次の未来を切り開けるのかもしれませんね。

と、ここまで感想をつらつら書いたのですが、結局のところ優勝できると踏んで出した作品でなにも賞にひっかからなかったのでまだ悔しさが続いています。
YKNKチームが何かに勝利してみんなで笑顔で焼肉を食べる未来は来るのか？
これからもみんなで面白く楽しい良いものを作っていくので温かく見守ってもらえると幸いです。

ここまで読んでいただきありがとうございました！
もし感想等あればTwitterなどで教えてもらえると嬉しいです。

今回撮った写真でZoom背景がかっこよくなったのでご満悦な自分

いいなと思ったら応援しよう！