unity3d shader之God Ray上帝之光
又是一个post-process后期效果,god ray 上帝之光,说起上帝之光就是咱们再看太阳时太阳周围一圈的针状光芒
先放组效果,本文的场景资源均来自浅墨大神,效果为本文shader效果
加入了前篇HDR和Bloom,效果大增:链接
本文的代码是来自unity圣典中某大神的分享,博主做了小小的改进 链接
然后就来做下讲解,共有两个shader,一个负责制造ray,一个负责和原屏幕图像混合,于原屏幕图像混合很简单,就是单纯的把两个图像的颜色叠加,控制一下ray的权重,
接下来我们着重讲解一下,制造ray的shader
是一个fragement shader
共有4个外部变量
_ScreenLightPos屏幕上光线的位置,这个需要在c#脚本中计算并传出,稍后会讲解
_Density密度
_Decay衰减
_Exposure曝光,用来控制亮度,大家都知道,在相机中,曝光时间越长图像越亮
先看vertex shader
v2f vert(v2in v) { v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); half2 texCoord = v.texcoord; half2 deltaTexCoord = texCoord - _ScreenLightPos.xy; deltaTexCoord *= 1.0f / 8 * _Density; texCoord -= deltaTexCoord; o.uv0 = texCoord; texCoord -= deltaTexCoord; o.uv1 = texCoord; texCoord -= deltaTexCoord; o.uv2 = texCoord; texCoord -= deltaTexCoord; o.uv3 = texCoord; texCoord -= deltaTexCoord; o.uv4 = texCoord; texCoord -= deltaTexCoord; o.uv5 = texCoord; texCoord -= deltaTexCoord; o.uv6 = texCoord; texCoord -= deltaTexCoord; o.uv7 = texCoord; return o; }
v.texcoord为当前点的坐标
deltaTexCoord为当前点对光源点的反向向量,长度为两点间距离
密度越大deltaTexCoord越大,不超过8,deltaTexCoord始终是个分数
第一个采样点为此处本来位置
采样点渐渐接进光源处
_Density越大采样点间距越大
从0到7,点的位置从光源处越来越近,离此处点越来越远
看看我们的v2f结构体,存了多少坐标点
struct v2f { float4 pos : POSITION; float2 uv0 : TEXCOORD0; float2 uv1 : TEXCOORD1; float2 uv2 : TEXCOORD2; float2 uv3 : TEXCOORD3; float2 uv4 : TEXCOORD4; float2 uv5 : TEXCOORD5; float2 uv6 : TEXCOORD6; float2 uv7 : TEXCOORD7; };
传入值的结构体v2in
struct v2in { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; };
我们就得到了当前点到光源点的一条直线中的八个点的坐标,为fragement shader取色混色用
当然本步骤也可在fragement shader中完成,但效率没有vertex shader好,因为不用每个像素都取样,只是每个顶点取样就好
再看fragement shader
half4 frag(v2f i) : COLOR { half illuminationDecay = 1.0f; half4 color = tex2D(_MainTex, i.uv0)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv1)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv2)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv3)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv4)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv5)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv6)*illuminationDecay; illuminationDecay *= _Decay; color += tex2D(_MainTex, i.uv7)*illuminationDecay; color /= 8; return half4(color.xyz * _Exposure, 1); }
illuminationDecay光照衰减,_Decay是我们外部可控衰减
_Exposure增加亮度
调整比重离此处像素点越远也就是离光源越近越衰减,可能有人会问,为什么会这样?因为我们还是要保留大部分为此处点的颜色,如果其他像素权重过大,则会造成此处点颜色不准确,甚至不好的模糊效果。
然后就是混色,基本上的原理就是从光源处打出无数条射线,嗯,可以这么理解。
Ray我们就制造好了,接下来我们需要把光线ray与原屏幕图像混合,这一步就比较简单了,只给出源代码,各位自己意会。
Shader "Custom/god ray 2 blend" { Properties{ _MainTex("Base (RGB)", 2D) = "" {} _GodRayTex ("God (RGB)", 2D) = ""{} _Alpha("_Alpha", Float) = 0.5 } // Shader code pasted into all further CGPROGRAM blocks CGINCLUDE #include "UnityCG.cginc" struct v2in { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; }; struct v2f { float4 pos : POSITION; float2 uv : TEXCOORD0; }; sampler2D _MainTex; sampler2D _GodRayTex; uniform float _Alpha; v2f vert(v2in v) { v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); o.uv = v.texcoord; return o; } half4 frag(v2f i) : COLOR { half4 color = tex2D(_MainTex, i.uv) + tex2D(_GodRayTex, i.uv)*_Alpha; //half4 color = tex2D(_MainTex, i.uv); return color; } ENDCG Subshader{ Tags{ "Queue" = "Transparent" } Pass{ ZWrite Off BindChannels { Bind "Vertex", vertex Bind "texcoord", texcoord0 Bind "texcoord1", texcoord1 } Fog{ Mode off } CGPROGRAM #pragma fragmentoption ARB_precision_hint_fastest #pragma vertex vert #pragma fragment frag ENDCG } } Fallback off } // shader
然后就是最后一步,也是十分重要的一步就是通过脚本把它弄到屏幕上,
此处的要点就是要求出光源在屏幕中的位置,
Camera类中有这么一个函数可以把世界坐标转换为屏幕坐标
Camera.WorldToScreenPoint(position)
官网介绍如下
Transforms position from world space into screen space.
把position从世界坐标转换为屏幕坐标
Screenspace
is defined in pixels. The bottom-left of the screen is (0,0); the
right-top is (pixelWidth,pixelHeight). The z position is in world units
from the camera.
左下角是屏幕坐标系的原点,右上角是屏幕的最大范围,超出这个范围的光源我们都不进行god ray渲染了,以此作为判断,否则就会进行错误渲染,屏幕超出光照范围了仍在闪烁。
我们把光源的transport传入脚本,然后检验光源的position
另
外还有重要一点就是判断光源在相机前面还是在后面,如果只判断是否在屏幕内的话,相机转到光源后面也会被渲染god
ray,解决方法在此,WorldToScreenPoint返回的z值为世界空间内光源与相机的距离,为矢量,所以我们就能用z值正负来判断前后了,为
正则光源在相机前可渲染god ray,为负则光源在相机后不可渲染god ray
if (lightScreenPos.z > 0
&& lightScreenPos.x > 0 && lightScreenPos.x <
camera.pixelWidth && lightScreenPos.y >0 &&
lightScreenPos.y < camera.pixelHeight)
其实就这么渲染也可以,但是效果并不好,god ray变成了“god point”,原因刚才分析的,shader的原理是取点到光源的八个点,那渲染的结果也就是出现了好多点,层次很分明,就是因为之混乱和了那8次,解决方式就是多次渲染,点多了,就变成线了
我们要想使效果更好一点就要多次渲染
建立两个renderTexure tempRtA和tempRtB用来互相传值
Graphics.Blit(sourceTexture, tempRtA, material);
第一次过滤结果存在tempRtA
传到下一次渲染做_MainTex
Graphics.Blit(tempRtA, tempRtB, material);
再传出tempRtB到第三次渲染,再传出tempRtA。。。
Graphics.Blit(tempRtB, tempRtA, material);
Graphics.Blit(tempRtA, tempRtB, material);
Graphics.Blit(tempRtB, tempRtA, material);
最后做混合,把ray texture传到blend shader作为GodRayTex。然后得到最终结果
materialBlend.SetTexture("_GodRayTex", tempRtA);
Graphics.Blit(sourceTexture, destTexture, materialBlend, 0);
代码如下:
using UnityEngine; using System.Collections; [ExecuteInEditMode] public class godRay2 : MonoBehaviour { public Transform lightpos; public Shader curShader; public Shader curShaderblend; private Material curMaterial; private Material curMateriaBlend; public Vector4 ScreenLightPos = new Vector4(0, 0, 0, 0); public float Density = 0.01f; public float Decay = 0.5f; public float Exposure = 0.5f; public float Alpha = 1; public RenderTexture tempRtA = null; public RenderTexture tempRtB = null; private Vector3 lightScreenPos; #region Properties Material material { get { if (curMaterial == null) { curMaterial = new Material(curShader); curMaterial.hideFlags = HideFlags.HideAndDontSave; } return curMaterial; } } Material materialBlend { get { if (curMateriaBlend == null) { curMateriaBlend = new Material(curShaderblend); curMateriaBlend.hideFlags = HideFlags.HideAndDontSave; } return curMateriaBlend; } } #endregion void Start() { if (!SystemInfo.supportsImageEffects) { enabled = false; return; } if (!curShader && !curShader.isSupported) { enabled = false; } } void OnRenderImage(RenderTexture sourceTexture, RenderTexture destTexture) { if (curShader != null) { lightScreenPos = Camera.main.WorldToScreenPoint(lightpos.position); if (lightScreenPos.z > 0 && lightScreenPos.x > 0 && lightScreenPos.x < camera.pixelWidth && lightScreenPos.y > 0 && lightScreenPos.y < camera.pixelHeight) { material.SetVector("ScreenLightPos", new Vector4(lightScreenPos.x / camera.pixelWidth, lightScreenPos.y / camera.pixelHeight, 0, 0)); // material.SetVector("ScreenLightPos", ScreenLightPos); material.SetFloat("Density", Density); material.SetFloat("Decay", Decay); material.SetFloat("Exposure", Exposure); materialBlend.SetFloat("Alpha", Alpha); CreateBuffers(); Graphics.Blit(sourceTexture, tempRtA, material); Graphics.Blit(tempRtA, tempRtB, material); Graphics.Blit(tempRtB, tempRtA, material); Graphics.Blit(tempRtA, tempRtB, material); Graphics.Blit(tempRtB, tempRtA, material); materialBlend.SetTexture("_GodRayTex", tempRtA); Graphics.Blit(sourceTexture, destTexture, materialBlend, 0); // Graphics.Blit(tempRtA, destTexture, material, 0); } else { Graphics.Blit(sourceTexture, destTexture); } } else { Graphics.Blit(sourceTexture, destTexture); } } void CreateBuffers() { if (!tempRtA) { tempRtA = new RenderTexture(Screen.width / 4, Screen.height / 4, 0); tempRtA.hideFlags = HideFlags.DontSave; } if (!tempRtB) { tempRtB = new RenderTexture(Screen.width / 4, Screen.height / 4, 0); tempRtB.hideFlags = HideFlags.DontSave; } } void OnDisable() { if (curMaterial) { DestroyImmediate(curMaterial); } } }
本shader有几个缺点,在比较暗的场景不要使用,因为光源处不亮,所以效果不好,Ray的质量不高,从例子就可以看出来,Ray很不清晰,此处可以和Unity ImageEffect的Sun shafts作比较
最后放上两组效果
林中闪耀的光芒
------ by wolf96