ShaderNote-雾渲染学习

最新推荐文章于 2022-02-25 10:28:57 发布
最新推荐文章于 2022-02-25 10:28:57 发布
阅读量327 收藏
点赞数
分类专栏： S4_Shader学习记录 文章标签： U3D屏幕后处理雾渲染学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq2512667/article/details/103111120
版权

预览图，使用了Noise+屏幕后处理雾
在这里插入图片描述
Unity中也有内置 的雾，在Lighting-setting下，有个fog选项。在这里插入图片描述
但是这种雾是非动效的，
在这里插入图片描述
大概就是这样的。
参数信息: 中文文档。
https://connect.unity.com/doc/Manual/GlobalIllumination

在这里插入图片描述
官方也是推荐使用 后期渲染来实现雾效；

屏幕后处理：

主要是利用 相机渲染时，对原渲染图进行处理，
以得到一些效果。

在U3D 中实现、

可以通过Monobehaviour 自带的OnRenderImage(RenderTexture src, RenderTexture dest)
函数，第一个参数是原图像，dest是 目标。 即输出结果。
可以使用Graphics.Blit(src,dest,material);
使用改材质球里的shader 对src进行处理，然后存储在dest中；

全局雾效的实现关键

根据深度纹理来重建每个像素在世界空间下的位置。

如何得到世界坐标

坐标系中的一个顶点坐标可以通过它相对于另一个顶点坐标的偏移量来对得；
在这里插入图片描述

在顶点作色器下，对图像空间下的视锥体射线（从摄像机出发，指向图像上的某点的射线）进行插值，这条射线存储了该像素在空间下到摄像机的方向信息。然后把该射线和线性化的视角空间下的深度值相乘，再加上相机的位置。就得到了该像素在世界空间下位置。

另一种计算

  1. 是在片元函数里，利用相机视角*投影矩阵的逆矩阵来得到世界空间下的像素坐标，比较消耗性能，在运动模糊的章节里也使用了这个方法，计算前两帧下的像素的坐标，然后做差得到速度，然后根据速度来进行UV计算，以此达到模糊的目的；

  2. 比较方便和暴力的做法是使用一个通道来存储worldPos,
    o.worldPos=mul(unity_ObjectToWorld,v.vertex);
    使用矩阵进行转换，这样的化，其实屏幕每个顶点都进行了计算，性能也会比较消耗；

OnRenderImage

在OnRenderImage方法里，利用

private void OnRenderImage(RenderTexture src, RenderTexture dest)
	{
		if (material==null)
		{
			material=CheckShaderAndCreateMaterial(fogSharder,material);
			Graphics.Blit(src,dest);
		}else
		{
		 	Matrix4x4 frustumCorners= Matrix4x4.identity;
			float fov=Camera.fieldOfView;
			float near=Camera.nearClipPlane;
			float far=Camera.farClipPlane;
			float aspect=Camera.aspect;
			//halfHeight= Near* tan(FOV/2)
			float halfHeight=near* Mathf.Tan(fov*0.5f*Mathf.Deg2Rad);
			Vector3 toRight=MyCameraTransForm.right*halfHeight*aspect;	
			Vector3 toTop=MyCameraTransForm.up*halfHeight;	
			
			Vector3 TL=MyCameraTransForm.forward*near+toTop-toRight;
			float scale=TL.magnitude/near;
			
			TL.Normalize();
			TL*=scale;

			Vector3 TR=MyCameraTransForm.forward*near+toTop+toRight;
			TR.Normalize();
			TR*=scale;
			
			Vector3 BL=MyCameraTransForm.forward*near-toTop-toRight;
			BL.Normalize();
			BL*=scale;
			Vector3 BR=MyCameraTransForm.forward*near-toTop+toRight;
			BR.Normalize();
			BR*=scale;

			frustumCorners.SetRow(0,BL);
			frustumCorners.SetRow(1,BR);
			frustumCorners.SetRow(2,TR);
			frustumCorners.SetRow(3,TL);
			
			material.SetMatrix("_FrustumConrners",frustumCorners);
			material.SetMatrix("_ViewProjectionInverseMatrix",(Camera.cameraToWorldMatrix*Camera.projectionMatrix).inverse);

			material.SetFloat("_density",density);
			material.SetFloat("_fogEnd",fogEnd);
			material.SetFloat("_fogStart",fogStart);
			material.SetColor("_fogColor",fogcorlor);
			material.SetFloat("_fogSpeedX",FogSpeedX);
			material.SetFloat("_fogSpeedY",FogSpeedY);
			material.SetFloat("_NoiseAmount",NoiseAmount);
			material.SetTexture("_NoiseTex",NoiseTexture);
			 
			Graphics.Blit(src,dest,material);
		}

CheckShaderAndCreateMaterial 函数会检查该材质是否拥有该shader,如果不是就使用该shader创建一个材质球。

解析

halfHeight的计算 ，tan(FOV/2)*near ,也就是toTop的绝对值。
tan公式是 对边/领边，fov 也就是视野最下面的三角形的角度，
在这里插入图片描述

FOV

什么是FOV
在这里插入图片描述

near

near是
相对的Far就是 到远裁剪面的距离；
参考基础知识 第四章p78
在这里插入图片描述
根据 tan的 计算， 对边就是 halfheight， tan(fov/2)实际上就是 halfheight/near,为了得到 halfheight，只需要*上 near 即可；
toRight的计算可以 根据 相机的宽高比得到。其余的 剩下 就比较好求了。

近似原理

但是得到的并不是点到摄像机的欧式距离，而是在z方向上的距离。但是可以根据三角形的相似原理得到。 TL,TR,BL,BR,四个点是互相对称的，也就是说它们的长度是相等的。
这里是引用
在这里插入图片描述得到scale

这里就得到了 scale =|TL| / Near

使用Normalize得到单位向量；
因此在上面的代码中求 scale 以TL的长度/near得到 scale。

在这里插入图片描述

最后求得这个四个角对应的变量并把它们存储在一个矩阵类型的变量中；
然后传递所需要的参数；

Shader "Custom/FogWithDepthTexture" 
{
   	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_density ("Fog Density", Float) = 1.0
		_fogColor ("Fog Color", Color) = (1, 1, 1, 1)
		_fogStart ("Fog Start", Float) = 0.0
		_fogEnd ("Fog End", Float) = 1.0
		_fogSpeedX("_fogSpeedX",Float)=1
		_fogSpeedY("_fogSpeedY",Float)=1
		_NoiseAmount("NoiseAmount",float)=1
		_NoiseTex("NoiseTex",2D)=""{}
	}
	SubShader {
		CGINCLUDE
		
		#include "UnityCG.cginc"
		
		float4x4 _FrustumConrners;
		
		sampler2D _MainTex;
		half4 _MainTex_TexelSize;
		sampler2D _CameraDepthTexture;
		sampler2D _NoiseTex;
		float4 _NoiseTex_ST;
		half _density;
		fixed4 _fogColor;
		float _fogStart;
		float _fogSpeedX;
		float _fogSpeedY;
		float _NoiseAmount;
		float _fogEnd;
		
		struct v2f {
			float4 pos : SV_POSITION;
			half2 uv : TEXCOORD0;
			half2 uv_depth : TEXCOORD1;
			float4 interpolatedRay : TEXCOORD2;
		};
		
		v2f vert(appdata_img v) {
			v2f o;
			o.pos = UnityObjectToClipPos(v.vertex);
			
			o.uv = v.texcoord;
			o.uv_depth = v.texcoord;
			
			#if UNITY_UV_STARTS_AT_TOP
			if (_MainTex_TexelSize.y < 0)
				o.uv_depth.y = 1 - o.uv_depth.y;
			#endif
			
			int index = 0;
			if (v.texcoord.x < 0.5 && v.texcoord.y < 0.5) {
				index = 0;
			} else if (v.texcoord.x > 0.5 && v.texcoord.y < 0.5) {
				index = 1;
			} else if (v.texcoord.x > 0.5 && v.texcoord.y > 0.5) {
				index = 2;
			} else {
				index = 3;
			}

			#if UNITY_UV_STARTS_AT_TOP
			if (_MainTex_TexelSize.y < 0)
				index = 3 - index;
			#endif
			
			o.interpolatedRay = _FrustumConrners[index];
				 	 
			return o;
		}
		
		fixed4 frag(v2f i) : SV_Target {
			float linearDepth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth));
			float3 worldPos = _WorldSpaceCameraPos + linearDepth * i.interpolatedRay.xyz;

			float2 speed=_Time.y*float2(_fogSpeedX,_fogSpeedY);
			float noise=(tex2D(_NoiseTex,i.uv+speed).r-0.5)*_NoiseAmount;

			float fogDensity = (_fogEnd - worldPos.y) / (_fogEnd - _fogStart); 
			fogDensity = saturate(fogDensity * _density*(1+noise));
			
			fixed4 finalColor = tex2D(_MainTex, i.uv);
			finalColor.rgba = lerp(finalColor.rgba, _fogColor.rgba, fogDensity);
			
			return finalColor;
		}
		
		ENDCG
		
		Pass {
			ZTest Always Cull Off ZWrite Off
			     	
			CGPROGRAM  
			
			#pragma vertex vert  
			#pragma fragment frag  
			  
			ENDCG  
		}
	} 
	FallBack Off
}

在vert 中通过 0.5 (原点)来判断它们的方位，分别对应在CS脚本中构建矩阵的点。分别是左下，右下，右上，左上；
UNITY_UV_STARTS_AT_TOP 这个是Unity的宏定义，判断平台是 UV不不是 从上开始的渲染的，这个主要是因为平台差异性，Dx是从上往下，而OpenGL是从下往上；因此需要水平翻转下。

在片元着色器中
SAMPLE_DEPTH_TEXTURE（）从相机深度纹理中进行采样得到 深度值，但得到是非线性的，因此
使用LinearEyeDepth 得到线性深度值；

接着 就可以根据那个原理计算 世界坐标了；
在这里插入图片描述

雾的计算公式

基于高度的雾的计算公式

在这里插入图片描述

float2 speed=_Time.yfloat2(_fogSpeedX,_fogSpeedY)
使用 _Time 内置时间 变量和 自带的参数 来控制速度
float noise=(tex2D(_NoiseTex,i.uv+speed).r-0.5)_NoiseAmount;
从噪音贴图上进行 采样，使用R通道来进行 计算；noise系数；

fogDensity = saturate(fogDensity * _density*(1+noise)); 计算浓度
作为 混合 系数；
fixed4 finalColor = tex2D(_MainTex, i.uv);
finalColor.rgba = lerp(finalColor.rgba, _fogColor.rgba, fogDensity);
最后进行混合得到 最终效果。

zebintang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity 全局雾效Shader：基于摄像机距离的雾效渲染
q568360447的博客
12-14 4717
写在前面的话： 这个雾效大部分代码源自 冯乐乐的书籍：Unity shader 入门精要。 在书中的示例代码中，主要基于了屏幕高度，而对屏幕进行雾效的渲染。我将其中的部分shader代码修改后，实现了基于摄像机距离的雾效渲染。先解释雾效shader代码的原理： 雾效的实现是基于屏幕后处理，即在摄像机上挂一个脚本，这个脚本中执行OnRenderImage函数，对摄像机所渲
初探雾效果！shader 源码分析与讲解！ Cocos Creator 3D Shader Fog !
白玉无冰
09-10 554
随便讲讲雾的原理以及旧版本的使用雾的方法。效果原理雾效(fog)是游戏中常用的一种效果，根据远近产生不同的深度的雾效果。这个效果涉及两个关键字。距离颜色在着色器中，雾效的距离，一般转换成...
unity雾shader
博客
05-25 756
Shader "Custom/fogTest" { Properties { [Header(Textures and color)] [Space] _MainTex ("Fog texture", 2D) = "white" {} [NoScaleOffset] _Mask ("Mask", 2D) = "white" {} _Color ("Color", color) = (1., 1., 1., 1..
Unity3D简单体积雾的shader实现
o83290102o5的博客
04-12 4155
体积雾 普通雾的实现是在每个着色器(例如unity 的stanard着色器)中都添加一段雾的代码，然后根据顶点离摄像机的距离来覆盖一层颜色达到一种雾的效果。而体积雾是一个有体积的雾，其本身是一个对象，在场景的中空区域也可以有雾的效果。 两者主要区别如下: 1.普通雾需要更改所有的着色器，而体积雾只用为体积雾对象写一个着色器。 2.普通雾可以看成是一层纹理贴在场景的物体上，而体积雾本身具有体积，在普通雾覆盖不到的地方(比如没有任何物体的空场景)，也可以添加雾的效果。 实现思路 用来生成体积雾的模型一般都是简单
Unity shader中的雾效果pragma multi_compile_fog
eevee_1的博客
05-08 3301
虽然Fog用的极少，但官方Shader中总能看到其身影(毕竟人家要适配的是不)，因此本文讨论一下Unity中的雾效果，及其相关用法。 一.雾开启设置 使用Unity官方的雾效果，需要在Window-Rendering-Lighting-Environment打开设置面板，勾选Fog开启雾效果： image.png 如果效果不太明显可以调节一下参数，开启前后场景(默认材质)如下： i...
V-RAY渲染器学习总结.pdf
11-15
V-RAY渲染器是一款强大的渲染工具，广泛应用于建筑、室内设计、产品设计等领域，以其高质量的渲染效果和高效的计算能力著称。本文将深入解析V-RAY渲染器的一些核心设置和功能。 首先，我们来看帧缓冲器的设置。帧...
AngularJS监听ng-repeat渲染完成的两种方法
10-18
主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下
微信小程序-模版渲染
03-29
模版渲染  index.wxml   <p>{{helloWord}} 其中{{}}里面包含的内容你可以理解为一个变量，怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 免责声明：本站所有文章和图片均来自用户分享和网络...
【OpenHarmony】ArkTS 语法基础 ④ ( ArkTS UI 渲染控制 - 条件渲染 - 循环渲染 )
最新发布
06-04
【OpenHarmony】ArkTS 语法基础 ④ ( ArkTS UI 渲染控制 | if else 条件渲染 | ForEach 循环渲染 ) https://hanshuliang.blog.csdn.net/article/details/139441781 博客源码快照 一、ArkTS UI 渲染控制 1、if else ...
React-reactrendervisualizerReactJS渲染可视化工具
08-14
4. **学习React生命周期**：直观地理解不同生命周期方法（如`componentDidMount`, `componentDidUpdate`, `getDerivedStateFromProps`等）的执行顺序。 要使用React Render Visualizer，你需要将它集成到你的React...
雾效在自定义Shader中的运用
iamlegendary的博客
02-25 650
一.介绍Three.js中的Fog 雾在生活场景中的使用其实非常广泛,比如我们去看秋天的晨雾,公路的尽头,远处的海面时，远处的景色总是要模糊一些不如近景那么清晰那么亮，这将在计算机中怎么表现呢？然后就衍生处了Fog这个类。 Fog这个类包含定义线性雾的参数,也就是说,密度随着距离的增加呈线性增长 构造器Fog(hex, near, far) 这个hex参数被传递给 Color 构造函数来设置颜色属性。hex是一个十六进制整数或CSS样式的字符串 属性 cocol 雾的颜色。比如：如何设置为黑色,远处的物体将
Unity5 雾化效果（一）
玉雪逐梅的博客
03-13 5918
雾化效果是很多3d游戏不可缺少的一部分，精美的雾化效果会使得游戏有质的的提升。Unity5中的全局雾化效果实现比较简单。Unity老版本将全局雾化设置放在了Rendering Settings中，而在Unity5中，Rendering Settings相关被集成到了Lighting中。     点击Window->Lighting，弹出Lighting面板。在Scene中有Fog设置，包括雾的颜
[图像处理] 利用PerlinNoise实现图像雾化效果 - 附我的图像处理程序（三种特效）
RyuZhihao123 的博客
07-02 6810
时间：2017年7月2日（大三下学期） 写在前面：         最近觉得Steam的软件界面非常的美观，尤其是图片的渐隐、雾化效果看起来非常漂亮。无奈我PS技术不行，手笨做不出那样的效果…… 于是，我就自己写了一款方便高效的图像处理程序，只需设置相应的参数即可完成处理（懒人模式）。如果点入的读者只是为了使用程序，那么可以无视我下面啰啰嗦嗦的科普，通过下面的链接，就获取到我的打包程序
OpenGL（十五）雾效 的 shader 实现
阿修罗道
01-29 4080
雾效 可以表现出一个线性的颜色变化，常用于烘托场景气氛。这种效果的实现原理并不复杂，本文着重讨论如何通过shader编写完成雾效的实现。核心原理雾效 的核心在于：计算视点与物体之间的距离，然后根据一个衰减公式进行颜色混合。常规的算法有线性衰减，指数衰减，指数幂衰减。线性雾效使用线性差值衰减，即可达到这种 雾效 。示意图如下：对应shader如下：//vs varying vec3 V_Normal
[siggraph14]《刺客信条》的高级大气雾效渲染技术
安柏霖的专栏
07-01 4472
基于物理的，把atmosphere scattering，光照和阴影结合起来，把雾效和光照表达的非常好，应该说是目前顶尖实现了。
Unity 渲染教程（十四）：雾
wenzhilu的博客
09-21 3349
原文出处： http://gad.qq.com/program/translateview/7200863 这是关于渲染基础的系列教程的第十四部分。在前面的部分里我们介绍了延迟渲染。这一次我们将在场景中加上雾。 这个教程是使用Unity 5.5.0f3开发的。   物体往往随着距离的增长而发生褪色。 前向渲染中的雾 到目前为止，我们一直把光线看作是在真空进行传输的。当你的场
体积雾shader
afteryunlei的专栏
04-23 4532
全局雾很简单，在unity里只需要一个选项即可，可是它不能控制局部地区的雾化效果。所以有”Volume Fog”这种shader，网上搜了很久，只有一个比较满意：www.youtube.com/watch?v=HPo2gfy675o，可是要卖50刀（站长看看有没有意愿团一个？~~） 算了，自己动手，再次硬着头皮上了，为此我还狠心买了《GPU Gems》全套，既然目前我都在研究游戏里的特效实现
使用着色器模拟雾效果
专注图形三十年
11-18 2102
上一篇关于天空盒的blog谈到了雾效果,那么这次来讨论一下用着色器实现雾效果的具体实现方法. 雾在大自然中是一种常见的天气现象,比如清晨时分在山上就能看到这种效果.我们可以使用OpenGL轻松地模拟出来,使用固定管线设置GL_FOG_COLOR,GL_FOG_DENSITY,GL_FOG_START,GL_FOG_END,GL_FOG_MODE等GL_FOG系列参数,然后调用glEnable
【Unity Shaders】Unity里的雾效模拟
weixin_33726318的博客
11-29 2038
写在前面熟悉Unity的都知道，Unity可以进行基本的雾效模拟。所谓雾效，就是在远离我们视角的方向上，物体看起来像被蒙上了某种颜色（通常是灰色）。这种技术的实现实际上非常简单，就是根据物体距离摄像机的远近，来混合雾的颜色和物体本身的颜色即可。Unity里设置雾效有两种方式，一种最简单的就是直接开启全局雾效，也就是在Edit->Render Settings里配置，如下图所示：而我们只需...
V-RAY渲染器学习详解：材质、灯光与全局设置
"V-RAY渲染器学习总结.pdf" V-Ray是一款强大的渲染引擎，广泛应用于建筑可视化、产品设计、电影和电视等行业。以下是对V-Ray渲染器各方面的详细解释： 一、帧缓冲器 帧缓冲器是V-Ray渲染过程中的关键部分，它负责...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值