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

【问题标题】：How is this ray casting algorithm flawed?这种光线投射算法有什么缺陷？
【发布时间】：2018-09-04 04:42:54
【问题描述】：

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

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

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

实体的类型，在这种情况下，“sprite”总是1。
精灵 ID，对应于this.constants.textures 中包含实体精灵缓冲区的索引。
X 偏移，精灵的左边缘
Y 偏移，精灵的上边缘
精灵的宽度
精灵的高度

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

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

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;
}

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

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

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

【问题讨论】：

标签： algorithm rendering

【解决方案1】：

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

var offsetX1 = x - x1;

和

var offsetY1 = y - y1;

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

【讨论】：