【腹筋VR】Webエンジニアが「VRアプリ開発」やってみた

自己紹介

SESはWeb系じゃないけど、Web界隈のエンジニアです。VRの開発とかUnityとか何も知らない状態から３日でつくりました。

腹筋VR（製品版と異なります） pic.twitter.com/kTVJoXJaFW

— かんたくろーす@えぃぃr (@sapporo_east_k) November 25, 2019

腹筋VR？

腹筋の回数をカウントしてくれるVRアプリです。いずれリリースできればと思います。
３日で動画のレベルまで形にできるんです。良くないですか？ ３日間でやったことについて書きます。

やったこと

※Oculus Goで開発しています。メルカリで1.8万で買いました。Oculus Questも近々購入予定。

環境構築

Udemyがサイバーマンデーセールだったので下記講座を購入しました

Unity 3D 超入門:UnityでVRゲームやエンドレスランなど4つのゲームを作ろう！
※5つのゲームを作る講座もありますが、どう違うのか存じません

環境構築の記事もありますが、Vulkanを外す手順とか抜けてる記事が多いです。記事で何度かハマりましたが、上記の動画なら一発で環境構築できました。

注意事項
ただし、紹介した動画ではUnityの2017年版で環境構築させようとしてきます。インポートできないAssets(3Dモデルなどの素材)も多いので「2019.1」版でやりました。Gradleの設定だけはできなかったので飛ばしましたが、他の手順はそのままでビルドできました。

開発

Asset

環境構築が終わったらAssetを入れます。開発に必要な3Dモデル等を入れていく必要があります。最初にオススメしたUdemyの動画もいろいろな記事やサイトもOculus Integrationをオススメしてきます。しかし僕はOculus Integrationを即不採用にしました。

Oculusが公式で出している「Oculus Integration」を入れれば、Oculus Go向けのカメラ設定やコントローラの設定ができます。すぐにVR空間上に自分のコントローラを表示できるでしょう。ただし、メニュー画面の操作とかできません。

上記はプロトタイプの段階で作った3D空間のUI(メニュー画面)です。Oculus Goのコントローラが画面上に表示されるだけでメニューに表示されるボタンを押すことはできません。

下記のツイートの動画はもう少しブラッシュアップした版です。UI(メニュー画面)を操作するにはコントローラーからレーザーポインター等を出して、メニュー画面を操作する必要があるのです。動画序盤でコントローラーからでているレーザーポインターをやってくれているのはVIVE Input Utilityです。サンプルをみればすぐに下記のようなレーザーポインターを付けることができます。

#腹筋VR

いろいろ追加してる

スマホだと、ちょっとチカチカすんね（VR上ではない）

あとはこのマッチョメンを色々動かすだけやで

タイトル画面からの読み込み遅いな…改良しよ pic.twitter.com/20SHeV1eW1

— かんたくろーす@えぃぃr (@sapporo_east_k) December 3, 2019

角度の取得

動画を見ていただくとわかりますが腹筋するときは首が動きますね。顔が向いている角度で腹筋の回数をカウントします。UnityなのでC#です。

void Update () {
    Quaternion quaternion = this.transform.rotation;
    double x = quaternion.eulerAngles.x;
}

なんとこれだけで角度が取得できます。あとはプログラムをカメラにドラッグアンドドロップしてやれば、this(カメラ)の向いてる角度がxに入ります。Unity簡単ですね。

「真正面」を向いているときが0度、首を1度上に傾けると359度になるというルールがあります。

起き上がったとき＝「カメラの向きが350度以上」
横になったとき　＝「カメラの向きが320度以下300度以上」

// 顔の角度
private const double up = 320.0;
private const double down = 350.0;
private const double limit = 300.0;

// 横になっているかどうか
private bool isDown = false;

// 腹筋回数
public int count = 0;

void Update () {

    // カメラの角度を取得
    Quaternion quaternion = this.transform.rotation;
    double x = quaternion.eulerAngles.x;

    // 300度未満なら何もしない
    if (x < limit) {return;}

    // 横になっていなかった かつ 320度未満300度以上
    if(isDown == false && x < up)
    {
        // 横になったと判定
        isDown = true;
        return;
    }

    // 横になっていた かつ 顔の角度が350度以上
    if(isDown == true && x > down)
    {
        // 横になっているかフラグをfalseにする
        isDown = false;
        count++; // 腹筋カウント
    }
}

このルールで腹筋のカウントをしています。単純でしょ？ヘドバンしないでね
C#の書き方いい加減すぎるか…

あとは…

ここまで腹筋VRを支える技術を説明しました。あとは最初に紹介した動画を見れば、開発に必要な知識を得られます。

最後に

なぜVRの開発を始めたのか、その動機が一番重要なので語らせてください。

最初はVRに失望していた

もともとVRには興味がありませんでした。学生時代に発売したOculus Riftの本体は高くないものの、「ゲーミングPC必須」でした。入門するだけで20~30万は軽く飛んでしまいます。これでは一般人には普及しない、と私は失望しました。当時スマホVRもコンテンツ数はとても少なかったのです。

XR燻製会の存在

それから数年間VRに対してアンテナを張っていませんでしたが、XR燻製会という煙的にもくもく会ｗイベントに参加しました。

僕は勢いで申し込んだのですが、内輪だけでやる予定のイベントだったのです。後日知ったのですが、「かんちゃんって誰だろう？ 多分、他の参加者の知り合いなのかな」と当日まで思われていたそうです。

そこで燻製された美味しい食事とOculus GoやOculus QuestをはじめとするxR(VRやARの総称)コンテンツに触れることができました。「今はPCなくてもVRできる」という衝撃の事実を知りました。Oculus Goなら2万円、Oculus Questなら5万円でVRできるんです！すごい！

HoloLens ミートアップの参加

厳密にVRの勉強会ではないですが、ホロレンズミートアップに参加しました。xRの話が中心なので、VRの話も聞けました。具体的な業務利用の話やVRアプリの体験、とても新鮮でした。このイベントが終わってお金がたまった後にOculus Goポチりました。しばらく遊んだあと、開発を始めて３日で最初の動画の腹筋VRができたわけです。

何が言いたいのか

VRは安くなったことで「誰もが手が出せる」素晴らしいものになりました。
まだ【xR元年】と言われています。元年から次のステップに進むには【普及】が必要です。日本語コンテンツや開発に関するドキュメントは多くはありません。もっと開拓する人が必要だと感じました。

そこで遠目に見ているWeb界隈のあなたも例外ではありません。まずは、一緒にVR沼に浸かりませんか？

追記

NT札幌に参加したら、東京でもVRで腹筋するアプリを開発している人がいたと聞きました。Unityちゃんに踏んでもらえるとか…！その人と繋がりたい！

腹筋VRをリリースできたら、またリリースまでの記事書きます。