平面を球体に綺麗に変形させるアニメーションを作りたい

Question

前提・実現したいこと

こんにちは。
Unityでこの動画のような技
![
を作ってみたくなり、Blenderを用いて画面と同じサイズの平面を作成、そしてその平面を球体に変形させるアニメーションを作り、Unityに取り込み、その物体にレンダーテクスチャを使って再現を試みたのですが、上手く行かなかったので相談させて頂きたいです。

試したこと

先ずシンプル変形(Simple Deform)を用い、それをアニメーションにして綺麗な変形は作れました。

しかしこれはあくまで見た目の変形？でありメッシュは変形していないため、このアニメーションをUnityに持っていっても変形しませんでした。

次に平面を湾曲(Warp)させ球体に変形、そしてシェイプキー(Shape Keys)を用いてアニメーションを作成、こちらはしっかりとUnityでも動作しました。

ただ変形の仕方が上記ゲームの動画及びシンプル変形を用いた場合に比べ綺麗ではなく、求めるものとは違った結果となってしまいました。

綺麗に変形させUnityに取り込む方法、或いはシェーダーなどを用いて上記のような結果を得る方法はありますでしょうか？
少しだけでもご助力頂きたいです！

補足情報（FW/ツールのバージョンなど）

Blender 2.91.0

###追記：半球を用いた場合

こちらは普通の球体。
変形の動き以外は問題ありません。

こちらは半球。
変形の動きは綺麗ですがテクスチャが引き伸ばされてしまう…。
また私が想定している使用法上、360°どこからでも見えるようにしたいので半球だと背後をカバー出来なくなってしまう。

Answer 1

球でないと都合が悪いでしょうかね?
ブレンドシェイプを試してみたところ、球への変形だと確かにご質問者さんのお示しいただいたような変形の仕方でしたが、半球への変形でしたらなかなか悪くない感じでした。もしさしつかえなければ半球にしてしまってはいかがでしょう。

あいにくBlenderを使い慣れていないため、メッシュはスクリプトから作ることにしました。
下記のようなスクリプトをプロジェクト内のEditorフォルダに入れ...

using System.Linq;
using UnityEditor;
using UnityEngine;

public class PlaneToHemisphereWizard : ScriptableWizard
{
	[SerializeField][Min(0.0f)] private float planeWidth = 4.0f;
	[SerializeField][Min(0.0f)] private float planeHeight = 3.0f;
	[SerializeField][Min(0.0f)] private float hemisphereRadius = 1.0f;
	[SerializeField][Min(1)] private int divisions = 8;

	private void OnWizardCreate()
	{
		var bottomLeft = new Vector3(-this.planeWidth * 0.5f, -this.planeHeight * 0.5f, 0.0f);
		var texelWidth = 0.5f / this.divisions;
		var texelHeight = 0.5f / this.divisions;
		var deltaX = this.planeWidth * texelWidth;
		var deltaY = this.planeHeight * texelHeight;
		var vertexCountX = (this.divisions * 2) + 1;
		var vertexCountY = (this.divisions * 2) + 1;
		var planeVertices = Enumerable.Range(0, vertexCountY).SelectMany(
			j => Enumerable.Range(0, vertexCountX).Select(
				i => bottomLeft + new Vector3(i * deltaX, j * deltaY, 0.0f))).ToArray();
		var planeNormals = planeVertices.Select(_ => Vector3.back).ToArray();
		var planeTangents = planeVertices.Select(_ => new Vector4(1.0f, 0.0f, 0.0f, -1.0f)).ToArray();
		var planeUvs = Enumerable.Range(0, vertexCountY).SelectMany(
			j => Enumerable.Range(0, vertexCountX).Select(
				i => new Vector2(i * texelWidth, j * texelHeight))).ToArray();
		var quadTriangles = new[]
		{
			0, vertexCountX, 1, vertexCountX + 1, 1, vertexCountX
		};
		var planeTriangles = Enumerable.Range(0, vertexCountY - 1).SelectMany(
			j => Enumerable.Range(0, vertexCountX - 1).SelectMany(
				i => quadTriangles.Select(k => i + (j * vertexCountX) + k))).ToArray();
		var hemisphereNormals = planeUvs.Select(
			uv =>
			{
				var angleH = (uv.x + 0.5f) * Mathf.PI;
				var angleV = (uv.y - 0.5f) * Mathf.PI;
				var sinH = Mathf.Sin(angleH);
				var cosH = Mathf.Cos(angleH);
				var sinV = Mathf.Sin(angleV);
				var cosV = Mathf.Cos(angleV);
				return new Vector3(-sinH * cosV, sinV, cosH * cosV);
			}).ToArray();
		var hemisphereTangents = planeUvs.Select(
			uv =>
			{
				var angleH = (uv.x + 0.5f) * Mathf.PI;
				var sinH = Mathf.Sin(angleH);
				var cosH = Mathf.Cos(angleH);
				return new Vector4(-cosH, 0.0f, -sinH, -1.0f);
			}).ToArray();
		var hemisphereVertices = hemisphereNormals.Select(normal => normal * this.hemisphereRadius).ToArray();
		var mesh = new Mesh
		{
			name = "PlaneToHemisphere",
			vertices = planeVertices,
			normals = planeNormals,
			tangents = planeTangents,
			uv = planeUvs,
			triangles = planeTriangles
		};
		mesh.AddBlendShapeFrame(
			"Deformation",
			100.0f,
			planeVertices.Zip(
				hemisphereVertices,
				(planeVertex, hemisphereVertex) => hemisphereVertex - planeVertex).ToArray(),
			planeNormals.Zip(
				hemisphereNormals,
				(planeNormal, hemisphereNormal) => hemisphereNormal - planeNormal).ToArray(),
			planeTangents.Zip(
				hemisphereTangents,
				(planeTangent, hemisphereTangent) => (Vector3)hemisphereTangent - (Vector3)planeTangent).ToArray());
		mesh.RecalculateNormals();
		mesh.RecalculateTangents();
		var cube = GameObject.CreatePrimitive(PrimitiveType.Cube);
		var newObject = new GameObject(mesh.name);
		var skinnedMeshRenderer = newObject.AddComponent<SkinnedMeshRenderer>();
		skinnedMeshRenderer.sharedMesh = mesh;
		skinnedMeshRenderer.sharedMaterial = cube.GetComponent<Renderer>().sharedMaterial;
		DestroyImmediate(cube);
		ProjectWindowUtil.CreateAsset(mesh, $"{mesh.name}.asset");
	}

	[MenuItem("Assets/Create/Plane to Hemisphere")]
	private static void OpenWizard()
	{
		DisplayWizard<PlaneToHemisphereWizard>("Plane to Hemisphere");
	}
}

メニューの「Assets」→「Create」→「Plane To Hemisphere」でメッシュアセットを作成、併せてシーン上にそれをセットしたオブジェクトを生成させました。
SkinnedMeshRendererの「BlendShapes」→「Deformation」を操作すると、下図のように平面から半球に変形しました。

##シェーダー上で変形する案

下記のようなマテリアルを使用したところ...

Shader "Custom/PlaneToSphere"
{
	Properties
	{
		_Color ("Color", Color) = (1, 1, 1, 1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_Glossiness ("Smoothness", Range(0, 1)) = 0.5
		_Metallic ("Metallic", Range(0, 1)) = 0.0
		_SphereRadius ("Sphere Radius", Range(0, 10)) = 1.0
		_Deformation ("Deformation", Range(0, 1)) = 0.0
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }

		Cull Off

		CGPROGRAM
		#pragma surface surf Standard fullforwardshadows vertex:vert
		#pragma target 3.0

		sampler2D _MainTex;
		half _Glossiness;
		half _Metallic;
		fixed4 _Color;
		float _SphereRadius;
		float _Deformation;

		struct Input
		{
			float2 uv_MainTex;
		};

		#define EPSILON 0.000001

		void vert(inout appdata_full v)
		{
			if (_Deformation < EPSILON)
			{
				return;
			}

			// 法線、接線はブレンドシェイプ版と同じ線形モーフィングでも
			// 粗が目立たなかったためブレンドシェイプ版と同様に補間した
			float sinH;
			float cosH;
			float sinV;
			float cosV;
			sincos(v.texcoord.x * 2.0 * UNITY_PI, sinH, cosH);
			sincos((v.texcoord.y - 0.5) * UNITY_PI, sinV, cosV);
			float3 sphereNormal = float3(-sinH * cosV, sinV, cosH * cosV);
			float3 sphereTangent = float3(cosH, 0.0, sinH) * v.tangent.w;
			v.normal = lerp(v.normal, sphereNormal, _Deformation);
			v.tangent.xyz = lerp(v.tangent.xyz, sphereTangent, _Deformation);

			// 頂点座標の水平成分を円弧に沿った補間とすることで見苦しさを軽減する
			// 垂直成分は線形補間でもさほど違和感はなさそうだった
			float sinTheta;
			float cosTheta;
			float geographicCoord = (2.0 * v.texcoord.x - 1.0) * UNITY_PI;
			sincos(_Deformation * geographicCoord, sinTheta, cosTheta);
			float3 arcPosition = float3(sinTheta, 0.0, 1.0 - cosTheta) * _SphereRadius / _Deformation;
			arcPosition.yz += float2(lerp(v.vertex.y, sphereNormal.y * _SphereRadius, _Deformation), lerp(0.0, -_SphereRadius, _Deformation));
			arcPosition.x *= lerp(max(abs(v.vertex.x), EPSILON) / max(abs(_SphereRadius * geographicCoord), EPSILON), 1.0, _Deformation);
			arcPosition.xz *= lerp(1.0, cosV, _Deformation);
			v.vertex.xyz = arcPosition;
		}

		void surf(Input IN, inout SurfaceOutputStandard o)
		{
			fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
			o.Albedo = c.rgb;
			o.Metallic = _Metallic;
			o.Smoothness = _Glossiness;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}

下図のような変形の仕方になりました。マテリアルの_Deformationをスクリプトから操作すれば平面から球体へ変形できるかと思います。

##Unlit版

Shader "Unlit/PlaneToSphere"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_SphereRadius ("Sphere Radius", Range(0, 10)) = 1.0
		_Deformation ("Deformation", Range(0, 1)) = 0.0
	}

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

		Cull Off

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog

			#include "UnityCG.cginc"

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float _SphereRadius;
			float _Deformation;

			#define EPSILON 0.000001

			void deform(inout appdata v)
			{
				if (_Deformation < EPSILON)
				{
					return;
				}

				// Unlitなら法線、接線は不要なはずなので簡略化した
				float sinV;
				float cosV;
				sincos((v.uv.y - 0.5) * UNITY_PI, sinV, cosV);
				float sinTheta;
				float cosTheta;
				float geographicCoord = (2.0 * v.uv.x - 1.0) * UNITY_PI;
				sincos(_Deformation * geographicCoord, sinTheta, cosTheta);
				float3 arcPosition = float3(sinTheta, 0.0, 1.0 - cosTheta) * _SphereRadius / _Deformation;
				arcPosition.yz += float2(lerp(v.vertex.y, sinV * _SphereRadius, _Deformation), lerp(0.0, -_SphereRadius, _Deformation));
				arcPosition.x *= lerp(max(abs(v.vertex.x), EPSILON) / max(abs(_SphereRadius * geographicCoord), EPSILON), 1.0, _Deformation);
				arcPosition.xz *= lerp(1.0, cosV, _Deformation);
				v.vertex.xyz = arcPosition;
			}

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

			fixed4 frag(v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}
	}
}

Comments

[KTN]

回答ありがとうございます！
実は私も半球の場合は綺麗なアニメーションが作れることは把握していましたが、いくつかの問題(追記に記載致しましたのでそちらを参照ください)があるのでやはりしっかりとした球体が望ましいです…。

長くお付き合いさせてしまって申し訳ないのですが、その半球の状態から球体に持っていくことは出来ないでしょうか？

[Bongo]

ブレンドレイプには限界を感じ、方針を変更してシェーダー上で変形させるのを試してみました。
ブレンドシェイプだと頂点座標が平面の位置から球面上の位置へ一直線に移動していきますが、それだと特に水平の動きが見苦しさの原因になっているように感じました。そこで水平方向の動きを紙を筒状に丸めるのをイメージした形にしてみましたが、いかがでしょうかね?
追記の実験で使ったメッシュは当初の回答で使用したブレンドシェイプ付きメッシュではありますが（作り直すのが面倒で手抜きしました...）、ブレンドシェイプ機能は使用していませんので、Z=0の平面上に配置されたただの平面メッシュであれば適用可能かと思います。

[KTN]

うわ！ありがとうございます！ご記載して頂いたシェーダーで試したところ理想の動きをしてくれました！！

ただすみません…もはや二つ目の質問になってしまい本当に申し訳ないのですが、元々レンダーテクスチャの色をそのまま出すため、Unlitシェーダーを用いていたんですよね。
ただ私まだまだシェーダーについて把握しておらず、どのように追記すればいいか分からず…。
ヒントだけでも構いませんので、ご記載頂いたシェーダーにUnlitの機能をつける方法をお教え願えないでしょうか…？

[Bongo]

Unlit版を作ってみました。法線や接線の補間は不要なため省略しましたので、いくらかシンプルになりましたね。

[KTN]

本当にありがとうございました！ご提示頂いたシェーダーで想像していた通りの動きが出来ました！
それとすみません、最初からUnlitでお願いしておけば手間を減らせましたね。