💇🏽 🅿️ 🎎 Urho3D：ポストエフェクト 👨🏾‍🤝‍👨🏻 📔 🧓

グラフィカルサブシステムUrho3Dの理解を続けています。今回は、後処理の効果について説明します。このエンジンには多くの既製のエフェクトが付属しており、前回の記事ではそのうちの1つ（ブルーム）を使用しました。しかし、どのエンジンも開発者のすべてのニーズを満たすことはできないため、独自のエフェクトを作成する方法を学ぶことは有用です。例として、壁を通して半透明のキャラクターの効果を選択することにしました。これは戦略やRPGでよく使用されます。

アイデア

簡単に言えば、ポストエフェクトは画面全体を覆う長方形のポリゴンです。そして、私たちの仕事はこの埋め立て地を着色することです。

ご注意

最適な方法で効果を実現するという目標を自分自身に設定しなかったことを直ちに予約してください。まず、後処理を使用してこれを最も簡単で理解しやすい方法で行う方法を示したかったのです。ただし、この効果を実装するためのよりエレガントなアプローチを知っている場合は、コメントで共有してください:)

必要なのは：

シーンをレンダリングします。
キャラクターの不可視部分のマスクを取得します。
マスクをある色でペイントし、シーンレンダーに適用します。

不可視部分のマスクを取得するには、次のことができます。

深度テストをオンにして、白いピクセルを表示するシンプルなシェーダーを使用してキャラクターを再レンダリングします（このようにして、キャラクターの可視部分の白黒テクスチャーを取得します）。
同じシェーダーを使用してキャラクターを再レンダリングしますが、深度バッファーはすでに無視しています（このようにして、キャラクター全体の白黒マスクを取得します）。
ある場所でマスク全体が白で、可視部分のマスクが黒の場合、これはキャラクターの望ましい非可視部分です。

合計で、3つのテクスチャを取得して組み合わせる必要があります。

実装

完成したデモはこちら（OpenGL）。開始するには、START_DEMO.batを使用します。 DataおよびCoreDataフォルダーには標準のエンジンリソースが含まれ、すべての新規/変更されたファイルはMyDataに配置されます。まあ、伝統によると、エンジンの使用バージョン。そして今、より詳細に:)

ランデブーの読み込み

以前は、マテリアルのパスの順序を設定する方法としてパッセージのレンダリングを検討していました（セクション「レンダリングプロセス」）。しかし、レンダーパッドは他の機能も実行します。

標準レンダーはCoreData / RenderPathsフォルダーにあります。デフォルトでは、 Forward.xmlが使用されます。レンダリングを変更するには、いくつかの方法があります。

ビューポートを作成する前に、Renderer :: SetDefaultRenderPath（）関数を呼び出します。この場合、後続の作成されたビューポートは指定されたランデブーを使用します。このメソッドはデモで使用されます。
エンジンパラメーターでレンダーパラメーターを指定します（アプリケーションの起動時にコマンドラインパラメーターを使用するか、プログラムテキストのengineParameters_を使用）。この場合、同じ関数Renderer :: SetDefaultRenderPath（）が呼び出されます。
ビューポートを作成した後、ビューポート:: SetRenderPath（）関数を使用します。
エディターでは、表示>エディター設定ウィンドウでレンダリングを指定できます。

ランデブーはファイルからロードできるだけでなく、アプリケーション中に動的に変更することもできます。たとえば、Data / PostProcessフォルダーからポストエフェクトを適用する場合、現在のレンダーにコマンドを追加するだけです。つまり、いくつかのファイル（またはファイル）の内容をData / PostProcessからCoreData / RenderPathsのいくつかのファイルの最後に単純にコピーできます。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Scripts/Main.as

void Start() { ... renderer.SetDefaultRenderPath(cache.GetResource("XMLFile", "RenderPaths/MyForward.xml")); Viewport@ viewport = Viewport(scene_, cameraNode.GetComponent("Camera")); viewport.renderPath.Append(cache.GetResource("XMLFile", "PostProcess/FXAA3.xml")); renderer.viewports[0] = viewport; }

ここでMyForward.xmlレンダラーがロードされ（Forward.xmlに基づいています）、フルスクリーンアンチエイリアスFXAA3.xmlの効果が追加されます。

レンダーターゲット

レンダーパスは、rendertargetとコマンドで構成されます。

大まかに言うと、レンダレッターは、入力としてコマンドに転送できるテクスチャであり、逆もまた同様です。チームは自分の作業の結果を表示できます。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/RenderPaths/MyForward.xml

 <renderpath> <rendertarget name="visiblemask" tag="WallHack" sizedivisor="1 1" format="a" /> <rendertarget name="fullmask" tag="WallHack" sizedivisor="1 1" format="a" /> ... </renderpath>

ここでは2つのマスクが宣言されています（visiblemaskは文字の可視部分のマスクであり、fullmaskは文字全体のマスクです）。

nameパラメーターは、アクセス可能なレンダーターゲットの名前を定義します。

tagパラメーターを使用すると、RenderPath :: SetEnabled（）およびRenderPath :: ToggleEnabled（）関数を使用して、ゲーム内で動的にオンおよびオフにできるグループ内のレンダーターゲットとチームを定義できます。すべての標準的なポストエフェクトには独自のタグがあることに注意してください。したがって、たとえば、メニューを開いたときにのみ画面をぼかすことができます。さて、デモでは、スペースバーを押すと、半透明の効果が切り替わります。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Scripts/Main.as

 void HandleUpdate(StringHash eventType, VariantMap& eventData) { ... if (input.keyPress[KEY_SPACE]) renderer.viewports[0].renderPath.ToggleEnabled("WallHack"); ... }

sizeivisorパラメーターを使用すると、ビューポートのサイズとは異なるサイズのレンダーターゲットを作成できます。デモでは、マスクのサイズはウィンドウのサイズと同じです（ビューポートがゲームのウィンドウ全体を占めるため）。ただし、たとえば、 Bloom.xmlのポストエフェクトでは、パフォーマンス上の理由から、レンダリングターゲットのサイズはビューポートのサイズの4倍小さくなっています（重ね合わせたグローには高解像度は必要ありません）。

実際、 formatパラメーターはレンダーターゲットの形式を定義します。「rgb」および「rgba」形式が最もよく使用されますが、この場合、1つのチャネルでマスクを保存するのに十分であるため、単一チャネルの「a」形式が使用されます。ニュアンスがあります。 OpenGL 2では、フォーマット「a」はGL_ALPHA（アルファチャネルで作業する必要があることを意味します）に対応し、OpenGL 3では、GL_R8を使用します（レッドチャネルで作業する必要があります）。シェーダーを検討するときにこれに戻ります。

レンダーターゲットは、ファイルの先頭で宣言する必要がないことに注意してください。ファイルの終わりでも、どこにでも置くことができます。コマンドを実行する前に、すべてのレンダーターゲットが作成されることが保証されています。

そしてすぐに必要な最初のチームについて- 明確に 。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/RenderPaths/MyForward.xml

 <renderpath> ... <command type="clear" tag="WallHack" color="0 0 0 0" output="visiblemask" /> <command type="clear" tag="WallHack" color="0 0 0 0" output="fullmask" /> ... </renderpath>

ここではすべてが簡単です-レンダーターゲットは黒で塗りつぶされています。各フレームでキャラクターの白いマスクが新しい位置に描画されるため、クリアするのを忘れると、白いループが発生します。

出力パラメーターが存在しない場合、ビューポートはクリアされます。透明なビューポートの背景が必要な場合など、クリーンアップを意図的に省略したい場合があります。

シーンパスチーム

これらは、前回の記事で言及されたものと同じレンダーパッセージです。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/RenderPaths/MyForward.xml

 <renderpath> ... <command type="scenepass" tag="WallHack" pass="visiblemask" output="visiblemask" /> <command type="scenepass" tag="WallHack" pass="fullmask" output="fullmask" /> ... </renderpath>

ここに2つのパスが追加されます。パッセージを完成させるには、キャラクターのマテリアルが使用するテクニックにも含まれている必要があります。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Techniques/DiffNormalWallHack.xml

 <technique ...> ... <pass name="visiblemask" vs="Mask" ps="Mask" depthwrite="false" depthtest="equal" psexcludes="PACKEDNORMAL" /> <pass name="fullmask" vs="Mask" ps="Mask" depthwrite="false" depthtest="always" psexcludes="PACKEDNORMAL" /> </technique

レンダーパスでパスを宣言すると、これらのパスの順序が決まり、テクニックのパスにより、使用される特定のシェーダーが決まります。この場合、これは白いピクセルを出力する最小のマスクシェーダーです。

visiblemaskおよびfullmaskが渡されるまでに、深度バッファはすでにいっぱいです。そこに何かを書く必要はありませんが、それを使うだけです。したがって、両方のパスで、 depthwriteパラメーターは falseに設定されます。ただし、 depthtestパラメーターは異なります。 depthtest =“ always”の場合、深度バッファは無視され、完全な文字マスクが描画されます。 depthtest =“ equal”の値で、深度テストは、Zバッファの値が表示されたジオメトリの深度と一致する場合、つまり同じジオメトリが再度レンダリングされる場合にのみ渡されます。

クワッドチーム

画面を閉じる長方形のポリゴンを表示するのはこのコマンドで、ポストエフェクト（いわゆる画面クワッド）を実装するように設計されています。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/RenderPaths/MyForward.xml

 <renderpath> ... <command type="quad" tag="WallHack" vs="WallHack" ps="WallHack" output="viewport"> <texture unit="diffuse" name="viewport" /> <texture unit="normal" name="fullmask" /> <texture unit="specular" name="visiblemask" /> </command> </renderpath>

ここでは、クワッドの描画にWallHackシェーダーが使用され、3つのテクスチャがこのシェーダーの入力に送信されます（ビューポートはレンダリングされたシーン、fullmaskはキャラクターのフルマスク、visiblemaskはキャラクターの可視部分のマスクです）。テクスチャユニットの名前（拡散、通常、および鏡面反射）と混同しないでください。それらを介して何でも自由に転送し、シェーダーで好きなものを使用できます。

WallHackシェーダーは非常にシンプルです。

1）レンダリングされたシーンのテクセル色を取得します（レンダリングパスでは、拡散テクスチャユニットを介してシーンレンダリングをレンダリングしたことを思い出します）。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Shaders/GLSL/WallHack.glsl

 void PS() { vec3 viewport = texture2D(sDiffMap, vTexCoord).rgb; ... }

2）両方のマスクを取得します。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Shaders/GLSL/WallHack.glsl

 void PS() { ... #ifdef GL3 float fullmask = texture2D(sNormalMap, vTexCoord).r; float visiblemask = texture2D(sSpecMap, vTexCoord).r; #else float fullmask = texture2D(sNormalMap, vTexCoord).a; float visiblemask = texture2D(sSpecMap, vTexCoord).a; #endif ... }

上記のニュアンスに戻ると、OpenGLのバージョンに応じて、シングルチャンネルテクスチャを使用する場合、異なるチャンネルを使用することがわかります。

ソース/ Urho3D /グラフィックス/ OpenGL / OGLGraphics.cpp

 unsigned Graphics::GetAlphaFormat() { #ifndef GL_ES_VERSION_2_0 // Alpha format is deprecated on OpenGL 3+ if (gl3Support) return GL_R8; #endif return GL_ALPHA; }

ハードウェアがOpenGL 3をサポートしている場合、このバージョンがデフォルトで使用されます。テストの目的で、-gl2コマンドラインオプションを使用してエンジンにOpenGL 2を使用させることができます。

3）最後に、3つのテクスチャすべてが結合されます。

https://github.com/1vanK/Urho3DHabrahabr06/blob/master/MyData/Shaders/GLSL/WallHack.glsl

 void PS() { ... if (fullmask == 0.0 || visiblemask > 0.0) gl_FragColor = vec4(viewport, 1.0); else gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }

この場所でマスク全体が黒の場合（つまり、フラグメントがキャラクターに属していない場合）、レンダリングされたシーンのテクセルを表示します。そうでなければ、 可視マスクが黒でない場合（つまり、フラグメントがキャラクターの可視部分に属している場合）、レンダリングされたシーン（すべての栄光のキャラクターの可視部分、法線マップなど）もレンダリングします。そうでない場合、3番目の最後のオプションが残ります-フラグメントはキャラクターの不可視部分に属します。ここでは赤で描画します。

出力中間テクスチャ

デバッグの目的で、中間レンダーターゲットを画面に表示したい場合があります。標準のCopyFramebufferシェーダーを使用すると便利です。レンダリングの最後に追加するだけです：

 <renderpath> ... <command type="quad" vs="CopyFramebuffer" ps="CopyFramebuffer" output="viewport"> <texture unit="diffuse" name="  " /> </command> </renderpath>

このシェーダーは、拡散テクスチャユニットを介して、rgb（a）形式で目的のテクスチャを与えることを期待しています。単一チャネルマスクの出力には適していません。したがって、入力で「a」形式のテクスチャが必要になるように、このシェーダーを少し変更しました（ ShowATexture.glslシェーダーを参照）。彼の助けを借りて、この記事のスクリーンショットが作成されました。

 <renderpath> ... <command type="quad" vs="ShowATexture" ps="ShowATexture" output="viewport"> <texture unit="diffuse" name="fullmask" /> </command> </renderpath>