Unity : ウェブカメラで取得した画像の黒い部分だけに当たり判定をつけたい

Question

前提・実現したいこと

Unityで、影を用いたインタラクティブなゲームを制作しております。
そこで、下図のようにウェブカメラで人を撮影し、その撮影された画像の黒い部分だけに当たり判定を与えて、キャラクターが影の上に登ったりなどができることを目標としています。

コライダーを既存のコンポーネントで適用するのではなく、スクリプトで適用すればいいのかと
初心者ながら想像しているのですが、実際どのように組み始めていけば良いか見当がつかず
質問させていただきました。

説明が足らない場合はお手数ですが質問していただけますと助かります。

宜しくお願い致します。

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

Unity2019.2.5f1 Personal
macOS Sierra

おわりに

回答をしてくださったお二人ともベストアンサーにしたかったのが正直です。
どちらも実装して試してみましたが、Bongo様の回答は私の技術力を大きく上回る内容でしたが、
むしろそのことによって触れてこなかったシェーダーの世界でもアプローチが可能であることなど
新しい発見が伴うものでした。
ありがとうございました。

Answer 1

映像が更新されるたびにPolygonCollider2Dを付け直すというのも候補になるかもしれません。ですがやはり負荷は大きいでしょうね...

スプライトに付けるスクリプトの例

using System.Collections;
using UnityEngine;

[RequireComponent(typeof(SpriteRenderer), typeof(PolygonCollider2D))]
public class Silhouette : MonoBehaviour
{
	private static readonly int Threshold = Shader.PropertyToID("_Threshold");

	[SerializeField] private int width = 320;
	[SerializeField] private int height = 240;
	[SerializeField] private int floorHeight = 16;
	[SerializeField] private int resolutionMultiplier = 1;
	[SerializeField] private Color color = Color.black;
	[SerializeField][Range(0.0f, 1.0f)] private float threshold = 0.5f;
	[SerializeField] private Shader silhouetteShader;

	private new SpriteRenderer renderer;
	private new PolygonCollider2D collider;
	private Sprite sprite;
	private Texture2D spriteTexture;
	private Material silhouetteMaterial;
	private WebCamTexture webCamTexture;

	private IEnumerator Start()
	{
		// WebCamTextureをセットアップ
		if (WebCamTexture.devices.Length <= 0)
		{
			Destroy(this);
			yield break;
		}
		this.width = Mathf.Max(this.width, 100);
		this.height = Mathf.Max(this.height, 100);
		this.webCamTexture = new WebCamTexture(WebCamTexture.devices[0].name, this.width, this.height);
		this.webCamTexture.Play();
		while (this.webCamTexture.width < 100)
		{
			yield return null;
		}

		// この後の処理で使うテクスチャ幅・高さを求める
		// resolutionMultiplierを大きくするとコライダーが精密になるが、負荷は大きくなる
		this.width = this.webCamTexture.width * this.resolutionMultiplier;
		this.height = this.webCamTexture.height * this.resolutionMultiplier;
		var pixelsPerUnit = (float)this.height;
		var mainCamera = Camera.main;
		if (mainCamera.orthographic)
		{
			pixelsPerUnit = (0.5f * Screen.height * this.resolutionMultiplier) / mainCamera.orthographicSize;
		}

		// スプライトをセットアップ
		this.renderer = this.GetComponent<SpriteRenderer>();
		this.collider = this.GetComponent<PolygonCollider2D>();
		this.spriteTexture = new Texture2D(this.width, this.height, TextureFormat.ARGB32, false);
		this.sprite = Sprite.Create(
			this.spriteTexture,
			new Rect(0, 0, this.width, this.height),
			Vector2.zero,
			pixelsPerUnit);
		this.renderer.sprite = this.sprite;

		this.silhouetteMaterial = new Material(this.silhouetteShader);
		while (true)
		{
			// WebCamTextureの内容を2値化
			this.silhouetteMaterial.color = this.color;
			this.silhouetteMaterial.SetFloat(Threshold, this.threshold);
			var renderTexture = RenderTexture.GetTemporary(this.width, this.height, 0, RenderTextureFormat.ARGB32);
			Graphics.Blit(this.webCamTexture, renderTexture, this.silhouetteMaterial, 0);
			var activeTexture = RenderTexture.active;
			RenderTexture.active = renderTexture;

			// 床を描く
			// WebCamTextureのBlitで何も映っていない場合、後のコライダー生成時に
			// デフォルトの形状で生成されてしまうため、それを防止するのが主目的
			var floorY = ((float)(this.floorHeight * this.resolutionMultiplier) / this.height);
			GL.PushMatrix();
			this.silhouetteMaterial.SetPass(1);
			GL.Begin(GL.QUADS);
			GL.LoadOrtho();
			GL.Color(this.color);
			GL.Vertex(Vector3.zero);
			GL.Vertex3(0.0f, floorY, 0.0f);
			GL.Vertex3(1.0f, floorY, 0.0f);
			GL.Vertex(Vector3.right);
			GL.End();
			GL.PopMatrix();

			// 結果をスプライト用テクスチャに読み取る
			this.spriteTexture.ReadPixels(new Rect(0, 0, this.width, this.height), 0, 0);
			RenderTexture.active = activeTexture;
			RenderTexture.ReleaseTemporary(renderTexture);
			this.spriteTexture.Apply();

			// PolygonCollider2Dを再作成し、不透明部分に沿った形状を作らせる
			Destroy(this.collider);
			this.collider = this.gameObject.AddComponent<PolygonCollider2D>();
			yield return null;
		}
	}
}

映像処理用シェーダーの例

Shader "Hidden/Silhouette"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Color ("Color", Color) = (0, 0, 0, 1)
		_Threshold ("Threshold", Range(0.0, 1.0)) = 0.5
	}
	SubShader
	{
		Cull Off ZWrite Off ZTest Always

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

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

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

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

			sampler2D _MainTex;
			float4 _Color;
			float _Threshold;

			fixed4 frag (v2f i) : SV_Target
			{
				float y = dot(tex2D(_MainTex, i.uv).rgb, float3(0.298912, 0.586611, 0.114478));
				return fixed4(_Color.rgb, max(sign(y - _Threshold), 0.0));
			}
			ENDCG
		}

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
			};

			struct v2f
			{
				float4 vertex : SV_POSITION;
			};

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				return o;
			}

			float4 _Color;

			fixed4 frag (v2f i) : SV_Target
			{
				return fixed4(_Color.rgb, 1.0);
			}
			ENDCG
		}
	}
}

部屋の明かりを消し、ディスプレイの光で手を照らして撮影してみた様子

大きな解像度でもなめらかに動かすには、Unity標準の物理シミュレーションに頼らない独自の衝突判定メカニズムを考えるべきなのかもしれません。
高速化する余地としてはBurstを使ってみるとか、まだプレビュー段階ですがEntity Component SystemやUnity Physicsを使ってみるとかですかね（私はまだ使用経験がありませんが...）?
こういったDOTSのパラダイムは従来のUnityのスタイルとは異なる部分が多くとっつきにくいかもしれませんが、効果はかなり大きいようですから、どうしても高速化したいとお考えでしたら検討してみる価値はあるかと思います。

Comments

[hideyuki_aka]

Bongo様
回答ありがとうございます！
コピペで実装はできましたが、まだまだ知識が浅くどんなやり取りをしているか
かみ砕けていません。少しずつ読み解いていこうと思います！

[hideyuki_aka]

質問よろしいでしょうか。
現在は2値化した映像のうち、明るい部分を黒塗りでコライダーを生成していますが、
暗い部分を黒塗りにしてコライダーを充てるには、プログラムのどの部分を
？
なるべく自力でと思いc#スクリプトをいじりましたが変更できませんでした。
この問題はシェーダーに依存しているのでしょうか？

[Bongo]

はい、今回の実験の場合は画像処理を回答に提示しましたシェーダーに任せました。
コードの中程に

return fixed4(_Color.rgb, max(sign(y - _Threshold), 0.0));

という部分がありますが、これの

max(sign(y - _Threshold), 0.0)

がそのピクセルのアルファ...不透明度を表しております。

yは元の色をグレースケール化した値で、それから2値化しきい値である_Thresholdを引くことで、yが_Thresholdよりも大きければプラスの、小さければマイナスの値が得られるはずです。さらにそれをsign関数に通すとプラスの値は1.0に、マイナスの値は-1.0になります。そして最後にmax関数で0.0以下の値を0.0にしてしまえば、最終的なアルファは_Thresholdより明るければ1.0（不透明）、暗ければ0.0（透明）になる...というわけです。

ですので、逆に暗い部分のアルファを1.0にしたいのでしたら正負を逆転させて...

return fixed4(_Color.rgb, max(-sign(y - _Threshold), 0.0));

とすればどうでしょうか?

[hideyuki_aka]

できました！
ありがとうございました。

[hideyuki_aka]

丁寧な回答ありがとうございました！
非常に助かりました

Answer 2

本当ならばPolygonColliderの頂点を自由に移動させるのがベストだとは思いますが、質問のような形を自由に変えたり、飛び地ができる(Colliderが2つに分かれる)ような環境では
・ポリゴンの頂点がどの位置から移動してきたのかを知る必要がある。
・ポリゴンの頂点同士の間隔が離れすぎたときに補完。近すぎる時に削除しなければならない
・飛び地ができていないか確認する必要がある。

このように、製作が難しいと思うので、正方形のColliderの2次元配列を作り、黒い場所だけActiveにするのが単純明快かと思います。

ただ、colliderをpixel毎に作成していると数十万は下らない数のコライダーが必要になると思うので
・コライダーを大きくし、チェック頻度を下げる
・黒と白の境界面にのみコライダーを作成する
など工夫は必要になりますが。

一応あらすじだけ載せておきます。

Texture2D capture;//カメラのキャプチャ画像

BoxCollider2D[,] colliderMap = new BoxCollider2D[capture.Widge, capture.Height];

const byte THRESHOLD = 0x80;//閾値。RGBをHSLに変換する方法を知らなかったので(汗)

void Start()
{
    for(int i = 0; i < colliderMap.widge; i++) for(int j = 0; j < colliderMap.height; j++)
    {
        colliderMap[i, j] = AddComponent<BoxCollider2D>();
        colliderMap[i, j].size = new Vector2(0.1f, 0.1f);//任意
    }
}

void Update()
{
    for(int i = 0; i < capture.widge; i++) for(int j = 0; j < capture.height; j++)
    {
        Color pixel = capture.GetPixel(i, j);
        colloderMap[i, j].transform.SetActive(
            pixel.r < THRESHOLD || 
            pixel.g < THRESHOLD || 
            pixel.b < THRESHOLD);//もしRGBともに閾値より明るければ辺り判定を消す
    }
}

注意:コピペで実行しないでください。フリーズまたは動作が遅くなる可能性があります

Comments

[hideyuki_aka]

kureha413さま
回答ありがとうございます。
現在試しているのですが、このコードはどのオブジェクトにアタッチすれば正しく動くのでしょうか？

[hideyuki_aka]

webカメラを読み込むスクリプトに追記してなんとかビルドができました。
しかしおっしゃる通り重すぎるようです。。。
毎フレーム数万のコライダーを作成するというのはかなり負荷があるのですね

[KanazawaKureha]

解決策(例):
>>ウェブカメラの画像を白黒化→白か黒かをbool型の二次元配列に格納→入れ子構造のfor文(for(...;...;...)for(...;...;...){})を用いてbool配列を探査し、白と黒の境界を見つける→求めた境界の場所と対応する場所にBoxCollider2DをInstantiate()で作成する

これで軽量化が図れると思います。

[hideyuki_aka]

ありがとうございます。挑戦してみます