Issues Creating a 3D Renderer in JavaScript

I am trying to make my own 3D renderer in JavaScript using raycasting, but despite checking over the math and the code countless times, it still does not seem to be working. I've tried everything I possibly could to get this thing to work and it won't, so I'm hoping someone else can figure it out.

My code runs an Update method every frame, increasing the yaw (Camera.Rot.Yaw) by 0.1 radians every iteration, but it ends up looking weird and unrealistic, and I can't figure out why. Sorry if it's confusing and long, I can't really think of a way to make a minimal reproducible example of this. This is the Update method:

  Update(Canvas, Ctx, Map, Camera) {
    var id = Ctx.getImageData(0, 0, Canvas.width, Canvas.height);
    var Pixels = id.data;
    //Distance of projection plane from camera
    //It should be behind I think
    var PlaneDist = 64;
    //Divides the second slopes by this so each ray goes a shorter
    //distance each iteration, effectively increasing quality
    var Quality = 160;
    //The midpoint of the projection plane for each coordinate
    var MidX =
      Camera.Pos.X +
      PlaneDist * Math.cos(Camera.Rot.Pitch) * Math.cos(Camera.Rot.Yaw);
    var MidY = Camera.Pos.Y + PlaneDist * Math.sin(Camera.Rot.Pitch);
    var MidZ =
      Camera.Pos.Z +
      PlaneDist * Math.cos(Camera.Rot.Pitch) * Math.sin(Camera.Rot.Yaw);
    //Slopes to get to other points on the projection plane
    var SlopeX =
      Math.sin(Camera.Rot.Yaw) +
      (Canvas.height / Canvas.width) *
        Math.cos(Camera.Rot.Yaw) *
        Math.sin(Camera.Rot.Pitch);
    var SlopeY = -Math.cos(Camera.Rot.Pitch);
    var SlopeZ =
      Math.cos(Camera.Rot.Yaw) +
      (Canvas.height / Canvas.width) *
        Math.sin(Camera.Rot.Yaw) *
        Math.sin(Camera.Rot.Pitch);
    //Loops for every point on the projection plane
    for (let i = 0; i < Canvas.height; i++) {
      for (let j = 0; j < Canvas.width; j++) {
        let NewX = Camera.Pos.X;
        let NewY = Camera.Pos.Y;
        let NewZ = Camera.Pos.Z;
        //Slopes for the actual ray to follow, just the distance between
        //the plane point and the camera divided by quality
        let SlopeX2 = (Camera.Pos.X-(MidX - SlopeX * (j - Canvas.width / 2)))/ Quality;
        let SlopeY2 = (Camera.Pos.Y-(MidY - SlopeY * (i - Canvas.height / 2))) / Quality;
        let SlopeZ2 = (Camera.Pos.Z-(MidZ - SlopeZ * (j - Canvas.width / 2)))/ Quality;
        //Ray's current map position, divides the map into a 16x32x16
        //list of blocks (map initialization shown elsewhere)
        let MapPos =
          Map.MData[0][Math.floor(NewX / 16) + 2][Math.floor(NewY / 16)][
            Math.floor(NewZ / 16)
          ];
        //Iterates until ray either hits a block with max opacity, or
        //hits the boundary of the map
        while (
          MapPos[3] !== 255 &&
          NewX + SlopeX2 < 256 &&
          NewY + SlopeY2 < 512 &&
          NewZ + SlopeZ2 < 256 &&
          NewX + SlopeX2 >= 0 &&
          NewY + SlopeY2 >= 0 &&
          NewZ + SlopeZ2 >= 0
        ) {
          //Advances ray's current position according to slopes
          NewX += SlopeX2;
          NewY += SlopeY2;
          NewZ += SlopeZ2;
          MapPos =
            Map.MData[0][Math.floor(NewX / 16) + 2][Math.floor(NewY / 16)][
              Math.floor(NewZ / 16)
            ];
        }
        //Sets pixel on screen to the color of the block the ray hit
        //or just white (opacity 0) if it hit the boundary
        Pixels[(i * id.width + j) * 4] = MapPos[0];
        Pixels[(i * id.width + j) * 4 + 1] = MapPos[1];
        Pixels[(i * id.width + j) * 4 + 2] = MapPos[2];
        Pixels[(i * id.width + j) * 4 + 3] = MapPos[3];
      }
    }
    //Displays the final image
    Ctx.putImageData(id, 0, 0);
  }

The map initialization (CreateChunk) looks like this:

  constructor() {
    this.MData = [];
  }
  CreateChunk(X, Y) {
    let Chunk = [X, Y];
    for (let x = 0; x < 16; x++) {
      let Plane = [];
      for (let y = 0; y < 32; y++) {
        let Row = [];
        for (let z = 0; z < 16; z++) {
          //Colors are just to help tell which pixels are at what coordinates
          if (y < 8) Row.push([x * 15, y * 7, z * 15, 255]);
          else Row.push([0, 0, 0, 0]);
        }
        Plane.push(Row);
      }
      Chunk.push(Plane);
    }
    this.MData.push(Chunk);
  }

I'm hoping it's just some coding mistake I've made, but despite my countless checks it may be the trigonometry that's wrong.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/14HfyEx