一、实现效果：
- 类似刮刮乐的擦除效果
- 支持多笔擦除（一次擦不干净）
二、所用技术点：
- RenderTexture
- Shader
三、实现原理：
一个相机单独渲染笔刷轨迹到RenderTexture上，在通过RenderTexture中的笔刷路径修改原图中对uv的像素点的alpha值实现透明或者半透明
1. Camera渲染到RenderTexture上：
a. 在场景中新建Camera并将ClearFlag设置为Don't Clear，目的是将渲染的物体连成轨迹。
b. 设置渲染层，只渲染笔刷（笔刷是一个球），笔刷根据鼠标位置移动即可。
c. 调整相机位置，使得要擦除的区域在整个视锥体内，也可以设置成正交投影。
d. 新建RenderTexture并挂载到相机上，相机设置为非激活状态（通过代码代码Camera.Render()）进行渲染控制。因为只记录路径，所以只创建一个R8的RenderTexture就可以
ps:需要关闭相机的垂直同步（MSAA），否则会将RenderTexture翻转渲染。
设置效果如下图：
2. 通过RenderTexture修改原图片透明度（shader实现）
a. 通过相机的矩阵将RenderTexture变换到像素坐标系
b. 修改对应uv的原像素点的alpha值
shader代码：
Shader "Learning/guacaipiao"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
// 相机渲染的RenderTexture
_BlitTex ("BlitTexture", 2D) = "white" {}
}
SubShader
{
Tags{"Queue" = "AlphaTest" "IgnoreProjector" = "True" "RenderType" = "TransparentCutout"}
Cull Off
Pass
{
Tags{"LightMode" = "ForwardBase"}
// 开启alpah混合
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
#include "UnityCG.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BlitTex;
struct a2v
{
float4 vertex : POSITION;
float4 texcoord : TEXCOORD0;
};
struct v2f
{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float3 worldPos : TEXCOORD1;
float2 uv : TEXCOORD2;
float4 paintPos : TEXCOORD3;
};
// 相机的投影矩阵
// C#中通过SetMatrix传入
// material.SetMatrix("paintCameraVP", camera.nonJitteredProjectionMatrix * camera.worldToCameraMatrix);
float4x4 paintCameraVP;
v2f vert(a2v v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
// 下面三行是通过投影矩阵将顶点变换到像素坐标系中([0, 1])
float4 paintPos = mul(paintCameraVP, mul(unity_ObjectToWorld, v.vertex));
paintPos /= paintPos.w; // 除以w分量，如果是相机正交投影可以省略
o.paintPos.xy = paintPos.xy * 0.5 + 0.5; // 将[-1, 1] 变换到 [0, 1]
return o;
}
fixed4 frag(v2f i) : SV_TARGET0
{
fixed4 texcolor = tex2D(_MainTex,i.uv);
// 划过的轨迹r值为1，所以1 - r作为原图片的alpha值输出
float mask = tex2D(_BlitTex, i.paintPos).r;
return fixed4(texcolor.rgb, 1 - mask);
}
ENDCG
}
}
}
C#代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class GuaCaiPiaoSub : MonoBehaviour {
public Camera rtCamera;
public Transform brush;
RenderTexture renderTexture;
public Material renderMaterial;
void Start () {
renderTexture = rtCamera.targetTexture;
renderMaterial.SetTexture("BlitTex", renderTexture);
renderMaterial.SetMatrix("paintCameraVP", rtCamera.nonJitteredProjectionMatrix * rtCamera.worldToCameraMatrix);
}
void OnMouseDrag(){
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
RaycastHit hitInfo;
if (Physics.Raycast(ray, out hitInfo)){
brush.position = hitInfo.point;
rtCamera.Render();
}
}
}
到这一步的实现效果：
很容易看出，滑动慢的时候可以连成一条线，但是快速滑动时候就变成了分开的点了。为避免这种情况出现就是把相邻两帧的点连接起来，再进行渲染。下面就要说要优化效果相关的了。
四、效果优化
1. 笔刷改用LineRenderer
记录上一帧鼠标的位置，跟当前帧连线，绘制好LineRenderer后在进行渲染，这样就算两帧的点间隔大，也可以绘制两点的连线。另外可以通过调整LineRenderder宽度来调整笔刷大小。效果如下：
只需要改C#代码，代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class GuaCaiPiaoSub : MonoBehaviour {
public Camera rtCamera;
public LineRenderer lineBrush;
RenderTexture renderTexture;
public Material renderMaterial;
void Start () {
renderTexture = rtCamera.targetTexture;
renderMaterial.SetTexture("BlitTex", renderTexture);
renderMaterial.SetMatrix("paintCameraVP", rtCamera.nonJitteredProjectionMatrix * rtCamera.worldToCameraMatrix);
}
Vector3 prePos = Vector3.one * 10000;
Vector3[] linePosArr = new Vector3[2];
void OnMouseDrag(){
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
RaycastHit hitInfo;
if (Physics.Raycast(ray, out hitInfo)){
if (prePos == Vector3.one * 10000) {
prePos = hitInfo.point;
}
lineBrush.positionCount = 2;
linePosArr[0] = prePos;
linePosArr[1] = hitInfo.point;
lineBrush.SetPositions(linePosArr);
lineBrush.startWidth = 1f;
lineBrush.endWidth = 1f;
rtCamera.Render();
prePos = hitInfo.point;
}
}
void OnMouseUp(){
prePos = Vector3.one * 10000;
}
}
其中void OnMouseUp(){ prePos = Vector3.one * 10000; }是为了防止下次绘画时，跟上一帧点关联。
至此，基本的效果已经完成，大体已经可以满足刮彩票效果的需求。
但是需求是不断改变的，如果想要擦玻璃的效果，同一个地方擦多次才能擦得干净，这就需要下面的做法了。例如文章开头的效果。
2. 多次擦除
多次擦除首先想到叠加，但是渲染的r值只有1和0，这样如何做到叠加呢，这时候就需要另外两张RenderTexture来做混合：CurrentRT和PrevirousRT分别是当前帧渲染的RT和上一帧渲染的RT，求出茶之后，将差值和要渲染的RenderTexture进行混合，然后作为最终应用到物体上。
实现混合需要使用一个接口：Graphics.Blit();，具体使用方式可以看unity的api
混合的shader代码：
Shader "Learning/blit"
{
Properties
{
_BrushStrength ("BrushStrength", int) = 1
}
SubShader
{
Cull Off ZWrite Off ZTest Always
// 设置混合模式
Blend One One
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
sampler2D _CurrentRT; // 当前帧rt
sampler2D _PrevirousRT; // 上一帧rt
int _BrushStrength; // 笔刷强度 （需要几次擦干净）
fixed4 frag (v2f i) : SV_Target
{
// 计算两帧的差值，输出的的值跟物体的rt进行混合
fixed4 cur = tex2D(_CurrentRT, i.uv);
fixed4 pre = tex2D(_PrevirousRT, i.uv);
float r = step(0.5, cur.r - pre.r); // cg的内置setp函数 大于0.5为1，小于0.5为0
return fixed4(r / _BrushStrength, 0, 0, 1);
}
ENDCG
}
}
}
C#代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class GuaCaiPiao : MonoBehaviour {
public Camera rtCamera;
RenderTexture renderTexture;
public RenderTexture currentRT;
public RenderTexture previrousRT;
public Material blitMaterial;
public Material renderMaterial;
public LineRenderer lineBrush;
[Range(1.0f, 5.0f)]
public float brushWidth = 1.0f;
void Start () {
renderTexture = rtCamera.targetTexture;
renderMaterial.SetTexture("BlitTex", renderTexture);
renderMaterial.SetMatrix("paintCameraVP", rtCamera.nonJitteredProjectionMatrix * rtCamera.worldToCameraMatrix);
blitMaterial.SetTexture("_CurrentRT", currentRT);
blitMaterial.SetTexture("_PrevirousRT", previrousRT);
}
void OnMouseDown(){
// 每次按钮要清空两张rt
rtCamera.clearFlags = CameraClearFlags.Color;
rtCamera.backgroundColor = Color.black;
rtCamera.targetTexture = previrousRT;
rtCamera.Render();
rtCamera.targetTexture = currentRT;
rtCamera.Render();
rtCamera.clearFlags = CameraClearFlags.Nothing;
}
Vector3 prePos = Vector3.one * 10000;
Vector3[] linePosArr = new Vector3[2];
void OnMouseDrag(){
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
RaycastHit hitInfo;
if (Physics.Raycast(ray, out hitInfo)){
if (prePos == Vector3.one * 10000) {
prePos = hitInfo.point;
}
lineBrush.positionCount = 2;
linePosArr[0] = prePos;
linePosArr[1] = hitInfo.point;
lineBrush.SetPositions(linePosArr);
lineBrush.startWidth = brushWidth;
lineBrush.endWidth = brushWidth;
rtCamera.Render();
// 将当前帧和上一帧差值混合到 renderTexture，具体混合的实现看shader
// 混合的计算方式为 blitMaterial 上的 shader 中的计算
Graphics.Blit(currentRT, renderTexture, blitMaterial);
// 上一帧的rt替换为当前帧渲染的rt，为下一帧计算做准备
Graphics.Blit(currentRT, previrousRT);
prePos = hitInfo.point;
}
}
void OnMouseUp(){
prePos = Vector3.one * 10000;
}
void OnGUI(){
if (GUI.Button(new Rect(0, 0, 80, 30), "RESET")){
lineBrush.positionCount = 2;
linePosArr[0] = Vector3.one * 10000;
linePosArr[1] = Vector3.one * 10000;
lineBrush.SetPositions(linePosArr);
rtCamera.clearFlags = CameraClearFlags.Color;
rtCamera.backgroundColor = Color.black;
rtCamera.targetTexture = renderTexture;
rtCamera.Render();
rtCamera.targetTexture = previrousRT;
rtCamera.Render();
rtCamera.targetTexture = currentRT;
rtCamera.Render();
rtCamera.clearFlags = CameraClearFlags.Nothing;
}
}
}
实现效果及混合的演示：
左边黑色是为了观察混合后的RenderTexture的实时演示，右边为具体最终效果。具体需要擦除几次变干净调整blitMaterial的BrushStrength属性。
以上为本片博客整体内容，主要应用为 3D 物体，UI可以类比进行实现。
具体项目可以看我的 github工程
喜欢shader的朋友可以看我的GitHub中ShaderProject
4322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
