永远相信美好的事情即将发生 😊!

闪光镂空全球地图效果实现(URP)

作品 Mavis 29℃ 0评论

算是个比较简单的shader了,之前一直在学卡通渲染和一些图形学的知识,想着该自己做些东西出来了,就从简单一点的开始吧!

先来个最终效果图:

需要的素材:

我用的是URP,不是bulit-in RP ,涉及内容很简单,就一个片元的剔除。

首先是要实现在uv上周期性的剔除片元,让连续的图片变成不连续的矩形:

if(!(sin((input.uv.x)/(_X_Granularity*0.001))<0 && sin((input.uv.y)/(_Y_Granularity*0.001))<0 ) )
{
		discard;
}

当_X_Granularity 和_Y_Granularity 取5时可以得到效果(在原图的基础上加了个纯色):

然后再做一个透明度测试剔除片元

clip (texColor.a - _AlphaCutoff);//小于_AlphaCutoff的片元将被舍去

之后把相机中环境的天空盒改成纯色:

再为相机加上一个bloom的后处理效果:

然后就可以得到比较好看的效果了:

在场景中将物体旋转一下,然后加个脚本让它一直转:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Rotate : MonoBehaviour
{
    public int Speed = 40;
    // Update is called once per frame
    void Update()
    {
        transform.Rotate(Vector3.up, Speed * Time.deltaTime);
    }
}

基本就可以得到最终的效果了,但是在粒度比较小的时候,会出现比较严重的摩尔纹,查了一下该怎么处理,还没看太多文章,貌似是因为太整齐引起的,所以就在用uv周期性剔除片元的时候加上了噪声

float noise = SAMPLE_TEXTURE2D(_Noise, sampler_Noise, input.uv).r;
if(!(sin((input.uv.x+noise)/(_X_Granularity*0.001))<0 && sin((input.uv.y+noise)/(_Y_Granularity*0.001))<0 ) )
{
		discard;
}

粒度为0.1时的图:

加上噪声后:

emmmmm,这不是我想要的结果,但是目前还没查到更多的资料,还有待改进,本来想要整齐一点的效果,但是朋友说这个效果像老式电视机的效果……

貌似这个解释还不错,果然渲染总能得到一些意想不到的效果,以及如何合理化这些效果让自己接受是个学问。

shader源码:

Shader "Earth"
{
	Properties{
		_Color("Color Tint",color)=(1,1,1,1)
		_BaseMap ("BaseMap", 2D) = "white" {}
		_AlphaCutoff("Alpha CutOff",Range(0,1))=0.5
		_X_Granularity("X Granularity",float)=1
		_Y_Granularity("Y Granularity",float)=1
		_Noise("Noise",2D)="white"{}
	}
	SubShader{
		Tags{"Queue"="AlphaTest" "RenderPipeline" = "UniversalPipeline" "IgnoreProjector"="True" "RenderType"="TransparentCutout"}
		HLSLINCLUDE
			#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
      #include "Packages/com.unity.render-pipelines.core/ShaderLibrary/CommonMaterial.hlsl"
      #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl"
			CBUFFER_START(UnityPerMaterial)
				float4 _Color;
				float _AlphaCutoff;
				float _X_Granularity;
				float _Y_Granularity;
			CBUFFER_END
			TEXTURE2D(_BaseMap);       SAMPLER(sampler_BaseMap);
			TEXTURE2D(_Noise);         SAMPLER(sampler_Noise);
		  struct Attributes{
           float4 positionOS : POSITION;
           float4 texcoord : TEXCOORD;
      };
      struct Varyings{
				   float4 positionCS : SV_POSITION;
				   float2 uv : TEXCOORD0;
      };
		ENDHLSL
		Pass{
			Tags{"LightMode" = "UniversalForward"}   
			Cull off
			ZWrite On
			HLSLPROGRAM
      #pragma vertex vert 
      #pragma fragment frag 
			Varyings vert(Attributes input)
			{
				Varyings output;
				VertexPositionInputs vertexInput = GetVertexPositionInputs(input.positionOS.xyz);
        output.positionCS = vertexInput.positionCS;
        output.uv= input.texcoord.xy;
        return output;
			}
			float4 frag(Varyings input): SV_Target
			{
				float noise = SAMPLE_TEXTURE2D(_Noise, sampler_Noise, input.uv).r;
				if(!(sin((input.uv.x+noise)/(_X_Granularity*0.001))<0 && sin((input.uv.y+noise)/(_Y_Granularity*0.001))<0 ) )
				{
					discard;
				}
				float4 texColor = SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, input.uv);
				// Alpha test
				clip (texColor.a - _AlphaCutoff);
				float4 albedo =  texColor * _Color;
				return albedo;
			}
			ENDHLSL
		}
	}
    Fallback "Universal Render Pipeline/Lit"
}

M·M明天还是要继续努力啊,要学到更多的知识,做出更多好看炫酷的效果!!


Mavis , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:闪光镂空全球地图效果实现(URP)
喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址