■ 概要

本記事では、Unityの「ShaderGraph」を使って
2つのテクスチャー（画像）を合成する手順を紹介します。

この記事を書くに至った経緯として、
「2つの異なるサイズのテクスチャーを合成して1枚の画像ファイルとして保存する機能」
を実装する機会があったのですが、（イメージこんな感じです。）

実装の候補としてTexture2Dを使ってピクセルの配列を
for文で回して色を計算して～みたいなCPUプログラム側での実装や、
ゲーム画面に画像を並べてそれをスクショして保存する、などがありましたが
どれもちょっと（イケてない）なぁ…といった感じだったので、
Shaderを使って実装してみました。という経緯になってます。

とりわけ「ShaderGraph」で実装している記事が見当たらなかったので
今回は「ShaderGraph」を使って実装しました。

■ 環境

Unityバージョン　：　Unity2022.3.13f1
プロジェクトテンプレート　：　3D（URP）

今回はShaderGraphの機能が標準で搭載されている
「URP」レンダリングパイプラインのプロジェクトで解説していきます。

※ビルトインのレンダリングパイプラインでも
パッケージを後からインストールしてShaderGraphが使えます。
その手順はこちらの記事が参考になります。

■ 実装

実装の結果から。

見た目はこんな感じ。
スライダーを動かして、合成するテクスチャーのUVを調整できるようにしました。

ShaderGraphファイルの全体像はこちら。

1.　プロパティ

①メインテクスチャー（合成される側のテクスチャー）
②サブテクスチャー（合成する側のテクスチャー）
③UVのU（横軸）の開始位置（0〜1）
④UVのU（横軸）の終了位置（0〜1）
⑤UVのV（縦軸）の開始位置（0〜1）
⑥UVのV（横軸）の終了位置（0〜1）

を外部から設定可能にするためにプロパティとして定義。

2.　合成範囲のスケールを算出

３.　合成するテクスチャーのUV座標を算出

4.　Stepノードを使って合成範囲かどうかを判定

if文で表現するとこんな感じ。

if(uv.x >= StartU && uv.y >= StartV)
{
    if(uv.x <= EndU && uv.y <= EndV)
    {
        // 範囲内であれば合成する側のテクスチャーのカラーを適用したい。
        col = subTexture.color;
    }
}

５.　適用するテクスチャーのカラーを決定

「3.合成するテクスチャーのUV座標を算出」で算出されたUV座標を、
サブテクスチャーのUVに繋ぐ。

「4.Stepノードを使って合成範囲かどうかを判定」の判定結果をもとに
Branchノードで適用するテクスチャーのカラーの出力を決定する。

■ 最後に（感想）

基本的なShaderGraphの使い方は省略させてもらいましたが
こんな感じで2つの異なるテクスチャーを合成することができました。

今回の記事では2つのテクスチャーでしたが、
工夫すれば複数枚のテクスチャーを合成することも可能です。
また、シェーダー（マテリアル）で加工した状態のものをTexture2Dにコピーすれば、そのテクスチャーを画像データとして保存することもできます。

最後までご覧いただき、ありがとうございました。