获取rawimage的像素点函数_[Unity3D]用RawImage给单个3D物体描边

对于我们这个项目来说，这个描边精细度是可以接受的。性能方面，放在低端的手机上，虽然会有点的掉帧，从锁定的30帧变成了24-30帧不断切换的样子。不像以前那样，用了后处理描边，妥妥地从30帧掉到了12-14帧。

目前在做的一个项目，有一个3D物体描边的需求，以前都是使用屏幕后处理的方式给3D物体描边的。近期在做性能优化，发现屏幕后处理实在是太消耗性能了，在移动手机上，即使是中偏高端的手机都会受影响，更不用说是低端的手机了。所以自然地就要搜索各种描边的方式之类的，发现一篇对描边讲得非常全面的文章。

参考文章：Unity Shader实现描边效果

这个文章写得真的非常全面，各种描边的方式，优势和劣势都讲得很详细。不过给我印象深刻的还是后处理描边的方式，效果确实好。

我们项目之前的后处理方式，是用一个额外的相机单独渲染某个物体，得到一张RT，然后将这张RT在OnRenderImage的函数里通过一个材质球跟源图进行合并。Graphics.Blit(source, destination, _Material);

然后我就突发奇想，用后处理做描边，不就是在原图上叠加了一张新的图么。这个格式我熟啊，作为资深的UI拼图仔，马上就想到了Canvas+RawImage+Camera+RT的方式，都是叠加图片，这样子岂不是更好？有点小激动啊，用这种方式就可以避免后处理的消耗了啊。

这里提一下，使用额外的Camera+RT+CullingMask可以单独渲染某个3D物体，然后给Camera设置一个渲染的Shader(这个shader很简单，像素着色器直接return fixed4(1,1,1,1)就行)，将物体的像素全都改成白色，非物体区域可以全透明。这里有个要注意的点，额外的相机要作为在主相机的子物体，并且大部分属性应该复用主相机的属性，保证两个相机渲染同一个物体的是一样的形状。

//这些相机的设定，大部分是沿用以前用后处理做描边的时候的设置。

_tempRT = RenderTexture.GetTemporary(Screen.width, Screen.height, 24);

_tempRT.name = "用于描边选中对象";

//把这个额外的相机参数设置成主相机一样//

if (!_init)

{

rtCamera.CopyFrom(_camera);

//清除所有的颜色

rtCamera.clearFlags = CameraClearFlags.Color;

//透明的背景

rtCamera.backgroundColor = new Color(0, 0, 0, 0);

rtCamera.cullingMask = 1 << ((int)ELayer.ActiveBuilding);

rtCamera.depth = 1;

rtCamera.SetReplacementShader(occupiedShader, "");

_init = true;

}

rtCamera.gameObject.SetActive(true);

rtCamera.enabled = true;

rtCamera.targetTexture = _tempRT;

//

RawImage.texture = _tempRT;

RawImage.gameObject.SetActive(true);

渲染出来的图片

OK，大致的想法有了。那么现在的问题就从3D物体的描边需求转换成了2D图片的描边需求。这个搜索了下，找到合适的文章。

参考文章：UnityShader 2D描边效果

因为我要用于UGUI，所以结合文章的第一个Shader和UI-Default的Shader，复制粘贴各种，然后修改一下颜色返回。

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "Custom/UIEdge"

{

Properties

{

[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}

_Color ("Tint", Color) = (1,1,1,1)

_OffsetUV ("OffsetUV", Range(0, 1)) = 0.1

_EdgeColor ("EdgeColor", Color) = (1, 0, 0, 1)

_AlphaTreshold ("Treshold", Range(0, 1)) = 0.5

_StencilComp ("Stencil Comparison", Float) = 8

_Stencil ("Stencil ID", Float) = 0

_StencilOp ("Stencil Operation", Float) = 0

_StencilWriteMask ("Stencil Write Mask", Float) = 255

_StencilReadMask ("Stencil Read Mask", Float) = 255

_ColorMask ("Color Mask", Float) = 15

[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0

}

SubShader

{

Tags

{

"Queue"="Transparent"

"IgnoreProjector"="True"

"RenderType"="Transparent"

"PreviewType"="Plane"

"CanUseSpriteAtlas"="True"

}

Stencil

{

Ref [_Stencil]

Comp [_StencilComp]

Pass [_StencilOp]

ReadMask [_StencilReadMask]

WriteMask [_StencilWriteMask]

}

Cull Off

Lighting Off

ZWrite Off

ZTest [unity_GUIZTestMode]

Blend SrcAlpha OneMinusSrcAlpha

ColorMask [_ColorMask]

Pass

{

Name "Default"

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#pragma target 2.0

#include "UnityCG.cginc"

#include "UnityUI.cginc"

#pragma multi_compile __ UNITY_UI_ALPHACLIP

struct appdata_t

{

float4 vertex : POSITION;

float4 color : COLOR;

float2 texcoord : TEXCOORD0;

UNITY_VERTEX_INPUT_INSTANCE_ID

};

struct v2f

{

float4 vertex : SV_POSITION;

fixed4 color : COLOR;

fixed2 uv[5] : TEXCOORD0;

UNITY_VERTEX_OUTPUT_STEREO

};

sampler2D _MainTex;

fixed4 _Color;

fixed4 _TextureSampleAdd;

float4 _ClipRect;

float4 _MainTex_ST;

fixed _OffsetUV;

fixed4 _EdgeColor;

fixed _AlphaTreshold;

v2f vert(appdata_t v)

{

v2f OUT;

UNITY_SETUP_INSTANCE_ID(v);

UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

OUT.vertex = UnityObjectToClipPos(v.vertex);

//OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);

OUT.color = v.color * _Color;

OUT.uv[0] = v.texcoord;

OUT.uv[1] = v.texcoord + fixed2(0, _OffsetUV); //up

OUT.uv[2] = v.texcoord + fixed2(-_OffsetUV, 0); //left

OUT.uv[3] = v.texcoord + fixed2(0, -_OffsetUV); //bottom

OUT.uv[4] = v.texcoord + fixed2(_OffsetUV, 0); //right

return OUT;

}

fixed4 frag(v2f IN) : SV_Target

{

half4 color = (tex2D(_MainTex, IN.uv[0]) + _TextureSampleAdd) * IN.color;

#ifdef UNITY_UI_ALPHACLIP

clip (color.a - 0.001);

#endif

if(color.a == 0){

return color;

}

fixed4 original = color;

fixed alpha = original.a;

fixed p1 = tex2D(_MainTex, IN.uv[1]).a;

fixed p2 = tex2D(_MainTex, IN.uv[2]).a;

fixed p3 = tex2D(_MainTex, IN.uv[3]).a;

fixed p4 = tex2D(_MainTex, IN.uv[4]).a;

alpha = p1 + p2 + p3 + p4 + alpha;

alpha /= 5;

if (alpha < _AlphaTreshold) {

original.rgb = _EdgeColor.rgb;

}else{

original.a = 0;

}

return original;

}

ENDCG

}

}

}

这个Shader的主要作用，就是把渲染出来的RT的白色接近边缘的地方保留下来，其余的像素全部设置为透明。这里其实应用到了Canvas的一个特性，就是屏幕尺寸自适应性，配合RectTransform可以让RawImage渲染出来的描边图片完美地贴合到物体上面。

Canvas使用的是ScreenSpace的方式，并且单独给这个Canvas设置了一个独立的相机渲染， 这里要注意的问题可能就是这个相机的Depth，给一个合适的值，要在场景相机的上方，游戏UI相机的下方。

image.png

描边效果

对于我们这个项目来说，这个描边精细度是可以接受的。性能方面，放在低端的手机上，虽然会有点的掉帧，从稳定的30帧变成了24-30帧不断切换的样子。不像以前那样，用了后处理描边，妥妥的掉到了12-14帧。

如果对描边有高精细度要求的，可以优化UI的描边shader去改良，我们项目因为对描边没有很高要求，所以shader的计算量越少越好。我这里主要是想提供一种思路。

害，这里就想起图形学的真理，看起来像是真的那它的做法就是对的。很多时候不管做法合不合“规矩”，只要能达到同样或者类似的效果，就是好的做法。

其实呢，这里有个小插曲。Unity的屏幕后处理，就是在继承MonoBehaviour然后重写OnRenderImage的函数，我原先是以为仅仅是重写这个函数，不会消耗太多的性能。后来经过测试发现，就算在OnRenderImage里什么都不做，只是默认的Graphics.Blit(source, destination)，都有很大的性能消耗。我查了下，有的人说是OnRenderImage是从GPU里反向获取像素信息，然后重新渲染，这一个流程跟OnRenderImage函数内部的实现毫无关联。于是我就确定了这个项目优化绝对不能使用后处理做描边的想法。