UnityのShaderで１枚のテクスチャから部分的に切り出し出力テクスチャに任意の位置と大きさで複数のテクスチャを貼り付けたい

Question

UnityのShaderで１枚のテクスチャからUVを指定して素材を切り出し動的にレイアウトを変更できるテクスチャを出力できるものを作ろうとしています。（最終的にはSkyBoxに使いたい）

貼り付ける枚数が多いとコードが複雑になるかと思いますので２枚でも問題ありません。
１枚はこちらを参考にオフセット指定とクリッピングで実現できたのですが複数枚貼る方法がわかりませんでした。
https://teratail.com/questions/hds9mxsd75kydy
https://teratail.com/questions/flw1yal2i9rrz1

環境は以下になります。
Unity: 2021.3
OS: Windows 10

(入力サンプル画像)

よろしくお願いします。

Answer 1

ちょっとやってみようかと思いまして、まず下記のようなシェーダーを用意しました。
方針としては、各パッチ（テクスチャから切り出して配置する個々の部分を、パッチワークになぞらえて「パッチ」と呼ぶことにしました）の配置先座標を配列として与えて、それに従ってマッピングする形で行くことにしました。

Shader "Unlit/Patches"
{
    Properties
    {
        _MainTex ("Background Texture", 2D) = "white" {}
        _Color ("Background Color", Color) = (0.15686274509, 0.50196078431, 1.0, 1.0)
        [NoScaleOffset] _PatchTex ("Patch Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "Queue" = "Geometry" "RenderType" = "Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            #define MAX_PATCH_COUNT_X 4
            #define MAX_PATCH_COUNT_Y 4

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            half4 _Color;
            sampler2D _PatchTex;
            float4 _Bounds[MAX_PATCH_COUNT_X * MAX_PATCH_COUNT_Y];
            int2 _PatchCount;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                // まず背景の色を決めて...
                half4 color = tex2D(_MainTex, i.uv) * _Color;

                // その上に各パッチを重ね描きしていく
                [unroll]
                for (int y = 0; y < _PatchCount.y; y++)
                {
                    [unroll]
                    for (int x = 0; x < _PatchCount.x; x++)
                    {
                        // boundsのxyがパッチの左下のUV座標、zwが右上のUV座標を表すことにした
                        float4 bounds = _Bounds[y * MAX_PATCH_COUNT_X + x];

                        // 面積を持たないパッチはスキップする
                        float2 size = bounds.zw - bounds.xy;
                        if (size.x * size.y <= 0.0)
                        {
                            continue;
                        }

                        // i.uvからパッチの左下座標を引いて原点をパッチ基準にしてやり、さらにパッチのサイズで割ることで
                        // パッチの左下が(0.0, 0.0)、右上が(1.0, 1.0)となるような座標を作る
                        float2 coord = (i.uv - bounds.xy) / size;

                        // _PatchTexから色を取得して...
                        half4 patchColor = tex2D(_PatchTex, (coord + float2(x, _PatchCount.y - y - 1)) / _PatchCount);

                        // パッチ範囲外の領域は透明に書き換える
                        patchColor.a *= 1.0 - any(abs(coord) - saturate(coord) > 0.0);

                        // 出来上がった色を下地の色に対してアルファブレンディングする
                        color.rgb = patchColor.rgb * patchColor.a + color.rgb * (1.0 - patchColor.a);
                    }
                }

                return color;
            }
            ENDCG
        }
    }
}

上記のシェーダーを使用したマテリアルを作って適当なオブジェクトにセットし、さらにマテリアルにデータを送り込むための下記スクリプトをそのオブジェクトにアタッチしました。

using System;
using UnityEngine;

[RequireComponent(typeof(Renderer))]
[ExecuteAlways]
public class Patches : MonoBehaviour
{
    public static readonly Vector2Int MaxPatchCount = new Vector2Int(4, 4);
    private static readonly int BoundsProperty = Shader.PropertyToID("_Bounds");
    private static readonly int PatchCountProperty = Shader.PropertyToID("_PatchCount");
    [SerializeField] private Vector2Int patchCount = new Vector2Int(2, 2);
    [SerializeField] private PatchBoundsRow[] bounds;
    private Vector4[] flattenBounds;
    private Vector2Int previousPatchCount;
    private Material material;

    private void Update()
    {
        // パッチの数は少なくとも1行1列とし、最大数もあまり大きくしないで
        // せいぜい4行4列までとした
        this.patchCount.Clamp(Vector2Int.one, MaxPatchCount);

        if (this.patchCount != this.previousPatchCount)
        {
            // パッチの数が変わったら、それに合わせてパッチ範囲定義用配列のサイズも変更する
            this.previousPatchCount = this.patchCount;
            this.bounds ??= new PatchBoundsRow[this.patchCount.y];
            Array.Resize(ref this.bounds, this.patchCount.y);
            for (var j = 0; j < this.patchCount.y; j++)
            {
                this.bounds![j].Bounds ??= new PatchBounds[this.patchCount.x];
                Array.Resize(ref this.bounds[j].Bounds, this.patchCount.x);
            }

            // パッチ範囲定義用配列はインスペクター上での見た目を優先して
            // 入れ子の配列にしたが、マテリアルにデータを送る上では
            // 一次元の固定長配列の方が好都合なので、別途用意した配列に
            // データを書き写す
            this.flattenBounds ??= new Vector4[MaxPatchCount.x * MaxPatchCount.y];
            for (var j = 0; j < this.patchCount.y; j++)
            {
                for (var i = 0; i < this.patchCount.x; i++)
                {
                    var bl = this.bounds![j].Bounds![i].BottomLeft;
                    var tr = this.bounds![j].Bounds![i].TopRight;
                    this.flattenBounds[(j * MaxPatchCount.x) + i] = new Vector4(bl.x, bl.y, tr.x, tr.y);
                }
            }
        }

        if (this.material == null)
        {
            this.material = this.GetComponent<Renderer>()!.sharedMaterial;
        }

        // マテリアルにパッチ範囲データ、およびパッチ数を送る
        this.material!.SetVectorArray(BoundsProperty, this.flattenBounds);
        this.material!.SetVector(PatchCountProperty, new Vector4(this.patchCount.x, this.patchCount.y));
    }

    private void Reset()
    {
        this.bounds = new PatchBoundsRow[this.patchCount.y];
        for (var j = 0; j < this.patchCount.y; j++)
        {
            this.bounds![j].Bounds = new PatchBounds[this.patchCount.x];
        }

        this.bounds[0].Bounds![0].BottomLeft = new Vector2(0.1875f, 0.625f);
        this.bounds[0].Bounds![0].TopRight = new Vector2(0.4375f, 0.875f);
        this.bounds[0].Bounds![1].BottomLeft = new Vector2(0.5625f, 0.4375f);
        this.bounds[0].Bounds![1].TopRight = new Vector2(0.875f, 0.75f);
        this.bounds[1].Bounds![0].BottomLeft = new Vector2(0.3125f, 0.4375f);
        this.bounds[1].Bounds![0].TopRight = new Vector2(0.375f, 0.5f);
        this.bounds[1].Bounds![1].BottomLeft = new Vector2(0.0f, 0.0625f);
        this.bounds[1].Bounds![1].TopRight = new Vector2(1.0f, 0.3125f);
    }

    [Serializable]
    public struct PatchBounds
    {
        public Vector2 BottomLeft;
        public Vector2 TopRight;
    }

    [Serializable]
    public struct PatchBoundsRow
    {
        public PatchBounds[] Bounds;
    }
}

描画結果は下図のようになりました。

※念のため確認したいのですが、もしかして「テクスチャを出力」とおっしゃるのは出来上がった結果をテクスチャデータとして...つまりたとえば画像ファイルのような形で出力することを意図していらっしゃるのでしょうか?
ご提示いただいた別の方のご質問ではテクスチャデータの出力については話題に上がっていなかったため、「おそらくご質問者さんもレイアウト結果の画像を保存して後で利用できるようにしたいわけではなく、その都度レンダリングすることを想定していらっしゃるのだろう」と勝手に解釈して保存機能は省略してしまいましたが、もしそのような機能が必要でしたらコメントいただければ検討してみようと思います。

Comments

[TwinTail]

実装の確認が取れました。
ご回答いただきありがとうございました。
この半月、悩んでいた問題でしたので本当に感謝しております。

最終的な出力はSkyBoxで表示したいのですが素材がVideo映像の為、VideoPlayerのレンダーテクスチャに一旦描画したものを
パッチテクスチャとして扱いバックグラウンドテクスチャをSkyBox用のレンダーテクスチャに展開してみました。
一瞬パッチ描画された動画がSkyboxとして表示されたのですが、Panoramicのシェーダーの設定を変更するとSkybox側が表示されなくなってしまいました。
もう少し探ってみたいと思います。