2D Spriteを立体に表示したい

Question

上の画像のような2Dの透過されたスプライトを右のように立体にさせたいです。
これを３Dのゲームオブジェクトとして扱いたいのですが、どうやって実装させればいいのかわかりません。

どういうワードで検索をかければいいのかもわかりません。
キーワードだけでもいいので教えていただければ嬉しいです。

Comments

[sakura_hana]

私も良いアイデアが浮かんでいませんが、とりあえずまずはスクリプトで任意の形のオブジェクトを作る方法を調べてみてはどうでしょうか？（「unity スクリプト メッシュ作成」等で検索してみてください）
ちなみに「メッシュを作成する」の他に「Cubeを組み合わせる（図形が箱の組み合わせであることが保証されている場合）」「オブジェクトを作らずシェーダーでそのように見せる（見た目だけでいい場合）」などのアプローチも一応存在します。

Answer 1

パート4

Sweep.cgincにメインの部分が記述されています。

#ifndef SWEEP_INCLUDED
#define SWEEP_INCLUDED

#include "SweepUtils.cginc"

struct appdata
{
	float4 vertex : POSITION;
	float3 normal : NORMAL;
};

struct v2f
{
	float4 vertex : SV_POSITION;
	float3 localPos : TEXCOORD1;
	float3 localViewDir : TEXCOORD2;
	float3 localLightDir : TEXCOORD3;
	float3 worldPos : TEXCOORD4;
	float3 worldViewDir : TEXCOORD5;
	float3 worldLightDir : TEXCOORD6;
	float4 screenPos : TEXCOORD7;
};

struct v2fShadow
{
	V2F_SHADOW_CASTER_NOPOS
	float3 localPos : TEXCOORD1;
	float3 localViewDir : TEXCOORD2;
	float3 worldPos : TEXCOORD4;
	float3 worldViewDir : TEXCOORD5;
};

v2f vert(float4 vertex : POSITION)
{
	v2f o;
	o.vertex = UnityObjectToClipPos(vertex);
	o.worldPos = mul(unity_ObjectToWorld, vertex).xyz;
	o.worldViewDir = isPerspective() ? -UnityWorldSpaceViewDir(o.worldPos) : getWorldCameraDir();
	o.worldLightDir = UnityWorldSpaceLightDir(o.worldPos);
	o.localPos = vertex.xyz;
	o.localViewDir = worldToObjectVec(o.worldViewDir);
	o.localLightDir = worldToObjectVec(o.worldLightDir);
	o.screenPos = ComputeScreenPos(o.vertex);
	return o;
}

float4 frag(v2f i) : SV_Target
{
	// カメラのニアプレーンから他の不透明オブジェクト表面までの範囲で、かつキューブ内である範囲を求める
	float3 worldViewDir = normalize(i.worldViewDir);
	float3 localViewDir = normalize(i.localViewDir);
	float peripheralFactor = 1.0 / dot(getWorldCameraDir(), worldViewDir);
	float3 worldCameraOrigin = getWorldCameraOrigin(i.worldPos);
	float3 localCameraOrigin = worldToObjectPos(worldCameraOrigin);
	float worldFrontFace = dot(objectToWorldVec(getLocalBoundsFrontFace(localCameraOrigin, localViewDir) * localViewDir), worldViewDir);
	float worldBackFace = dot(i.worldPos - worldCameraOrigin, worldViewDir);
	float worldCameraNear = getWorldCameraNear();
	float worldOpaque = sampleOpaqueZ(i.screenPos) * peripheralFactor;
	float worldEnter = max(worldFrontFace, worldCameraNear);
	float worldExit = min(worldBackFace, worldOpaque);
	
	// 不要な領域をクリッピングする
	clip(worldExit - worldEnter);

	// 視線方向の色積分の開始・終了ステップ番号を求める
	float worldBoundsDepth = getWorldBoundsDepth(getWorldCameraDir());
	float2 worldBoundsNear = getWorldBoundsNearFar(worldBoundsDepth).x;
	float worldLineOrigin = worldBoundsNear * peripheralFactor;
	float worldLineLength = worldBoundsDepth * peripheralFactor;
	float worldStepLength = worldLineLength / VIEW_INTEGRATION_STEPS;
	float worldLineOriginToEnter = worldEnter - worldLineOrigin;
	float worldLineOriginToExit = worldExit - worldLineOrigin;
	int startingIndex = (int)ceil(worldLineOriginToEnter / worldStepLength);
	int terminalIndex = (int)(worldLineOriginToExit / worldStepLength);

	// 1ステップごとの、および最後の1ステップのローカル位置進行量を求める
	float worldLastStepLength = worldLineOriginToExit % worldStepLength;
	float3 localStep = worldToObjectVec(worldStepLength * worldViewDir);
	float localStepLength = length(localStep);
	float3 localLastStep = localStep * worldLastStepLength / worldStepLength;

	// 光源の方角を求める
	float3 worldLightDir = normalize(i.worldLightDir);
	float3 localLightDir = normalize(i.localLightDir);

	// 1ステップ進行時の透過率を求めるための指数を決める
	// DENSITY_SCALEが1だと距離1mで本来のアルファ合成と同等の透明度になるようにしたつもりだが、
	// それだと薄いようなら密度を上げる
	float exponent = worldStepLength * DENSITY_SCALE;
	float lastExponent = worldLastStepLength * DENSITY_SCALE;

	// 視線方向に各点を調べていき、最終的にカメラに届く色を決定する
	float3 localLineOriginPos = worldToObjectPos(worldCameraOrigin + worldViewDir * worldLineOrigin);
	float3 integratedColor = 0.0;
	float transmittance = 1.0;
	for (int j = startingIndex; j <= terminalIndex; j++)
	{
		float3 samplingPoint = localLineOriginPos + j * localStep;
		float4 color = sampleTexture(samplingPoint);
		if (color.a < ALPHA_THRESHOLD)
		{
			// アルファがかなり小さい場合、この点に由来する光は最終的な見た目に
			// ほとんど寄与しないと予想されるので、計算量節約のためスキップする
			continue;
		}

		// この小空間の透過率および不透明性を求める
		float transparency = pow(1.0 - color.a, exponent);
		float opacity = 1.0 - transparency;

		// この点に入射する光の強度を求める
		float3 light = _LightColor0.rgb * integrateTransmittance(samplingPoint - localViewDir * localStepLength * LIGHT_INTEGRATION_ORIGIN_OFFSET, localLightDir, localStepLength, exponent);

		// 環境光も上乗せして出射光とする
		integratedColor += (light + getAmbient(samplingPoint)) * color.rgb * (opacity * transmittance);

		// 次のステップでは、最終的な見た目への影響率はこの地点の不透明性の分だけ減衰する
		// 特に、不透明度の高い領域を通過すると影響率が大幅に低下する
		transmittance *= transparency;
		if (transmittance < INTEGRATION_THRESHOLD)
		{
			// 影響率が十分小さくなったら、それ以降の点は見た目に大きな影響はないと見なしてループを中断する
			break;
		}
	}

	// 最後にステップ端数分を埋める追加の1ステップを進める
	if (transmittance >= INTEGRATION_THRESHOLD)
	{
		float3 samplingPoint = localLineOriginPos + terminalIndex * localStep + localLastStep;
		float4 color = sampleTexture(samplingPoint);
		if (color.a >= ALPHA_THRESHOLD)
		{
			float transparency = pow(1.0 - color.a, lastExponent);
			float opacity = 1.0 - transparency;
			float3 light = _LightColor0.rgb * integrateTransmittance(samplingPoint, localLightDir, localStepLength, exponent);
			integratedColor += (light + getAmbient(samplingPoint)) * color.rgb * (opacity * transmittance);
			transmittance *= transparency;
		}
	}
	return float4(integratedColor, 1.0 - transmittance);
}

v2fShadow vertShadow(appdata v, out float4 pos : SV_POSITION)
{
	v2fShadow o;
	TRANSFER_SHADOW_CASTER_NOPOS(o,pos)
	o.localPos = v.vertex.xyz;
	o.worldPos = objectToWorldPos(o.localPos);
	if (isPerspective())
	{
		float3 worldCameraPos = getWorldCameraPos();
		float3 localCameraPos = worldToObjectPos(worldCameraPos);
		o.localViewDir = o.localPos - localCameraPos;
		o.worldViewDir = o.worldPos - worldCameraPos;
	}
	else
	{
		o.worldViewDir = getWorldCameraDir();
		o.localViewDir = worldToObjectVec(o.worldViewDir);
	}
	return o;
}

// 通常のレンダリング時の流れを踏襲しつつ、シャドウマッピングではそれほど正確な
// 描画が要求されないため、大幅に簡略化した処理を行う
float4 fragShadow(v2fShadow i, UNITY_VPOS_TYPE vpos : VPOS
#if !defined(SHADOWS_CUBE) || defined(SHADOWS_CUBE_IN_DEPTH_TEX)
	, out float depth : SV_Depth
#endif
) : SV_Target
{
	float3 worldViewDir = normalize(i.worldViewDir);
	float3 localViewDir = normalize(i.localViewDir);
	float peripheralFactor = 1.0 / dot(getWorldCameraDir(), worldViewDir);
	float worldBoundsDepth = getWorldBoundsDepth(getWorldCameraDir());
	float worldLineLength = worldBoundsDepth * peripheralFactor;
	float worldStepLength = worldLineLength / VIEW_INTEGRATION_STEPS;
	float3 localStep = worldToObjectVec(worldStepLength * worldViewDir);
	float3 worldCameraPos = isPerspective() ? getWorldCameraPos() : mul(UNITY_MATRIX_I_V, float4(UnityObjectToViewPos(i.localPos) * float3(1.0, 1.0, 0.0), 1.0)).xyz;
	float3 localCameraPos = worldToObjectPos(worldCameraPos);
	float worldFrontFace = dot(i.worldPos - worldCameraPos, worldViewDir);
	float worldBackFace = dot(objectToWorldVec(getLocalBoundsBackFace(localCameraPos, localViewDir) * localViewDir), worldViewDir);
	int terminalIndex = int((worldBackFace - worldFrontFace) / worldStepLength);
	float exponent = worldStepLength * DENSITY_SCALE;
	float transmittance = 1.0;
	float3 samplingPoint;
	float dither = 0.0;
	for (int j = 0; j <= terminalIndex; j++)
	{
		samplingPoint = i.localPos + j * localStep;
		float alpha = sampleTexture(samplingPoint).a;
		if (alpha < ALPHA_THRESHOLD)
		{
			dither = 0.0;
			continue;
		}
		transmittance *= pow(1.0 - alpha, exponent);
		dither = tex3Dlod(_DitherMaskLOD, float4(vpos.xy * 0.25, (1.0 - transmittance) * 0.9375, 0.0)).a;
		if (dither > 0.5)
		{
			break;
		}
	}

	clip(dither - 0.01);
	
	float4 clipPos = UnityApplyLinearShadowBias(UnityObjectToClipPos(samplingPoint));
	#if defined(SHADOWS_CUBE) && !defined(SHADOWS_CUBE_IN_DEPTH_TEX)
		return UnityEncodeCubeShadowDepth(clipPos.z / clipPos.w);
	#else
		depth = clipPos.z / clipPos.w;
		return 0.0;
	#endif
}
#endif

結果として、下図のように側面から見ても大丈夫な描画ができました。
棒が突き刺さっているのは、不透明オブジェクトが貫入していても前後関係がそれらしく見えるかどうかを確認するためです。

斜めに延びているもやの部分は良好に表現できましたが、最初に例示しましたメッシュ方式とは対照的に、こちらの方法だと境界がくっきりしている部分に粗が目立つようです。
下図のように、本来くっきりしているべき表面やエッジに縞々のアーティファクトが生じています。

空間を飛び飛びでサンプリングしている都合上、ある程度は妥協しなければならないのかもしれません。ステップ幅を小さくすれば改善するはずですが、ただでさえ高コストな描画方法なのにこれ以上ループを増やすのは気が引けます。
今回は実装しませんでしたが、Shader Bitsさんの記事の「Temporal Jitter」の節のようにジタリングを行うのもよさそうです。境界をくっきりさせることはできないでしょうが、縞々模様が解消できれば不自然さは大きく低減しそうな気がします。

あるいは、メッシュ方式とのハイブリッドにしてやる手もあるかもしれません。下図は単純にこのボリューメトリック方式のオブジェクトとImageSweeperで作ったメッシュ方式のオブジェクトを重ね合わせただけなのですが、くっきり部分ともやもや部分が共存していて、なかなか悪くない結果じゃないでしょうか?

Answer 2

パート3

SweepUtils.cgincでは各種定数、ユニフォーム変数、下請け関数類を記述しています。
定数類は何だかごちゃごちゃした小数が並んでいますが、なんとなく2の冪乗にしたくなっただけです。あの値でなければならないような理由はありませんので、てきとうでかまいません。

#ifndef SWEEP_UTILS_INCLUDED
#define SWEEP_UTILS_INCLUDED

#include "UnityCG.cginc"

#define LIGHT_INTEGRATION_STEPS 8
#define VIEW_INTEGRATION_STEPS 256
#define INTEGRATION_THRESHOLD 0.00390625
#define DIRECTIONAL_EPSILON 0.0009765625
#define ALPHA_SCALE 0.999996185302734375
#define ALPHA_THRESHOLD 0.00390625
#define DENSITY_SCALE 4.0
#define LIGHT_INTEGRATION_ORIGIN_OFFSET 2.0
#define AMBIENT_STEP_LENGTH 0.015625
#define AMBIENT_BOUNDS_WIDTH 0.0625

sampler2D _MainTex;
sampler2D _CameraDepthTexture;
sampler3D _DitherMaskLOD;
float4 _LightColor0;

// キューブに関するtransform.InverseTransformPoint
float3 worldToObjectPos(float3 worldPos) {return mul(unity_WorldToObject, float4(worldPos, 1.0)).xyz;}

// キューブに関するtransform.TransformPoint
float3 objectToWorldPos(float3 localPos) {return mul(unity_ObjectToWorld, float4(localPos, 1.0)).xyz;}

// キューブに関するtransform.InverseTransformVector
float3 worldToObjectVec(float3 worldVec) {return mul((float3x3)unity_WorldToObject, worldVec);}

// キューブに関するtransform.TransformVector
float3 objectToWorldVec(float3 localVec) {return mul((float3x3)unity_ObjectToWorld, localVec);}

// カメラのtransform.position
float3 getWorldCameraPos() {return UNITY_MATRIX_I_V._14_24_34;}

// カメラのtransform.forward
float3 getWorldCameraDir() {return -UNITY_MATRIX_V._31_32_33;}

// カメラのnearClipPlane
float getWorldCameraNear() {return _ProjectionParams.y;}

// カメラ投影法が透視投影かどうか
bool isPerspective() {return any(UNITY_MATRIX_P._41_42_43);}

// カメラが透視投影ならカメラの位置、平行投影ならカメラ位置を通る平面上のworldPosを正面にとらえる位置
float3 getWorldCameraOrigin(float3 worldPos)
{
	return isPerspective()
		? getWorldCameraPos()
		: worldPos + dot(getWorldCameraPos() - worldPos, getWorldCameraDir()) * getWorldCameraDir();
}

// キューブのtransform.position
float3 getWorldBoundsCenter() {return unity_ObjectToWorld._14_24_34;}

// カメラの位置からキューブを見て、2枚の平面で前後にキューブを挟んだ時の長さを求める
float getWorldBoundsDepth(float3 worldCameraDir)
{
	float3 worldCornerVec1 = objectToWorldVec(float3(0.5, 0.5, 0.5));
	float3 worldCornerVec2 = objectToWorldVec(float3(-0.5, 0.5, 0.5));
	float3 worldCornerVec3 = objectToWorldVec(float3(0.5, -0.5, 0.5));
	float3 worldCornerVec4 = objectToWorldVec(float3(-0.5, -0.5, 0.5));
	float2 lengths1 = abs(float2(dot(worldCornerVec1, worldCameraDir), dot(worldCornerVec2, worldCameraDir)));
	float2 lengths2 = abs(float2(dot(worldCornerVec3, worldCameraDir), dot(worldCornerVec4, worldCameraDir)));
	float2 lengths = max(lengths1, lengths2);
	return max(lengths.x, lengths.y) * 2.0;
}

// 上記のように挟んだ時の平面の位置を求める
float2 getWorldBoundsNearFar(float worldBoundsDepth)
{
	float center = isPerspective()
		? distance(getWorldBoundsCenter(), getWorldCameraPos())
		: dot(getWorldBoundsCenter() - getWorldCameraPos(), getWorldCameraDir());
	return float2(-0.5, 0.5) * worldBoundsDepth + center;
}

// キューブの面に関するPlane.Raycastを3方向まとめて行う
float3 getLocalBoundsFaces(float3 localPos, float3 localViewDir, float faceOffset)
{
	float3 signs = sign(localViewDir);
	return -(signs * localPos + faceOffset) / (abs(localViewDir) + (1.0 - abs(signs)) * DIRECTIONAL_EPSILON);
}

// キューブ前面までの距離を求める
float getLocalBoundsFrontFace(float3 localPos, float3 localViewDir)
{
	float3 lengths = getLocalBoundsFaces(localPos, localViewDir, 0.5);
	return max(max(max(lengths.x, lengths.y), lengths.z), 0.0);
}

// キューブ背面までの距離を求める
float getLocalBoundsBackFace(float3 localPos, float3 localViewDir)
{
	float3 lengths = getLocalBoundsFaces(localPos, localViewDir, -0.5);
	return max(min(min(lengths.x, lengths.y), lengths.z), 0.0);
}

// キューブのZ方向に平面投影マッピングすることを前提としてテクスチャをサンプリングする
// ただし、アルファ1.0のとき密度が無限大になるのを防止するため、アルファをちょっとだけ減らす
float4 sampleTexture(float3 localPos)
{
	float4 color = tex2Dlod(_MainTex, float4(localPos.xy + 0.5, 0.0, 0.0));
	color.a *= ALPHA_SCALE;
	return color;
}

// デプステクスチャをもとに他の不透明オブジェクトのZ位置を算出する
// キューブ内に他の不透明オブジェクトが貫入している場合に対応するため使用する
float sampleOpaqueZ(float4 screenPos)
{
	float rawDepth = SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(screenPos));
	return isPerspective()
		? LinearEyeDepth(rawDepth)
		: -dot(unity_CameraInvProjection._33_34, float2(_ProjectionParams.x * (rawDepth * 2.0 - 1.0), 1.0));
}

// 環境光っぽい何かを求める(ライティング時に使用し、陰が真っ黒になるのを防止するために上乗せする)
float3 getAmbient(float3 localPos)
{
	float2 delta = float2(AMBIENT_STEP_LENGTH, 0.0);
	float3 gradient = float3(
		sampleTexture(localPos - delta.xyy).a - sampleTexture(localPos + delta.xyy).a,
		sampleTexture(localPos - delta.yxy).a - sampleTexture(localPos + delta.yxy).a,
		sign(localPos.z) * smoothstep(0.5 - AMBIENT_BOUNDS_WIDTH, 0.5, abs(localPos.z)));
	float gradientLength = length(gradient);
	float3 ambient = SHEvalLinearL0L1(float4(gradient, gradientLength));
	ambient += SHEvalLinearL2(float4(gradient / sqrt(gradientLength), 0.0));
	#ifdef UNITY_COLORSPACE_GAMMA
		ambient = LinearToGammaSpace(ambient);
	#endif
	return ambient;
}

// キューブ内のある点からある方向を見た時、どれだけ遮られずにキューブの外を見通すことができるかを算出する
float integrateTransmittance(float3 localPos, float3 localDir, float localStepLength, float exponent)
{
	float length = getLocalBoundsBackFace(localPos, localDir);
	if (length < localStepLength)
	{
		return 1.0;
	}
	float transmittance = 1.0;
	for (int j = 1; j <= LIGHT_INTEGRATION_STEPS; j++)
	{
		float localTravel = localStepLength * j;
		bool breaks = localTravel > length;
		localTravel = min(localTravel, length);
		float3 samplingPoint = localPos + localTravel * localDir;
		float alpha = sampleTexture(samplingPoint).a;
		if (alpha < ALPHA_THRESHOLD)
		{
			if (breaks)
			{
				break;
			}
			continue;
		}
		float transparency = pow(1.0 - alpha, exponent);
		transmittance *= transparency;
		if (breaks || transmittance < INTEGRATION_THRESHOLD)
		{
			break;
		}
	}
	return transmittance;
}
#endif

（パート4へ続く...）

Answer 3

パート2

今回のスクリプトでは、テクスチャのアウトラインを取るのにPeter SelingerさんによるPotraceをもとにしたWolfgang NaglさんによるVectorizationを使用しました。自前で実装するのは少々面倒そうだったのでありがたく使わせてもらったのですが、念のため申し上げますと、もしご質問者さんが作品を公開するおつもりでしたらライセンス形態にご注意ください。
PotraceはGNU GPLを採用しているようですので、普通にUnityプロジェクトに組み込んだのでは（たとえプラグインとしてインポートしたとしても）おそらくできあがったUnityプログラムもGPLに従う必要がありそうです。
サイトの文章によれば、プロプライエタリなソフトに組み込みたい場合には有償でライセンスを購入することもできるようですね。

その他、できあがった曲線を整理するために（本来の用途とはちょっとずれていますが...）Angus JohnsonさんによるClipperを、アウトラインを三角形分割してメッシュに使用できるようにするためにMason GreenさんらによるPoly2TriのMartin EvansさんによるC#版を使用しました。

実験材料として下図テクスチャを使ったところ、

いい感じに立体的なメッシュになりました。

ですが、この方式ですと透明・不透明がくっきり分かれた画像でないと対応しづらいかと思います。
先のテクスチャに代わって下図テクスチャを使うと...

こんな風になってしまいます。

境界が曖昧なテクスチャを立体化すると、できあがる立体もはっきりした表面を持たない塊になるはずです。そういうものは普通のメッシュでは表現困難な部類になるかと思います。
一案としてはunsoluble_sugarさんのおっしゃる「透過画像をObjectとして配置し、Z軸に引き伸ばす」が使えるかもしれません。
「毛の断面を積層し、毛が密生した毛皮のように見せる」なんてテクニックがありますが（参考：3Dグラフィックス・マニアックス(32) ジオメトリシェーダ(3)～ジオメトリシェーダのアクセラレーション的活用(3)）、試しに下記のようなスクリプトで画像を重ねてみました。

using System.Collections.Generic;
using UnityEngine;

public class LatticeImageSweeper : MonoBehaviour
{
	[SerializeField] private Texture2D textureToSweep;
	[SerializeField] private float sweepLength = 0.25f;
	[SerializeField] private float pixelsPerUnit = 100.0f;
	[SerializeField][Range(1, 128)] private int divisions = 32;
	[Header("Arrange")]
	[SerializeField] private bool alongX = false;
	[SerializeField] private bool alongY = false;
	[SerializeField] private bool alongZ = true;

	private void Start()
	{
		// X、Y、Z軸に沿って正方形を並べていく
		// 全体を一つのメッシュにしないで、いくつもオブジェクトを並べることで
		// 距離ソートが行われるようにし、描画順が正しくなるようにした
		var material = new Material(Shader.Find("Mobile/Particles/Alpha Blended"))
		{
			mainTexture = this.textureToSweep
		};
		var planeTemplate = GameObject.CreatePrimitive(PrimitiveType.Quad);
		DestroyImmediate(planeTemplate.GetComponent<Collider>());
		planeTemplate.GetComponent<Renderer>().sharedMaterial = material;
		var vertices = new[]
		{
			new Vector3(0.0f, -0.5f, -0.5f),
			new Vector3(0.0f, 0.5f, -0.5f),
			new Vector3(0.0f, -0.5f, 0.5f),
			new Vector3(0.0f, 0.5f, 0.5f)
		};
		var uvs = new Vector2[4];
		var indices = new[] {0, 1, 2, 3, 2, 1};
		var directions = new List<(Vector3,Vector3,Vector3,Vector3,string)>();
		if (this.alongX)
		{
			directions.Add((Vector3.right, Vector3.up, Vector3.forward, -Vector3.right * 0.5f, "X"));
		}
		if (this.alongY)
		{
			directions.Add((Vector3.up, Vector3.forward, Vector3.right, -Vector3.up * 0.5f, "Y"));
		}
		if (this.alongZ)
		{
			directions.Add((Vector3.forward, Vector3.right, Vector3.up, -Vector3.forward * 0.5f, "Z"));
		}
		foreach (var (r, u, f, o, axisName) in directions)
		{
			for (var i = 0; i <= this.divisions; i++)
			{
				var center = o + (r * ((float)i / this.divisions));
				var v0 = center + ((-f - u) * 0.5f);
				var v1 = center + ((-f + u) * 0.5f);
				var v2 = center + ((f - u) * 0.5f);
				var v3 = center + ((f + u) * 0.5f);
				uvs[0].Set(v0.x + 0.5f, v0.y + 0.5f);
				uvs[1].Set(v1.x + 0.5f, v1.y + 0.5f);
				uvs[2].Set(v2.x + 0.5f, v2.y + 0.5f);
				uvs[3].Set(v3.x + 0.5f, v3.y + 0.5f);
				var planeName = $"{axisName}{i}";
				var mesh = new Mesh {name = planeName, vertices = vertices, uv = uvs, triangles = indices};
				mesh.RecalculateNormals();
				var plane = Instantiate(planeTemplate, this.transform);
				plane.name = planeName;
				var planeTransform = plane.transform;
				planeTransform.localPosition = center;
				planeTransform.localRotation = Quaternion.LookRotation(f, u);
				plane.GetComponent<MeshFilter>().sharedMesh = mesh;
			}
		}
		Destroy(planeTemplate);

		// テクスチャサイズ、pixelsPerUnit、sweepLengthに応じてスケールを調整する
		this.transform.localScale = new Vector3(
			this.textureToSweep.width / this.pixelsPerUnit,
			this.textureToSweep.height / this.pixelsPerUnit,
			this.sweepLength);
	}
}

最初のスクリプトと比べてかなりシンプルです。Z方向に積層したところ下図のような見た目になりました。

何層も重なったせいでずいぶん濃密に見えますが、その辺はアルファの調整で何とかなるでしょう。
オブジェクト数は多少かさむものの比較的低コストで、正面に近い向きで見るかぎりなかなか高品質な見た目になりそうです。
ただし、側面から見ると...

ラジエーター状態なのがばれてしまいます。
X、Y軸にも積層してカバーする手もあるかもしれませんが、今回のスクリプトでそれをやると...

視点の移動にともない面の前後関係がパキッと変わって見苦しくなってしまいます。オブジェクト単位の距離ソートではこうなってしまうのは仕方ないところがあり、解消するには各面をもっと小さい小片として構成する必要があるでしょう。ですがそれをやるとオブジェクト数が許容しがたいレベルに膨れ上がってしまいそうです。

別のアプローチとして、sakura_hanaさんの言及された「オブジェクトを作らずシェーダーでそのように見せる」も候補になるかと思います。
ShaderBits : Creating a Volumetric Ray Marcher - Ryan Brucksの方法を参考に検討してみました。

シェーダーファイル（Sweep.shader）は下記のようにしました。
主体となるコードは整理のため後述の別ファイル（Sweep.cginc、SweepUtils.cginc）に分離しています。

Shader "Volumetric/Sweep"
{
	Properties
	{
		[NoScaleOffset] _MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "Queue" = "Transparent" "RenderType" = "Transparent" }
		// ForwardAddは未実装につき、メインディレクショナルライトでしか描画できない
		Pass
		{
			Tags { "LightMode" = "ForwardBase" }
			Blend One OneMinusSrcAlpha
			Cull Front
			ZWrite Off
			ZTest Always

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fwdbase
			#include "Sweep.cginc"
			ENDCG
		}
		Pass
		{
			Tags { "LightMode" = "ShadowCaster" }
			ZWrite On 
			ZTest LEqual

			CGPROGRAM
			#pragma vertex vertShadow
			#pragma fragment fragShadow
			#pragma multi_compile_shadowcaster
			#include "Sweep.cginc"
			ENDCG
		}
	}
}

（パート3へ続く...）

Answer 4

ドット絵めいた表現でしたらunsoluble_sugarさんからご紹介いただいたようなアセットが有効そうですね。
もっと高解像度で曲線があるような画像だったらどうするか...ですが、メッシュとして立体化する方針で行くとすると、何かしらの方法でテクスチャのアウトラインを取る必要がありそうです。ペイントソフトで扱うようなビットマップデータであるテクスチャをドローソフトで扱うようなベクターデータに変えて、それをベースにメッシュを構築することになるんじゃないでしょうか。

まず、下記のようなスクリプトで実験してみました。

using System.Collections.Generic;
using System.Linq;
using ClipperLib;
using CsPotrace;
using Poly2Tri;
using Poly2Tri.Triangulation.Polygon;
using UnityEngine;

public class ImageSweeper : MonoBehaviour
{
	[SerializeField] private Texture2D textureToSweep;
	[SerializeField] private float sweepLength = 0.25f;
	[SerializeField] private float alphaThreshold = 0.5f;
	[SerializeField] private float pixelsPerUnit = 100.0f;
	[SerializeField][Range(1, 16)] private int divisions = 4;
	[SerializeField] private double clipperResolution = 1024.0;

	private void Start()
	{
		if (this.textureToSweep == null)
		{
			return;
		}
		
		// まず、テクスチャが読み取り不許可かもしれないので複製を作る
		var renderTexture = RenderTexture.GetTemporary(this.textureToSweep.width, this.textureToSweep.height);
		var currentActive = RenderTexture.active;
		Graphics.Blit(this.textureToSweep, renderTexture);
		var readableTexture = new Texture2D(this.textureToSweep.width, this.textureToSweep.height);
		RenderTexture.active = renderTexture;
		readableTexture.ReadPixels(new Rect(0, 0, this.textureToSweep.width, this.textureToSweep.height), 0, 0);
		RenderTexture.active = currentActive;
		RenderTexture.ReleaseTemporary(renderTexture);

		// Potraceでアウトラインを求める
		var curves = new List<List<Curve>>();
		Potrace.Treshold = this.alphaThreshold;
		Potrace.Potrace_Trace(readableTexture, curves);
		Potrace.Clear();

		// Clipperでパスを処理し外周と穴を識別する
		var clipper = new Clipper();
		var intPoints = GetIntPoints(GetPolygonPoints(curves, this.divisions), this.clipperResolution);
		clipper.AddPaths(intPoints, PolyType.ptSubject, true);
		var clipperSolution = new List<List<IntPoint>>();
		clipper.Execute(ClipType.ctXor, clipperSolution);

		// パスの巡回方向を調べて外周と穴に分ける
		var outlineIntPoints = new List<List<IntPoint>>();
		var holeIntPoints = new List<List<IntPoint>>();
		foreach (var path in clipperSolution)
		{
			var shiftedPath = path.Skip(1).Concat(path.Take(1));
			var crossSum = path.Zip(shiftedPath, (a, b) => (a.X * b.Y) - (a.Y * b.X)).Sum();
			(crossSum < 0 ? holeIntPoints : outlineIntPoints).Add(path);
		}

		// 各外周パスから穴パスをくり抜くことで、穴パスを所属する外周パスごとに整理する
		var outlinePoints = new List<List<PolygonPoint>>();
		var allHolePoints = new List<List<List<PolygonPoint>>>();
		foreach (var outlinePath in outlineIntPoints)
		{
			clipper.Clear();
			clipperSolution.Clear();
			clipper.AddPath(outlinePath, PolyType.ptSubject, true);
			clipper.AddPaths(holeIntPoints, PolyType.ptClip, true);
			clipper.Execute(ClipType.ctDifference, clipperSolution);
			var holePoints = new List<List<PolygonPoint>>();
			foreach (var path in clipperSolution)
			{
				var shiftedPath = path.Skip(1).Concat(path.Take(1));
				var crossSum = path.Zip(shiftedPath, (a, b) => (a.X * b.Y) - (a.Y * b.X)).Sum();
				(crossSum < 0 ? holePoints : outlinePoints).Add(path.Select(p => new PolygonPoint(p.X / this.clipperResolution, p.Y / this.clipperResolution)).ToList());
			}
			allHolePoints.Add(holePoints);
		}

		// Poly2Triで三角形化する
		var outlinePolygons = outlinePoints.Select(points => new Polygon(points)).ToArray();
		var allHolePolygons = allHolePoints.Select(holePoints => holePoints.Select(points => new Polygon(points)).ToArray()).ToArray();
		foreach (var (outlinePolygon, holePolygons) in outlinePolygons.Zip(allHolePolygons, (outlinePolygon, holePolygons) => (outlinePolygon, holePolygons)))
		{
			foreach (var holePolygon in holePolygons)
			{
				outlinePolygon.AddHole(holePolygon);
			}
			P2T.Triangulate(outlinePolygon);
		}

		// メッシュを作成する
		var topTransform = Matrix4x4.TRS(
			new Vector3(-0.5f, -0.5f, -0.5f),
			Quaternion.identity,
			new Vector3(1.0f / this.textureToSweep.width, 1.0f / this.textureToSweep.height, 1.0f));
		var bottomTransform = Matrix4x4.TRS(
			new Vector3(-0.5f, -0.5f, 0.5f),
			Quaternion.identity,
			new Vector3(1.0f / this.textureToSweep.width, 1.0f / this.textureToSweep.height, 1.0f));
		var uvScale = new Vector2(1.0f / this.textureToSweep.width, 1.0f / this.textureToSweep.height);
		var topMesh = GetTopMesh(outlinePolygons, topTransform, uvScale);
		var bottomMesh = Instantiate(topMesh);
		bottomMesh.vertices = bottomMesh.vertices.Select(p => new Vector3(p.x, p.y, -p.z)).ToArray();
		bottomMesh.triangles = bottomMesh.triangles.Reverse().ToArray();
		bottomMesh.RecalculateNormals();
		var sideMesh = GetSideMesh(outlinePoints.Concat(allHolePoints.SelectMany(holePoints => holePoints)), topTransform, bottomTransform, uvScale);
		var mesh = new Mesh {name = this.textureToSweep.name};
		mesh.CombineMeshes(new[] {topMesh, bottomMesh, sideMesh}.Select(m => new CombineInstance {mesh = m, transform = Matrix4x4.identity}).ToArray());

		// メッシュをオブジェクトに割り付ける
		var meshFilter = this.GetComponent<MeshFilter>();
		if (meshFilter == null)
		{
			meshFilter = this.gameObject.AddComponent<MeshFilter>();
		}
		meshFilter.sharedMesh = mesh;
		var meshRenderer = this.GetComponent<MeshRenderer>();
		if (meshRenderer == null)
		{
			meshRenderer = this.gameObject.AddComponent<MeshRenderer>();
		}
		var material = meshRenderer.material;
		if (material == null)
		{
			var dummyObject = GameObject.CreatePrimitive(PrimitiveType.Cube);
			material = dummyObject.GetComponent<Renderer>().material;
			meshRenderer.material = material;
			Destroy(dummyObject);
		}

		// テクスチャサイズ、pixelsPerUnit、sweepLengthに応じてスケールを調整する
		material.mainTexture = this.textureToSweep;
		this.transform.localScale = new Vector3(
			this.textureToSweep.width / this.pixelsPerUnit,
			this.textureToSweep.height / this.pixelsPerUnit,
			this.sweepLength);
	}

	private static Mesh GetSideMesh(
		IEnumerable<IEnumerable<PolygonPoint>> paths,
		Matrix4x4 topTransform,
		Matrix4x4 bottomTransform,
		Vector2 uvScale,
		bool reverseIndices = true)
	{
		var allVertices = new List<Vector3>();
		var allUvs = new List<Vector2>();
		var allIndices = new List<int>();
		var indexOffsets = new[] {0, 1, 2, 3, 2, 1};
		var indexOffset = 0;
		foreach (var path in paths)
		{
			var vertices = path.SelectMany(
				p =>
				{
					var v = new Vector3((float)p.X, (float)p.Y, 0.0f);
					return Enumerable.Repeat(topTransform.MultiplyPoint3x4(v), 1).Concat(Enumerable.Repeat(bottomTransform.MultiplyPoint3x4(v), 1));
				}).ToList();
			var uvs = path.SelectMany(p => Enumerable.Repeat(new Vector2((float)(p.X * uvScale.x), (float)(p.Y * uvScale.y)), 2));
			var vertexCount = vertices.Count;
			var offset = indexOffset;
			var indices = Enumerable.Range(0, vertexCount).SelectMany(
				i =>
				{
					var i2 = i * 2;
					return indexOffsets.Select(j => ((i2 + j) % vertexCount) + offset);
				});
			indexOffset += vertexCount;
			allVertices.AddRange(vertices);
			allUvs.AddRange(uvs);
			allIndices.AddRange(indices);
		}
		if (reverseIndices)
		{
			allIndices.Reverse();
		}
		var mesh = new Mesh {vertices = allVertices.ToArray(), uv = allUvs.ToArray(), triangles = allIndices.ToArray()};
		mesh.RecalculateNormals();
		return mesh;
	}

	private static Mesh GetTopMesh(
		IEnumerable<Polygon> polygons,
		Matrix4x4 positionTransform,
		Vector2 uvScale,
		bool reverseIndices = true)
	{
		var vertices = new List<Vector3>();
		var indices = new List<int>();
		var uvs = new List<Vector2>();
		foreach (var polygon in polygons)
		{
			vertices.AddRange(polygon.Triangles.SelectMany(t => t.Points.Select(p => positionTransform.MultiplyPoint3x4(new Vector3((float)p.X, (float)p.Y, 0.0f)))));
			uvs.AddRange(polygon.Triangles.SelectMany(t => t.Points.Select(p => new Vector2((float)(p.X * uvScale.x), (float)(p.Y * uvScale.y)))));
		}
		var indexEnumerable = Enumerable.Range(0, vertices.Count);
		if (reverseIndices)
		{
			indexEnumerable = indexEnumerable.Reverse();
		}
		indices.AddRange(indexEnumerable);
		var mesh = new Mesh {vertices = vertices.ToArray(), uv = uvs.ToArray(), triangles = indices.ToArray()};
		mesh.RecalculateNormals();
		return mesh;
	}

	private static List<List<IntPoint>> GetIntPoints(IEnumerable<IEnumerable<PolygonPoint>> paths, double resolution)
	{
		return paths.Select(path => path.Select(p => new IntPoint(p.X * resolution, p.Y * resolution)).ToList()).ToList();
	}

	private static IEnumerable<IEnumerable<PolygonPoint>> GetPolygonPoints(IEnumerable<IEnumerable<Curve>> paths, int divisions = 16)
	{
		return paths.Select(path => GetPolygonPoints(path, divisions));
	}

	private static IEnumerable<PolygonPoint> GetPolygonPoints(IEnumerable<Curve> path, int divisions = 16)
	{
		return path.SelectMany(curve => GetPolygonPoints(curve, divisions));
	}

	private static IEnumerable<PolygonPoint> GetPolygonPoints(Curve curve, int divisions = 16)
	{
		divisions = Mathf.Max(divisions, 1);
		yield return GetPolygonPoint(curve.A);
		for (var i = 1; i < divisions; i++)
		{
			yield return GetPolygonPoint(curve, (double)i / divisions);
		}
	}

	private static PolygonPoint GetPolygonPoint(Curve curve, double t)
	{
		if (t <= 0.0)
		{
			return GetPolygonPoint(curve.A);
		}
		if (t >= 1.0)
		{
			return GetPolygonPoint(curve.B);
		}
		var it = 1.0 - t;
		var t2 = t * t;
		var it2 = it * it;
		var f0 = it2 * it;
		var f1 = 3.0 * it2 * t;
		var f2 = 3.0 * it * t2;
		var f3 = t * t2;
		var x = (f0 * curve.A.x) + (f1 * curve.ControlPointA.x) + (f2 * curve.ControlPointB.x) + (f3 * curve.B.x);
		var y = (f0 * curve.A.y) + (f1 * curve.ControlPointA.y) + (f2 * curve.ControlPointB.y) + (f3 * curve.B.y);
		return new PolygonPoint(x, y);
	}

	private static PolygonPoint GetPolygonPoint(dPoint point)
	{
		return new PolygonPoint(point.x, point.y);
	}
}

（パート2へ続く...）

Comments

[hehebeb]

回答ありがとうございます。!
ここまで細かく検証していただき本当にありがとうございます。助かりました!
今後はShaderの勉強もしようと思います。

Answer 5

実現したいこととしては「Qubicle」や「Voxel」などが近そうに感じました。
検索キーワードとしては、例えば以下のようなものになるかと思います

• 「2d sprite convert 3D」
• 「convert 2D sprites into 3D voxel」

参考までに関連ソフトやAssetsを載せておきます。
jantepya/Unity-Sprite-Voxelizer: Unity utility for converting a 2D sprite to a 3D voxel mesh
Qubicle - Professional Voxel Editor for Design and Development

例えば手書きのSpriteを立体化させるケースであれば、前述のAssetsなどとは少し要件がズレてしまうかもしれません。

自前で実装するとしたら

• 3D空間にオブジェクトを配置し、片面に画像貼り付けて切り抜く
• 透過画像をObjectとして配置し、Z軸に引き伸ばす

などといったアプローチが考えられるのではないでしょうか。
実際に色々試してみると他にも良いやり方があるかもしれませんが、自分がパッと思いついたのはこのくらいです。

ご参考いただければと思います。

Comments

[hehebeb]

コメント遅れてすみません。
低解像度の画像を扱うときはこちらの回答を参考に実装したいと思います。
本当にありがとうございます！