查找与任意形状的四边形相交的规则网格单元

Question

我需要找到与由角点坐标定义的任意形状的四边形相交的网格单元的所有索引[x, y]；

• 网格单元是具有128 x 128 px的图块

• 网格单元的整数索引为[-nx, -ny]和[nx, ny]
  （最大扩展为(2nx * 128) * (2ny * 128) px的平方）

• 四边形由角点定义，像素空间中的坐标(qx, qy)指定为(tl, tr, br, bl)

• 这集成在 three.js 场景中：
  • 角点/坐标是通过摄像机在 THREE.PlaneBufferGeometry
  上进行光线投射的

如何在JavaScript中以高效计算的方式获取所有相交的图块？

现在，我通过使用mx + b遍历每个四边形边并以图块尺寸（128px）作为步长来计算周边图块；从那里，我只是逐行添加内部磁贴索引。但这有点笨拙，可能是编码技能问题，也可能不是。我将尝试使用 THREE.Raycaster 来获取外围图块索引，但还不确定如何。

我正在寻找一种更好的算法解决方案；基本公式，伪代码，思想或确定的解决方案。

Answer 1

要有效地找到与四边形相交的网格单元，可以使用Woo和Amanatides网格遍历算法：文章"Fast Voxel Traversal Algorithm..."。
实际实现在here部分的grid traversal
中 示例：

对于凸四边形的内部像元：在边缘遍历期间，记住行中最左边的像元用于“右”边，最右边的像元用于“左”边，并填充它们之间的水平间隙。