How is this ray casting algorithm flawed?

Question

Matrix operations performed on the GPU can be pretty hard to debug because GPU operations don't really allow for console logs.

I've written one designed for a real time 2D rendering engine based on a very simple form of I guess what could be called ray casting and am having trouble figuring out what's wrong with it (it's outputting [0,0,0,255,0,0,0,255,...] instead of populating colors).

this.thread.x is the index of the current unit (color channel) in the matrix being operated on. scene is a buffer made up of 6-unit clumps, each value containing, in order:

1. The type of entity, always 1 for "sprite" in this case.

2. The sprite ID, corresponding the the index in this.constants.textures containing the buffer for the entity's sprite.

3. X offset, the left edge of the sprite

4. Y offset, the top edge of the sprite

5. width of the sprite

6. height of the sprite

bufferWidth is the width of the render area multiplied by 4 channels. this.constants.textures is an array containing buffers of each sprite which the sprite IDs from the scene refer to.

Note: For those curious, this is being done with GPU.js, a JavaScript lib that converts a JS func into GLSL code to be run via 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;
}

---

Explanation for the concept I'm trying to implement:

With a matrix operation, when you want to draw a sprite if you were to perform a pass on the entire render area, you'd be doing far more work than necessary. If you break the rendering area down into chunks and only update the sections involved in the sprite being drawn, that would be a fairly decent way to do it. It would certainly be good enough for real time game rendering. This would be a multi-pass approach, where sprites are rendered one at a time.

Alternatively, for what seems to me to be the most optimal approach possible, instead of that, we can use a single-pass approach that performs a single matrix operation for the entire rendering area, evaluating for each color channel what should be there based on doing a very basic form of collision detection with each sprite in the scene and the relevant pixel in that sprite.

Answer 1

You're calculating your sprite offsets backwards, the calculations should be:

var offsetX1 = x - x1;

and

var offsetY1 = y - y1;

The offsets should increase as x and y increase (assuming the sprite co-ordinates have the same co-ordinate system as the screen co-ordinates), so you shouldn't be subtracting x and y.