No image available

Doom Style Ray Cast Engine & Asset Pack

VOIDWALK — Raycast Engine Tech Demo A from-scratch Wolfenstein/Doom-style raycaster, built entirely in vanilla JavaScript on a single 2D canvas. No Three.js, no WebGL, no engine, no build step — open the HTML file and it runs. WHAT THIS IS This is a tech demo, not a game. There's no combat, no objectives, no enemies — just a fully walkable maze you can explore freely, built to show that a classic-style first-person renderer can still be built the old way: per-pixel raycasting against a 2D grid, rendered straight into a canvas ImageData buffer. Everything you see — every wall texture, every torch and pillar sprite, the floor, the ceiling — is generated procedurally at load time. There are zero image assets in this project. The whole engine is one HTML file. Open it in a browser, click to start, and you're walking. ENGINE BREAKDOWN Wall rendering uses the standard DDA (Digital Differential Analysis) algorithm — the same approach Wolfenstein 3D and id Tech 1 used. For every column of the screen, a ray is cast from the player through the camera plane, stepped one grid-cell boundary at a time, until it hits a wall. Distance is corrected to perpendicular (not Euclidean) to avoid fisheye distortion, and the wall's screen height is derived directly from that distance — closer walls fill more of the screen, exactly like a real 3D projection, but the underlying math never leaves 2D. Floor and ceiling use the companion technique, floorcasting: for each screen row below the horizon, the world-space distance for that row is computed, and the engine steps across X in world space sampling a checker pattern, properly occluded against whatever wall is nearer. Textures are not image files. Every wall texture is a 64x64 canvas, painted once at load time using direct draw calls — individually shaded bricks with bevel highlights, hand-tuned wood grain, a carved gold relief panel, a glowing arcane rune with real radial falloff. The raycaster samples these as raw pixel buffers during rendering, the same way it would sample a loaded image. Sprites (torches, orbs, pillars) are billboarded using a camera-space inverse transform, sorted back-to-front, and occlusion-tested per-column against the wall depth buffer so they correctly hide behind nearer walls. Asset pack export is built in: press X during the demo and it packages every texture, every sprite, the full map/player/sprite config as JSON, a formulas reference doc explaining the actual math, and a scripted GIF flythrough of the level — all zipped client-side, no server involved. CONTROLS WASD or arrow keys — move Mouse — look Shift — run M — toggle full map view F — toggle fog 1 / 2 — switch between textured and flat-shaded rendering X — export the full asset pack (textures, sprites, map data, formulas doc, GIF flythrough) WHY BUILD IT THIS WAY No WebGL context, no shader pipeline, no mesh data — just a flat array of pixels being written by hand, 60 times a second. It's a reminder that the genre-defining look of 90s first-person games came from clever math applied to a 2D buffer, not brute-force 3D hardware. If you've ever wanted to see exactly how that trick works under the hood, this is the whole thing, readable top to bottom in one file.