网站开发类的合同,非标自动化外包平台,网站 前端,wordpress配置文件ini大家好#xff0c;我是阿赵。 继续介绍屏幕后处理效果的做法。这次介绍一下用偏导数求图形边缘的技术。
一、原理介绍 先来看例子吧。 这个例子看起来好像是要给模型描边。之前其实也介绍过很多描边的方法#xff0c;比如沿着法线方向放大模型#xff0c;或者用Ndo… 大家好我是阿赵。 继续介绍屏幕后处理效果的做法。这次介绍一下用偏导数求图形边缘的技术。
一、原理介绍 先来看例子吧。 这个例子看起来好像是要给模型描边。之前其实也介绍过很多描边的方法比如沿着法线方向放大模型或者用NdotV来求边缘之类。 不过这篇文章所说的内容其实和模型描边是没有关系的。因为这是屏幕后处理他针对的并不是模型所以也不会有法线方向有观察空间的计算。用偏导数求的是一张图片的颜色变化。 简单来说我们要求的是连续像素点之间的颜色变化。 听起来好像很复杂不过由于已经提供了现成的方法所以我们直接用就行了。方法就是ddx和ddy。 ddx是求横向像素之间的变化的可以理解成是当前像素点和横向前一个像素点颜色的变化。 ddy就是纵向像素之间的变化了。 通过ddx和ddy我们可以求出一张图片颜色变化比较强烈的一些边缘位置。 当求出了这些范围之后我们可以给他填充不同的颜色也可以指定背景色发挥想象力之后就可以做出一些有趣的效果了。
二、代码实现
1、C#代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class OutlineCtrl : MonoBehaviour
{private Material outlineMat;public float lineStrength 1;public Color baseColor Color.white;public Color lineColor Color.black;public float powVal 1;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}private void OnRenderImage(RenderTexture source, RenderTexture destination){if(outlineMat null){outlineMat new Material(Shader.Find(Hidden/azhaoOutline));}outlineMat.SetFloat(_lineStrength, lineStrength);outlineMat.SetColor(_baseColor, baseColor);outlineMat.SetColor(_lineColor, lineColor);outlineMat.SetFloat(_powVal, powVal);Graphics.Blit(source, destination,outlineMat);}
}2、Shader
Shader Hidden/azhaoOutline
{Properties{_MainTex (Texture, 2D) white {}_lineStrength(LineStrength,Float) 1_lineColor(LineColor,Color) (0,0,0,1)_baseColor(baseColor, Color) (1,1,1,0)_powVal(powVal,Float) 1}SubShader{Tags { RenderTypeOpaque }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include UnityCG.cgincstruct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;float _lineStrength;float4 _lineColor;float3 _baseColor;float _powVal;v2f vert (appdata v){v2f o;o.vertex UnityObjectToClipPos(v.vertex);o.uv TRANSFORM_TEX(v.uv, _MainTex);UNITY_TRANSFER_FOG(o,o.vertex);return o;}half4 frag (v2f i) : SV_Target{// sample the texturehalf4 col tex2D(_MainTex, i.uv);float grayscale col.r * 0.2126729f col.g * 0.7151522f col.b * 0.0721750f;grayscale pow(grayscale, _powVal);float ddVal saturate(ddx(grayscale) ddy(grayscale))*_lineStrength;half3 finalCol _baseColor.rgb * (1.0 - ddVal) _lineColor.rgb * ddVal;return half4(finalCol, 1);}ENDCG}}
}三、和原图的叠加 稍微做的一点点扩展之前描绘出来的是纯背景色和线条色其实我们也不一定要用纯背景色的比如把偏导数得到的结果和原图做叠加就可以做出类似模型描边的效果。 代码很简单修改一下shader的片段着色器程序就可以
half4 frag (v2f i) : SV_Target
{// sample the texturehalf4 col tex2D(_MainTex, i.uv);float grayscale col.r * 0.2126729f col.g * 0.7151522f col.b * 0.0721750f;grayscale pow(grayscale, _powVal);float ddVal saturate(ddx(grayscale) ddy(grayscale))*_lineStrength;half3 finalCol col.rgb*(1 - ddVal) _lineColor.rgb * ddVal;return half4(finalCol, 1);}可以看出描边的效果其实没有使用法线计算那么干净清晰。这是因为偏导数依赖于颜色的变化越分明的变化结果是越清晰然后图片的分辨率如果不够大得出的效果也会比较的模糊。 不过由于它并不依赖于其他数据只要有颜色就能计算所以在屏幕后处理上就刚好可以做出一些特殊的效果了。
