[UE4]独自の描画を行うViewportを作る ① ViewportClientとCanvas

こんにちは、エンジニアの小倉です。
今回は、エディタ拡張などで使える、描画内容をカスタムしたViewportの作り方を前後編にわけて紹介します。
上記画像は、今回と次回の記事で得られる最終結果となります。

記事構成

① ViewportClientとCanvas      <= イマココ！
② ShaderとRHI

目次

Viewportとは
ViewportClientを作成する
ViewportClientのDraw関数を定義する
FCanvasTileItemによるテクスチャの描画

Viewportとは

Viewportは、大雑把に説明すると上図の赤線部で示されている、任意の物体や空間を描画する領域のことです。
描画以外にも、マウスカーソルなどの画面に対する入力を受け取り、それに対する処理を行っています。

ViewportClientを作成する

ここでは、任意のUIを配置可能なウィンドウを作れるEditor Standalone Windowプラグインテンプレートを使用します。
これはSlateで構築したUIを簡単に確認できるので、エディタ拡張の試作にとても便利です。
Viewportの追加も、SViewportというSlate Widgetを介して行うため、このテンプレートを使うと簡単です。
ここでは、プラグインの名前を「RenderTest」としました。

次に、ViewportClientクラスの作成を行います。
ViewportClientは、主にViewportが受け取った入力を処理し描画処理を行うためのクラスです。
次のようにRenderTestViewportClient.hとRenderTestViewportClient.cppを追加しました。

ViewportClientには汎用的に使えるいくつかのクラスがあります。
例えば、エディタ用の高機能なものにはFEditorViewportClientがあります。
ここではよりプリミティブな描画を行いたいためFViewportClientを継承しました。

次に、エディタ拡張した部分にViewportが表示されるようにします。
RenderTest.hとRenderTest.cppを次のように変更します。

Viewportを追加するために必要なクラスは、SViewport, ViewportClient, FSceneViewportの3つになります。
まずViewportを表示するためのSlate WidgetであるSViewportを作成します（18行目）。
次に、ViewportClientを作成します。ここではRenderTestViewportClientを作成します（22行目）。
最後にViewport本体を作成します。SViewportを使う場合はFSceneViewportを使います（23行目）。
ここまででエディタを起動すると、RenderTestウィンドウは次のように真っ黒になります。
これはViewportへの描画が何も行われていないためです。

ViewportClientのDraw関数を定義する

Viewportへごく簡単な描画を行います。
FViewportClientクラスのDraw関数をオーバーライドして、次のように描画処理を定義しました。

ViewportClientのDraw関数では、FCanvasに対してFCanvasItemを用いて線や矩形を描画することができます。
ここでは、始点座標と終点座標を与えて線を描画するFCanvasLineItemを用いました。
これを定義した後にRenderTestウィンドウを開くと、次のように青い線が引かれるようになります。

FCanvasTileItemによるテクスチャの描画

FCanvasItemで描画できるものの中で特に重要なものはFCanvasTileItemクラスです。
このクラスは、指定した矩形領域をテクスチャで塗りつぶすことができます。
ここでは青いRender Targetを生成し、それをViewportいっぱいに描画しています。

まず、Render TargetをFRenderTestViewportClientクラスのインスタンス変数として宣言し、コンストラクタ内でNewObjectによって生成します（4～11行目）。
次に、Render Targetが描画されていることを確認しやすくするため、ClearColorを青に設定し、UpdateResource関数で青色にクリアします（9、10行目）。
最後に、Draw関数内で矩形左上の座標、描画テクスチャ、矩形サイズを与えてFCanvasTileItemを生成して描画します（18，19行目）。

これを実行すると、次のようになります。

ここでは青でクリアしただけのテクスチャを描画しましたが、Render Targetには任意の描画を行うことができます。
次回はShaderとRHIを使ってRender Targetに描画を行い、それをViewportに表示する例について紹介します。