Unity5+SkyshopでWebGL出力のテスト

試してみたので覚え書き。

Unity5でWebGL出力が可能になるってことで期待してるわけですが、Unity5betaが出たので早速試してみました。

 

まずはこの、だいぶ前にノギスでミリミリ測りながら作ったガラケーの3DモデルをUnityに移植。

ガラケーモデル

マテリアルや背景にはSkyshopを使いました。

Skyshopを使ってもちゃんとブラウザで見えるのかどうかも試したかったことの一つです。

 

で、とりあえずモデルの準備が出来たのでWebGLで書き出し。

webGLtest1webGLtest2

 

全然ちゃんと表示されねー!!

 

 

軽く絶望した後によくよく見てみると、ちゃんと表示されている部分もある。

ShaderForgeで自分で作ったシェーダー部分は表示されていて、Skyshopのプリセットシェーダーを使ってる部分がダメっぽい。

ShaderForgeでSkyshopのノードも使ってるんだけどな、、、謎。

 

 

仕方ないので全部のマテリアルを自前で作ったシェーダーに置き換える。

むしろ作ったシェーダーが表示されるのは有難い。

ShaderForgeノード

矢印のようにSkyshopのノードを使ってます。

 

すると、出ました!

ブラウザ比較

macのsafariとchromeで表示してみたところ、safariではイメージエフェクトのbloomが効かないようです。

あと、肝心のモバイル端末で表示されない。。。これは自分のやり方が悪いのかな。

 

まだいろいろ試す必要がありそうですが、思ったよりは楽にイメージ通りの映像が出てくれました。

Unityも5正式版になればまた変わるかもしれないし楽しみですね。

 

そのうち消すかもしれませんが、出力したものをアップしました。

http://voxcelldesign.co.jp/VDdata/WebGLtest6/index.html WebGLtest

OculusScreenshotCameraのスクリーンショットの画角比較

OculusScreenshotCamera.csを使った時のスクリーンショット画像の画角を比較してみました。

 

まずは普通のサイドバイサイド画像。

比較サイドバイサイド

 

縦方向の画角設定(vertical FOV)を10度ずつ変えてみます。

 

20度

比較20度

30度

比較30度

40度

比較40度

50度

比較50度

60度

比較60度

70度

比較70度

80度

比較80度

 

環境を広めに見せるなら70~80度くらいが良さげかな?

Oculusで見たときの感覚に近いのは50度くらいな印象。

画角比較

 

OculusRiftで普通のスクリーンショットを撮るスクリプト OculusScreenshotCamera.cs

「普通の」というのはOculusの歪み補正などがかかってない普通のカメラ映像ってことです。

OculusRiftの映像というとよく見るのはこういう感じですね。

NailCanvasVR-20141030 (0-01-44-04)

「あ、Oculusの映像なのね」と知ってる人なら一目で分かってこれはこれでいいのですが、

映像が小さくなるし歪み補正やら色収差補正がかかっていて、

 

もっと絵として綺麗な状態で出したいんじゃ〜〜、

 

という内なる欲求が出たので稚拙ながら作ってみました。

 

このスクリプトを使うとOculusの視野内にカメラビューのウインドウが表示されまして、

Sキーを押すとそのウインドウの画角でPNG画像として書き出されます。

カメラビューイメージ2

↓こういう感じで。

OculusScreenshotCamera-20141102-054658

OculusRiftを装着しながら、見えている景色をそのまま保存したいと思ったわけであります。

 

やってることは単に板ポリにRenderTextureを貼ってるだけ。

板ポリに貼ってるだけ

なので普通に他オブジェクトに潜ったりします。

 

 

だがしかし、とりあえず開発しながらスクショ撮りまくれるやん。やったね!

 

もっとちゃんと作って「Oculusの空間内で35mmカメラを模擬」とかやるとちょっと面白そうな気も。

 

OculusScreenshotCamera-20141102-070700 OculusScreenshotCamera-20141102-070833 OculusScreenshotCamera-20141102-070937 OculusScreenshotCamera-20141102-083556

 

 

両手をLeapMotionにかざしたままスクショを撮りたい場合は、、、

 

足で押したらええんちゃうかな。↓

 

OculusScreenshotCamera-20141102-085601

 

スクリプトの使い方は、

Oculusの「OVRCameraRig」の下にある「CenterEyeAnchor」にスクリプトをアタッチするだけ。

使い方説明1

インスペクターのVertical FOVの値を変えると画角を変えられます。

使い方説明2

この数値を60にすると、だいたいOculusで見たときの横幅いっぱいまでカバーした広角の画像が撮れます。

今回自分は指をある程度大きく写したかったので38を初期値にしていますが、撮りたい絵によって変えてください。

68以上にするとカメラビューのオブジェクトが写り込んでしまいます。

ちゃんとやるならレンダリングから外すなり、オブジェクトに潜らないようZテスト外すなりするところですが、

とりあえず「C」キーでウインドウが非表示になるのでその状態でスクショ。オッケー。

 

保存される画像は横幅1920pixのPNG形式になっています。必要に応じて変更してください。

保存先は、 Application.persistentDataPathになっていてUnityエディタのコンソールに保存先のパスが表示されます。

あとは使い方によってマウスボタンでスクショとかにすると動きながら撮りやすいかも?

 

 

わたくしのプログラム脳はMSX-BASICで止まっているのでコードを晒すと失笑されそうなわけですが、汎用的に使えそうな気もするので載せてみます。

これじゃダメだろ!というダメ出しや、もっといい方法や既に同じようなプラグイン等があれば是非ご教授ください。(ツイッター@VoxelKei)

 

(追記:ちょっと変更しました→「OculusRiftで普通のスクショとそうでないスクショを撮るスクリプト」)

 

OculusScreenshotCamera.cs

 

初めてSyntaxHighlighterを使ったんだけど、

インデントが反映されないのはどうしたらいいのでしょう・・・

(追記:SH TinyMCE Buttonというwordpressプラグインを使ったら出来た)