Unity Shader实现水墨效果

Unity Shader学习:水墨效果

偶然在网上看到9级铁甲蛹大神的水墨风格后处理觉得挺有意思,参照着实现一下,还是涉及到之前油画效果的算法,叫什么滤波暂时不清楚,应该用来处理手绘效果挺多的。

水墨风格基本原理:高斯模糊原始图像,用深度算出边缘进行描边,最后用画笔效果的滤波完成最终图像。

有需要可以用Post Proces改变颜色范围,更接近水墨的颜色。

C#部分:

//屏幕后处理基类
using UnityEngine;
using System.Collections;

//非运行时也触发效果
[ExecuteInEditMode]
//屏幕后处理特效一般都需要绑定在摄像机上
[RequireComponent(typeof(Camera))]
//提供一个后处理的基类,主要功能在于直接通过Inspector面板拖入shader,生成shader对应的材质
public class PostEffectBase : MonoBehaviour
{

 //Inspector面板上直接拖入
 public Shader shader = null;
 private Material _material = null;
 public Material _Material
 {
  get
  {
   if (_material == null)
    _material = GenerateMaterial(shader);
   return _material;
  }
 }

 //根据shader创建用于屏幕特效的材质
 protected Material GenerateMaterial(Shader shader)
 {
  if (shader == null)
   return null;
  //需要判断shader是否支持
  if (shader.isSupported == false)
   return null;
  Material material = new Material(shader);
  material.hideFlags = HideFlags.DontSave;
  if (material)
   return material;
  return null;
 }

}
//挂在摄像机上
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
public class ChineseInkPostEffect : PostEffectBase {
 /// <summary>
 /// 降分辨率未操作
 /// </summary>
 [Range(0,5)]
 public int downSample = 1;
 /// <summary>
 /// 高斯模糊采样缩放系数
 /// </summary>
 [Range(0,5)]
 public int samplerScale = 1;
 /// <summary>
 /// 高斯模糊迭代次数
 /// </summary>
 [Range(0,10)]
 public int count = 1;
 /// <summary>
 /// 边缘宽度
 /// </summary>
 [Range(0.0f,10.0f)]
 public float edgeWidth = 3.0f;
 /// <summary>
 /// 边缘最小宽度
 /// </summary>
 [Range(0.0f,1.0f)]
 public float sensitive = 0.35f;
 /// <summary>
 /// 画笔滤波系数
 /// </summary>
 [Range(0,10)]
 public int paintFactor = 4;
 /// <summary>
 /// 噪声图
 /// </summary>
 public Texture noiseTexture;
 private Camera cam;
 private void Start()
 {
  cam = GetComponent<Camera>();
  //开启深度法线图
  cam.depthTextureMode = DepthTextureMode.DepthNormals;
 }
 private void OnRenderImage(RenderTexture source, RenderTexture destination)
 {
  if (_Material)
  {
   RenderTexture temp1 = RenderTexture.GetTemporary(source.width >> downSample, source.height >> downSample, 0, source.format);
   RenderTexture temp2 = RenderTexture.GetTemporary(source.width >> downSample, source.height >> downSample, 0, source.format);

   Graphics.Blit(source, temp1);
   for (int i = 0; i < count; i++)
   {
    //高斯模糊横向纵向两次(pass0)
    _Material.SetVector("_offsets", new Vector4(0, samplerScale, 0, 0));
    Graphics.Blit(temp1, temp2, _Material, 0);
    _Material.SetVector("_offsets", new Vector4(samplerScale, 0, 0, 0));
    Graphics.Blit(temp2, temp1, _Material, 0);
   }

   //描边(pass1)
   _Material.SetTexture("_BlurTex", temp1);
   _Material.SetTexture("_NoiseTex", noiseTexture);
   _Material.SetFloat("_EdgeWidth", edgeWidth);
   _Material.SetFloat("_Sensitive", sensitive);
   Graphics.Blit(temp1, temp2,_Material,1);

   //画笔滤波(pass2)
   _Material.SetTexture("_PaintTex", temp2);
   _Material.SetInt("_PaintFactor", paintFactor);
   Graphics.Blit(temp2, destination, _Material, 2);

   RenderTexture.ReleaseTemporary(temp1);
   RenderTexture.ReleaseTemporary(temp2);
  }
 }
}

shader部分:

Shader "Unlit/ChineseInk"
{
 Properties
 {
 //原始画面
 _MainTex ("Texture", 2D) = "white" {}
  //高斯模糊画面
  _BlurTex("Blur",2D) = "white"{}
 //水墨画面
 _PaintTex("PaintTex",2D)="white"{}
 }
 CGINCLUDE
 #include "UnityCG.cginc"
 //深度法线图
 sampler2D _CameraDepthNormalsTexture;
 sampler2D _MainTex;
 sampler2D _BlurTex;
 sampler2D _PaintTex;
 sampler2D _NoiseTex;
 float4 _BlurTex_TexelSize;
 float4 _MainTex_ST;
 float4 _MainTex_TexelSize;
 float4 _PaintTex_TexelSize;
 float4 _offsets;
 float _EdgeWidth;
 float _Sensitive;
 int _PaintFactor;

 //取灰度
 float luminance(fixed3 color) {
 return 0.2125*color.r + 0.7154*color.g + 0.0721*color.b;
 }
 //高斯模糊部分
 struct v2f_blur
 {
 float2 uv : TEXCOORD0;
 float4 vertex : SV_POSITION;
 float4 uv01:TEXCOORD1;
 float4 uv23:TEXCOORD2;
 float4 uv45:TEXCOORD3;
 };

 v2f_blur vert_blur(appdata_img v)
 {
 v2f_blur o;
 o.vertex = UnityObjectToClipPos(v.vertex);
 o.uv = v.texcoord.xy;
 _offsets *= _MainTex_TexelSize.xyxy;
 o.uv01 = v.texcoord.xyxy + _offsets.xyxy*float4(1, 1, -1, -1);
 o.uv23 = v.texcoord.xyxy + _offsets.xyxy*float4(1, 1, -1, -1)*2.0;
 o.uv45 = v.texcoord.xyxy + _offsets.xyxy*float4(1, 1, -1, -1)*3.0;
 return o;
 }

 float4 frag_blur(v2f_blur i) : SV_Target
 {
 float4 color = float4(0,0,0,0);
 color += 0.40*tex2D(_MainTex, i.uv);
 color += 0.15*tex2D(_MainTex, i.uv01.xy);
 color += 0.15*tex2D(_MainTex, i.uv01.zw);
 color += 0.10*tex2D(_MainTex, i.uv23.xy);
 color += 0.10*tex2D(_MainTex, i.uv23.zw);
 color += 0.05*tex2D(_MainTex, i.uv45.xy);
 color += 0.05*tex2D(_MainTex, i.uv45.zw);
 return color;
 }
 //边缘检测部分
 struct v2f_edge{
 float2 uv:TEXCOORD0;
 float4 vertex:SV_POSITION;
 };

 v2f_edge vert_edge(appdata_img v){
 v2f_edge o;
 o.vertex = UnityObjectToClipPos(v.vertex);
 o.uv = v.texcoord;
 return o;
 }

 float4 frag_edge(v2f_edge i):SV_Target{
 //噪声
 float n = tex2D(_NoiseTex,i.uv).r;
 float3 col0 = tex2D(_CameraDepthNormalsTexture, i.uv + _EdgeWidth * _BlurTex_TexelSize.xy*float2(1,1)).xyz;
 float3 col1 = tex2D(_CameraDepthNormalsTexture, i.uv + _EdgeWidth * _BlurTex_TexelSize.xy*float2(1,-1)).xyz;
 float3 col2 = tex2D(_CameraDepthNormalsTexture, i.uv + _EdgeWidth * _BlurTex_TexelSize.xy*float2(-1, 1)).xyz;
 float3 col3 = tex2D(_CameraDepthNormalsTexture, i.uv + _EdgeWidth * _BlurTex_TexelSize.xy*float2(-1,-1)).xyz;
 float edge = luminance(pow(col0 - col3, 2) + pow(col1 - col2, 2));
 edge = pow(edge, 0.2);
 if (edge<_Sensitive)
 {
 edge = 0;
 }
 else
 {
 edge = n;
 }
 float3 color = tex2D(_BlurTex, i.uv);
 float3 finalColor = edge * float3(0, 0, 0) + (1 - edge)*color*(0.95+0.1*n);
 return float4(finalColor, 1.0);
 }
 //画笔滤波部分
 struct v2f_paint {
 float2 uv:TEXCOORD0;
 float4 vertex:SV_POSITION;
 };

 v2f_paint vert_paint(appdata_img v) {
 v2f_paint o;
 o.uv = v.texcoord;
 o.vertex = UnityObjectToClipPos(v.vertex);
 return o;
 }

 float4 frag_paint(v2f_paint i):SV_Target{
 float3 m0 = 0.0;
 float3 m1 = 0.0;
 float3 s0 = 0.0;
 float3 s1 = 0.0;
 float3 c = 0.0;
 int radius = _PaintFactor;
 int r = (radius + 1)*(radius + 1);
 for (int j = -radius; j <= 0; ++j)
 {
 for (int k = -radius; k <= 0; ++k)
 {
 c = tex2D(_PaintTex, i.uv + _PaintTex_TexelSize.xy * float2(k, j)).xyz;
 m0 += c;
 s0 += c * c;
 }
 }
  for (int j = 0; j <= radius; ++j)
  {
  for (int k = 0; k <= radius; ++k)
  {
  c = tex2D(_PaintTex, i.uv + _PaintTex_TexelSize.xy * float2(k, j)).xyz;
  m1 += c;
  s1 += c * c;
  }
  }
  float4 finalFragColor = 0.;
  float min_sigma2 = 1e+2;
  m0 /= r;
  s0 = abs(s0 / r - m0 * m0);
  float sigma2 = s0.r + s0.g + s0.b;
  if (sigma2 < min_sigma2)
  {
  min_sigma2 = sigma2;
  finalFragColor = float4(m0, 1.0);
  }
  m1 /= r;
  s1 = abs(s1 / r - m1 * m1);
  sigma2 = s1.r + s1.g + s1.b;
  if (sigma2 < min_sigma2)
  {
  min_sigma2 = sigma2;
  finalFragColor = float4(m1, 1.0);
  }
 return finalFragColor;
 }

 ENDCG

 SubShader
 {
 Pass
 {
 CGPROGRAM
   #pragma vertex vert_blur
   #pragma fragment frag_blur
 ENDCG
 }

 Pass
 {
 CGPROGRAM
   #pragma vertex vert_edge
   #pragma fragment frag_edge
 ENDCG
 }

 Pass
 {
 CGPROGRAM
   #pragma vertex vert_paint
   #pragma fragment frag_paint
 ENDCG
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity Shader实现素描风格的渲染

    本文实例为大家分享了Unity Shader实现素描风格的具体代码,供大家参考,具体内容如下 原理 使用6张素描纹理进行渲染,在渲染阶段,在顶点着色阶段计算逐顶点的光照,根据光照结果决定6张纹理的混合权重,并传递给片元着色器.在片元着色器中根据这些权重来混合6张纹理的采样结果 Shader实现 Shader "Hatching" { Properties { _Color ("Color Tint", Color) = (1, 1, 1, 1)//颜色 _TileF

  • Unity Shader实现水墨效果

    Unity Shader学习:水墨效果 偶然在网上看到9级铁甲蛹大神的水墨风格后处理觉得挺有意思,参照着实现一下,还是涉及到之前油画效果的算法,叫什么滤波暂时不清楚,应该用来处理手绘效果挺多的. 水墨风格基本原理:高斯模糊原始图像,用深度算出边缘进行描边,最后用画笔效果的滤波完成最终图像. 有需要可以用Post Proces改变颜色范围,更接近水墨的颜色. C#部分: //屏幕后处理基类 using UnityEngine; using System.Collections; //非运行时也触发

  • Unity shader实现遮罩效果

    本文实例为大家分享了Unity shader实现遮罩效果的具体代码,供大家参考,具体内容如下 效果: shader代码: Shader "Custom/Mask" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {}//目标图片,即需要被遮罩的图片 _MaskLayer("Culling Mask",2D) = "white"{}//混合的图片,设置

  • Unity shader实现消融效果

    本文实例为大家分享了Unity shader实现消融效果的具体代码,供大家参考,具体内容如下 效果图: shader代码: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/EdgeColo" { Properties { _MainTex ("Texture", 2D) = "white" {} _N

  • Unity Shader实现序列帧动画效果

    本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

  • Unity shader实现高斯模糊效果

    本文实例为大家分享了Unity shader实现高斯模糊效果的具体代码,供大家参考,具体内容如下 正常图: 高斯模糊效果图: shader代码: Shader "Custom/GaoSiMoHu" { Properties { _MainTex ("Texture", 2D) = "white" {} _BlurSize("Blur size",Float)=1.0 } SubShader { ZTest Always cul

  • Unity shader实现自由放大缩小效果

    本文实例为大家分享了Unity shader实现自由放大缩小效果的具体代码,供大家参考,具体内容如下 代码: 以下实现的shader代码: Shader "Hidden/Wave" { Properties { _MainTex ("Texture", 2D) = "white" {} _WaveWidth("Wave Width",float) = 0.5 _CenterX("CenterX",float

  • unity shader实现较完整光照效果

    本文实例为大家分享了unity shader实现光照效果的具体代码,供大家参考,具体内容如下 效果图: shader被附给了球. 灯光需要在属性面板开启阴影. // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Unlit/lightFull" { Properties { _MainTex ("Texture", 2D) = "

  • Unity Shader实现翻书效果

    今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 让所有顶点都绕Z轴旋转,并且通过正余弦使之带有一点弧度. 下面开始让我们一步一步的实现该效果. 首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码. 第一步,我们先让它绕z轴旋转起来 这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到

  • Unity shader实现百叶窗特效

    本文实例为大家分享了Unity shader百叶窗展示的具体代码,供大家参考,具体内容如下 1.将图片划分为水平N栏,代码如下: Shader "Unlit/BYCShader" { Properties { [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {} _Color ("Tint", Color) = (1,1,1,1) _StencilComp

  • Unity Shader实现描边OutLine效果

    本文实例为大家分享了Unity Shader实现描边OutLine效果的具体代码,供大家参考,具体内容如下 Shader实现描边流程大致为:对模型进行2遍(2个pass)绘制,第一遍(描边pass)在vertex shader中对模型沿顶点法线方向放大,fragment shader设置输出颜色为描边颜色:第二遍正常绘制模型,除被放大的部分外,其余被覆盖,这样就有了描边的效果. 实现代码如下: Shader "Custom/OutlineShader" { Properties { _

随机推荐