前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AR开发-互动大屏的实现方式

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

作者头像
孙寅
发布2020-06-02 16:55:51
5670
发布2020-06-02 16:55:51
举报
文章被收录于专栏:宜达数字宜达数字

经常看到有这样的画面,一个美人在翩翩起舞,而我们站在旁边就可以与她进行合影,拍照。但是怎么实现?这里需要很多配合。别的不说,程序这块需要编写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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 透明视频的制作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档