着色器中的Voronoi(泰森多边形)



↑canvas 可以直接F12查看webgl代码
↓右键 查看图像


Voronoi的基本思路是:屏幕上有若干点,计算屏幕上的像素到最近的点的距离。


这样遍历计算所有点比较是一个简单可行的办法,但是会有一些缺陷。
1.计算量大,每一个点都需要所有像素计算一遍在比较;
2.在uv上不连续,假如所有点都在uv范围0-1内的话超出1的区域就失去了voronoi的效果,强行修改uv也会有不连续、重复、镜像之类的问题(别问我怎么知道的);


为了节约计算
我们利用floor(uv*n)将1单位的uv空间切分成n*n份cell;
然后用这个值作为hash2函数的输入,目的是为了得到一个随机的0~1的二维数;(关于hash2玩shadertoy的人应该比较熟悉,我们这里其实只计算一次,所以也可以通过采样一张noise图来代替)
我们可以把这个随机的二维数当作在每个cell里面有一个点的位置,这样再用uv的坐标减去点的位置就得到了本cell里的这个点到cell内的像素距离(每个cell内像素仅计算了到本cell内点的距离),在计算向量大小就得到距离;
对于每个像素(例如红色区域)来说,只需要考虑自身加上周围8个cell的点的计算,这样我们仅计算9次再比较取最小值,因为hash2我们在每个cell上都取到不同值也避免了uv连续的重复;具体图示及代码如下: