トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

箱庭を平面ディスプレイに奥行き感を持って表示するやつできなかった

これやってみます。

実は以前にもkinectを使ったこういう奴を見たことがあって、それも再現しようと思ったのですが、私の環境でkinectが動かなかったので諦めた過去があります。

追記:その方の資料がありました!

speakerdeck.com

あとちょっと違うと思いますが、こういうのもすごいですよね。

www.youtube.com

でもジャイロを使えば似たようなことできますね・・・

ようは体やスマホの向きに合わせてカメラを動かせばいいはず。

と思ってやって見ましたが、なんかしっくりこない・・・

色々やりながら、先ほどの見本ツイートを観察したところ、いくつか気をつけないといけない点がわかりました。

結論から言うと動かすのは箱の方で、またカメラの画角を3とかにしましょう。もしくは箱の大きさをいじればいいのかもしれない。あとは箱の手前の四隅がスマホの四隅にぴったり合うようにする、とかライトの当て方とか。

箱&ライティング

リアル感を出すために、テクスチャをダンボールにしたり、LightProbeつけたりしました。

LightProbeを使うときはLightはBakedモードにして、オブジェクトはstaticにチェックを入れます。

f:id:bibinbaleo:20171116210146p:plain

ってやっていたのですが、staticにすると箱を動かせないのでやっぱりやめです。

あと箱もスマホのサイズに合わせました。

f:id:bibinbaleo:20171116205356p:plain

あとスマホから光が入ってきているように見せるために箱の手前にPointLightを置きました。

directional Lightは消して、Ambient Lightで全体的な明るさを調整しました。

f:id:bibinbaleo:20171116205948p:plain

カメラ

正面から見た時に箱の側面が見えないようにカメラの画角を小さくしました。

f:id:bibinbaleo:20171116205345p:plain

f:id:bibinbaleo:20171116205349p:plain

初期値60だとこんな風になってしまう。

f:id:bibinbaleo:20171116205402p:plain

動かす

最初はカメラを動かしていましたが、最終的には箱を動かしました。

実際やるときも、スマホを動かしているので箱を動かすのが正解ですね・・・多分

qiita.com

ジャイロはこちらを参考にしました

unity_script_gyro_mobile - FreeStyleWiki

    Input.gyro.enabled = true;
        Quaternion q = Input.gyro.attitude;
        Quaternion qq = Quaternion.AngleAxis(-90.0f, Vector3.down);
        q.x *= -1.0f;
        q.y *= -1.0f;
        m_camera.transform.localRotation = qq * (new Quaternion(0,q.y, 0, q.w));

ひとまずy軸だけ回転するようにしました。

これを箱に適用して、回転させました。

あとy軸回転の角度の範囲制限もできるようにしようとしたのですが、なんかうまくいかなかった・・・

textでyのジャイロの角度を表示して、目視で角度を確認して、その範囲にしたはずなんだけどな〜

        Input.gyro.enabled = true;
        Quaternion q = Input.gyro.attitude;
        Quaternion qq = Quaternion.AngleAxis(-90.0f, Vector3.down);
        q.x *= -1.0f;
        q.y *= -1.0f;
        if (q.y < -0.5f) {
            q.y = 0.5f;
        }
        if (q.y > -0.4f) {
            q.y = 0.4f;
        } else {
            m_camera.transform.localRotation = qq * (new Quaternion (0, q.y, 0, q.w));
        }

 

マスク

当たり前ですが横から見たら、横の壁が見えてしまいます。

f:id:bibinbaleo:20171117000653p:plain

最初はこちらのマスクシェーダーを使って、透明にしようとしてたんですが、全部透明になってしまったりするのでやめました。

qiita.com

Cubeの壁ではなくPlaneを使って片面からは透明になるようにしました。

f:id:bibinbaleo:20171117000645p:plain

これでいいのか・・・なんか揺れる

 

終わり