求助:如何使用shader把一张图片切割成碎图,类似于拼图效果

image

这个图片,网上不是有教程么

有没有链接呢,能发一个看看吗

这个是mask做的,有没有shader的呢

大哥有思路了嘛

1用shader做出这些形状,正经的做法是用sdf来描述形状。拼图一般用一个矩形+两三个圆组合即可。
https://iquilezles.org/articles/distfunctions2d/ 各种sdf形状参考iq大佬的文章,直接抄来用即可。
矩形+圆的合并、挖洞等操作,可以自己搜下sdf相关的文章,简单来说,用max、min函数来实现交并补,都不是什么难的操作。过渡部分光滑处理可以找smax函数
2由于你要做的是将一张图显示成若干个拼图,每个拼图的部分是有差异的,那么首先你要用网格化的思路,将uv*宽高尺寸再取整来获得当前小图的id。
假设大图切成4x4的拼图碎片,左下角小图的uv是(0, 0)~(0.25, 0.25),右上角为(0.75, 0.75)~(1, 1)
将uv * 宽高 后取整,可以获得当前片元所处碎图的id。左下角为0,0 右上角为3,3
可以根据id来设置成不同的形状。
3由于拼图的交接处部分是跨界的,所以实际使用uv时,需要将uv在扩大一圈。
好了,思路就是这些了,如果以后有空,我可以做一个demo出来。现在还在忙,楼主自己看着整吧。

利用贝塞尔曲线绘制出你想要的形状,然后用图片填充。opengl绘制图片的两个数据,顶点数据和uv数据,有这两个数据你可以绘制出任何形状。里面的难点是你怎么组织出片元,也就是那一堆三角形,不过Graphics组件有现成的算法,可以借鉴。想象下Graphics绘制的不规则图形中填充的不是纯色,而是图片,那这个就好理解了。实际上你可以修改下Graphics组件就能实现,还可以免费帮你处理锯齿