VRのSDKを使わずにUnityでVRの作り方

カードボードなどのVRのSDKを入れなくてもUnityでVRを実装する方法を教えてもらったらめちゃくちゃ簡単でした。

2眼カメラを作る

まずは2眼のカメラの作り方から。仕組みは簡単で要は右目と左目のカメラを用意して表示範囲を左右半分づつにするだけです。

ヒエラルキーに両目のカメラを入れる空のGameObjectを0,0,0に置く。とりあえずVRHeadと名前をつけて、その中にカメラを2つ配置してEyeLeftとEyeRightと名前をつけます。これがそれぞれ右目と左目用のカメラになるわけですね。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-32-08

このままだとまだ画面は1つなので、

画面を2つに分割する

画面を2つに分割します。表示領域を左右に分割して表示すればよくて、まず左目用のEyeLeftを選択してインスペクターの中のCameraを開く。ここのViewport Rectの設定を変更すると表示領域が変わります。画面をRectとして、X,Yで表示開始座標、W,Hで幅と高さを設定してあげます。

左目はこんな感じ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-35-24

右目はこんな感じ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-37-32

これで画面が半分に分割されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-38-07

 

デバイスの回転を実装

カメラはできたので、今度はデバイスの回転を拾って画面に回転を反映させる方法。やることは3つです。

1.デバイスのジャイロを使えるようにする

2.ジャイロの回転を拾う

3.VRHeadに回転を反映させる

これだけです。では先ほどのVRHeadに新しくスクリプトRvVRCameraを作ります。

using UnityEngine;
using System.Collections;

public class RvVRRotation : MonoBehaviour {

	public GameObject Head;

	// Use this for initialization
	void Start () {
		Input.gyro.enabled = true;
	}
	
	// Update is called once per frame
	void Update () {
		
		if (Input.gyro.enabled)
		{
			Quaternion direction = Input.gyro.attitude;
			Head.transform.localRotation = Quaternion.Euler(90, 0, 0) * (new Quaternion(-direction.x,-direction.y, direction.z, direction.w));
		}
	}
}

まず、

void Start () {
	Input.gyro.enabled = true;
}

ここでデバイスのジャイロを有効に

Quaternion direction = Input.gyro.attitude;

ここでジャイロの回転を取ってきます

Head.transform.localRotation = Quaternion.Euler(90, 0, 0) * (new Quaternion(-direction.x,-direction.y, direction.z, direction.w));

VRHeadにジャイロの回転を渡して画面に反映させる

あとはインスペクタのRvVRRotationのHeadにVRHeadを入れてあげればOK

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-55-50

これだけでスマホでVRができてしまいます!素晴らしく簡単な方法を教えてもらいました。

ただ他のVR用のSDKを入れると解決するのかはわからないのですが、Galaxy S6のジャイロがどうもノイズが多くて酔います。。iPhoneやNexus5ではそうでもないので、端末の問題だと思うんですけど、ローパスフィルタは必須ですね。

Unityで連番レンダリングできる「Renderator Pro」の使い方

Unityでレンダリングできる有料アセット「Renderator Pro」の使い方

Renderator Pro

簡単にUnityでレンダリングができるようになります。作ったゲームのシーンとかプロモの動画とかもこれを使えば簡単にできるのではないかと思います。

使い方

インポートしたRenderator Proをカメラにアタッチするだけで、あとはインスペクタから各種設定をしてPlayボタンを押すだけでどんどんレンダリングをはじめます。

メインカメラにRenderator_PRO_EN.csをアタッチします

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-4

はじめに設定アイコンからChoose save folderを選んでレンダリングした連番ファイルの保存フォルダを選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-6

するとインスペクタのPathにフォルダが表示されるので、他の設定をします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-7

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-9

width:画像の幅

height:画像の高さ

Length:時間をMinutes,Secondsで設定

Framerate:秒あたりのフレーム数

上記のキャプチャは、幅800ピクセル、高さ600ピクセルの解像度で秒間30フレームで5秒間のレンダリング設定、あとはQuit Play Modeにチェックを入れるとレンダリング後に動画で再生してくれます。

最後にPlayボタンを押してレンダリング開始。簡単でしかもGPUレンダリングなので早くて素晴らしいです。

ffmpegでpng連番をmp4にする

 

ffmpeg -r 24 -i Render%05d.png -vframes 479 -codec libx264 -pix_fmt yuv420p -r 24 out.mp4

開発中のゲーム「RingNinja」アプリアイコン

「RingNinja」はローポリの3Dグラフィックのアクションパズルゲームです。ゲームのキャラクタは2頭身のちょっとコミカルな感じで、背景やマップなどもすべて3Dローポリで作られた美麗なゲームに仕上がってます。そのゲームのアプリアイコンをデザインしました。イメージは以前から頭の中にあったので何パターンか作ってみましたが、どうも思っていたのと雰囲気が違い少々苦労しました。最終的になかなかオシャレでカッコいいアイコンに仕上がったんではないかと思います。

ちなみに鹿の頭で、ゲームのステージの背景で登場します。他にも狼、イノシシ、カラスなどが登場するので、アプリをバージョンアップしたら他の動物のものに変えようと思ってます。

上がアプリのアイコン、下がゲーム内で使っている画像です。

ringninja

ringninja

.hlsをブラウザ関係なく一発再生する “hls.js”

.hlsかmpeg-dashかとか、ChromeとFFとIEにvideo.jsと諸々依存ライブラリ入れるとか、そういうクソ面倒臭いこと一切抜きにして、videoタグで.hlsを一発再生してくれるhls.jsが素晴らしすぎます。

https://github.com/dailymotion/hls.js

ようやく.hlsだけでPCもスマホも全部カバーできる時代になってきたのを実感できます。

簡単すぎるけど、一応サンプルコード

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

本当これだけです。

ffmpeg で .mp4 を .hls に分割するコマンド

ffmpeg -i movie1.mp4 -vcodec libx264 -s 1280x720 -strict -2 -b:a 256k -flags +loop-global_header -bsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list mav.m3u8 mav_%04d.ts

なんかエラーが出てるけど作れました

改訂

ffmpeg -i movie1.mp4 -vcodec libx264 -s 1280x720 -strict experimental -acodec aac -b:a 96k -flags +loop-global_header -vbsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list mav.m3u8 mav_%04d.ts

Unityでスクリーンショットも画面キャプチャもできない!って時の対処方法

ほんとこれに悩まされました。。
なぜかMOBILE&VRのデモアプリだけ、Galaxyのハードウェアボタンでスクショをとろうと思っても、真っ黒けになってしまって、全く何が起こっていたのかわからなかったのだが、ようやく謎が解けました!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-13

ここにチェックが入ってると、スクショも動画もとれないです!

ハイポリモデルをモバイルで使うときにUnityでとりあえずやったこと

Asset Storeでモデルを探すとモバイルで使おうと思うと固まってしまうような高精細なリアルのモデルなことが多々あります。原因はいろいろあるんだろうけど、モデル自体のポリゴンを減らすのはUVの設定とかも考えると手間なので、モデル自体のポリゴンはいじらず、設定だけで対応したことの備忘録。ちなみにUnity5.4を使用。

3Dのモデルそのものを減らす

使いたいモデルが例えば建物内とか、街だったりした場合に手っ取り早いのは使われているモデルそのものを減らしてしまうということ。基本中の基本ですが、プレイヤーからあまり見えない部分とか、遠景のモデルとかは思い切って削除してしまいます。この時に注意したいのはヒエラルキー内に非アクティブにして残しておかないということ。非アクティブにしてもメモリを消費するので、思い切ってヒエラルキーから削除してしまいます。

あとは街みたいなモデルそのものが大きいときは、若干手間ですが、分割して細かく別のシーンに分けてしまうというのが一番簡単です。その場合シーン間の移動を工夫しないといけないですが、例えば街を4分割するだけでだいぶシーンの読み込みから処理までだいぶ軽減されます。

テクスチャのサイズを小さく設定

ハイポリアセットの場合、2048pxの高解像度のテクスチャがふんだんに使われている場合が往々にしてあります。全部のテクスチャを開いて画像ソフトで解像度を下げていくのはナンセンスなので、Unity内で変更していきます。Project > t:Textureで検索してテクスチャの一覧を表示します。iOS/Androidでそれぞれで設定をできるので必要に応じて設定します。

まず、インスペクタ内のDefaultバーの右にあるiOS/Androidのアイコンからそれぞれ設定します。Override for iOS/Androidにチェックを入れると設定できます。

Max Size : 基本は128にしておいて描画が細かいテクスチャに関しては最大でも256にします。ここは全体のテクスチャ量とかつくり方にもよってくるので、大きくなりすぎないように気をつけます。

Format : Compressedを選んで圧縮

Compression Quality : Fast

Compress usging xxxx : 選択できれば選択

これだけでかなり処理が軽減される

3Dモデルを圧縮する

3Dモデルのメッシュを圧縮することもできます。面倒くさいのでここは一気にやります。Project > Favorites > All Models でモデルの一覧を表示選択し、インスペクタを開きます。まずインスペクタのModelタブを選択します。

Mesh Compression : High ここでメッシュを圧縮

Read/Write Enabled : チェック外す

アニメーションのない背景やオブジェクトはさらに、Rigタブを選択し、

Animation Type : None 

さらにAnimationsタブを選択し、

Import Animation : チェック外す

マテリアルをベイクする

背景モデルや動かないモデルのマテリアルはグローバルイルミネーションを基本的に全部ベイクしてしまいます。Project > Favorites > All Materials でマテリアルの一覧を表示して選択します。特殊なシェーダはベイクできないので、Standardシェーダを使ったものをベイクします。インスペクタを開き、

Global Illumination : Baked もしくは None

あと建物のモデルだと窓とかに透過が使われてたりすることもあるけど、モバイルでは思い切ってガラスは外して超クリアな窓にしてしまいます。

ライティングをベイクする

ライティングもあらかじめ全部ベイクします。Window > Lighting > Sceanを開きます。

Precomputed Realtime GI : チェック外す

Baked GI : チェック

Precomputed Realtime GI はある程度グローバルイルミネーションの様子がわかるのでモデルをいじったりするときはチェックを入れておく。最終的にはBaked GIでベイクします。

あと、このSceanパネルの下の方にある、「Other Settings」にBuildのボタンがありますが、ここの横のAutoのチェックを外しておきます。チェック入ってると設定変更するたびにベイクの実行が始まります。もろもろ設定が完了したらBuildボタンを押すようにしてます。

だいたいこんなところでしょうかね。