这种光线投射算法有什么缺陷？

Question

在 GPU 上执行的矩阵运算可能很难调试，因为 GPU 运算实际上并不允许控制台日志。

我写了一个为实时 2D 渲染引擎设计的基于一种非常简单的形式我猜什么可以称为光线投射并且我无法弄清楚它有什么问题（它输出[0,0,0,255,0,0,0,255,...]而不是填充颜色）。

this.thread.x是正在操作的矩阵中当前单元（颜色通道）的索引。 scene是一个由 6 个单位块组成的缓冲区，每个值按顺序包含：

1. 实体的类型，在这种情况下，“精灵”总是1 。

2. 精灵 ID，对应于this.constants.textures包含实体精灵缓冲区的索引。

3. X 偏移，精灵的左边缘

4. Y 偏移，精灵的顶部边缘

5. 精灵的宽度

6. 精灵的高度

bufferWidth是渲染区域的宽度乘以 4 个通道。 this.constants.textures是一个数组，其中包含scene的精灵 ID 所引用的每个精灵的缓冲区。

注意：对于那些好奇的人，这是通过GPU.js完成的，这是一个 JavaScript 库，可将 JS 函数转换为 GLSL 代码，以便通过 WebGL 运行。

---

function(scene, sceneLength, bufferWidth) {
  var channel = this.thread.x % 4;
  if (channel === 3) {
    return 255;
  }
  var x = this.thread.x % bufferWidth;
  var y = Math.floor(this.thread.x / bufferWidth);

  for (let i1 = 0; i1 < sceneLength; i1 += 6) {
    var id = scene[i1 + 1];
    var x1 = scene[i1 + 2];
    var y1 = scene[i1 + 3];
    var w1 = scene[i1 + 4];
    var h1 = scene[i1 + 5];
    var r1 = scene[i1 + 6];
    var offsetX1 = x1 - x;

    if (offsetX1 > 0 && offsetX1 < w1) {
      var offsetY1 = y1 - y;
      if (offsetY1 > 0 && offsetY1 < h1) {
        var c1 = offsetY1 * w1 * 4 + offsetX1 * 4;
        var c1R = c1 - (c1 % 4);
        var c1A = c1R + 3;
        if (this.constants.textures[id][c1A] != 0) {
          return this.constants.textures[id][c1];
        }
      }
    }
  }
  return 0;
}

---

对我试图实现的概念的解释：

使用矩阵运算，当您想绘制精灵时，如果您要对整个渲染区域执行一次传递，您将做的工作远远超过必要的工作量。 如果您将渲染区域分成多个块，并且只更新正在绘制的精灵所涉及的部分，那将是一个相当不错的方法。 对于实时游戏渲染来说，它肯定足够了。 这将是一种多通道方法，一次渲染一个精灵。

或者，对于在我看来可能是最优化的方法，我们可以使用单遍方法对整个渲染区域执行单个矩阵运算，评估每个颜色通道应该基于的内容对场景中的每个精灵和该精灵中的相关像素进行非常基本的碰撞检测。

Answer 1

你正在向后计算你的精灵偏移，计算应该是：

var offsetX1 = x - x1;

和

var offsetY1 = y - y1;

偏移量应该随着 x 和 y 的增加而增加（假设精灵坐标与屏幕坐标具有相同的坐标系），因此您不应该减去 x 和 y。