Fix Fish-eye effect 2.5D Raycaster game

Question

I'm working on a simple raycaster game for fun. I have two canvases, (id's canvas1 and canvas2), one for the 2D view of the world, and the other for the 2.5D raycasted view. The raycasted view looks sort of distorted, like a fish eye effect. Another problem (less important) is that the view doesn't really look like your average 3D world, even with the effect of fish eye distortion. Looking for some good FOV + height values/settings.

Here's my code:

const canvas1 = document.querySelector("#canvas1");
const canvas2 = document.querySelector("#canvas2");
const ctx1 = canvas1.getContext("2d");
const ctx2 = canvas2.getContext("2d");

let width1 = 256;
let height1 = 256;

let width2 = 720;
let height2 = 360;

const columns = 100;
let columnWidth = width2 / columns;

canvas1.width = width1;
canvas1.height = height1;

canvas2.width = width2;
canvas2.height = height2;

let deltaTime = 0;
let lastFrame = Date.now();

const moveSpeed = 70;
const rotationSpeed = 175;

const FOV = 65;

const rayCastStep = 0.5;

let rayCastWidth = FOV / columns;

let map = [
    ["##########"],
    ["#...#....#"],
    ["#...#....#"],
    ["### #....#"],
    ["#...#....#"],
    ["# ###....#"],
    ["#...#### #"],
    ["#........#"],
    ["#........#"],
    ["##########"]
];

const player = {
    x: 45,
    y: 165,
    heading: 270
}

const keyMap = {
    w: false,
    a: false,
    s: false,
    d: false
}

const willCollide = ({ xC, yC }, { x, y, w, h }) => {
    boundingBox = {
        left: x - w / 2,
        right: x + w / 2,
        top: y - h / 2,
        bottom: y + h / 2
    }
    
    return xC > boundingBox.left && xC < boundingBox.right && yC > boundingBox.top && yC < boundingBox.bottom;
}

const handlePlayerMovement = () => {
    if (keyMap.w) {
        let dx = Math.cos(player.heading * Math.PI / 180);
        let dy = Math.sin(player.heading * Math.PI / 180);

        xCheck = player.x + dx * moveSpeed * deltaTime;
        yCheck = player.y + dy * moveSpeed * deltaTime;

        let canMove = true;
        
        for (let y = 0; y < map.length; y++) {
            for (let x = 0; x < map[y][0].length; x++) {
                if (map[y][0][x] == "#" && willCollide({ xC: xCheck, yC: yCheck }, { x: x * 20 + 10, y: y * 20 + 10, w: 20, h: 20})) {
                    canMove = false;
                }
            }
        }

        if (canMove) {
            player.x = xCheck;
            player.y = yCheck;
        }
    }

    if (keyMap.s) {
        let dx = Math.cos((player.heading * Math.PI / 180) + Math.PI);
        let dy = Math.sin((player.heading * Math.PI / 180) + Math.PI);

        xCheck = player.x + dx * moveSpeed * deltaTime;
        yCheck = player.y + dy * moveSpeed * deltaTime;

        let canMove = true;
        
        for (let y = 0; y < map.length; y++) {
            for (let x = 0; x < map[y][0].length; x++) {
                if (map[y][0][x] == "#" && willCollide({ xC: xCheck, yC: yCheck }, { x: x * 20 + 10, y: y * 20 + 10, w: 20, h: 20})) {
                    canMove = false;
                }
            }
        }

        if (canMove) {
            player.x = xCheck;
            player.y = yCheck;
        }
    }

    if (keyMap.a) {
        player.heading -= rotationSpeed * deltaTime;
    }

    if (keyMap.d) {
        player.heading += rotationSpeed * deltaTime;
    }
}

const generateColumns = () => {
    let distances = Array(columns).fill(0);

    for (let i = 0; i < columns; i++) {
        
        let collided = false;

        let rayX = player.x;
        let rayY = player.y;
        
        let angle = (player.heading - FOV / 2) + (i / columns) * FOV;

        let dx = rayCastStep * Math.cos(angle * Math.PI / 180 + Math.PI);
        let dy = rayCastStep * Math.sin(angle * Math.PI / 180 + Math.PI);
        
        while (!collided) {

            rayX -= dx;
            rayY -= dy;

            for (let y = 0; y < map.length; y++) {
                for (let x = 0; x < map[y][0].length; x++) {
                    if (map[y][0][x] == "#" && willCollide({ xC: rayX, yC: rayY }, { x: x * 20 + 10, y: y * 20 + 10, w: 20, h: 20 })) {
                        collided = true;
    
                        let deltaX = player.x - rayX;
                        let deltaY = player.y - rayY;
                        
                        let dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
                        
                        let h = Math.max(height2 - height2 * (dist / 200), 0);
                        
                        distances[i] = {
                            fill: h / height2,
                            h: h
                        }
                    }
                }
            }
        }

        ctx1.strokeStyle = "#fff";
    
        ctx1.beginPath();
        ctx1.moveTo(player.x * (256 / map[0][0].length) / 20, player.y * (256 / map.length) / 20);
        ctx1.lineTo(rayX * (256 / map[0][0].length) / 20, rayY * (256 / map.length) / 20)
        ctx1.stroke();

    }
    return distances;
}

const update = () => {
    ctx1.fillStyle = "#000";
    ctx1.fillRect(0, 0, width1, height1);

    ctx2.fillStyle = "#000";
    ctx2.fillRect(0, 0, width2, height2 / 2);

    ctx2.fillStyle = "#fff";
    ctx2.fillRect(0, height2 - height2 / 2, width2, height2 / 2);
    
    handlePlayerMovement();
    
    for (let y = 0; y < map.length; y++) {
        for (let x = 0; x < map[y][0].length; x++) {
            ctx1.fillStyle = "#fff";
            
            if (map[y][0][x] == "#") ctx1.fillRect(x * (256 / map[y][0].length), y * (256 / map.length), (256 / map[y][0].length), (256 / map.length));
            
            ctx1.fillStyle = "#666";
            
            ctx1.fillRect(0, y * (256 / map.length), 256, 1);
            ctx1.fillRect(x * (256 / map[y][0].length), 0, 1, 256);
        }
    }

    ctx1.fillStyle = "#0f0";

    ctx1.beginPath();
    ctx1.ellipse(player.x * (256 / map[0][0].length) / 20, player.y * (256 / map.length) / 20, 2, 2, 0, 0, 2 * Math.PI);
    ctx1.fill();

    let cols = generateColumns();

    for (let i = 0; i < columns; i++) {
        ctx2.fillStyle = `rgb(0, ${cols[i].fill * 255}, 0)`;
        
        ctx2.fillRect(Math.round(columnWidth * i), height2 / 2 - cols[i].h / 2, columnWidth + 1, cols[i].h);
    }
    
    deltaTime = (Date.now() / 1000 - lastFrame / 1000);
    lastFrame = Date.now();
    
    requestAnimationFrame(update);
}

update();

window.onkeydown = (e) => {
    if (Object.keys(keyMap).includes(e.key.toLowerCase())) keyMap[e.key.toLowerCase()] = true;
}

window.onkeyup = (e) => {
    if (Object.keys(keyMap).includes(e.key.toLowerCase())) keyMap[e.key.toLowerCase()] = false;
}

Any help is appreciated. Thanks!

Answer 1

I do not know the JavaScript equivalent, but I translated from griffpatches scratch to p5js. It is caused by the fact that walls further away look smaller.

The fix (luckily) is easy:

• Stop using the distance from the eye to the wall; instead, measure the distance from the wall to the view plane(which is defined by the player's direction).
• If you draw a triangle from the player to the wall and make a right angle, then you can make the adjacent = cos(t*)hypotenuse. In practice, this is distance = distance * cos(direction of raycaster - player direction).
• Then you have to fix the linear ray distribution which is where I am at.

(used griffpatches raycasting tutorial)