A mathematical deep dive exploring digital differential analysis, camera vector projections, texture column mappings, and shading algorithms.
Explore the live raycasting renderer below. The left half displays the **2D Minimap** showing player coordinates and visual rays cast in real time. The right half projects the **3D Viewport** with simulated wall height shading.
In 1992, ID Software released *Wolfenstein 3D*, introducing players to a pseudo-3D game world. Because 1990s hardware lacked the floating-point capabilities to render true polygon-based 3D models, John Carmack implemented a technique called Raycasting.
Rather than projecting a full 3D polygon mesh, raycasting projects a 2D map grid into a pseudo-3D viewport. The engine casts individual rays from the player's perspective across their Field of View (FOV).
When a ray hits a wall, the engine computes the distance, and uses that distance to determine how tall that segment of the wall should be rendered on screen. By casting one ray for every vertical column of the screen, the engine builds a convincing 3D perspective using basic 2D line rendering.
To render the scene, the engine tracks the player's coordinate vectors:
By shifting along the camera plane vector, the engine calculates the starting coordinates and direction vector for every ray cast across the screen width.
Casting a ray by checking every tiny pixel increment (e.g. 0.01 step checks) is slow and can miss walls due to rounding errors.
To solve this, we use the DDA (Digital Differential Analysis) Algorithm. DDA is a fast grid traversal method that only checks the grid lines the ray crosses:
"Rather than walking along the ray, DDA calculates the exact mathematical step distance to the next vertical (X) or horizontal (Y) grid boundary. By checking grid intersections sequentially, the algorithm determines wall hits using only basic additions and boundary compares."
If we use the raw distance from the player to the wall, we get a **Fish-eye Distortion** effect, where flat walls appear curved.
This happens because rays cast at the outer edges of the FOV are longer than rays cast straight ahead.
To fix this, we project the ray distance onto the player's direction vector, calculating the **perpendicular distance** to the camera plane instead of the straight-line distance. This projection straightens the walls, ensuring they render correctly without distortion.
Below is a clean TypeScript class showing how to set up the camera vectors, cast rays, and calculate perpendicular distances:
export interface Camera {
posX: number;
posY: number;
dirX: number; // gaze direction vector
dirY: number;
planeX: number; // perpendicular camera plane
planeY: number;
}
export class RaycasterEngine {
private map: number[][];
constructor(gridMap: number[][]) {
this.map = gridMap;
}
/**
* Casts a single ray for a column offset (-1 to 1)
* and calculates the perpendicular distance to the hit wall.
*/
public castRay(camera: Camera, cameraX: number): { distance: number; side: number } {
// Ray direction vector
const rayDirX = camera.dirX + camera.planeX * cameraX;
const rayDirY = camera.dirY + camera.planeY * cameraX;
// Grid coordinates
let mapX = Math.floor(camera.posX);
let mapY = Math.floor(camera.posY);
// Delta step distance along ray to cross one grid square boundary
const deltaDistX = Math.abs(1 / rayDirX);
const deltaDistY = Math.abs(1 / rayDirY);
let stepX = 0;
let stepY = 0;
let sideDistX = 0;
let sideDistY = 0;
// Calculate step directions and initial boundary distances
if (rayDirX < 0) {
stepX = -1;
sideDistX = (camera.posX - mapX) * deltaDistX;
} else {
stepX = 1;
sideDistX = (mapX + 1.0 - camera.posX) * deltaDistX;
}
if (rayDirY < 0) {
stepY = -1;
sideDistY = (camera.posY - mapY) * deltaDistY;
} else {
stepY = 1;
sideDistY = (mapY + 1.0 - camera.posY) * deltaDistY;
}
let hit = 0;
let side = 0; // 0 for X axis hit, 1 for Y axis hit
// DDA traversal loop
while (hit === 0) {
if (sideDistX < sideDistY) {
sideDistX += deltaDistX;
mapX += stepX;
side = 0;
} else {
sideDistY += deltaDistY;
mapY += stepY;
side = 1;
}
// Check collision
if (this.map[mapY][mapX] > 0) {
hit = 1;
}
}
// Calculate perpendicular wall distance (correcting fish-eye effect)
let perpWallDist = 0;
if (side === 0) {
perpWallDist = (mapX - camera.posX + (1 - stepX) / 2) / rayDirX;
} else {
perpWallDist = (mapY - camera.posY + (1 - stepY) / 2) / rayDirY;
}
return { distance: perpWallDist, side };
}
}
Raycasting remains a foundational graphics technique used in retro engines, map editors, and lightweight mobile displays.
I engineer highly secure distributed consensus state machines, horizontal WebSocket relay networks, and performant AI vector databases. Let's build resilient systems together.