27.03.2022

Ray-casting City

A small 3D project developed throughout March 2022. Use the Arrows, WASD, or ZQSD to move around a procedural city.

Here is the complete source code:

Although this experiment was fun to make, I realised as I went along that ray casting is actually pretty limited with its flexability. This is why a lot of people have turned to methods like ray-tracing, ray-marching, and others which are ways to improve the somewhat lifeless results of ray-casting.

The concept of a ray-caster is very simple. Although it may appear to look 3D, it is actually using 2D logic to project various rectangles onto a canvas in such a manner that it looks 3D. Here is how it works.

This is a single ray with some rectangles around it.

This part makes sure the ray stops at the closest rectangle.

This example just uses more rays.

This is actually the entirety of ray-casting. Take the ray on the far left. The ray has a unique length based on what it's colliding with. Let's draw a rectangle on the far left of the screen, where its height corresponds to the length of our ray (i.e. the longer the ray, the shorter the rectangle). A ray moving around like this...

...would look something similar to this:

By implememting more rays, the result would look like this:

It's looking a bit more 3D now, isn't it? If we added a higher resolution (i.e. making a ray for every ~pixel), this would be the result:

This is the source code for the demo above: