【Unity/PlayCanvas】PlayCanvasのシーンの作り方について研究してみた!

ハローッ!新入社員のタケです!

今日はPlaycanvasについていろいろ研究をしてみました!
操作が簡単で、わりと早く慣れちゃいましたね~


Unityとビューの操作がほぼ同じだったり(右クリック中にASDWで移動、QEで上昇降下)、オブジェクトの制御もコンポーネントに似ています。
Unityに入れた時のシーンに引けを取らないくらい綺麗に表示できて満足です!


モデルの導入もFBXをドラッグアンドドロップするだけでできちゃいますし、ウェブで表示するのに必要なJsonファイルなども自動生成してくれます。


マテリアルについてもUnityのStandardシェーダとだいたい同じ機能が備わっていたので同じ感じで使えました。


ただ結構悩んでいたのが鉄っぽいマテリアル等の反射についてです。
Unityでずっと使っていたReflection Probeのようなものはもちろんないので、環境マップを用意する必要がありました。
PlayCanvas上ではベイクもできませんからね…!


そこでUnityで同じシーンを開いてそこで環境マップを撮影し、それを使ってみることにチャレンジしました。


PlayCanvasで環境マップを使うにはCubeMapと呼ばれるものを用意しなくてはいけません。
CubeMapは6枚のテクスチャを立方体に貼り付けて疑似的に空間を表現しようとする考え方です。


Unityはどちらでも使えますが基本的にはパノラマ画像を使って天球状のスカイドームを使うのが一般的です。(Reflection Probeもありますし)
なので、CubeMapを使う方法は基本的にやる人がいないので情報が全然ありませんでした。

そこで私は以前動画を作る時にUnity Recorderを使ったことを思い出しました。
探してみると、360°画像を出力する設定があったのです!


そこでパノラマ画像からCubeMapを生成できるサイトを先輩から教えてもらったので使わせていただきました!
パノラマ画像をドラッグアンドドロップするだけで6枚の画像に分解してくれます。

https://www.graphix.org.uk/app/index.html

これを使ってPlayCanvas内でCubeMapを組み立てて使用すると…


ちゃんと反射できました!
長かったですが、これがおそらく一番簡単なやり方でしたね…




何だかこう考えるとUnityのReflection Probeってすごい便利な機能だなと思いました。
Web上の処理には限界があるのでここは我慢しましょう…!

今日の成果物!

PlayCanvasの研究
制作時間:4時間45分

--------------------------------------------------------------------------------

シェルパでは、3DCGや建築パースはもちろん
VRやARアプリの開発も行っています!
新しいことに興味のある方はきっと楽しめると思います!
新人研修も充実していて初心者でも3DCG経験者でも安心!

株式会社シェルパ
【福岡本社】
〒810-0042 福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F 
【東京オフィス】
 〒101-0041 東京都千代田区神田須田町2丁目13-1YKS黒田ビル5F
TEL 092-717-6800 / FAX 092-717-6801

--------------------------------------------------------------------------------

コメント