unity urp 实现泰森多边形Voronoi扰动

Posted 2023-02-22 暮志未晚Webgl

泰森多边形又叫冯洛诺伊图（Voronoi diagram），得名于Georgy Voronoi，是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。
-摘自百度百科

这里提供了一个简单的方式实现，那就是用ase，设置节点，然后查看源码，把代码扒出来即可。
既省时又省力，接下来看我怎么实现的：
首先，连连看：

我们可以实时的看到生成 的效果，方便又好用，果然可视化才是未来。
连入uv，Angle可以通过值去修改生成的noise的结果。
Scale可以修改结果的密度，上图是缩放5，我们看一下50的效果：

在输出端，我们可以使用三种结果，一种是生成的黑白图，就是Out节点的输出：

这是一种有过渡的黑白图，有明显的多边形结构。
还有一种就是上面的ID颜色。
最后一种就是UV

感觉uv可以做那种凸起的感觉。

它还可以修改计算方法，以及生成的结果的过渡的效果修改，如果你需要的密度点的话，这些就无所谓了。

上面是Method修改成Caustic以后的效果，明显和之前的不一样了。这个效果是不是特别像水面上面的那种波光粼粼的效果，可以用这种叠在水面上面，增加水面的效果。

那么，下面到重头戏了，如果我只需要这部分代码怎么办。
那么我们就先吧Voronoi节点调整好，调出自己需要的效果，然后打开代码。

float2 voronoihash6( float2 p )

	
	p = float2( dot( p, float2( 127.1, 311.7 ) ), dot( p, float2( 269.5, 183.3 ) ) );
	return frac( sin( p ) *43758.5453);


float voronoi6( float2 v, float time, inout float2 id, inout float2 mr, float smoothness )

	float2 n = floor( v );
	float2 f = frac( v );
	float F1 = 8.0;
	float F2 = 8.0; float2 mg = 0;
	for ( int j = -1; j <= 1; j++ )
	
		for ( int i = -1; i <= 1; i++ )
	 	
	 		float2 g = float2( i, j );
	 		float2 o = voronoihash6( n + g );
			o = ( sin( time + o * 6.2831 ) * 0.5 + 0.5 ); float2 r = f - g - o;
			float d = 0.5 * dot( r, r );
	 		if( d<F1 ) 
	 			F2 = F1;
	 			F1 = d; mg = g; mr = r; id = o;
	 		 else if( d<F2 ) 
	 			F2 = d;
	 		
	 	
	
	return F1;

经过你的努力翻找，你会在代码中找到它生成的voronoi函数，复制出来用即可。
如果不知道传入什么值

float time6 = _Angle;
float2 texCoord12 = IN.ase_texcoord3.xy * float2( 1,1 ) + float2( 0,0 );
float2 coords6 = texCoord12 * _Scale;
float2 id6 = 0;
float2 uv6 = 0;
float voroi6 = voronoi6( coords6, time6, id6, uv6, 0 );
float3 temp_cast_0 = (( voroi6 + 0.0 )).xxx;

你继续翻找，会找到相关调用的地方。可以看到，它支持5个参数，第一个是uv，直接和你设置的scale的值相乘了，第二个值传入了扰动值，第3个是id，这个是inout的，代表着函数运行以后，你声明的id也将会被修改掉，uv也是同理，它们的声明也是为了获取运算后的结果。并且这个还支持了光滑度，默认是0，感觉这个可以勉强作为mipmap使用。比如你不想使用noise贴图，想自己生成，这种是没有mipmap的，我们可以用这个实现一种mipmap的效果。