たくあんポリポリ

勉強したことを載せていきます。最近、技術系の記事はZennに書いています。(https://zenn.dev/chittai)

Oculus Rift + VRIK で 初音ミクになりきってみる~写真を撮る~

初音ミクになりきってみたので、他の人のなりきりを参考に自分でも初音ミクの写真を取れるようにしたいと思いました。まだ途中なので、アップデートをかけていこうと思いますが、現状での対応をまとめたいと思います。

やりたいこと

今回、初音ミクになるところまでできたのでゲーム内で写真をとって、その写真をゲーム内で表示し続けられる(飾るイメージ)ようにしました。

やったこと

やったことは主に以下の3つになります。

  • RenderTexture、Quad、Cameraを使用してカメラで撮影している映像をQuad上に表示
  • RenderTexture→Texture2D→Spriteまで変換させる
  • OculusTouchのボタンを押すとキャプチャをとれるようにする

RenderTexture、Quad、Cameraを使用してカメラで撮影している映像をQuad上に表示

まず、GameObject > 3DObject > Quad を配置。次に、GameObject > Camera を配置。この時にQuadとCameraの座標を同じにして、CameraをQuadの子にしておくと、あとで鏡のようになります。

f:id:c_taquna:20170922234822j:plain

その次に、Project内でCreate > RenderTexture を選択します。そのRenderTextureをQuadにアタッチして、CameraのTargetTextureに作成したRenderTextureを選択します。そうすると、以下のようになります。

f:id:c_taquna:20170922234825j:plain

これで第一段階完了です。

RenderTexture→Texture2D→Spriteまで変換させる

次はScriptで掲題の処理を実施します。

書いた処理はいかになります。参考サイトを載せていますが、ほぼそのまま使用しています。(本当にありがとうございます)

UnityでRenderTextureをファイルに保存 | Psychic VRラボの殴り書き
Texture2DからSpriteを生成する【Unity】 - (:3[kanのメモ帳]

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

public class TakePictures : MonoBehaviour
{

    public RenderTexture RenderTextureRef;

    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        TakePicture();
    }

    void TakePicture()
    {
        Texture2D tex = new Texture2D(RenderTextureRef.width, RenderTextureRef.height, TextureFormat.RGB24, false);
        RenderTexture.active = RenderTextureRef;
        tex.ReadPixels(new Rect(0, 0, RenderTextureRef.width, RenderTextureRef.height), 0, 0);
        tex.Apply();

        var pivot = new Vector2(0.5f, 0.5f);
        Sprite texture_sprite = Sprite.Create(tex, new Rect(0, 0, RenderTextureRef.width, RenderTextureRef.height), pivot);
        GetComponent<SpriteRenderer>().sprite = texture_sprite;
    }
}

空のGameObjectを作成してそこにアタッチします。今回はSpriteにしてから描画する必要があるので、Add ComponentからSpriteRendererを追加しています。そうすることで、Spriteを描画することができます。

f:id:c_taquna:20170923000215j:plain

OculusTouchのボタンを押すとキャプチャをとれるようにする

今のままだと、RenderTextureをリアルタイムでSpriteに変換してるだけなので静止画としての表示ができていないです。そのため、以下のコードを変更してあげることでボタンを押したときの静止画をとることができるようにします。

変更前

var pivot = new Vector2(0.5f, 0.5f);
Sprite texture_sprite = Sprite.Create(tex, new Rect(0, 0, RenderTextureRef.width, RenderTextureRef.height), pivot);
GetComponent<SpriteRenderer>().sprite = texture_sprite;

変更後

if (OVRInput.GetDown(OVRInput.RawButton.X))
{
  Debug.Log("Xボタンを押した");
  var pivot = new Vector2(0.5f, 0.5f);
  Sprite texture_sprite = Sprite.Create(tex, new Rect(0, 0, RenderTextureRef.width, RenderTextureRef.height), pivot);
  GetComponent<SpriteRenderer>().sprite = texture_sprite;
}

OVRInputを使用してあげることで、ボタンを押したときだけ処理に入るようにします。以下キャプチャです。キャプチャだとすごくわかりづらいですが、Xボタンを押すと初音ミクの左側にある表示が更新されていきます。

f:id:c_taquna:20170923000952j:plain

この後

写真を持てるようにしたり、アセットからステージを探してきたりしてプレゼンスを高めてみたり、いろいろと試してみようと思います。

参考にしたサイト

以下、参考にさせていただきました。本当にありがとうございます。

【Unity】あの素人がOculusでVRクソゲーを7日間作り続けてみた | uinyan.com
自撮り棒で写真をとったりできるようにするアイデアが良いなと思い参考にさせていただきました。

Unity+Oculus Touch開発メモ - フレームシンセシス
OculusTouchの入力処理の参考にさせていただきました。

UnityでRenderTextureをファイルに保存 | Psychic VRラボの殴り書き
RenderTexture→Texture2Dへの参考にさせていただきました。

Texture2DからSpriteを生成する【Unity】 - (:3[kanのメモ帳]
Texture2D→Spriteへの参考にさせていただきました

今までの記事

上が最初で下に行くほど新しくなります。

c-taquna.hatenablog.com
c-taquna.hatenablog.com
c-taquna.hatenablog.com
c-taquna.hatenablog.com