Unity2D テクスチャブレンド

Question

前提・実現したいこと

メッシュにシェーダーを適応させて、自然な見た目の地形表現をしたい。

該当のソースコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class World : MonoBehaviour
{
    public int width;
    public int height;

    public Tile[,] tiles;

    public Material material;

    Mesh mesh;

    public string seed;
    public bool randomSeed;

    public float frequency;
    public float amplitude;

    public float lacunarity;
    public float persistance;

    public int octaves;

    Noise noise;

    public float seaLevel;

    public float beachStartHeight;
    public float beachEndHeight;

    public float grassStartHeight;
    public float grassEndHeight;

    public float dirtStartHeight;
    public float dirtEndHeight;

    public float stoneStartHeight;
    public float stoneEndHeight;

    private void Awake()
    {
        if(randomSeed == true)
        {
            int value = Random.Range(-1000, 10000);
            seed = value.ToString();
        }

        noise = new Noise(seed.GetHashCode(), frequency, amplitude, lacunarity, persistance, octaves);
    }

    // Use this for initialization
    void Start()
    {
        CreateTiles();
        GenerateMesh();
    }

    // Update is called once per frame
    void Update()
    {
        Graphics.DrawMesh(mesh, Vector3.zero, Quaternion.identity, material, 0);
    }

    void CreateTiles()
    {
        this.tiles = new Tile[this.width, this.height];

        float[,] noiseValues = this.noise.GetNoiseValues(this.width + 1, this.height + 1);

        for (int i = 0; i < this.width; i++)
        {
            for (int j = 0; j < this.height; j++)
            {
                Vector4 weights = new Vector4(noiseValues[i, j], noiseValues[i + 1, j], noiseValues[i, j + 1], noiseValues[i + 1, j + 1]);

                float currentHeight = noiseValues[i, j];

                if(currentHeight < seaLevel)
                {
                    Tile.Type type = Tile.Type.Water;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Sand, Tile.Type.Water, weights);
                }
                else if (currentHeight >= beachStartHeight && currentHeight <= beachEndHeight)
                {
                    Tile.Type type = Tile.Type.Sand;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Grass, Tile.Type.Sand, weights);
                }
                else if(currentHeight >= grassStartHeight && currentHeight <= grassEndHeight)
                {
                    Tile.Type type = Tile.Type.Grass;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Grass, Tile.Type.Sand, weights);
                }
                else if(currentHeight >= dirtStartHeight && currentHeight <= dirtEndHeight)
                {
                    Tile.Type type = Tile.Type.Grass;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Grass, Tile.Type.Sand, weights);
                }
                else if(currentHeight >= stoneStartHeight && currentHeight <= stoneEndHeight)
                {
                    Tile.Type type = Tile.Type.Grass;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Grass, Tile.Type.Grass, weights);
                }
                else
                {
                    Tile.Type type = Tile.Type.Grass;
                    this.tiles[i, j] = new Tile(type, Tile.Type.Grass, Tile.Type.Sand, weights);
                }
            }
        }
    }

    void GenerateMesh()
    {
        MeshData data = new MeshData(this.tiles);
        this.mesh = new Mesh();

        this.mesh.indexFormat = UnityEngine.Rendering.IndexFormat.UInt32;

        this.mesh.vertices = data.vertices.ToArray();
        this.mesh.triangles = data.triangles.ToArray();

        this.mesh.SetUVs(0, data.UVs);

        this.mesh.colors = data.colors.ToArray();

        this.mesh.RecalculateNormals();
        this.mesh.RecalculateBounds();
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Linq;

public class MeshData{

    public List<Vector3> vertices;
    public List<int> triangles;
    public List<Vector4> UVs; 
    public List<Color> colors; 

    public MeshData(Tile[,] data)
    {
        vertices = new List<Vector3>();
        triangles = new List<int>();
        UVs = new List<Vector4>();
        colors = new List<Color>();

        for (int i = 0; i < data.GetLength(0); i++)
        {
            for (int j = 0; j < data.GetLength(1); j++)
            {
                CreateSquare(data[i, j], i, j);
            }
        }
    }

    void CreateSquare(Tile tile, int x, int y)
    {
        vertices.Add(new Vector3(x + 0, y + 0));
        vertices.Add(new Vector3(x + 1, y + 0));
        vertices.Add(new Vector3(x + 0, y + 1));
        vertices.Add(new Vector3(x + 1, y + 1));

        triangles.Add(vertices.Count - 1);
        triangles.Add(vertices.Count - 3);
        triangles.Add(vertices.Count - 4);

        triangles.Add(vertices.Count - 2);
        triangles.Add(vertices.Count - 1);
        triangles.Add(vertices.Count - 4);

        Vector2[] foregroundUVs = SpriteLoader.instance.GetTileUVs(tile.foregroundType);
        Vector2[] backgroundUVs = SpriteLoader.instance.GetTileUVs(tile.backgroundType);
        UVs.AddRange(foregroundUVs.Zip(backgroundUVs, (f, b) => new Vector4(f.x, f.y, b.x, b.y)));

        for (int i = 0; i < 4; i++)
        {
            colors.Add(new Color(0.0f, 0.0f, 0.0f, tile.blendWeights[i]));
        }
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Tile
{

    public enum Type { Dirt, Grass,Water,Sand,Void }
    public Type type;
    public Type foregroundType;
    public Type backgroundType;
    public Vector4 blendWeights; 

    public Tile(Type type, Type foreground, Type background, Vector4 weights)
    {
        this.type = type;
        this.foregroundType = foreground;
        this.backgroundType = background;
        this.blendWeights = weights;
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Noise {

    int seed;

    float frequency;
    float amplitude;

    float lacunarity;
    float persistance;

    int octaves;

    public Noise(int seed,float frequency,float amplitude,float lacunarity,float persistance,int octaves)
    {
        this.seed = seed;
        this.frequency = frequency;
        this.amplitude = amplitude;
        this.lacunarity = lacunarity;
        this.persistance = persistance;
        this.octaves = octaves;
    }

    public float [,] GetNoiseValues(int width,int height)
    {
        float[,] noiseValues = new float[width, height];

        float max = 0f;
        float min = float.MaxValue;

        seed %= 1024;

        for (int i = 0; i < width; i++)
        {
            for(int j =0; j < height; j++)
            {
                noiseValues[i, j] = 0f;

                float tempA = amplitude;
                float tempF = frequency;

                for(int k = 0;k < octaves; k++)
                {
                    noiseValues[i, j] += Mathf.PerlinNoise((i + seed) / (float)width * frequency, j / (float)height * frequency) * amplitude;
                    frequency *= lacunarity;
                    amplitude *= persistance;
                }

                amplitude = tempA;
                frequency = tempF;

                if(noiseValues[i,j] > max)
                {
                    max = noiseValues[i, j];
                }

                if(noiseValues[i,j] < min)
                {
                    min = noiseValues[i, j];
                }
            }
        }

        for (int i = 0; i < width; i++)
        {
            for (int j = 0; j < height; j++)
            {

                noiseValues[i, j] = Mathf.InverseLerp(max, min, noiseValues[i, j]);
            }
        }

        return noiseValues;
    }
}

試したこと

前回アドバイスしていただいたコードを改造して、描画するタイルを増やしたのですが、綺麗な地形表現にはなりませんでした。前回の質問のコードを使い、二枚のタイルだけなら、上手くいきます。

前景と背景のグラフィックを混ぜ合わせて描画しているのですが、四角形のメッシュで生成しているので、隣合うグラフィックの問題で、地形のように見えなくなっているのだと自分は考えました。
具体的にはBeach Start HeightとBeach End Heidhtという変数を使い、浜辺のように見せようとしているのですが、四角形に描画されるため、浜辺には見えなくなっています。

増やした変数の値は以下です。

使用したタイル↓

文字数制限に引っ掛かるため、「SpriteLoader」というスクリプトは記載しませんでした。前回の質問に記載してあります。
どのようにすればいいでしょうか？　回答お願いします。

Answer 1

マテリアルは下記のように変更しました。計算の都合上、_EdgeSoftnessは廃止して_EdgeSharpnessに変わっています。1以上上限なし（とはいえ、せいぜい数十までで十分でしょう）の値で、_EdgeSoftnessとは逆に大くするほどエッジがシャープになります。
多分こんな感じのブレンドでそれっぽく見えるかと思いますが、いかがでしょうか?あくまでも一例ですので、お好みなように改造してしまってください。

Shader "Unlit/World"
{
	Properties
	{
		[NoScaleOffset] _MainTex ("Texture", 2D) = "white" {}

		// 見た目調整用プロパティを変更、前回と異なり大きくするほど鋭くなる
		[PowerSlider(10)] _EdgeSharpness ("Edge Sharpness", Range(1.0, 100.0)) = 10.0
		
		_EdgeDist ("Edge Disturbance", Range(0.0, 1.0)) = 0.05
		_EdgeDistFreq ("Edge Disturbance Frequency", Range(0.0, 16.0)) = 4.0
	}

	SubShader
	{
		Tags { "RenderType"="Opaque" }

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

			// 頂点アトリビュートからはUV関連を削除
			struct appdata
			{
				float4 vertex : POSITION;
				float4 color : COLOR;
			};

			// tileUvには(0, 0)、(1, 0)、(0, 1)、(1, 1)のいずれかが入る
			struct v2f
			{
				float4 vertex : SV_POSITION;
				float2 tileUv : TEXCOORD0;
				float weight : TEXCOORD1;
				float2 modelPos : TEXCOORD2;
			};

			inline float random(float2 st) {
				return frac(sin(dot(st, float2(12.9898, 78.233))) * 43758.5453123);
			}

			float noise(float2 st)
			{
				float2 i = floor(st);
				float2 f = frac(st);
				float a = random(i);
				float b = random(i + float2(1.0, 0.0));
				float c = random(i + float2(0.0, 1.0));
				float d = random(i + float2(1.0, 1.0));
				float2 u = f * f * (3.0 - 2.0 * f);

				return dot(float2(lerp(a, b, u.x), lerp(c - a, d - b, u.x)), float2(1.0, u.y));
			}

			float fractal(float2 st)
			{ 
				float4 amp = float4(1.0, 0.5, 0.25, 0.125);
				float4 v;
				
				v.x = noise(st);
				st = st * 2.0 + float2(14.1421356237, 17.3205080757);
				v.y = noise(st);
				st = st * 2.0 + float2(22.360679775, 26.4575131106);
				v.z = noise(st);
				st = st * 2.0 + float2(31.4159265359, 27.1828182846);
				v.w = noise(st);

				return dot(v, amp) / dot(1.0, amp);
			}

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float4 _MainTex_TexelSize;
			float _EdgeSharpness;
			float _EdgeDist;
			float _EdgeDistFreq;

			// ユニフォーム変数を追加
			#define TYPE_COUNT_MAX 8
			int _TypeCount;
			float4 _TypeUvs[TYPE_COUNT_MAX / 2];
			float2 _TileSize;
			float _TypeLevels[TYPE_COUNT_MAX];

			v2f vert(appdata v)
			{
				v2f o;
				o.tileUv = v.color.xy;
				o.weight = v.color.a;
				o.modelPos = v.vertex.xy;
				o.vertex = UnityObjectToClipPos(v.vertex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				// まずは前回同様weightを計算する
				float f = dot(float2(_EdgeDist, 1.0 - _EdgeDist), float2(fractal(i.modelPos * _EdgeDistFreq), 0.5));
				float upper = 1.0 - 2.0 * (1.0 - i.weight) * (1.0 - f);
				float lower = 2.0 * i.weight * f;
				float weight = lerp(lower, upper, step(0.5, i.weight));
				
				// weightを比較してどの範囲にいるか判定し、それを越えない最大のインデックスを調べる
				uint index = 0;
				[unroll(TYPE_COUNT_MAX)]
				for (int k = 0; k < _TypeCount; k++)
				{
					if (_TypeLevels[k] < weight)
					{
						index = k + 1;
						continue;
					}
					break;
				}
				index = min(index, _TypeCount - 1);

				// さらに、その一つ下・一つ上のインデックスを求めておく
				uint prevIndex = index > 0 ? index - 1 : 0;
				uint nextIndex = min(index + 1, _TypeCount - 1);

				// 範囲の下限・上限の高さを取得し、lowerLevelを0、upperLevelを1としたときのweightの位置を調べる
				float lowerLevel = (index == prevIndex) ? 0.0 : _TypeLevels[prevIndex];
				float upperLevel = (index == nextIndex) ? 1.0 : _TypeLevels[index];
				float weightInRange = (lowerLevel == upperLevel) ? 0.0 : (weight - lowerLevel) / (upperLevel - lowerLevel);

				// weightInRangeが0.5以上かどうかでnextIndex、prevIndexのいずれかを選択する
				uint edgeIndex = weightInRange >= 0.5 ? nextIndex : prevIndex;

				// weightInRangeが0.5の時0、そこより範囲境界に近いほど1になるような値を作る
				// このとき_EdgeSharpness乗して、カーブを適宜鋭くする
				float edgeFactor = saturate(pow(abs(weightInRange * 2.0 - 1.0), _EdgeSharpness));

				// 範囲中心および範囲境界に対応するUVを取得し、そこからそれぞれ色を取得する
				float4 edgeVector = _TypeUvs[edgeIndex / 2];
				float4 centerVector = _TypeUvs[index / 2];
				float2 edgeUv = lerp(edgeVector.xy, edgeVector.zw, edgeIndex % 2);
				float2 centerUv = lerp(centerVector.xy, centerVector.zw, index % 2);
				float2 uvOffset = i.tileUv * _TileSize;
				fixed4 edgeColor = tex2D(_MainTex, edgeUv + uvOffset);
				fixed4 centerColor = tex2D(_MainTex, centerUv + uvOffset);

				// 範囲中心でcenterColorが100%、境界部分でcenterColorとedgeColorが
				// 50%混合になるように2つの色を混ぜ合わせる
				return lerp(centerColor, edgeColor, edgeFactor * 0.5);
			}
			ENDCG
		}
	}
}

Comments

[退会済みユーザー]

追記の回答、ありがとうございました。

Answer 2

方針を一部変更し、地形の種類はさほど多くないだろうと仮定して、各頂点に地形のUVを持たせるのではなく全ての地形のUVをシェーダーのユニフォーム変数に投入することにしました。さしあたり最大8種類までとしています（ユニフォーム変数の領域は貴重ですので節約しました...）。

まず、TileおよびMeshDataは下記のように変更しました。個々のTileに前景・背景タイプを持たせる必要はなくなったので、foregroundTypeとbackgroundTypeは廃止しました。
MeshDataもUVsが不要になったので削除しました。代わりに、colorsのRとGに頂点が左下・右下・左上・右上のいずれであるかを示す値を格納しています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Tile
{

	public enum Type { Dirt, Grass, Water, Sand, Void }
	public Type type;
	public Vector4 blendWeights;

	public Tile(Type type, Vector4 weights)
	{
		this.type = type;
		this.blendWeights = weights;
	}
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Linq;

public class MeshData
{

	public List<Vector3> vertices;
	public List<int> triangles;
	public List<Color> colors; 

	public MeshData(Tile[,] data)
	{
		vertices = new List<Vector3>();
		triangles = new List<int>();
		colors = new List<Color>();

		for (int i = 0; i < data.GetLength(0); i++)
		{
			for (int j = 0; j < data.GetLength(1); j++)
			{
				CreateSquare(data[i, j], i, j);
			}
		}
	}

	void CreateSquare(Tile tile, int x, int y)
	{
		vertices.Add(new Vector3(x + 0, y + 0));
		vertices.Add(new Vector3(x + 1, y + 0));
		vertices.Add(new Vector3(x + 0, y + 1));
		vertices.Add(new Vector3(x + 1, y + 1));

		triangles.Add(vertices.Count - 1);
		triangles.Add(vertices.Count - 3);
		triangles.Add(vertices.Count - 4);

		triangles.Add(vertices.Count - 2);
		triangles.Add(vertices.Count - 1);
		triangles.Add(vertices.Count - 4);

		for (int i = 0; i < 4; i++)
		{
			colors.Add(new Color(i % 2, i / 2, 0.0f, tile.blendWeights[i]));
		}
	}
}

Worldのフィールドはちょっと変更させていただき～StartHeightは削除して、各地形の終了高さだけを指定する方式にしました。開始高さと終了高さの2点を指定する方式だと、範囲が交差したり隙間が空いた場合の処置がややこしくなる気がしたためです。

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;

public class World : MonoBehaviour
{
	// 地形の種類は8種類までとする
	private const int TypeCountMax = 8;

	// プロパティアクセス用の番号を取得しておく
	private static readonly int TypeCountProperty = Shader.PropertyToID("_TypeCount");
	private static readonly int TypeUvsProperty = Shader.PropertyToID("_TypeUvs");
	private static readonly int TileSizeProperty = Shader.PropertyToID("_TileSize");
	private static readonly int TypeLevelsProperty = Shader.PropertyToID("_TypeLevels");

	public int width;
	public int height;

	public Tile[,] tiles;

	public Material material;

	Mesh mesh;

	public string seed;
	public bool randomSeed;

	public float frequency;
	public float amplitude;

	public float lacunarity;
	public float persistance;

	public int octaves;

	Noise noise;

	// 「~~~StartHeight」は廃止しました
	public float seaLevel;
	public float beachEndHeight;
	public float grassEndHeight;
	public float dirtEndHeight;
	public float stoneEndHeight;

	// マテリアルに投入するデータはこれらフィールドに保持しておく
	int typeCount;
	List<Vector4> typeUvs;
	Vector4 tileSize;
	float[] typeLevels;

	private void Awake()
	{
		if(randomSeed == true)
		{
			int value = Random.Range(-1000, 10000);
			seed = value.ToString();
		}

		noise = new Noise(seed.GetHashCode(), frequency, amplitude, lacunarity, persistance, octaves);
	}

	// Use this for initialization
	void Start()
	{
		CreateTiles();
		GenerateMesh();
	}

	// Update is called once per frame
	void Update()
	{
		// マテリアルにデータを投入する
		// 毎フレーム変化するデータではないため、データをわざわざフィールドに保持せず
		// CreateTilesの末尾で投入してもいいと思いますが、これらデータ(特に配列)は
		// シリアライズされずマテリアルに保存してくれないため、プレイモード中に
		// シェーダーを編集したりするとリロードされてデータが失われ、正しく描画されなくなるようです
		// 色々いじって実験するには不便でしたので、Update内で毎回投入することにしました
		this.material.SetInt(TypeCountProperty, this.typeCount);
		this.material.SetVectorArray(TypeUvsProperty, this.typeUvs);
		this.material.SetVector(TileSizeProperty, this.tileSize);
		this.material.SetFloatArray(TypeLevelsProperty, this.typeLevels);

		Graphics.DrawMesh(mesh, Vector3.zero, Quaternion.identity, material, 0);
	}

	void CreateTiles()
	{
		// まず、各地形タイプと終了高さをペアにした配列を作り、終了高さ順に並べ替え、最大TypeCountMax個まで取り出す
		(Tile.Type, float)[] types = new[]
		{
			(Tile.Type.Water, this.seaLevel),
			(Tile.Type.Sand, this.beachEndHeight),
			(Tile.Type.Grass, this.grassEndHeight),
			(Tile.Type.Grass, this.dirtEndHeight),
			(Tile.Type.Grass, this.stoneEndHeight)
		}.OrderBy(pair => pair.Item2).Take(TypeCountMax).ToArray();

		this.tiles = new Tile[this.width, this.height];

		float[,] noiseValues = this.noise.GetNoiseValues(this.width + 1, this.height + 1);

		for (int i = 0; i < this.width; i++)
		{
			for (int j = 0; j < this.height; j++)
			{
				Vector4 weights = new Vector4(noiseValues[i, j], noiseValues[i + 1, j], noiseValues[i, j + 1], noiseValues[i + 1, j + 1]);

				// 四隅の平均ではなく左下隅のノイズ値を使った場合、もしかするとタイルの見た目と
				// ゲーム上の応答に乖離が生じやすくなるかもしれません
				// たとえば左下隅が砂地、残り3つの隅が海だった場合、タイルの見た目は高確率で海に
				// なるでしょうが、ゲーム内のキャラクターにとっては砂地に見えるでしょう
				float currentHeight = noiseValues[i, j];

				// currentHeightと終了高さを比較し、適切な地形タイプを見つける
				var type = types.Where(t => currentHeight < t.Item2).DefaultIfEmpty(types.Last()).Last().Item1;
				this.tiles[i, j] = new Tile(type, weights);
			}
		}

		// UVデータを配列にする
		// なお、変数節約のためタイルの大きさは全て同じと仮定して（ということでいいですよね?）
		// 左下隅のUVだけをリストアップすることにした
		int typesLength = types.Length;
		int uvVectorCount = (typesLength / 2) + (typesLength % 2);
		List<Vector4> uvVectors = new List<Vector4>(uvVectorCount);
		for (int i = 0; i < uvVectorCount; i++)
		{
			int j = i * 2;
			Tile.Type type1 = types[j].Item1;
			Tile.Type type2 = (j < typesLength - 1) ? types[j + 1].Item1 : Tile.Type.Void;
			Vector2 uv1 = SpriteLoader.instance.GetTileUVs(type1)[0];
			Vector2 uv2 = SpriteLoader.instance.GetTileUVs(type2)[0];
			uvVectors.Add(new Vector4(uv1.x, uv1.y, uv2.x, uv2.y));
		}

		// 全地形を代表しVoidの大きさを調べる(Voidは一番最後の透明地形でしょうかね?)
		// 念のため申し上げますと、Void地形も他の地形と同じサイズであることを前提にしていますので
		// もしそうでないなら代わりのタイプを与えるか、他の手段で設定してみてください
		Vector2[] voidUvs = SpriteLoader.instance.GetTileUVs(Tile.Type.Void);
		Vector2 size = voidUvs[3] - voidUvs[0];

		// できあがったデータをフィールドに保持
		this.typeCount = types.Length;
		this.typeUvs = uvVectors;
		this.tileSize = size;
		this.typeLevels = types.Select(t => t.Item2).ToArray();
	}

	void GenerateMesh()
	{
		MeshData data = new MeshData(this.tiles);
		this.mesh = new Mesh();

		this.mesh.indexFormat = UnityEngine.Rendering.IndexFormat.UInt32;

		// UVは不要なので削除
		this.mesh.vertices = data.vertices.ToArray();
		this.mesh.triangles = data.triangles.ToArray();
		this.mesh.colors = data.colors.ToArray();

		this.mesh.RecalculateNormals();
		this.mesh.RecalculateBounds();
	}
}

すみませんが字数制限に達してしまったため、マテリアルは別回答に記載いたします。

Comments

[退会済みユーザー]

お忙しい中、再び回答していただき、本当にありがとうございました。