|
本文为《Unity Shader入门精要》第十二章《屏幕后处理效果》的第5节内容《Bloom效果》。
本文相关代码,详见:
原书代码,详见原作者github:
<hr/>1. 什么是Bloom效果?
Bloom特效是游戏中常见的一种屏幕效果,可以模拟真实相机的一种图像效果,它让画面中较亮的区域“扩散”到周围的区域中,产生一种朦胧的效果。
2. 案例:Bloom效果实现
2.1 效果
本案例最终效果如下:
左:原图效果,右:Bloom效果
2.2 准备工作
完成如下准备工作:
- 新建名为Scene_12_5的场景,并去掉天空盒子;
- 导入一张图片(案例图路径:Assets/Textures/Chap12/sakura1),调整图片纹理类型为Sprite (2D and UI),并拖拽到场景中,使其生成一个Sprite,调整其位置、朝向,使其正对相机;
- 新建名为Bloom的C#脚本;
- 新建名为Chapter12-Bloom的Unity Shader;
- 保存场景。
2.3 编写C#脚本
打开Bloom.cs脚本,编写如下代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 集成后处理基类
public class Bloom : PostEffectsBase
{
// Bloom效果Shader
public Shader bloomShader;
// Bloom效果材质
public Material bloomMaterial = null;
public Material material
{
get
{
bloomMaterial = CheckShaderAndCreateMaterial(bloomShader, bloomMaterial);
return bloomMaterial;
}
}
[Range(0, 4)]
public int iterations = 3;
[Range(0.2f, 3.0f)]
public float blurSpread = 0.6f;
[Range(1, 8)]
public int downSample = 2;
// 明度,在开启HDR后,亮度可以超过1
[Range(0.0f, 4.0f)]
public float luminanceThreshold = 0.6f;
private void OnRenderImage(RenderTexture source, RenderTexture destination)
{
if (material != null)
{
material.SetFloat(&#34;_LuminanceThreshold&#34;, luminanceThreshold);
// 出于性能考虑,对纹理宽高进行降采样
int width = source.width / downSample;
int height = source.height / downSample;
// 分配一个临时的缓存
RenderTexture buffer0 = RenderTexture.GetTemporary(width, height, 0);
// 双线性过滤
buffer0.filterMode = FilterMode.Bilinear;
// 取原来纹理高于明度阈值的部分,渲染到降采样后的缓存纹理中
Graphics.Blit(source, buffer0, material, 0);
// 经过几次迭代,将纹理进行高斯模糊后暂存到buffer0缓存中
for (int i = 0; i < iterations; i++)
{
material.SetFloat(&#34;_BlurSize&#34;, 1.0f + i * blurSpread);
RenderTexture buffer1 = RenderTexture.GetTemporary(width, height, 0);
// 使用第2个Pass进行竖直方向上的高斯模糊
Graphics.Blit(buffer0, buffer1, material, 1);
RenderTexture.ReleaseTemporary(buffer0);
buffer0 = buffer1;
buffer1 = RenderTexture.GetTemporary(width, height, 0);
// 使用第3个Pass进行水平方向上的高斯模糊
Graphics.Blit(buffer0, buffer1, material, 2);
RenderTexture.ReleaseTemporary(buffer0);
buffer0 = buffer1;
}
// 将高斯模糊后的纹理作为Bloom纹理
material.SetTexture(&#34;_Bloom&#34;, buffer0);
Graphics.Blit(source, destination, material, 3);
RenderTexture.ReleaseTemporary(buffer0);
}
else
{
Graphics.Blit(source, destination);
}
}
}
2.4 编写Shader代码
打开Chapter12-Bloom的Shader文件,编写代码如下:
Shader &#34;Unity Shaders Book/Chapter 12/Bloom&#34;
{
Properties
{
// 主纹理
_MainTex (&#34;Base (RGB)&#34;, 2D) = &#34;white&#34; {}
// 高斯模糊后的较亮区域
_Bloom (&#34;Bloom (RGB)&#34;, 2D) = &#34;black&#34; {}
// 提取较亮区域使用的阈值
_LuminanceThreshold (&#34;Luminance Threshold&#34;, Float) = 0.5
// 控制不同迭代之间高斯模糊的模糊区域范围
_BlurSize (&#34;Blur Size&#34;, Float) = 1.0
}
SubShader
{
CGINCLUDE
#include &#34;UnityCG.cginc&#34;
sampler2D _MainTex;
// 主纹理的纹素大小(例如:一张512 * 512的纹理,纹素大小为1/512)
// 利用纹素,做相邻区域内纹理采样时,计算各相邻区域的纹理坐标
half4 _MainTex_TexelSize;
sampler2D _Bloom;
float _LuminanceThreshold;
float _BlurSize;
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;
}
struct v2fBloom
{
float4 pos : SV_POSITION;
// 使用half4,记录两套UV纹理
half4 uv : TEXCOORD0;
};
v2fBloom vertBloom(appdata_img v)
{
v2fBloom o;
o.pos = UnityObjectToClipPos(v.vertex);
// 主纹理坐标
o.uv.xy = v.texcoord;
// Bloom纹理坐标
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;
#endif
return o;
}
fixed4 fragBloom(v2fBloom i) : SV_Target
{
return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
}
ENDCG
// 屏幕后处理“标配”
ZTest Always
Cull Off
ZWrite Off
Pass
{
CGPROGRAM
#pragma vertex vertExtractBright
#pragma fragment fragExtractBright
ENDCG
}
// 使用上一节高斯纹理的纵向处理Pass
UsePass &#34;Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_VERTICAL&#34;
// 使用上一节高斯纹理的横向处理Pass
UsePass &#34;Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_HORIZONTAL&#34;
Pass
{
CGPROGRAM
#pragma vertex vertBloom
#pragma fragment fragBloom
ENDCG
}
}
Fallback Off
}
2.5 配置Bloom脚本
将编写好的Shader文件拖拽到C#组件的Bloom Shader属性中(材质属性会自动生成填充):
运行场景后,调整脚本的参数,可以得到不同的模糊效果:
以上是本次笔记的所有内容,下一篇笔记我们将学习《运动模糊》的相关知识。
<hr/>
写在最后
本文内容会同步发在笔者的公众号上,欢迎大家关注交流!
公众号:程序员叨叨叨(ID:i_coder) |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|