Chapter12 屏幕后处理效果——Shader入门精要学习笔记

Chapter12 屏幕后处理效果

  • 一、屏幕后处理概述以及基本脚本系统
    • 1.OnRenderImage 函数 —— 获取屏幕图像
    • 2.Graphics.Blit 函数 —— 使用特定的Shader处理
    • 3.在Unity中实现屏幕后处理的基本流程
    • 4.屏幕后处理基类
  • 二、调整亮度、饱和度和对比度
    • 1.BrightnessSaturationAndContrast.cs 挂载在摄像机上
    • 2.BrightnessSaturationAndContrastShader
  • 三、边缘检测
    • 1.卷积
    • 2.EdgeDetection.cs 挂载在摄像机上
    • 3.EdgeDetectionShader
  • 四、高斯模糊
    • 1.高斯滤波
    • 2.GaussianBlur.cs 挂载在摄像机上
    • 3.GaussianBlurShader
  • 五、Bloom效果
    • 1.Bloom.cs
    • 2.BloomShader
  • 六、运动模糊
    • 1.MotionBlur.cs
    • 2.MotionBlurShader

一、屏幕后处理概述以及基本脚本系统

  • 概念：在渲染完整个场景得到屏幕图像后，再对这个图像进行一系列操作，实现各种屏幕特效

1.OnRenderImage 函数 —— 获取屏幕图像

OnRenderImage(RenderTexture src, RenderTexture dest)
  • 会把当前渲染得到的图像存储在第一个参数对应的原渲染纹理中
  • 通过函数中一系列操作后
  • 再把目标渲染纹理，即第二个参数对应的渲染纹理显示到屏幕上

2.Graphics.Blit 函数 —— 使用特定的Shader处理

  • 有三种声明
public static void Blit(Texture src,RenderTexture dest);
public static void Blit(Texture src,RenderTexture dest,Material mat,int pass=-1);
public static void Blit(Texture src,Material mat,int pass=-1);
  • src：源纹理（当前屏幕纹理或者上一步处理后得到的渲染纹理），会传递给Shader中的 _MainTex 纹理
  • dest：目标渲染纹理（如果值为null，就会直接渲染在屏幕上）
  • mat：使用的材质，这个材质使用的Shader将会进行各种屏幕后处理
  • pass：默认值为-1，表示会依次调用Shader内所有Pass，反之就会调用给定索引的Pass

3.在Unity中实现屏幕后处理的基本流程

  • 需要先在摄像中添加一个用于屏幕后处理的脚本
  • 在此脚本中会实现 OnRenderImage 函数来获取当前屏幕图像
  • 再调用Graphic.Blit 函数使用特定的Unity Shader来对图像进行处理（可以多次调用Blit）
  • 再把返回的渲染纹理显示到屏幕上

4.屏幕后处理基类

  • PostEffectBase.cs 提供基础功能，包括资源检查、Shader 检查和材质创建等
protected void CheckResources() {bool isSupported = CheckSupport();if (isSupported == false) {NotSupported();}}
  • CheckResources() 检查各种资源和条件是否满足
protected bool CheckSupport() {if (SystemInfo.supportsImageEffects == false || SystemInfo.supportsRenderTextures == false) {Debug.LogWarning("This platform does not support image effects or render textures.");return false;}return true;}// Called when the platform doesn't support this effectprotected void NotSupported() {enabled = false;}
  • CheckSupport() 检查平台是否支持图像效果和渲染纹理
protected Material CheckShaderAndCreateMaterial(Shader shader, Material material) {if (shader == null) {return null;}if (shader.isSupported && material && material.shader == shader)return material;if (!shader.isSupported) {return null;}else {material = new Material(shader);material.hideFlags = HideFlags.DontSave;if (material)return material;else return null;}}
  • CheckShaderAndCreateMaterial(Shader shader, Material material) 指定一个Shader来创建一个用于处理渲染纹理的材质

二、调整亮度、饱和度和对比度

  • 一个非常简单的屏幕特效——调整屏幕的亮度、饱和度和对比度

1.BrightnessSaturationAndContrast.cs 挂载在摄像机上

public class BrightnessSaturationAndContrast : PostEffectsBase
  • 继承PostEffectsBase 基类
 public Shader briSatConShader;private Material briSatConMaterial;public Material material{get{briSatConMaterial = CheckShaderAndCreateMaterial(briSatConShader,briSatConMaterial);return briSatConMaterial;}}
  • 声明该效果需要的Shader —— briSatConShader，并据此创建相应的材质 —— briSatConMaterial
  • material 的get函数调用了基类的 CheckShaderAndCreateMaterial 函数来得到对应的材质
   [Range(0.0f, 3.0f)]public float brightness = 1.0f;[Range(0.0f, 3.0f)]public float saturation = 1.0f;[Range(0.0f, 3.0f)]public float contrast = 1.0f;
  • 为每个参数提供了合适的变化区间
 private void OnRenderImage(RenderTexture src, RenderTexture dest){if(material != null){material.SetFloat("_Brightness", brightness);material.SetFloat("_Saturation", saturation);material.SetFloat("_Contrast", contrast);Graphics.Blit(src, dest, material);}else{Graphics.Blit(src, dest);}}
  • OnRenderImage 函数调用时，会检查材质是否可用，如果可用就把参数传递给材质，再调用Blit函数处理，反之，直接把原图像显示到图像上

2.BrightnessSaturationAndContrastShader

Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_Brightness ("Brightness", Float) = 1_Saturation("Saturation", Float) = 1_Contrast("Contrast", Float) = 1
}
  • 声明需要的各个属性
SubShader
{Pass{ZTest Always Cull Off ZWrite Off
  • 需要关闭深度写入
struct v2f{float4 pos : SV_POSITION;half2 uv : TEXCOORD0;
};v2f vert(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = v.texcoord;return o;
}
  • 定义顶点着色器，只需要进行必要的顶点转换
  • 更重要的是把纹理坐标传递给片元着色器
  • 使用了appdata_img 结构体作为顶点着色器的输入——只包含了图像处理时必须的顶点坐标和纹理坐标等变量
fixed4 frag(v2f i) : SV_Target{fixed4 renderTex = tex2D(_MainTex, i.uv);//Brightnessfixed3 finalColor = renderTex.rgb * _Brightness;//Saturationfixed luminance = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b;fixed3 luminanceColor = fixed3(luminance, luminance, luminance);finalColor = lerp(luminanceColor,finalColor,_Saturation);//Contrastfixed3 avgColor = fixed3(0.5,0.5,0.5);finalColor = lerp(avgColor,finalColor,_Contrast);return fixed4(finalColor,renderTex.a);
}
  • 首先对原屏幕图像（存储在_MainTex）的采样结果renderTex
  • 再进行各个属性处理
    在这里插入图片描述

三、边缘检测

  • 利用边缘检测算子对图像进行卷积

1.卷积

  • 使用一个卷积核（也称为边缘检测算子）对图像中的每个像素进行一系列计算，得到新的像素值
    在这里插入图片描述
  • 先将卷积核水平竖直翻转，再依次计算核之中每个元素和其覆盖的像素值的乘积，再求和，最后得到中心像素值
    在这里插入图片描述
  • 以上常用的卷积核都包含两个方向，分别用于水平方向和竖直方向上的边缘信息
  • 我们需要对每个像素进行一次卷积计算，得到两个方向上的梯度值 G x G_{x} Gx​ 和 G y G_{y} Gy​，再计算得到整体的 G x 2 + G y 2 \sqrt{G_{x}^2 + G_{y}^2} Gx2​+Gy2​ ​（出于性能考虑，有时候会用绝对值来代替 G = ∣ G x ∣ + ∣ G y ∣ G = |G_{x}| + |G_{y}| G=∣Gx​∣+∣Gy​∣）
  • 梯度值G大的越有可能是边缘点

2.EdgeDetection.cs 挂载在摄像机上

 public Shader edgeDetectShader;private Material edgeDetectMaterial = null;public Material material{get {edgeDetectMaterial = CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial);return edgeDetectMaterial;}}
  • 声明了所需要的Shader，并据此创建相应的材质
[Range(0.0f, 1.0f)]
public float edgeOnly = 0.0f;public Color edgeColor = Color.black;
public Color backgroundColor = Color.white;
  • edgeOnly为0时，边缘会叠加在原渲染图像上；为1时不显示源渲染图像
 private void OnRenderImage(RenderTexture src, RenderTexture dest){if(material != null){material.SetFloat("_EdgeOnly", edgeOnly);material.SetColor("_EdgeColor", edgeColor);material.SetColor("_BackgroundColor", backgroundColor);Graphics.Blit(src, dest, material);}else{Graphics.Blit(src, dest);}}

3.EdgeDetectionShader

Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_EdgeOnly ("Edge Only", Float) = 1.0_EdgeColor ("Edge Color", Color) = (0, 0, 0, 1)_BackgroundColor ("Background Color", Color) = (1, 1, 1, 1)
}

sampler2D _MainTex;  
uniform half4 _MainTex_TexelSize;
fixed _EdgeOnly;
fixed4 _EdgeColor;
fixed4 _BackgroundColor;
  • _MainTex_TexelSize 可以提供访问_MainTex纹理对应的每个纹素的大小（比如一张512×512的图像大小就为 1/512
  • 由于卷积需要对相邻区域内的像素进行采样，因此需要利用纹素大小来计算各个相邻区域的纹理坐标
struct v2f {float4 pos : SV_POSITION;half2 uv[9] : TEXCOORD0;
};v2f vert(appdata_img v) {v2f o;o.pos = UnityObjectToClipPos(v.vertex);half2 uv = v.texcoord;o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1, -1);o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1);o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1, -1);o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 0);o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0);o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1, 0);o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1, 1);o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1);o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1, 1);return o;
}
  • 在v2f中定义了9维数组，对应了sobel算子采样时需要的9个邻域纹理坐标
  • 把计算采样纹理坐标的代码，从片元着色器移到顶点着色器中，可以减少运算，提高性能（不会影响结果）
fixed luminance(fixed4 color) {return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
}half Sobel(v2f i) {const half Gx[9] = {-1,  0,  1,-2,  0,  2,-1,  0,  1};const half Gy[9] = {-1, -2, -1,0,  0,  0,1,  2,  1};		half texColor;half edgeX = 0;half edgeY = 0;for (int it = 0; it < 9; it++) {texColor = luminance(tex2D(_MainTex, i.uv[it]));edgeX += texColor * Gx[it];edgeY += texColor * Gy[it];}half edge = 1 - abs(edgeX) - abs(edgeY);return edge;
}
  • Sobel函数利用Sobel算子对原图进行边缘检测
  • 首先定义了水平方向和竖直方向使用的卷积核 G x G_{x} Gx​和 G y G_{y} Gy​
  • 再对9个像素进行依次采样，计算亮度值
  • 再与卷积核 G x G_{x} Gx​和 G y G_{y} Gy​对应的权重相乘后，叠加到各自的梯度值上
  • 最后用1减去水平方向和竖直方向的梯度值绝对值，得到edge，edge越小，越有可能是边缘点
fixed4 fragSobel(v2f i) : SV_Target {half edge = Sobel(i);fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[4]), edge);fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);}

在这里插入图片描述

四、高斯模糊

1.高斯滤波

  • 同样使用卷积计算，其中每个元素都是基于下面的高斯方程计算
    • 其中σ是标准方差（一般取为1）
    • x和y分别对应了当前位置到卷积核中心的整数距离
      在这里插入图片描述
  • 要构建一个高斯核，只需要计算高斯核中各个位置的高斯值
  • 为了保证变化后不会变暗，要将高斯核中的权重归一化（每个权重除以权重和）
    在这里插入图片描述
  • 当使用一个NxN的高斯核进行卷积滤波时，需要NxNxWxH（W和H为图像的宽和高）次纹理采样，当N大小不断增大时，采样次数会非常大。所以可以用两个一维的高斯核先后对图像进行滤波（见上图），采样次数只需要2xNxWxH（先后两个Pass，第一个Pass使用竖直方向的高斯核进行滤波。第二个使用水平方向的高斯核进行滤波）

2.GaussianBlur.cs 挂载在摄像机上

 public Shader gaussianBlurShader;private Material gaussianBlurMaterial = null;public Material material{get{gaussianBlurMaterial = CheckShaderAndCreateMaterial(gaussianBlurShader, gaussianBlurMaterial);return gaussianBlurMaterial;}}//Blur Interations[Range(0, 4)]public int iterations = 3;[Range(0.2f, 3.0f)]public float blurSpread = 0.6f;[Range(1, 8)]public int downSample = 2;
  • 声明了高斯模糊的迭代次数、模糊范围和缩放系数
  • blurSpread和downSample都是处于性能考虑
  • 在高斯核维数不变的情况下，_BlurSize越大，模糊程度越高，但采样数并不会改变；过大的_BlurSize值会造成虚影
  • downSample越大，需要处理的像素数越少，也能提高模糊程度，但过大会让图像像素化
    /// 1st edition: just apply blurvoid OnRenderImage(RenderTexture src, RenderTexture dest){if (material != null){int rtW = src.width;int rtH = src.height;RenderTexture buffer = RenderTexture.GetTemporary(rtW, rtH, 0);// Render the vertical passGraphics.Blit(src, buffer, material, 0);// Render the horizontal passGraphics.Blit(buffer, dest, material, 1);RenderTexture.ReleaseTemporary(buffer);}else{Graphics.Blit(src, dest);}}
  • 第一版的OnRenderImage，利用了RenderTexture.GetTemporary(rtW, rtH, 0)分配了一块与屏幕图像大小相同的缓冲区
  • 这是因为高斯模糊需要两个Pass，第一个Pass执行完毕后得到的模糊结果存储在buffer中 Graphics.Blit(src, buffer, material, 0)，作为第二个Pass的输入 Graphics.Blit(buffer, dest, material, 1)
  • 最后需要 RenderTexture.ReleaseTemporary(buffer) 来释放缓存
/// 2nd edition: scale the render texture
void OnRenderImage(RenderTexture src, RenderTexture dest)
{if (material != null){int rtW = src.width / downSample;int rtH = src.height / downSample;RenderTexture buffer = RenderTexture.GetTemporary(rtW, rtH, 0);buffer.filterMode = FilterMode.Bilinear;// Render the vertical passGraphics.Blit(src, buffer, material, 0);// Render the horizontal passGraphics.Blit(buffer, dest, material, 1);RenderTexture.ReleaseTemporary(buffer);}else{Graphics.Blit(src, dest);}
}
  • 第二版在第一版的基础上，利用缩放对图像进行降采样，减少需要处理的像素个数，提高性能
  • buffer.filterMode = FilterMode.Bilinear 将滤波模式设为双线性
  • 过大的downSample会造成图像像素化
/// 3rd edition: use iterations for larger blur
void OnRenderImage(RenderTexture src, RenderTexture dest)
{if (material != null){int rtW = src.width / downSample;int rtH = src.height / downSample;RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);buffer0.filterMode = FilterMode.Bilinear;Graphics.Blit(src, buffer0);for (int i = 0; i < iterations; i++){material.SetFloat("_BlurSize", 1.0f + i * blurSpread);RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);// Render the vertical passGraphics.Blit(buffer0, buffer1, material, 0);RenderTexture.ReleaseTemporary(buffer0);buffer0 = buffer1;buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);// Render the horizontal passGraphics.Blit(buffer0, buffer1, material, 1);RenderTexture.ReleaseTemporary(buffer0);buffer0 = buffer1;}Graphics.Blit(buffer0, dest);RenderTexture.ReleaseTemporary(buffer0);}else{Graphics.Blit(src, dest);}
}
  • 第三版还考虑了高斯迭代次数

3.GaussianBlurShader

Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_BlurSize ("Blur Size", Float) = 1.0
}

SubShader {CGINCLUDEENDCG}
  • 使用CGINCLUDE来组织代码，类似于C++中头文件的功能，由于高斯模糊需要两个Pass，但他们使用的片元着色器代码是一样的，所以可以避免写两个一样的frag
	struct v2f {float4 pos : SV_POSITION;half2 uv[5]: TEXCOORD0;};v2f vertBlurVertical(appdata_img v) {v2f o;o.pos = UnityObjectToClipPos(v.vertex);half2 uv = v.texcoord;o.uv[0] = uv;o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;return o;}
  • 一个5×5的高斯核可以分为两个大小为5的一维高斯核
  • o.uv[0] = uv;： 将当前像素的纹理坐标存储到 o.uv[0] 中
  • o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;： 计算当前像素 上方第一个像素的纹理坐标，并存储到 o.uv[1] 中。这里使用了 _MainTex_TexelSize.y 来获取纹理在垂直方向上的纹素大小，并与 _BlurSize 相乘来控制采样距离
  • o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;： 计算当前像素下方第一个像素的纹理坐标，并存储到 o.uv[2] 中。
  • o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;： 计算当前像素上方第二个像素的纹理坐标，并存储到 o.uv[3] 中。
  • o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;： 计算当前像素下方第二个像素的纹理坐标，并存储到 o.uv[4] 中
  • 水平方向只要把 _MainTex_TexelSize.y 改为 _MainTex_TexelSize.x 即可
fixed4 fragBlur(v2f i) : SV_Target {float weight[3] = {0.4026, 0.2442, 0.0545};fixed3 sum = tex2D(_MainTex, i.uv[0]).rgb * weight[0];for (int it = 1; it < 3; it++) {sum += tex2D(_MainTex, i.uv[it*2-1]).rgb * weight[it];sum += tex2D(_MainTex, i.uv[it*2]).rgb * weight[it];}return fixed4(sum, 1.0);
}
  • 由于高斯核的对称性，5个数只需要记录3个数就好
  • fixed3 sum = tex2D(_MainTex, i.uv[0]).rgb * weight[0];：从输入的纹理 _MainTex 中采样当前像素的颜色值，并乘以第一个权重值 weight[0]，然后将结果存储到变量 sum 中。变量 sum 用于累加所有采样点的加权颜色值
  • sum += tex2D(_MainTex, i.uv[it*2-1]).rgb * weight[it];：从输入的纹理 _MainTex 中采样当前像素上方或下方第二个像素的颜色值，并乘以对应的权重值 weight[it]，然后将结果累加到变量 sum 中
  • sum += tex2D(_MainTex, i.uv[it*2]).rgb * weight[it];：输入的纹理 _MainTex 中采样当前像素上方或下方第一个像素的颜色值，并乘以对应的权重值 weight[it]，然后将结果累加到变量 sum 中
ZTest Always Cull Off ZWrite OffPass {NAME "GAUSSIAN_BLUR_VERTICAL"CGPROGRAM#pragma vertex vertBlurVertical  #pragma fragment fragBlurENDCG  
}Pass {  NAME "GAUSSIAN_BLUR_HORIZONTAL"CGPROGRAM  #pragma vertex vertBlurHorizontal  #pragma fragment fragBlurENDCG
}
  • 两个Pass
  • 使用了NAME语义定义了他们的名字 —— 可以在其他Shader中直接通过名字来使用该Pass
    在这里插入图片描述

五、Bloom效果

  • 模拟真实摄像机的一种图像效果，让画面中较亮的区域“扩散”到周围区域中，造成一种朦胧的效果
  • 实现原理：根据一个阈值提取出图像中较亮的部分，把他们存储在一张纹理中，再利用高斯模糊进行处理，再与原图像进行混合

1.Bloom.cs

   [Range(0, 4)]public int iterations = 3;[Range(0.2f, 3.0f)]public float blurSpread = 0.6f;[Range(1, 8)]public int downSample = 2;[Range(0.0f, 4.0f)]public float luminanceThreshold = 0.6f;
  • 在高斯模糊的基础上，有增加了一个亮度阈值
 private void OnRenderImage(RenderTexture src, RenderTexture dest){if(material != null){material.SetFloat("_LuminanceThreshold", luminanceThreshold);int rtW = src.width / downSample;int rtH = src.height / downSample;RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);buffer0.filterMode = FilterMode.Bilinear;for(int i = 0; i < iterations; i++){material.SetFloat("_BlurSize", 1.0f + i * blurSpread);RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);//Vertical PassGraphics.Blit(buffer0, buffer1, material, 1);RenderTexture.ReleaseTemporary(buffer0);buffer0 = buffer1;buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);//Horizontal PassGraphics.Blit(buffer0, buffer1, material, 2);RenderTexture.ReleaseTemporary(buffer0);buffer0 = buffer1;}material.SetTexture("_Bloom", buffer0);Graphics.Blit(src, dest, material, 3);RenderTexture.ReleaseTemporary(buffer0);}else{Graphics.Blit (src, dest);}}
  • 根据前面的原理步骤，先进行高斯模糊，再与原图像混合
  • Graphics.Blit(src, buffer0, material, 0); 先提取较亮的区域（使用Shader中第一个Pass），存储在buffer0中
  • 后面进行与12.4一样的高斯迭代处理，模糊后较亮的区域会存储在buffer0中
  • 再把buffer0传递给材质中_Bloom 纹理属性，并调用Graphics.Blit(src, dest, material, 3);使用第四个Pass来进行最后的混合

2.BloomShader

Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_Bloom ("Bloom (RGB)", 2D) = "black" {}_LuminanceThreshold ("Luminance Threshold", Float) = 0.5_BlurSize ("Blur Size", Float) = 1.0
}
  • _MainTex 对应了输入纹理
  • _Bloom 是高斯模糊后的高亮区域
  • _LuminanceThreshold 是用于提取高亮区域的阈值
  • _BlurSize 控制不同迭代之间高斯模糊的模糊区域范围
	SubShader {CGINCLUDEENDCG}
  • 用 CGINCLUDE 组织代码，提高复用性
struct v2f {float4 pos : SV_POSITION; half2 uv : TEXCOORD0;
};	v2f vertExtractBright(appdata_img v) {v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = v.texcoord;return o;
}fixed luminance(fixed4 color) {return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
}fixed4 fragExtractBright(v2f i) : SV_Target {fixed4 c = tex2D(_MainTex, i.uv);fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 1.0);return c * val;
}
  • 这段代码用于实现Bloom 提取图像中较亮区域的功能
  • fixed4 c = tex2D(_MainTex, i.uv);：对输入纹理进行采样，获取当前像素的颜色值
  • 用luminance(fixed4 color)函数来计算像素亮度值
  • fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 1.0);：将亮度与阈值进行比较，并将结果截取到[0,1]
  • 片元着色器 fragExtractBright 返回值：较亮区域的像素颜色值
struct v2fBloom {float4 pos : SV_POSITION; half4 uv : TEXCOORD0;
};v2fBloom vertBloom(appdata_img v) {v2fBloom o;o.pos = UnityObjectToClipPos (v.vertex);o.uv.xy = v.texcoord;		o.uv.zw = v.texcoord;#if UNITY_UV_STARTS_AT_TOP			if (_MainTex_TexelSize.y < 0.0)o.uv.w = 1.0 - o.uv.w;#endifreturn o; 
}fixed4 fragBloom(v2fBloom i) : SV_Target {return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
}
  • 此段代码用于实现 Bloom 效果中 **混合亮部图像和原图像的功能
  • uv.xy 分量对应了_MainTex，即原图像纹理
  • uv.zw 分量对应了_Bloom，即模糊后的较亮区域的纹理坐标
#if UNITY_UV_STARTS_AT_TOP			if (_MainTex_TexelSize.y < 0.0)o.uv.w = 1.0 - o.uv.w;#endif
  • 此段代码为平台差异化处理，根据不同平台调整纹理坐标的w分量
Pass {  CGPROGRAM  #pragma vertex vertExtractBright  #pragma fragment fragExtractBright  ENDCG  
}UsePass "Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_VERTICAL"UsePass "Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_HORIZONTAL"Pass {  CGPROGRAM  #pragma vertex vertBloom  #pragma fragment fragBloom  ENDCG  
}
  • 第一个用于提取亮度区域
  • 第二个、第三个直接复用高斯模糊的
  • 第四个用于混合
    在这里插入图片描述

六、运动模糊

  • 当拍摄对象或摄像机在曝光时间内发生移动时，就会产生模糊的效果
  • 实现方法：
    • 累积缓存：将多张连续的图像混合在一起，得到模糊的效果。但需要记录多张图像，占用较多的内存和计算资源
    • 速度缓存：速度缓存中存储了 各个像素当前的运动速度，根据运动速度计算模糊的方向和大小，可以得到更真实的运动模糊效果
  • 本节中实现类似第一种方法，不需要渲染很多次场景，但需要保存之前的渲染结果，不断把当前的渲染图像叠加到之前的渲染图像中

1.MotionBlur.cs

[Range(0.0f, 0.9f)]
public float blurAmount = 0.5f;private RenderTexture accumlationTexture;private void OnDisable(){DestroyImmediate(accumlationTexture);}
  • blurAmount 值越大，运动拖尾效果越明显
  • private RenderTexture accumlationTexture;：保存之前图像叠加的效果
  • OnDisable函数：脚本不运行时，调用该函数，立即销毁清空
private void OnRenderImage(RenderTexture src, RenderTexture dest)
{if(material != null){//创建 累加图像if(accumlationTexture == null || accumlationTexture.width != src.width || accumlationTexture.height != src.height){DestroyImmediate(accumlationTexture);accumlationTexture = new RenderTexture(src.width, src.height, 0);accumlationTexture.hideFlags = HideFlags.HideAndDontSave;Graphics.Blit(src, accumlationTexture);}accumlationTexture.MarkRestoreExpected();material.SetFloat("_BlurAmount", 1.0f - blurAmount);Graphics.Blit(src, accumlationTexture, material);Graphics.Blit(accumlationTexture, dest);}else{Graphics.Blit(src, dest);}
}
  • accumlationTexture.hideFlags = HideFlags.HideAndDontSave;：表示这个变量不会显示在Hierarchy中，也不会保存到场景中
  • accumlationTexture.MarkRestoreExpected();：标记累加纹理，表明在渲染过程中使用它，并且不会对其进行清空和销毁
  • Graphics.Blit(src, accumlationTexture, material);：把当前屏幕图像src叠加到accumlationTexture中
  • Graphics.Blit(accumlationTexture, dest);：把结果显示在屏幕上

2.MotionBlurShader

struct v2f {float4 pos : SV_POSITION;half2 uv : TEXCOORD0;
};v2f vert(appdata_img v) {v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = v.texcoord;return o;
}fixed4 fragRGB (v2f i) : SV_Target {return fixed4(tex2D(_MainTex, i.uv).rgb, _BlurAmount);
}half4 fragA (v2f i) : SV_Target {return tex2D(_MainTex, i.uv);
}
  • fragRGB 用于更新渲染纹理的RGB通道部分，fragA用于更新A通道部分
  • RGB 通道： 用于混合当前帧图像和累加纹理中的图像，创建模糊拖尾效果
  • A 通道： 用于存储透明度信息，例如物体的透明度或阴影
  • 如果我们在混合 RGB 通道的同时也更新 A 通道，那么可能会导致透明度信息被错误地修改，例如透明物体变得不透明或阴影消失。fragA 直接使用 tex2D 函数采样 _MainTex 纹理的 A 通道，并返回，这样可以保证 渲染纹理的透明通道值不受混合操作的影响
ZTest Always Cull Off ZWrite OffPass {Blend SrcAlpha OneMinusSrcAlphaColorMask RGBCGPROGRAM#pragma vertex vert  #pragma fragment fragRGB  ENDCG
}Pass {   Blend One ZeroColorMask ACGPROGRAM  #pragma vertex vert  #pragma fragment fragAENDCG
}
  • 两个Pass，一个渲染RGB，一个渲染A
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3247944.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

[计算机基础]一、计算机组成原理

[计算机基础]一、计算机组成原理

计算机组成原理的考察目标为&#xff1a; 1. 掌握单处理器计算机系统中主要部件的工作原理、组成结构以及相互连接方式。 2. 掌握指令集体系结构的基本知识和基本实现方法&#xff0c;对计算机硬件相关问题进行分析&#xff0c;并能够对相关部件进行设计。 3. 理解计算机系统的…
阅读更多...
001、Mac系统上Stable Diffusion WebUI环境搭建

001、Mac系统上Stable Diffusion WebUI环境搭建

一、目标 如标题所述&#xff0c;在苹果电脑&#xff08;Mac&#xff09;上搭建一套Stable Diffusion本地服务&#xff0c;以实现本地AI生图目的。 二、安装步骤 1、准备源码【等价于准备软件】 # 安装一系列工具库&#xff0c;包括cmake,protobuf,rust,python3.10,git,wge…
阅读更多...
C#学习-刘铁猛

C#学习-刘铁猛

文章目录 1.委托委托的具体使用-魔板方法回调方法【好莱坞方法】&#xff1a;通过委托类型的参数&#xff0c;传入主调方法的被调用方法&#xff0c;主调方法可以根据自己的逻辑决定调用这个方法还是不调用这个方法。【演员只用接听电话&#xff0c;如果通过&#xff0c;导演会…
阅读更多...
请你谈谈：spring bean的生命周期 - 阶段2：Bean实例化阶段

请你谈谈：spring bean的生命周期 - 阶段2：Bean实例化阶段

在Spring框架中&#xff0c;Bean的实例化是Bean生命周期中的一个重要阶段。这个过程包括两个关键的子阶段&#xff1a;Bean实例化前阶段和Bean实例化阶段本身。 BeanFactoryPostProcessor&#xff1a;BeanFactoryPostProcessor是容器启动阶段Spring提供的一个扩展点&#xff0…
阅读更多...
智慧城市遐想

智慧城市遐想

很少有人会考虑自己居住的地方。我的意思是真正考虑效率、经济、美观和标准。我们甚至很少抬起头，将目光从智能手机上移开，去欣赏风景或享受城市风光。而且通常这是有道理的。 往日之城 过去，城市建在水源旁，距离河流或湖泊不超过一英里，这样才可以供水。现在，夜间飞越…
阅读更多...
海豚调度器(DolphinScheduler)集群搭建详细笔记

海豚调度器(DolphinScheduler)集群搭建详细笔记

海豚调度器集群搭建笔记 1.DolphinScheduler Cluster部署1.1 集群部署规划1.2 集群准备工作1.3 初始化数据库1.4 修改安装环境配置1.5 安装DolphinScheduler1.6 启停命令1.7 登录 DolphinScheduler UI 1.DolphinScheduler Cluster部署 分布式去中心化易扩展的工作流任务调度系…
阅读更多...
中国机器视觉行业上市公司市场竞争格局分析

中国机器视觉行业上市公司市场竞争格局分析

中国机器视觉产业上市公司汇总&#xff1a;分布在各产业链环节 机器视觉就是用机器来代替人眼做测量和判断的系统&#xff0c;机器检测相较于人工视觉检测优势明显。目前&#xff0c;我国机器视觉产业的上市公司数量较多&#xff0c;分布在各产业链环节。具体包括&#xff1a;…
阅读更多...
【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 配置篇 -- flash的使用 --（八）

【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 配置篇 -- flash的使用 --（八）

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…
阅读更多...
ClickHouse集成LDAP实现简单的用户认证

ClickHouse集成LDAP实现简单的用户认证

1.这里我的ldap安装的是docker版的 docker安装的化就yum就好了 sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin sudo systemctl start docker 使用下面的命令验证sudo docker run hello-world docker pull osixia/openl…
阅读更多...
RK3568笔记三十九：多个LED驱动开发测试（设备树）

RK3568笔记三十九：多个LED驱动开发测试（设备树）

若该文为原创文章&#xff0c;转载请注明原文出处。 通过设备树配置一个节点下两个子节点控制两个IO口&#xff0c;一个板载LED&#xff0c;一个外接LED。 一、介绍 通过学习设备树控制GPIO&#xff0c;发现有多种方式 一、直接通过寄存器控制 二、通过设备树&#xff0c;但…
阅读更多...
windows和linux的等保加固测评的经验分享

windows和linux的等保加固测评的经验分享

一头等保加固测评的牛马&#xff0c;需要能做到一下午测评n个服务器 接下来就讲讲如何当一头xxxxxxxxx》严肃的等保测评加固的经验分享&#xff08; 一、window等保 首先你要自己按着教程在虚拟机做过一遍&#xff08;win2012和win2008都做过一遍&#xff0c;大概windows的…
阅读更多...
MATLAB科研数据可视化教程

MATLAB科研数据可视化教程

原文链接&#xff1a;MATLAB科研数据可视化https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247609462&idx3&snf7043936fc5ee42b833c7c9f3bcd24ba&chksmfa826d91cdf5e4872eb275e5319b66ba6927ea0074fb2293fe1ca47d6aedf38ab91050be484c&token1551213…
阅读更多...
【大模型】FAISS向量数据库记录：从基础搭建到实战操作

【大模型】FAISS向量数据库记录：从基础搭建到实战操作

文章目录 文章简介Embedding模型BGE-M3 模型亮点 FAISS是什么FAISS实战安装faiss加载Embedding模型创建FAISS数据库搜索FAISS数据删除FAISS数据保存、加载FAISS索引 总结 本人数据分析领域的从业者&#xff0c;拥有专业背景和能力&#xff0c;可以为您的数据采集、数据挖掘和数…
阅读更多...
1.厦门面试

1.厦门面试

1.Vue的生命周期阶段 vue生命周期分为四个阶段 第一阶段&#xff08;创建阶段&#xff09;&#xff1a;beforeCreate&#xff0c;created 第二阶段&#xff08;挂载阶段&#xff09;&#xff1a;beforeMount&#xff08;render&#xff09;&#xff0c;mounted 第三阶段&#…
阅读更多...
数据库管理的艺术（MySQL）：DDL、DML、DQL、DCL及TPL的实战应用（上：数据定义与控制）

数据库管理的艺术（MySQL）：DDL、DML、DQL、DCL及TPL的实战应用（上：数据定义与控制）

文章目录 DDL数据定义语言1、创建数据库2、创建表3、修改表结构4、删除5、数据类型 列的约束主键约束&#xff08;primary key&#xff09;唯一约束&#xff08;unique key&#xff09;非空约束检查约束&#xff08;check&#xff09;外键约束&#xff08;foreign key&#xff…
阅读更多...
【java】力扣 合法分割的最小下标

【java】力扣 合法分割的最小下标

文章目录 题目链接题目描述思路代码 题目链接 2780.合法分割的最小下标 题目描述 思路 这道题是摩尔算法的一种扩展 我们先可以找到候选人出来&#xff0c;然后去计算他在左右两边元素出现的次数&#xff0c;只有当他左边时&#xff0c;左边出现的次数2 >左边的长度&…
阅读更多...
在pycharm 2023.2.1中运行由R语言编写的ipynb文件

在pycharm 2023.2.1中运行由R语言编写的ipynb文件

在pycharm 2023.2.1中运行由R语言编写的ipynb文件 背景与目标&#xff1a; 项目中包含由R语言编写的ipynb文件&#xff0c;希望能在pycharm中运行该ipynb文件。 最终实现情况&#xff1a; 未能直接在pycharm中运行该ipynb文件&#xff0c;但是替代的实现方法有&#xff1a;…
阅读更多...
基于 Web 的家校联系系统的设计与实现

基于 Web 的家校联系系统的设计与实现

目录 基于 Web 的家校联系系统的设计与实现 一、绪论 &#xff08;一&#xff09;研究背景 &#xff08;二&#xff09; 研究目的 &#xff08;三&#xff09; 研究意义 二、需求分析 &#xff08;一&#xff09; 功能需求 &#xff08;二&#xff09; 性能需求 &#…
阅读更多...
物联网实训室的核心功能有哪些？

物联网实训室的核心功能有哪些？

随着物联网技术的迅猛发展和广泛应用&#xff0c;唯众凭借其深厚的技术积累和丰富的行业经验&#xff0c;为职业院校提供了全面的物联网实训室解决方案。这些实训室不仅为学生提供了真实、实用、创新的实践环境&#xff0c;还促进了产学研用的深度融合&#xff0c;推动了物联网…
阅读更多...
智能锁赛道内卷加剧，磐金锁王42年来行稳致远，底气何在？

智能锁赛道内卷加剧，磐金锁王42年来行稳致远，底气何在？

中国智能门锁市场正处于一个快速发展的黄金阶段&#xff0c;呈现出了前所未有的繁荣。奥维云网&#xff08;AVC&#xff09;的线上推总数据显示&#xff0c;2024年1-5月&#xff0c;中国家用智能门锁线上市场推总销量规模为274.3万套&#xff0c;同比增长28.3%&#xff1b;推总…
阅读更多...
最新文章

Copyright @ 2022~2023