SEO-Description:Unreal Engine でテクスチャをプロシージャルに作成し編集するためのテクスチャ グラフ ノードのリファレンス。 Type: Tutorial Parent: designing-visuals-rendering-and-graphics/textures/texture-graph-editor Primary-Owner: DN.Cherry Tags: surfacing Tags: materials Tags: Experimental Topic-image: topic.png Hero-image: hero.png Social-image: social.png Version: 5.5 Order: 1
テクスチャ グラフ エディタ は、Unreal Engine でテクスチャをプロシージャルに作成するためのノードベースのインターフェースです。このガイドでは、カスタム UV チェッカー パターンを生成するテクスチャ グラフの作成方法を説明します。
グラフによって、タイル、カラー、グリッドライン、矢印の数をカスタマイズできます。このグラフの作成により、テクスチャ グラフに関連するいくつかの主要概念とワークフローを探求できます。
最初のグラフを作成する前に、エディタと有用な一般概念の概要について「テクスチャ グラフの利用開始」ガイドを確認しておくと役立ちます。
プラグインをロードする
テクスチャ グラフ エディタは実験的機能プラグインであり、Unreal Engine を開始したときにデフォルトではロードされません。
プラグインを有効にするには、次の手順を実行します。
- メニュー バー で、[Edit (編集)] > [Plugins (プラグイン)] を選択します。
- 検索バーに、「texture graph」と入力します。
- TextureGraph プラグインを有効にし、ダイアログのポップアップで、[Yes (はい)] を選択します。
- エンジンを再起動します。
テクスチャ グラフ アセット
新しいテクスチャ グラフを作成するには、次の手順を実行します。
- [Content Drawer (コンテンツ ドロワー)] を開き、[Add (追加)] > [Texture (テクスチャ)] > [Texture Graph (テクスチャ グラフ)] をクリックします。
- 新しいアセットの名前を「TG_UVChecker」に変更します。
- アセットを保存してからダブルクリックし、エディタを開きます。
ベース チェッカー タイルを構築する
パターンのベースは繰り返し使用したり、編集したりすることができる 2 x 2 タイルです。
このガイドでは、パターンをゼロから構築し、ワークフローとユーザー制御を探求します。
すぐにチェッカー パターンが必要な場合は、いくつかの標準的なパターン タイプのオプションがある Pattern ノードを検討することができます。
チェッカー パターンの制作を始めるには、次の手順を実行します。
- ノード パレットから、[Procedural (プロシージャル)] セクションにアクセスし、Shape ノードをグラフにドラッグします。下向きの矢印をクリックしてノードを展開し、可能なすべてのオプションを表示します。
- [ShapeType (形状の種類)] を長方形に変更します。
- Output ピンをクリックし、ドラッグします。選択を解除すると、ノード パレットが開きます。リストから「Transform」を検索し、選択します。Shape ノードと Transform ノードは自動的に接続されます。
- この手法を使ってノードを作成する場合、1 番上の入力値に接続されることを忘れないでください。
- Transform ノードを展開し、[Coverage (カバレッジ)] を 0.5、0.5 に調整します。トランスフォームのカバレッジを調整すると、入力画像 (この場合は、単純な長方形) を指定された値に縮尺します。デフォルトでは、フィルカラーはカラーまたはアルファ値で空です。フィルカラーは詳細設定で設定できます。
- Shape ノードから 2 つ目の Transform ノードをドラッグします。2 つ目の Transform の [Coverage] を 0.5、0.5 に設定し、[Offset (オフセット)] を 0.5、0.5 に設定します。占有スペースを少なくするために Transform ノードを最小化します。
- グラフ ビューで右クリックし、[Math (数式)] までスクロールダウン、または検索してメニューから Add ノードを探します。
-
Transform ノードの Output 値を Add ノードの入力 A と入力 B に接続します。単一の 4 マスのチェッカー タイルができます。
- グラフを構築するとき、整理しておくことが重要です。すべてのノードを選択し、グラフを右クリックしてから [New Comment (新規コメント)] を選択します。コメント ボックスには 4 つのノードが含まれます。コメントに「CheckerBlock」と名前を付けます。
分割線を作成する
基本のチェッカーブロックで、分割線を重ねて、太さとコーナーの半径値をコントロールできます。
分割線を追加するには、次の手順を実行します。
- Shape ノードを作成し、形状を矩形に設定して、幅と高さを「0.9」にセットします。
- Shape ノードの出力ピンをドラッグして、検索し、Transform を選択します。
- Transform ノードの Repeat 値を「2.0」、「2.0」に設定します。
- Output ピンをドラッグし、Invert を検索して選択します。このノードにより、対象のライン マスクに正しい値が得られます。
-
Invert ノードで、Clamp を有効にします。
- 作成した線の基本構造で、線の太さとコーナー半径を調整するメカニズムを追加できます。グラフ内を右クリックし、Scalar を検索して選択します。
- このノードを右クリックして [Rename (名前変更)] を選択することで、ノードの名前を「Rounded Corners」に変更します。このノードを Shape ノードの Rounding ピンにつなげます。値を「0.25」に設定します。
- この手順を繰り返して、3 個のスカラー ノードを作成し、名前を「LineThickness」、「SquareBase」、「LineMult」に変更します。1.LineThickness ピンをドラッグして、検索し、リストから Multiply を選択します。
- LineMult の出力から Multiply ノードの B ピンにつなげ、値を「0.1」にセットします。
- SquareBase ピンをドラッグして、検索し、リストから Subtract を選択します。
- Multiply ノードの出力を Subtract ノードの B 値につなげます。
- Subtract の出力ピンを Shape ノードの Width および Height 値につなげます。
- すべてのノードを選択し、周りに新規コメント ボックスを作成して、グラフをわかりやすくします。
矢印を作成する
パターンの向きを示すために、それぞれの正方形の中心に矢印を追加できます。
この最終要素を追加するには、次の手順を実行します。
- グラフ内を右クリックし、Shape を検索して選択します。この手順を繰り返して、2 個の Shape ノードを作成します。
- 1 番目のノードの形状を Triangle に設定してから、幅を「0.6」にセットします。
- 出力ピンをドラッグし、Transform を検索して選択します。Offset 値を「0.0」、「0.05」に設定します。
- 2 番目の Shape ノードを Rectangle に設定してから、幅を「0.1」、高さを「0.4」にセットします。
- 出力ピンをドラッグし、Transform を検索して選択します。Offset 値を「0.0」、「0.8」に設定します。
- グラフ内を右クリックし、Add を検索して選択します。Transform ノードの出力ピンを Add ノードにつなげます。
-
Add ノードを選択してから、プレビュー ウィンドウで、ロック アイコンをクリックします。このアイコンは、他のノードを選択したときでも、元のノードのプレビューをロックします。このロック プレビューにより、トランスフォーム値を編集し、最終結果を確認することができます。
- 単一の矢印形状を、作成した標準的な 4 個の正方タイルベースに変換します。実行するには、Add ノードの出力ピンからドラッグし、検索して Transform を選択します。
- Transform ノードの Repeat 値を「2.0」、「2.0」にセットします。
- 他のノードのプレビューを確認するために、プレビューのロックをオフにします。
- 矢印が若干大きすぎます。Zoom 値を「-0.1」に設定して、繰り返すそれぞれのタイルをスケーリングします。負の値では、ズームアウトし、結果として小さい矢印になります。
- ズームアウトすると、各タイル間の空の領域が増えます。[Details (詳細)] パネルで、[Fill Color (フィルカラー)] 値をクリックして、A (アルファ) 値に「1」をセットします。色はデフォルトでは黒にセットされています。これらの値を調整して、ソリッド マスクを作成します。
- すべてのノードを選択し、周りに新規コメント ボックスを作成して、グラフをわかりやすくします。
コンポーネントを結合し、色を追加する
スケーラブルなチェッカー パターンを作成するためのコア構成要素が完成しました。後からパターンを調整するためのグリッド ライン セクションと同様のコントロールをさらに追加できます。
- まず最も重要な要素であるチェッカー カラーから始めます。ノード パレットから 2 個の Color ノードをドラッグして、配置します。
- ノードの名前を「CheckerColorA」と「CheckerColorB」に変更します。
- [Details (詳細)] パネルで Color ノードを期待するチェッカー カラーに調整します。
- CheckerColorA の出力ピンからドラッグし、検索して Blend を選択します。Blend ノードは、複雑なブレンド処理向けの多くの機能がある強力な関数です。この例では、デフォルト設定を維持します。
- CheckerColorB の出力ピンを Blend ノードの Background 値にアタッチします。
- チェッカーブロックの Add ノードの出力ピンからドラッグして、新しい Transform ノードを作成します。
- 新規 Scalar ノードを作成し、名前を「CheckerRepeat」にします。
- CheckerRepeat 値を「2.0」にセットします。
- CheckerRepeat の出力ピンを新規作成した Transform ノードの Repeat ピンにつなげます。単一のスカラー入力が X と Y の繰り返し値に適用されます。
-
Transform ノードの Output ピンを Blend ノードの Mask 値につなげます。
グリッド ライン カラー
グリッド ラインでも同様のワークフローを繰り返すことができます。線の太さと丸いコーナーに対するコントロールをすでに作成しましたが、ライン カラーの設定はまだありません。
- 新しい Color ノードを作成して、名前を「LineColor」に変更します。
- [Details (詳細)] パネルで LineColor ノードを期待する色に調整します。
- LineColor ノードの出力ピンからドラッグして、検索し、Blend を選択します。
- 前に作成したチェッカー Blend ノードの出力ピンを新しい Blend ノードの Background 入力につなげます。
- GridLines コメント ボックスで、Invert ノードの出力ピンからドラッグして、検索し、Transform を選択します。
- CheckerRepeat ノードを新しい Transform ノードの Repeat 入力につなげます。出力ピンを複数回使用できます。
- Transform ノードの出力ピンを新しい Blend ノードの Mask 入力につなげます。
矢印のカラー
この処理を繰り返して、チェッカー パターンの上に矢印を追加します。
- Color ノードを作成し、名前を「ArrowColor」にします。
- [Details (詳細)] パネルで ArrowColor ノードを期待する色に調整します。
- ArrowColor ノードの出力ピンをドラッグして、検索し、Blend を選択します。
- 前に作成したチェッカー Blend ノードの出力ピンを新しい Blend ノードの Background 入力につなげます。
- Arrow コメント ボックスで、Transform ノードの出力ピンをドラッグして、検索し、Transform を選択します。
- CheckerRepeat ノードを新しい Transform ノードの Repeat 入力につなげます。
- Transform ノードの出力ピンを新しい Blend ノードの Mask 入力につなげます。
- Blend ノードの出力ピンをドラッグして、検索し、Output を選択します。Output ノードの名前を「BaseColorOutput」に変更します。
出力およびエクスポート
Output ノードには、共通のテクスチャ属性、出力名、フォルダ パス、解像度の設定があります。
複数の出力を単一のグラフに追加できます。このワークフローが便利なのは、カラー、ラフネス、法線、メタリック マップを必要とするマテリアル向けにさらに複雑なテクスチャ セットを作成するときです。
複数の出力タイプをセットアップするには、次の手順を実行します。
- GridLines コメント ボックスで、Transform ノードの出力ピンをドラッグして、検索し、BrightnessContrast を選択します。
- Brightness を「0.5」に調整し、さらに平板なグレースケール イメージを作成します。
- BrightnessContrast ノードの出力ピンをドラッグして、新しい Output ノードを作成します。ノードの名前を「RoughnessOutput」に変更します。
- 前に作成した Transform ノードの出力ピンをドラッグして、検索し、NormalFromHeightMap を選択します。
- NormalFromHeightMap ノードの出力ピンをドラッグして、新しい Output ノードを作成します。ノードの名前を「NormalOutput」に変更します。
-
それぞれの出力ノードの出力名と圧縮設定を調整します。
- メインメニュー バーの [Export (エクスポート)] をクリックします。
エクスポート ウィンドウが開き、マップとして出力できる出力ノードが表示されます。必要に応じてこれらを選択または選択解除して、すべてのマップまたは一部でイテレートできます。ウィンドウで [Export (エクスポート)] をクリックして、新しいテクスチャ マップを作成します。
多様なテクスチャ ワークフローでテクスチャ グラフ エディタを使用して、既存テクスチャの基本的な編集、新しいテクスチャの作成、パッキング、アトラス処理、ブループリントとの統合を実行できます。パイプライン ユーティリティとしてテクスチャ グラフを使用して、共通の処理に利用できます。