AR开发-互动大屏的实现方式

经常看到有这样的画面，一个美人在翩翩起舞，而我们站在旁边就可以与她进行合影，拍照。但是怎么实现？这里需要很多配合。别的不说，程序这块需要编写Shader（这一步估计把80%的开发工程师剔除了），当然本大大不在此列。
如下图

Iphone7拍的都这么差，可能环境光影响

代码：

Shader "Custom/ARVideo"  
{  
    Properties  
    {  
        _Color ("Color", Color) = (1,1,1,1)  
        _MainTex ("Albedo (RGB)", 2D) = "white" {}  
        _AlphaVideo ("Alpha Video(R)", 2D) = "white" {}  
        _Glossiness ("Smoothness", Range(0,1)) = 0.5  
        _Metallic ("Metallic", Range(0,1)) = 0.0  
    }  
    SubShader  
    {  
    Tags { "Queue"="Transparent" "RenderType"="Transparent" }  
        LOD 200  
         
        CGPROGRAM  
        // Physically based Standard lighting model, and enable shadows on all light types  
        #pragma surface surf Standard alpha  
   
        // Use shader model 3.0 target, to get nicer looking lighting  
        #pragma target 3.0  
   
        sampler2D _MainTex;  
        sampler2D _AlphaVideo;  
   
        struct Input {  
            float2 uv_MainTex;  
            float2 uv_AlphaVideo;  
        };  
   
        half _Glossiness;  
        half _Metallic;  
        fixed4 _Color;  
   
        void surf (Input IN, inout SurfaceOutputStandard o) {  
            // Albedo comes from a texture tinted by color  
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;  
            fixed4 _alpha = tex2D (_AlphaVideo, IN.uv_AlphaVideo);  
            o.Albedo = c.rgb;  
            // Metallic and smoothness come from slider variables  
            o.Metallic = _Metallic;  
            o.Smoothness = _Glossiness;  
            o.Alpha = _alpha.r;  
             
        }  
        ENDCG  
    }  
    FallBack "Diffuse"  
}  

另一种Shader

Shader "Custom/ARMovieShader" {
    Properties {    
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
    }
        SubShader{
            Tags {"Queue" = "Transparent" "RenderType" = "Transparent"}
            LOD 200

        CGPROGRAM
 
        #pragma surface surf Nolighting alpha

        #pragma target 3.0

        sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };

        fixed4 LightingNoLighting(SurfaceOutput s, fixed3 lightDir, fixed atten)
        {
            fixed c;
            c.rgb = s.Albedo;
            c.a = s.Alpha;
            return c;
        }

        void surf (Input IN, inout SurfaceOutput o) {
            o.Emission = tex2D (_MainTex, IN.uv_MainTex).rgb;
            if (IN.uv_MainTex.x >= 0.5)
            {
                o.Alpha = 0;
            }
            else
            {
                o.Alpha = tex2D(_MainTex, float2(IN.uv_MainTex.x + 0.5, IN.uv_MainTex.y)).rgb;
            }
        }
        ENDCG
    }
    FallBack "Diffuse"
}

透明视频的制作

• 1.下载Adobe After Effects软件
  • 操作步骤
    • 01-找到文件素材，打开
    • 02-新建合成（Ctrl+N），点击OK按钮即可
    • 03-将素材拖进合成里面，调整（S键可以调整），复制一份并命名保存
    • 04-在合成窗口中右键创建白色的固态层，调整位置在素材的下面，选择Alpha模式为Alpha Matte的视频文件
    • 05-新建合成，最好将视频宽度放大为原视频的两倍
    • 06-将之前的合成视频（03）放入（05），设置成一般的模式即可
    • 07-将之前的（04）合成放入新和成，作为另一半
    • 08选择合成（Ctrl+M）输出MP4