当前位置：首页>前端>正文

threejs 辉光效果demo unity辉光

前端2024-05-05 16:18:31

题外话：关于黑色和白色在计算机中的颜色占比
黑色RBG=（0,0,0）、白色RBG=（1,1,1）
在现实生活中黑色吸收所有光，即所有光都不反射，因为本身的其RGB的颜色组成都是0；
白色反射所有光，即所有光都反射，因为本身的其RGB的颜色组成都是1。

进入正题
原理：
辉光的实现可以拆分成两部分：
1、原来比较亮的地方更亮
2、原来亮的地方附近也变亮
用纯数学的方式去表达就是：
1、更亮即 luminance =0.2125 * r + 0.7154 * g + 0.0721 * b 得到的值更大
2、附近也亮即亮点附近的点也变得更亮，这里我们可以使用高斯模糊来实现（高斯模糊是采样附近的点来求得当前点，因此当附近的点较亮时，当前点也会变亮，并且渐进效果好）

Shader代码如下

Shader "Unity Shaders Book/Chapter 12/Bloom" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Bloom ("Bloom (RGB)", 2D) = "black" {}
		_LuminanceThreshold ("Luminance Threshold", Float) = 0.5 //亮度阈值（门槛）
		_BlurSize ("Blur Size", Float) = 1.0
	}
	CGINCLUDE
	
	#include "UnityCG.cginc"
	
	sampler2D _MainTex;
	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 : TEXCOORD0;
	};
	
	v2fBloom vertBloom(appdata_img v) {
		v2fBloom o;
		
		o.pos = UnityObjectToClipPos (v.vertex);
		o.uv.xy = v.texcoord;		
		o.uv.zw = v.texcoord;
		
		// UNITY_UV_STARTS_AT_TOP 所在的平台是使用Direct3D 纹理坐标是跟OpenGL相反的
		//因此要做一次 “1-”
		#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
	
	SubShader 
	{
		ZTest Always Cull Off ZWrite Off
		
		Pass {  
			CGPROGRAM  
			#pragma vertex vertExtractBright  
			#pragma fragment fragExtractBright  
			
			ENDCG  
		}
		//之前命名Pass的作用就是可以重复利用
		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  
		}
	}
	FallBack Off
}

C#的部分代码

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;
			
			Graphics.Blit(src, buffer0, material, 0);
			
			for (int i = 0; i < iterations; i++) {
				material.SetFloat("_BlurSize", 1.0f + i * blurSpread);
				
				RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
				
				// Render the vertical pass
				Graphics.Blit(buffer0, buffer1, material, 1);
				
				RenderTexture.ReleaseTemporary(buffer0);
				buffer0 = buffer1;
				buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
				
				// Render the horizontal pass
				Graphics.Blit(buffer0, buffer1, material, 2);
				
				RenderTexture.ReleaseTemporary(buffer0);
				buffer0 = buffer1;
			}

			if (notMerge==false)
			{
				material.SetTexture ("_Bloom", buffer0);  
				Graphics.Blit (src, dest, material, 3); 
			}
			else
			{
				Graphics.Blit(buffer0, dest);
			} 
			RenderTexture.ReleaseTemporary(buffer0);
		} else {
			Graphics.Blit(src, dest);
		}
	}

Shader部分代码解析：

在SubShader中有 4个Pass

第一个Pass：利用阈值筛选出需要辉光的点，如果比阈值小， return c * val 在这一步会变成 0，也就是黑色

第二第三个Pass：是上一篇的高斯模糊一样的代码，因为在之前的shader中命名了该Pass，在这里可以直接使用，使用规则如下面两图

第四个Pass：将原图与高斯模糊后的图片进行叠加

threejs 辉光效果demo unity辉光,threejs 辉光效果demo unity辉光_unity3d,第1张