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

2020-06-02 16:55:51 浏览数 (1)

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

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

代码:

代码语言:javascript复制
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

代码语言:javascript复制
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

0 人点赞