WangTile实现小结

Posted 2022-06-04 wolf96

过程

square tiles with just two types of edge, the complete stochastic set consists of 16 tiles,While the number of tiles required to form a complete stochastic set increases dramatically as you add new types of edges,

方形tile最少需要两种不同类型边缘，需要2²*2² = 16种原始tile变体，例如上图，增加边的类型会增加多样性，但是原始tile变体会大量增加
红色边缘相互之间可以连续，蓝色边缘相互之间可以连续
上面原始tile图片可以存到一张图中(低级别mipmap边缘会出现缝隙，需要ddx,ddy手算UV)，或者存到一个tex2DArray中
贴图制作方法：
https://www.pathofexile.com/forum/view-thread/55091

实现方法

1.根据UV可以计算TileID，tiling值可调
2.每个tile四个边根据uv随机出四个边缘种类，（只有两种就随机出0，1），只算出边的种类就好，上下/左右的tile共用一个边的结果
3.根据四个边随机出的四个边缘种类，计算出是哪种原始tile变体（备注1）
4.用局部tile uv读取原始tile变体图

备注1：
GPU Gem2中的算法比较复杂，而且需要if分支
https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-12-tile-based-texture-mapping

想出了一种简单的算法：
int tileIDX = abs(3 * xE0 - xE1);
int tileIDY = abs(3 * yE0 - yE1);

性能优化

性能大头是随机算法，尤其是sin，最开始用的是随处可见的随机代码
sin(dot(co.xy ,float2(12.9898,78.233))) * 43758.5453
然后凯奥斯大佬给出建议用asint来按位转换达到随机效果，但是会有大量重复的随机结果导致tiling感依旧很强，seed值需要调整

优化过后iphoneX全屏绘制3.5ms变为全屏绘制1.6ms

改进可能

网上还有很多paper会有旋转，或者不局限于方形等算法来进一步减少tiling感

放一张实现过程
--------------------- by wolf96 2020.4.25

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系