RiMEからUnityまたはUE4に直接スタイリッシュな滝を作成します

少なくとも最後のゴッドオブウォーまたはRDR2を獲得するために、その開発に費やされた時間を考慮するのが怖いほど記憶に残るビジュアルを備えたゲームがあります。 また、AAAから遠く離れていても、雰囲気を賄うプロジェクトがあります。 一例として、RiMEは、スタイル、サウンド、および歴史で何度も賞賛されています。 最近、ゲームのレベルデザイナーはCD Projekt Redチームに加わり 、Cyber​​punk 2077に取り組みました。また、RiMEは3DアーティストMath Roodhuizenにインスピレーションを与え、独自のアートを作成しました。



これらすべてを背景に、リアルな水を作成するためのガイドでArtStationに出会いました。 前回川について話していたら、今回は定型化された滝についてでした。 最初の部分では、「波の効果」を作成する方法、さらにはゲームエンジンで直接作成する方法について説明します。 便宜上、すべての手順にはgifや画像が添付されています。









まず、 RiMEに取り組んだテキーラゲームズのアーティスト、サイモントランプラーに感謝します。 シェーダーとVFXの素材を見つけて、「すごい、同じことができますか？」 レポートを読んで、様式化された効果（たとえば、火のような）を作成する方法の詳細を学ぶことをお勧めします。



次に、ウォーターフォールの作成について説明します。 これは、Shader Graphシステムに慣れていない人にとって特に便利です。 私たちの目標は、新しい作業方法を学び、シェーダーをよりよく理解することです。



例としてUnityを使用しますが、ほとんどの方法はUE4にも適用できます。UE4での作業に慣れている場合は、単純に繰り返してください。 便宜上、各ステップはGIFまたは画像で視覚化されます。



だからあなたが必要になります：

• Unity 2018。
• Amplify Shader Editor （Unityプラグイン）。 ただし、お金をかけたくない場合は、Unity 2017をインストールし、 アセットストアから無料のShaderforgeをダウンロードしてください （エンジンの新しいバージョンはこのプラグインをサポートしていませんが、Unity 2017では引き続き動作します）。 いくつかのポイントが異なる方法で呼び出されることを除いて、両方のツールはほとんど同じです。
• Autodesk Maya。
• テクスチャを作成または編集するもの。 私はPhotoshopを使用し、時にはSubstance Designerも使用します（ただし、この滝には絶対に必要ありません）。

まず、滝が表面に落ちるときに発生する「リップル効果」について。 また、他の目的、たとえば水中のオブジェクトの周りに波紋を作成するために使用することもできます。







Unityを開き、シェーダープラグインがインストールされていることを確認します。 執筆時点で、Unityには独自のShader Graphがあり、まだ開発中です。 そして、彼は準備ができていませんが、Unity 2018ではAmplify Shader Editorを、Unity 2017ではShaderforgeを使用することをお勧めします。



新しいマテリアルを作成して名前を付けます（MAT_WaterWrinklesがあります）。 次に、[プロジェクト]タブでマテリアルを右クリックし、[作成]> [シェーダーの増幅]> [表面シェーダー]に移動します。 この場合、新しいシェーダーが自動的に適用されます。



マテリアルタブ>シェーダーのドロップダウンリストで、いつでもシェーダーを選択できます（Shaderforgeの場合、PBLシェーダーのようなものがあります）。 シェーダーには、フォルダーリストと、シェーダー自体を開いた後の両方で名前を付ける必要があることに注意してください。







新しいシェーダーを開くとすぐに、次のようなものが表示されます。







Shader Graphの使用に関する詳細なガイドは作成しません。完全に初心者の場合は、最初に入門ガイドをお読みください。



いずれにせよ、望ましい効果を得るためには、まず通常のPannerが必要です。 ここでは、平面上のテストテクスチャを使用しています。







パンナーはUV座標を移動します。 Wrap ModeテクスチャがRepeatに設定されていることを確認してください。 Shaderforgeでは、一時的なノードをPanner入力に接続する必要がある場合があります。Amplifyの場合、これらの基本的な値の一部はノード自体に既に含まれています。



そのため、移動するテクスチャがあります。 しかし、この効果を達成したいのです。







このためには、次のようにスクロールする必要があります。







ご覧のとおり、ノードの構造は同じです-Pannerは、UV座標をUおよびV（またはXおよびY）の方向に単純に移動します。 目的のパン方向を取得するには、UVを使用してカスタムメッシュを作成する必要があります。 わかりやすくするためのGif：



同じマテリアルを別のメッシュに適用すると、3D空間でテクスチャがUV空間を移動するときの方向を制御できます。







エフェクトを強化するには、ポリゴンをいくつか追加し、UVを歪めて、中央のテクスチャがエッジに沿って移動するよりも速くなるようにします。 そして、継ぎ目が見えないようにUVを配置します。







このことから重要な結論が得られます。良い効果は1つのシステムで構成されることはめったになく、多くの場合複数のシステムの組み合わせです。



テクスチャが正しい方向に正しい速度で移動しました。 UVスキャンは、Pannerを使用してUV空間を右から左に移動すると、3D空間でインおよびアウトの動きになるように配置されます。 3Dモデルのテクスチャに継ぎ目がないように、UVスキャン（グリッドにスナップするためのXホットキー）をテクスチャ空間の頂点に垂直に固定する必要があります。 その結果、望ましい効果を達成しました。



透明になりました。 基本的なことから始めましょう。 シェーダーで行う多くの単純な計算には、0（黒）から1（白）までの値があります。 つまり、0.5は灰色の陰影、0.2は暗い灰色の陰影です。 これらの値を（この場合、メイン出力ノードの不透明度チャンネルに）適用するとき、マテリアルの透明度のレベルを制御します。 最初にこの機能を有効にする必要があることに注意してください。 Amplifyでは、レンダリングの種類（ブレンドモード）を不透明から透明などに変更できます。 この場合、Transparent Cutoutレンダリングタイプを使用します-このマテリアルで表示されるピクセルは、完全に透明または完全に不透明です。 これは上記のgifで見ることができます-このシェーダーによって表示される「半透明」ピクセルはありません。







ステップでグラデーションテクスチャを取得し、シェーダーに配置します。 ここで、メインノードのアルベド出力（色）に接続します。







そして、ここでは、不透明マスクの出力に接続されています（このパラメーターは、レンダリングタイプが透明カットアウトの場合に有効になります）。







グラデーションテクスチャは、黒と白のピクセル値を使用して透明度または不透明度を決定していることがわかります。 1（白）から0.5（グレー）まではすべて不透明になり、0.5（グレー）から1（黒）まではすべて完全に透明になります（またはまったく表示されません）。 不透明度マスクは、強い線を作成し、値が近い方に応じて値を0または1に丸めます。



別のグレースケールテクスチャ：







不透明マスクに接続：







あなたはアイデアを得た。 そして、あなたはそれがどのように使用できるかを推測します：







基本的に、シェーダーグラフで青い画像がスクロールします。 そして、このノードのR（赤）出力のみを使用しているという事実。 最適化のために、2つのグレースケールテクスチャ（グレースケールテクスチャ）を1つのファイルにまとめましたが、これは必須ではありません。 同様の画像は、PhotoshopまたはSubstance Designerを使用してパッケージ化できます。







波及効果は良い出発点ですが、より良い場合があります。 リップル効果をよりランダムにするために、2つのグレースケールテクスチャを重ねてみませんか？







同じテクスチャを使用しますが、異なるチャンネルを追加します。 異なる速度で、少し異なる方向に少しスクロールします。 テクスチャにはグレー値の適切な勾配があり、ランダムな波の効果の感覚を与えます。



次のgifには、まだ説明していないことがもう1つあります。そのため、バージョンが少し異なる場合があります。







たとえば、値0.2（レンダリングしない）のピクセルが値0.4（これもレンダリングしない）のピクセルを通過し、追加のノード（0.2 0.4と0.6に追加されました）。 これらの2つの波のグレースケールテクスチャを異なる速度で重ねて追加すると、目的の効果に近くなります。







ここでは、結果を示すために、Photoshopでグレースケールテクスチャを互いに追加しました。







ただし、メッシュの端の継ぎ目はまだ明確です。 そして、これを取得する必要があります。







代わりに：







2つのGIFの最初では、波紋はゆっくりと落ち着き、グリッドの端に近づくにつれて小さくなります。 これを行う最も簡単な方法は、頂点カラー（頂点カラー）を使用することです。



モデルの各頂点には、独自のデータ（X、Y、Z座標など）と0〜1の値を持つ色が含まれています。頂点の色は3Dエディターでも設定できます。

外側の頂点のほとんどは黒です（つまり、値は0です）。 中心に近づくと、それらは白になります（1に近くなります）。 色付け可能な頂点を取得するには、追加のサブディビジョンが必要になることに注意してください。







たとえば、Mayaでは、色付けのために、[メッシュ表示]メニューの[頂点の色をペイント]に移動し、[その他のオプション]フィールドをクリックします。



これで、Multiplyを使用してシェーダーで頂点カラーを組み合わせることができます。







使用するテクスチャの上にグラデーションを適用し、レイヤーモードを乗算に設定しました。







グラデーションによりグレー値が0（黒）に増加するため、ピクセルのレンダリングはより困難になります（値0.5未満では表示されません）。 これは、脈動の線がエッジに近づくように圧縮されるという事実につながります（頂点の色は主にグラデーションとして機能します）。







さざ波線の太さを制御するために、さらにいくつかのノードを追加しました。 完全なグラフは次のとおりです。







スクロールの速度/方向を試して、テクスチャを調整し、タイルを変更して効果を最大限に活用してください。



これは、より複雑なシェーダー-滝の作成に役立ちます。 次の部分で彼について話します。