Unityの3Dゲーム開発をしていると、3DオブジェクトをUI要素として画面に表示したいタイミングが結構あります。
たとえば、インベントリ上にアイテムの3Dプレビューを表示したり、UI上でパーティクルなどのエフェクトを使いたい時などがありますね。
このような問題を解決するための手法に「Render Texture」を使う方法があります。
ということで今回は「Render Texture」についての解説をしていきたいと思います。
Render Textureとは?

Render Textureは、カメラが捉えたビューをテクスチャとして出力することを可能にする機能です。
これを利用することで、上記のGIFのように3Dオブジェクトをリアルタイムで2DのUI上に表示することができます。
公式リファレンスはこちらをご確認ください。


Render Textureの作成方法
Render Textureは静的に作成しておく方法と動的に作成する方法があります。
それぞれの方法でメリット/デメリットがあるので、自分のやりたいことにあった方で作成しましょう。
静的に作成する方法
作成方法

Unityエディタのメニューバーから「Assets > Create > Render Texture」を選択して作成できます。
メリット
- 事前にエディタ上で確認しながら設定しておけるため、開発が容易でスムーズになる
- 予めRender textureを作成しているため、ランタイム中には作成のコストがかからない
デメリット
- ゲームの実行中にRender Textureの設定を動的に変更することが難しくなり、柔軟性に欠ける
- 不要なRender Textureがメモリを占有し、メモリの無駄遣いになる可能性がある
ランタイム時に動的に作成する
private RenderTexture testRenderTexture;
public RenderTexture TestRenderTexture
{
get
{
if (testRenderTexture == null)
{
testRenderTexture = new RenderTexture(512, 512, 0, RenderTextureFormat.ARGB32);
testRenderTexture.Create();
}
return testRenderTexture;
}
}
Render Textureを動的に作成する場合は、
スクリプト上でnew RenderTexture()で設定情報を引数としてコンストラクタに渡します。
上記で指定しているのは、(幅、高さ、深度値、フォーマット)です。
設定できる項目はこちらをご確認ください。

ただし、コンストラクタを呼び出してもまだ実際にはRender Textureは作成されず、テクスチャがアクティブに設定されたときか、明示的にCreate()を呼び出したタイミングで作成されます。
メリット
- 実行時にRender Textureのサイズやフォーマットを動的に変更することができるため、柔軟性が高い
- 必要な時にのみRender Textureを生成し、不要になったら破棄することで、メモリ使用量を最適化出来る
デメリット
- 実行時にRender Textureを生成するため、特に初回ロード時にコストがかかる
- 管理に注意が必要で、実装が複雑になりがちになる
3DオブジェクトをUIに表示する手順
Render Textureの作成

まず、Render textureを先ほど説明したどちらかの方法で作成します。
今回自分の方では静的に作成する方法で作成しました。
2D設定で、サイズは512×512、カラーフォーマットはR8G8B8A8_UNORM、Depth Stencil Formatは不要なのでNoneに設定しています。
ここら辺の設定はテクスチャサイズに大きく関わってくるので、実際のプロジェクトで作成する場合はよく確認して作成しましょう。
3Dオブジェクトの準備

UIに表示したい3Dオブジェクトをシーン上に配置します。
Layerを設定するか、位置を調整して撮影するカメラに他の不要なオブジェクトが映らないようにしましょう。
カメラの設定

新しくカメラを作成し、配置した3Dオブジェクトが映るように設定します。
そして、Target Textureの欄に先ほど作成したRender Textureをアタッチします。
今回は背景は無しで映したオブジェクトのみを撮影したいので、Clear Flagsは[Depth only]に設定します。
もしスクリプト上で生成した方は、下記のようにカメラへの参照からtargetTextureプロパティに生成したRender Textureを入れてあげることで設定できます。
[SerializeField] private Camera renderCamera;
private RenderTexture testRenderTexture;
public RenderTexture TestRenderTexture
{
get
{
if (testRenderTexture == null)
{
testRenderTexture = new RenderTexture(512, 512, 0, RenderTextureFormat.ARGB32);
testRenderTexture.Create();
}
return testRenderTexture;
}
}
void Start()
{
renderCamera.targetTexture = TestRenderTexture;
}
UIの設定

あとは通常のTextureをUIに表示するのと同じで、Canvas上に配置したRawImageに生成したRender Textureをアタッチしてあげれば完成です!
Render Textureを使用する際の注意点
- Render Textureの解像度やフォーマットなどの設定は、テクスチャサイズに影響し、メモリ使用量もその分変わってくるため、適切な設定を選択しましょう。
- カメラの出力先としてRender Textureを使用する場合、それ専用のカメラが必要になり、その分レンダリングのコストが増えてしまいます。適切なカメラ設定(Culling Maskなど)を活用して、可能な限りコストを抑えましょう。
- 不要になったRender Textureをそのままにしているとメモリの無駄になってしまうため、不要になったタイミングでRelease()しましょう。
まとめ
今回は3DのオブジェクトをUIに表示する方法として「Render Texture」の使い方を説明しました。
Render Textureはかなり便利な反面、メモリ圧迫の要因となったり処理負荷の増加原因になったりします。
使用する際はRender Textureの設定や管理方法、カメラの設定などに気を付けて使いましょう!
コメント