Unity 实用教程 之 实现类AR扫描全屏幕效果

2025-09-25 18:50:00

1、打开Unity,新建一个空工程,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

2、在场景中添加一个 RawImage,改名为 Image (多余操作),具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

Unity 实用教程 之 实现类AR扫描全屏幕效果

3、在工程中,新建一个 Shader,命名为 ScanEffect,并打开编辑,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

4、Shader脚本具体代码如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

Unity 实用教程 之 实现类AR扫描全屏幕效果

Unity 实用教程 之 实现类AR扫描全屏幕效果

Unity 实用教程 之 实现类AR扫描全屏幕效果

5、Shader脚本具体内容如下:

Shader "Custom/ScanEffect" {

properties{

   _MainTex("MainTex",2D)=""{}

   edgeColor("edge",Color)=(1,0,0,1)

   Range1("R",Range(0,5))=1

}

Subshader{

  pass{

      CGPROGRAM

      #pragma vertex vert

      #pragma fragment frag

      struct a2v{

         float4  vertex:POSITION;

         float4  texcoord:TEXCOORD;

      };

      struct v2f{

         float4 pos:SV_POSITION;

         half2 uv[9]:TEXCOORD0;

      };

      sampler2D _MainTex;

      float4 _MainTex_ST;

      float4 _MainTex_TexelSize;

      fixed4 edgeColor;

      float Range1;

      v2f vert(a2v v){

         v2f o;

         o.pos=UnityObjectToClipPos(v.vertex);

         o.uv[0]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(-1,-1);

         o.uv[1]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(0,-1);

         o.uv[2]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(1,-1);

         o.uv[3]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(-1,0);

         o.uv[4]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(0,0);

         o.uv[5]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(1,0);

         o.uv[6]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(-1,-1);

         o.uv[7]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(0,-1);

         o.uv[8]=v.texcoord.xy+_MainTex_TexelSize.xy*half2(1,-1);

         return o;

      }

       fixed luminance(fixed4 c){

         return 0.2125*c.r+0.7154*c.g+0.0721*c.b;

      }

      half Sobel(v2f x){

         const half Gx[9]={

              -1,-2,-1,

               0,0,0,

               1,2,1

         };

         const half Gy[9]={

              -1,0,1,

              -2,0,2,

              -1,0,1

         };

         half edgeX=0;

         half edgeY=0;

         half t;

         for(int i=0;i<9;i++)

         {

            t=tex2D(_MainTex,x.uv[i]);

            edgeX+=t*Gx[i];

            edgeY+=t*Gy[i];

         }

         half edge=abs(edgeX)+abs(edgeY);

         return edge; 

      }

      fixed4 frag(v2f i):SV_Target{

         fixed4 col=fixed4(1,0,0,1);

         half2 v1=i.uv[4];

          col=tex2D(_MainTex,v1);

          half d=Sobel(i);

          if(d>Range1)

          {

            if(abs(v1.y-frac(_Time.y))<0.05)

            {

               col=lerp(col,edgeColor,d);

            }

          }

          return col;

      }

      ENDCG

  }

}

}

6、编译正确,回到Unity界面,新建一个材质 Material,命名为 ScanScreen,shader选择之前刚建的Shader,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

7、在工程中,新建一个脚本 ScanScreenEffect,双击脚本或者右键 Open C# Project 打开脚本,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

8、脚本的具体代码如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

Unity 实用教程 之 实现类AR扫描全屏幕效果

9、脚本的具体内容如下:

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class ScanScreenEffect : MonoBehaviour {

    [SerializeField] private RawImage webRawImage;

    public Material ma;

    void Start()

    {

        StartCoroutine(startOpenCamera());

    }

    IEnumerator startOpenCamera()

    {

        yield return Application.RequestUserAuthorization(UserAuthorization.WebCam);

        if (Application.HasUserAuthorization(UserAuthorization.WebCam))

        {

            WebCamTexture wbt = new WebCamTexture();

            WebCamDevice[] devices = WebCamTexture.devices;

            string _deviceName = "";

            if (devices.Length >= 1)

            {

                _deviceName = devices[0].name;

            }

            wbt.name = _deviceName;

            webRawImage.texture = wbt;

            wbt.Play();

        }

    }

    void OnRenderImage(RenderTexture src, RenderTexture dest)

    {

        if (ma != null)

        {

            Graphics.Blit(src, dest, ma);

        }

        else

        {

            Graphics.Blit(src, dest);

        }

    }

}

10、脚本编译正确,回到Unity界面,挂载脚本到 Main Camera,把 RawImage 和 ScanScreen材质赋值给脚本,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

11、其中 Canvas 的 Render Mode 为 Screen - Space Camera,Render Camera 为 Main Camera,具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

12、打包编译,打开应用,结果具体如下图

Unity 实用教程 之 实现类AR扫描全屏幕效果

13、到此,《Unity 实用教程 之 实现类AR扫描全屏幕效果》讲解结束,谢谢

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢