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

Unity 实用教程之实现AR扫描全屏幕效果。本节介绍，在Unity开发中，实现简单AR扫描全屏幕效果，具体如下

工具/原料

Unity

方法/步骤

1
打开Unity，新建一个空工程，具体如下图
2
在场景中添加一个 RawImage，改名为 Image （多余操作），具体如下图
3
在工程中，新建一个 Shader，命名为 ScanEffect，并打开编辑，具体如下图
4
Shader脚本具体代码如下图
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，具体如下图
7
在工程中，新建一个脚本 ScanScreenEffect，双击脚本或者右键 Open C# Project 打开脚本，具体如下图
8
脚本的具体代码如下图
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材质赋值给脚本，具体如下图
11
其中 Canvas 的 Render Mode 为 Screen - Space Camera，Render Camera 为 Main Camera，具体如下图
12
打包编译，打开应用，结果具体如下图
13
到此，《Unity 实用教程之实现类AR扫描全屏幕效果》讲解结束，谢谢
END