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://www.mzph.cn/bicheng/47539.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

GESP CCF C++ 三级认证真题 2024年6月

GESP CCF C++ 三级认证真题 2024年6月

第 1 题 小杨父母带他到某培训机构给他报名参加CCF组织的GESP认证考试的第1级&#xff0c;那他可以选择的认证语言有&#xff08;&#xff09;种。 A. 1 B. 2 C. 3 D. 4 第 2 题 下面流程图在yr输入2024时&#xff0c;可以判定yr代表闰年&#xff0c;并输出 2月是29天 &#x…
阅读更多...
20240718 每日AI必读资讯

20240718 每日AI必读资讯

大模型集体失智&#xff01;9.11和9.9哪个大&#xff0c;几乎全翻车了 - AI处理常识性问题能力受限&#xff0c;9.11&#xff1e;9.8数学难题暴露了AI短板。 - 训练数据偏差、浮点精度问题和上下文理解不足是AI在数值比较任务上可能遇到的困难。 - 改进AI需优化训练数据、Pr…
阅读更多...
阿里云国际站：海外视频安全的DRM加密

阿里云国际站：海外视频安全的DRM加密

随着科技的进步&#xff0c;视频以直播或录播的形式陆续开展海外市场&#xff0c;从而也衍生出内容安全的问题&#xff0c;阿里云在这方面提供了完善的内容安全保护机制&#xff0c;适用于不同的场景&#xff0c;如在视频安全提供DRM加密。 由图可以了解到阿里云保护直播安全的…
阅读更多...
【ROS】的软件包应用商店使用-以小乌龟为例

【ROS】的软件包应用商店使用-以小乌龟为例

文章目录 环境效果图介绍安装使用总结 环境 在Ubuntu20.04系统下运行 效果图 介绍 ros应用商店&#xff0c;里面有大量ros可使用的软件。 下面以ros经典的控制小乌龟为例。 安装 安装控制器 sudo apt install ros-noetic-rqt-robot-steering安装小乌龟 sudo apt insta…
阅读更多...
微软GraphRAG +本地模型+Gradio 简单测试笔记

微软GraphRAG +本地模型+Gradio 简单测试笔记

安装 pip install graphragmkdir -p ./ragtest/input#将文档拷贝至 ./ragtest/input/ 下python -m graphrag.index --init --root ./ragtest修改settings.yaml encoding_model: cl100k_base skip_workflows: [] llm:api_key: ${GRAPHRAG_API_KEY}type: openai_chat # or azu…
阅读更多...
uniapp踩坑之项目：uni-table垂直居中和水平居中

uniapp踩坑之项目：uni-table垂直居中和水平居中

uni-table 中的水平居中uni-td align"center"&#xff0c;css里的属性vertical-align: middle //html 水平居中<uni-table ref"table" :loading"loading" border stripe emptyText"暂无更多数据"><uni-tr><uni-th :wid…
阅读更多...
[HDCTF2019]MFC

[HDCTF2019]MFC

[HDCTF2019]MFC-CSDN博客 不会写 完全画瓢 我还以为win32什么系统逆向 原来是小瘪三! VM保护 下载xspy(看雪上有) 打开32位的 再打开 这个窗口 把这个放大镜托到这个大窗口(里面有个小窗口,不要托错了) 下面这个 onmeg 就她不正常,是什么0464 #include <stdio.h&g…
阅读更多...
mac环境下安装python3的图文教程

mac环境下安装python3的图文教程

Python 是一种功能多样且强大的编程语言&#xff0c;在各个领域得到广泛应用。许多 Mac 用户都在其设备上安装和运行 Python&#xff0c;以运行特定的应用程序或创建、运行自己的 Python 脚本。 文章源自设计学徒自学网-http://www.sx1c.com/49441.html 虽然某些版本的 macOS…
阅读更多...
git镜像链接

git镜像链接

镜像链接https://registry.npmmirror.com/binary.html?pathgit-for-windows/ CNPM Binaries Mirror 1.git init 2.克隆 IDEA集成git git分支
阅读更多...
RDD算子----＞coalesce和repartition的区别

RDD算子----＞coalesce和repartition的区别

1.coalesce() 作用&#xff1a;缩减分区数&#xff0c;用于大数据集过滤后&#xff0c;提高小数据集的执行效率。 需求&#xff1a;创建一个4个分区的RDD&#xff0c;对其缩减分区 #1.创建一个RDD rdd1 sc.parallelize(range(1,11),4) #2.对RDD重新分区 rdd2 rdd1.coalesc…
阅读更多...
【CICID】GitHub-Actions-SpringBoot项目部署

【CICID】GitHub-Actions-SpringBoot项目部署

[TOC] 【CICID】GitHub-Actions-SpringBoot项目部署 0 流程图 1 创建SprinBoot项目 ​ IDEA创建本地项目&#xff0c;然后推送到 Github 1.1 项目结构 1.2 Dockerfile文件 根据自身项目&#xff0c;修改 CMD ["java","-jar","/app/target/Spri…
阅读更多...
国产精品ORM框架-SqlSugar详解 SqlSugar初识 附案例源码 云草桑 专题一

国产精品ORM框架-SqlSugar详解 SqlSugar初识 附案例源码 云草桑 专题一

国产精品ORM框架-SqlSugar详解 1、SqlSugar初识 2、开始实操 3、增删改操作 4、进阶功能 5、集成整合 6、脚手架应用 sqlsugar 官网-CSDN博客 国产精品ORM框架-SqlSugar详解 SqlSugar初识 专题二-CSDN博客 1、SqlSugar初识 1.1 基本概念和历史 SqlSugar 是一款 老牌 …
阅读更多...
vim网络和安全的操作及shell的使用

vim网络和安全的操作及shell的使用

目录 vim模式 一般模式下的基本操作&#xff1a; 一般模式切换到编辑模式&#xff1a; 一般模式切换到命令模式&#xff1a; Vim多窗口使用技巧 横向切割打开&#xff1a; 纵向切割打开&#xff1a; 关闭多窗口&#xff1a; 窗口的切换&#xff1a; 网络&#xff1a;…
阅读更多...
《大数据基础》相关知识点及考点，例题

《大数据基础》相关知识点及考点，例题

1.6大数据计算模式 1、MapReduce可以并行执行大规模数据处理任务&#xff0c;用于大规模数据集&#xff08;大于1TB&#xff09;的并行运算。MapReduce 极大地方便了分布式编程工作&#xff0c;它将复杂的、运行于大规模集群上的并行计算过程高度地抽象为两个函数一一Map和Redu…
阅读更多...
[MySQL][复核查询][多表查询][自连接][自查询]详细讲解

[MySQL][复核查询][多表查询][自连接][自查询]详细讲解

目录 1.铺垫&基本查询回顾1.多表查询1.何为笛卡尔积&#xff1f;2.示例 2.自连接1.何为自连接&#xff1f;2.示例 3.子查询1.何为子查询&#xff1f;2.单行子查询3.多行子查询4.多列子查询5.在from子句中使用子查询6.合并查询 1.铺垫&基本查询回顾 前面讲解的MYSQL表的…
阅读更多...
获取欧洲时报中国板块前新闻数据-scrapy

获取欧洲时报中国板块前新闻数据-scrapy

这里写目录标题 1.创建项目文件二.爬虫文件编写三.管道存储四.settings文件 1.创建项目文件 创建scrapy项目的命令&#xff1a;scrapy startproject <项目名字> 示例&#xff1a; scrapy startproject myspiderscrapy genspider <爬虫名字> <允许爬取的域名>…
阅读更多...
修改了mybatis的xml中的sql不重启服务器如何动态加载更新

修改了mybatis的xml中的sql不重启服务器如何动态加载更新

目录 一、背景 二、注意 三、代码 四、使用示例 五、其他参考博客 一、背景 开发一个报表功能&#xff0c;好几百行sql&#xff0c;每次修改完想自测下都要重启服务器&#xff0c;启动一次服务器就要3分钟&#xff0c;重启10次就要半小时&#xff0c;耗不起时间呀。于是在…
阅读更多...
windows docker nvidia wsl2

windows docker nvidia wsl2

下载驱动(GeForce Experience里的也可以)https://www.nvidia.cn/Download/index.aspx 安装wsl2https://blog.csdn.net/qq_39942341/article/details/121512900?ops_request_misc%257B%2522request%255Fid%2522%253A%2522172122816816800227436617%2522%252C%2522scm%2522%253A…
阅读更多...
Docker构建LNMP环境并运行Wordpress平台

Docker构建LNMP环境并运行Wordpress平台

1.准备Nginx 上传文件 Dockerfile FROM centos:7 as firstADD nginx-1.24.0.tar.gz /opt/ COPY CentOS-Base.repo /etc/yum.repos.d/RUN yum -y install pcre-devel zlib-devel openssl-devel gcc gcc-c make && \useradd -M -s /sbin/nologin nginx && \cd /o…
阅读更多...
沙尘传输模拟教程(基于wrf-chem)

沙尘传输模拟教程(基于wrf-chem)

沙尘传输模拟教程(基于wrf-chem) 文章目录 沙尘传输模拟教程(基于wrf-chem)简介实验目的wrf-chem简介 软件准备wps、wrf-chem安装conda安装ncl安装ncap安装 数据准备气象数据准备下垫面数据准备 WPS数据预处理namelist.wps的设置geogrid.exe下垫面处理ungrib.exe气象数据预处理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023