「Unity/VideoPlayer/クロマキー」の版間の差分

2022年3月18日 (金) 09:13時点における最新版

クロマキーとは

背景を同じ色にして、そこを透過させる技術

サンプル

1. 背景緑のmp4動画を、Assetsに追加
2. 動画をはめる用のPlaneを、Hierarchyから3DObject/Planeを選択して、作成。
3. PlaneにVideoPlayerをAddComponentする
4. VideoClipに、背景緑のmp4動画を、ドラッグ
5. Assetsに、Create/Shader/StandardSarfaceShaderを追加して、名前をChromaKeyShaderに変更。
6. 以下のChromaKeyShader.csをコピペ
7. Assetsに、Create/RenderTextureを追加して、名前をChromaKeyRenderTextureに変更。
8. Assetsに、Create/Materialを追加して、名前をChromaKeyMaterialに変更
9. そのMaterialのInspectorを開いて、ShaderをChromaKeyShaderに変更する。
10. そのMaterialのInspectorを開いて、TexutreをChromaKeyRenderTextureにする。
11. PlaneのMeshRendererのMaterialsを、Default-MaterialからChromaKeyMaterialに変更
12. ChromaKeyMaterialのBorderSettingとかKeyColorとかNearの値を変更して、うまいこと透過させる。

ChromaKeyShader.cs

Shader "Unlit/ChromaKeyUnlit"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Border("BorderSetting",Range(0,1000)) = 100
        _KeyColor("Key Color", Color) = (0,1,0)
        _Near("Near", Range(0, 2)) = 0.01
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Cull off
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #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;
            half _Border;
            fixed4 _KeyColor;
            half _Near;
            fixed2 bound(fixed2 st, float i)
            {
                fixed2 p = floor(st) + i;
                return p;
            }
                        
            v2f vert (appdata v)
            {
                v2f o;
                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
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // Chroma Key
                fixed4 c1 = tex2D (_MainTex, bound(i.uv * _Border, 1)/_Border);
                clip(distance(_KeyColor, c1) - _Near);
                fixed4 c2 = tex2D (_MainTex, bound(i.uv * _Border, 0)/_Border);
                clip(distance(_KeyColor, c2) - _Near);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

参考：https://styly.cc/ja/tips/tomo-chromakey/

Shaderをcsから操作

MeshRenderer mesh = GetComponent<MeshRenderer>();
mesh.material.SetColor("_KeyColor", new Color(0.2616f, 1f, 0.06132078f, 1f));
mesh.material.SetFloat("_Border", 500f);
mesh.material.SetFloat("_Near", 0.5f);
// mesh.material.SetColor("_KeyColor", new Color(0.5f, 1f, 0f, 1f));
// mesh.material.SetFloat("_Border", 1000f);
// mesh.material.SetFloat("_Near", 0.62f);