UnityのUIにモーションブラーをかけたい

Question

前提・実現したいこと

UnityのImageやTextに対してモーションブラーをかけたいです。
SpriteやTextMeshProなどでも構いませんが、できれば上記の二点に適用できると嬉しいです。

できるだけ追加料金のかからない方法がいいです。

試したこと

「post processing stack v2」のMotion Blurは試しましたが、Bloomなど他の機能は適用されるのに対してMotion Blurだけは適用されません。

• Post processingのMotion Blurが3Dオブジェクトに適用されているのは確認しました。
• CanvasのRender CameraはScreen Space - Cameraで行いました。

補足情報

Unity 2019.2.15f1

2019/1/6　補足

左の”L”がSprite　　右の”L”がImage

Answer 1

（回答の続き）

UIオブジェクト用のシェーダーはUI-Default.shaderとInternal-MotionVectors.shaderを折衷し...

Shader "Hidden/GraphicMotionVectors"
{
	Properties
	{
		_MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)
		_StencilComp ("Stencil Comparison", Float) = 8
		_Stencil ("Stencil ID", Float) = 0
		_StencilOp ("Stencil Operation", Float) = 0
		_StencilWriteMask ("Stencil Write Mask", Float) = 255
		_StencilReadMask ("Stencil Read Mask", Float) = 255
		_ColorMask ("Color Mask", Float) = 15
	}

	SubShader
	{
		Tags
		{
			"Queue"="Transparent"
			"IgnoreProjector"="True"
			"RenderType"="Transparent"
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}

		Stencil
		{
			Ref [_Stencil]
			Comp [_StencilComp]
			Pass [_StencilOp]
			ReadMask [_StencilReadMask]
			WriteMask [_StencilWriteMask]
		}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest LEqual
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask [_ColorMask]

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile_local _ UNITY_UI_CLIP_RECT

			struct appdata_t
			{
				float4 vertex	: POSITION;
				float4 color	: COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2fMotion
			{
				float4 vertex : SV_POSITION;
				fixed4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				float4 transferPos : TEXCOORD2;
				float4 transferPosOld : TEXCOORD3;
				UNITY_VERTEX_OUTPUT_STEREO
			};

			sampler2D _MainTex;
			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;
			float4 _MainTex_ST;
			float4x4 _NonJitteredVP;
			float4x4 _PreviousMVP;

			v2fMotion vert(appdata_t v)
			{
				v2fMotion OUT;
				UNITY_SETUP_INSTANCE_ID(v);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

				// まず通常のGraphicの方法にならって頂点の処理を行い...
				OUT.worldPosition = v.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
				OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
				OUT.color = v.color * _Color;

				// モーションベクター用の追加処理として、前回と今回のクリップ座標を求める
				OUT.transferPos = mul(_NonJitteredVP, mul(unity_ObjectToWorld, OUT.worldPosition));
				OUT.transferPosOld = mul(_PreviousMVP, OUT.worldPosition);

				return OUT;
			}

			half4 frag(v2fMotion IN) : SV_Target
			{
				half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
				#ifdef UNITY_UI_CLIP_RECT
				color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				#endif
				
				// 透明部分は破棄する
				clip(color.a - 0.001);

				// 正規化ビューポート座標におけるピクセルの前回の位置、今回の位置を求める
				float3 hPos = (IN.transferPos.xyz / IN.transferPos.w);
				float3 hPosOld = (IN.transferPosOld.xyz / IN.transferPosOld.w);
				float2 vPos = (hPos.xy + 1.0f) / 2.0f;
				float2 vPosOld = (hPosOld.xy + 1.0f) / 2.0f;

				// 座標の変化量を出力する
				half2 uvDiff = vPos - vPosOld;
				return half4(uvDiff, 0, 1);
			}
			ENDCG
		}
	}
}

UIオブジェクトには下記スクリプトをアタッチし...

using System.Collections;
using System.Collections.Generic;
using System.Reflection;
using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.UI;

[RequireComponent(typeof(RectTransform), typeof(CanvasRenderer), typeof(Graphic))]
public class GraphicMotionVectorsEnabler : MonoBehaviour
{
	private static readonly int StencilCompProperty = Shader.PropertyToID("_StencilComp");
	private static readonly int StencilProperty = Shader.PropertyToID("_Stencil");
	private static readonly int StencilOpProperty = Shader.PropertyToID("_StencilOp");
	private static readonly int StencilWriteMaskProperty = Shader.PropertyToID("_StencilWriteMask");
	private static readonly int StencilReadMaskProperty = Shader.PropertyToID("_StencilReadMask");
	private static readonly int ColorMaskProperty = Shader.PropertyToID("_ColorMask");
	private static readonly int NonJitteredVpProperty = Shader.PropertyToID("_NonJitteredVP");
	private static readonly int PreviousMvpProperty = Shader.PropertyToID("_PreviousMVP");
	private static readonly YieldInstruction WaitForEndOfFrame = new WaitForEndOfFrame();

	private static readonly PropertyInfo WorkerMeshInfo = typeof(Graphic).GetProperty(
		"workerMesh",
		BindingFlags.DeclaredOnly | BindingFlags.Static | BindingFlags.NonPublic);

	private static readonly MethodInfo DoMeshGenerationInfo = typeof(Graphic).GetMethod(
		"DoMeshGeneration",
		BindingFlags.DeclaredOnly | BindingFlags.Instance | BindingFlags.NonPublic);
	private Graphic graphic;
	private CommandBuffer commands;
	private Material motionVectorsMaterial;
	private Material graphicMaterial;
	private Matrix4x4 previousModelMatrix;
	private readonly Dictionary<Camera, Matrix4x4> previousVpMatrices = new Dictionary<Camera, Matrix4x4>();

	private void Start()
	{
		this.graphic = this.GetComponent<Graphic>();
		this.motionVectorsMaterial = new Material(Shader.Find("Hidden/GraphicMotionVectors"));
		this.graphicMaterial = this.graphic.materialForRendering;
		this.previousModelMatrix = this.transform.localToWorldMatrix;
		this.commands = new CommandBuffer {name = "Render Graphic Motion Vectors"};
		this.StartCoroutine(this.UpdatePreviousParameters());
	}

	private void OnRenderObject()
	{
		var canvas = this.graphic.canvas;

		// Screen Space - Overlayはサポートしない
		if (canvas.renderMode == RenderMode.ScreenSpaceOverlay)
		{
			return;
		}
		var currentCamera = canvas.worldCamera;
		if ((currentCamera == null) || (currentCamera.cameraType != CameraType.Game))
		{
			return;
		}

		// Graphicにメッシュ生成させ、その直後のworkerMeshを使って描画する
		DoMeshGenerationInfo.Invoke(this.graphic, null);
		var mesh = WorkerMeshInfo.GetValue(null) as Mesh;
		var currentModelMatrix = transform.localToWorldMatrix;
		var currentVpMatrix = currentCamera.nonJitteredProjectionMatrix * currentCamera.worldToCameraMatrix;
		if (!this.previousVpMatrices.TryGetValue(currentCamera, out var previousVpMatrix))
		{
			previousVpMatrix = currentVpMatrix;
		}

		this.previousVpMatrices[currentCamera] = currentVpMatrix;
		this.motionVectorsMaterial.mainTexture = this.graphic.mainTexture;
		this.motionVectorsMaterial.color = this.graphicMaterial.color;
		this.motionVectorsMaterial.SetFloat(StencilCompProperty, this.graphicMaterial.GetFloat(StencilCompProperty));
		this.motionVectorsMaterial.SetFloat(StencilProperty, this.graphicMaterial.GetFloat(StencilProperty));
		this.motionVectorsMaterial.SetFloat(StencilOpProperty, this.graphicMaterial.GetFloat(StencilOpProperty));
		this.motionVectorsMaterial.SetFloat(StencilWriteMaskProperty, this.graphicMaterial.GetFloat(StencilWriteMaskProperty));
		this.motionVectorsMaterial.SetFloat(StencilReadMaskProperty, this.graphicMaterial.GetFloat(StencilReadMaskProperty));
		this.motionVectorsMaterial.SetFloat(ColorMaskProperty, this.graphicMaterial.GetFloat(ColorMaskProperty));
		this.motionVectorsMaterial.SetMatrix(NonJitteredVpProperty, currentVpMatrix);
		this.motionVectorsMaterial.SetMatrix(PreviousMvpProperty, previousVpMatrix * this.previousModelMatrix);
		this.commands.Clear();
		this.commands.SetRenderTarget(BuiltinRenderTextureType.MotionVectors);
		this.commands.DrawMesh(mesh, currentModelMatrix, this.motionVectorsMaterial);
		Graphics.ExecuteCommandBuffer(this.commands);
	}

	private IEnumerator UpdatePreviousParameters()
	{
		while (true)
		{
			yield return WaitForEndOfFrame;

			this.previousModelMatrix = this.transform.localToWorldMatrix;
		}
	}
}

実行すると下図のようなモーションベクターが描画され...

それに基づいてモーションブラーがかかり、下図のような見た目になりました。
右上は特別な処置は行っていない3Dオブジェクト、左上はSpriteRendererにより描画されるスプライト（SpriteMotionVectorsEnablerをアタッチ）です。
下半分はUIオブジェクト（それぞれGraphicMotionVectorsEnablerをアタッチ）で、右下はImage、左下はTextです。

ただし、透明オブジェクト同士の前後関係調整は不十分です。上図ではUIがスプライトより手前に表示されるよう配置しているのですが、モーションベクター描画ではスプライトの方が手前になってしまっています。OnRenderObjectの実行順はZソートとは無関係なようですので、もし正しい順序にしたい場合は自前でモーションベクター描画のタイミングをコントロールする必要がありそうです。とはいえ、モーションブラーがかかる部分はどうせ高速で動いているでしょうから、多少ぼかしが狂っていても目立たないんじゃないかとは思います。
すみませんが即興で書いたもので十分なテストを行っていないため、他にもうまく描画されないケースがあるかもしれません。

Comments

[bh_evan]

全方位へのスライドをメインに考えていたので、この方法で実装できるのは非常に助かりました。
Spriteの描画順に関しても、SpriteではなくImageでの制作に変更したので問題なさそうです。

しかし、私自身シェーダーを扱うのが初めてなので、正しい実装方法を心得ていなかったからでしょうか、補足に付け加えました画像のようになってしまいました。InspectorはSpriteに実装したものです。

Shaderの作り方からなのか、置く場所を間違えたのか、基礎のようなことかもしれませんが正しい実装方法を教えていただけたら幸いです。

[Bongo]

いえ、説明不足ですみませんが回答中に例示しましたHidden/SpriteMotionVectorsとHidden/GraphicMotionVectorsはご自身でマテリアルを作ってスプライトやUIオブジェクトにセットすることを想定したものではなく、SpriteMotionVectorsEnablerやGraphicMotionVectorsEnablerが内部で勝手に使うシェーダーです（ですのでプレイモードで動作確認する分にはそのままでもいいですが、ビルド後でも動作させるにはメニューの「Edit」→「Project Settings...」の「Graphics」→「Always Included Shaders」にこれらシェーダーを追加しておかないと、ビルド時にこれらシェーダーは使われていないと判断されて削除されてしまうでしょう）。
デフォルトだとスプライトのマテリアルは「Sprites-Default」、UIオブジェクトのマテリアルは「None (Material)」になっているかと思いますが、この状態に戻してみてください。

※それとPost Processing StackのMotion Blurはオンになっているでしょうかね?ご提示いただいた失敗映像を拝見すると、正常にモーションブラーがかかるはずのシリンダーもボケていないように見えるのですが...回転速度が遅くてボケ量が小さいだけならいいのですが、もしMotion Blurをオフにしてしまっている場合はオンにする必要があります。

[bh_evan]

丁寧にありがとうございます。おかげで理想通りのブラーをかけられました。
画像はPostProcesssingはオンでしたが、スピードが足りずに見えにくかったかもしれません。

Answer 2

もし回転するホイールのようなものをぼかして美しく見せたいのでしたら、Radial Blur Shader - Texture - Unity Forumで話題に取り上げられているような円形ぼかしがいいんじゃないかと思います。なんでしたら特殊なシェーダーも使わずに、画像処理ソフトで事前にぼかしたテクスチャを何種類か用意しておいて回転速度に応じて差し替えるのでもいいかもしれません。
同じくオブジェクトの動きが平行移動だけ、あるいは拡大縮小だけなのであれば同様に移動ぼかし、放射状ぼかしを行うことで対応できそうです。ですが複雑な動きをする場合にはPost Processing Stackのモーションブラーを使いたいことがあるかもしれません。

Post Processing Stackは【Unity】5.4＆5.5新機能を深掘り（Motion Vectors編） - 株式会社ロジカルビートなどで紹介されているモーションベクターテクスチャを見てぼかしの向きや大きさを決定しているのだろうと思います。
何とかしてそこに動きを書き込んでやればモーションブラーをかけてくれるのではないかと考え、まずSpriteRenderer用としてビルトインシェーダーのSprites-Default.shaderとInternal-MotionVectors.shaderを折衷した下記シェーダーを作り...

Shader "Hidden/SpriteMotionVectors"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)
		[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
		[HideInInspector] _RendererColor ("RendererColor", Color) = (1,1,1,1)
		[HideInInspector] _Flip ("Flip", Vector) = (1,1,1,1)
		[PerRendererData] _AlphaTex ("External Alpha", 2D) = "white" {}
		[PerRendererData] _EnableExternalAlpha ("Enable External Alpha", Float) = 0
	}

	SubShader
	{
		Tags
		{
			"Queue"="Transparent"
			"IgnoreProjector"="True"
			"RenderType"="Transparent"
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}

		Cull Off
		Lighting Off
		ZWrite Off
		Blend One OneMinusSrcAlpha

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0
			#pragma multi_compile_instancing
			#pragma multi_compile_local _ PIXELSNAP_ON
			#pragma multi_compile _ ETC1_EXTERNAL_ALPHA
			#include "UnitySprites.cginc"

			float4x4 _NonJitteredVP;
			float4x4 _PreviousMVP;

			struct v2fMotion
			{
				float4 vertex : SV_POSITION;
				fixed4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float4 transferPos : TEXCOORD1;
				float4 transferPosOld : TEXCOORD2;
				UNITY_VERTEX_OUTPUT_STEREO
			};

			v2fMotion vert(appdata_t IN)
			{
				v2fMotion OUT;

				UNITY_SETUP_INSTANCE_ID (IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

				// まず通常のスプライトの方法にならって頂点の処理を行い...
				float4 inputPos = UnityFlipSprite(IN.vertex, _Flip);
				OUT.vertex = UnityObjectToClipPos(inputPos);
				OUT.texcoord = IN.texcoord;
				OUT.color = IN.color * _Color * _RendererColor;
				#ifdef PIXELSNAP_ON
				OUT.vertex = UnityPixelSnap(OUT.vertex);
				#endif

				// モーションベクター用の追加処理として、前回と今回のクリップ座標を求める
				OUT.transferPos = mul(_NonJitteredVP, mul(unity_ObjectToWorld, inputPos));
				OUT.transferPosOld = mul(_PreviousMVP, inputPos);

				return OUT;
			}

			half4 frag(v2fMotion IN) : SV_Target
			{
				// 透明部分は破棄する
				clip((SampleSpriteTexture(IN.texcoord).a * IN.color.a) - 0.001);

				// 正規化ビューポート座標におけるピクセルの前回の位置、今回の位置を求める
				float3 hPos = (IN.transferPos.xyz / IN.transferPos.w);
				float3 hPosOld = (IN.transferPosOld.xyz / IN.transferPosOld.w);
				float2 vPos = (hPos.xy + 1.0f) / 2.0f;
				float2 vPosOld = (hPosOld.xy + 1.0f) / 2.0f;

				// 座標の変化量を出力する
				half2 uvDiff = vPos - vPosOld;
				return half4(uvDiff, 0, 1);
			}
			ENDCG
		}
	}
}

スプライトにアタッチするスクリプトは下記のようにし...

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

[RequireComponent(typeof(SpriteRenderer))]
public class SpriteMotionVectorsEnabler : MonoBehaviour
{
	private static readonly int PixelSnapProperty = Shader.PropertyToID("PixelSnap");
	private static readonly int RendererColorProperty = Shader.PropertyToID("_RendererColor");
	private static readonly int FlipProperty = Shader.PropertyToID("_Flip");
	private static readonly int NonJitteredVpProperty = Shader.PropertyToID("_NonJitteredVP");
	private static readonly int PreviousMvpProperty = Shader.PropertyToID("_PreviousMVP");
	private static readonly YieldInstruction WaitForEndOfFrame = new WaitForEndOfFrame();
	private new SpriteRenderer renderer;
	private CommandBuffer commands;
	private Material motionVectorsMaterial;
	private Material spriteMaterial;
	private Matrix4x4 previousModelMatrix;
	private readonly Dictionary<Camera, Matrix4x4> previousVpMatrices = new Dictionary<Camera, Matrix4x4>();

	private void Start()
	{
		this.renderer = this.GetComponent<SpriteRenderer>();
		this.motionVectorsMaterial = new Material(Shader.Find("Hidden/SpriteMotionVectors"));
		this.spriteMaterial = this.renderer.sharedMaterial;
		this.previousModelMatrix = this.transform.localToWorldMatrix;
		this.commands = new CommandBuffer {name = "Render Sprite Motion Vectors"};
		this.commands.SetRenderTarget(BuiltinRenderTextureType.MotionVectors);
		this.commands.DrawRenderer(this.renderer, this.motionVectorsMaterial);
		this.StartCoroutine(this.UpdatePreviousParameters());
	}

	private void OnRenderObject()
	{
		var currentCamera = Camera.current;
		if ((currentCamera == null) || (currentCamera.cameraType != CameraType.Game))
		{
			return;
		}

		var currentVpMatrix = currentCamera.nonJitteredProjectionMatrix * currentCamera.worldToCameraMatrix;
		if (!this.previousVpMatrices.TryGetValue(currentCamera, out var previousVpMatrix))
		{
			previousVpMatrix = currentVpMatrix;
		}

		this.previousVpMatrices[currentCamera] = currentVpMatrix;
		this.motionVectorsMaterial.color = this.spriteMaterial.color;
		this.motionVectorsMaterial.SetFloat(PixelSnapProperty, this.spriteMaterial.GetFloat(PixelSnapProperty));
		this.motionVectorsMaterial.SetColor(
			RendererColorProperty,
			this.spriteMaterial.GetColor(RendererColorProperty));
		this.motionVectorsMaterial.SetVector(FlipProperty, this.spriteMaterial.GetVector(FlipProperty));
		this.motionVectorsMaterial.SetMatrix(NonJitteredVpProperty, currentVpMatrix);
		this.motionVectorsMaterial.SetMatrix(PreviousMvpProperty, previousVpMatrix * this.previousModelMatrix);
		Graphics.ExecuteCommandBuffer(this.commands);
	}

	private IEnumerator UpdatePreviousParameters()
	{
		while (true)
		{
			yield return WaitForEndOfFrame;

			this.previousModelMatrix = this.transform.localToWorldMatrix;
		}
	}
}

（すみませんが文字数がかさんでしまったので、続きは別回答へ）