Build a Pseudo3D Game Engine with JavaScript Using Raycasting
In this article I’m going to show you how to build a simple Pseudo3D engine with JavaScript. No libraries, pure JavaScript.
But first things first, grab your coffee… it’s going to be an interesting learning journey.
What is Pseudo 3D?
In the early 90’s (and definitely before that) the computing power for computers wasn’t that much to handle real 3D computations, in order to build real 3D experiences. So, they had to figure out a way to render things like 3D (or at least something close to that).
id Software was the first to adapt the Pseudo 3D rendering technique in their games, such as: Catacombs 3-D and Wolfenstein 3D.
So, how did they do it?
The solution was to use a technique called Ray-cast, and as the name implies, the idea is to cast/send rays on a 2D plane and once it hits an object in that plane (a cell of some value in the grid) it will send back some information about that object: distance, color, … etc. Then based on these info, the rendering engine is going to render a column, and the height of that column is going to be inversely…
