Exploring Simple 3D Rendering using p5.js

Exploring Simple 3D Rendering using p5.js

This was a tiny project I made as a primer to explain rendering to a younger cousin of mine! In the sketch above, I cast rays from a randomly moving point and check whether there is a line-line intersection with any of the walls. If there is (and it is the closest), we use that point as an anchor to draw the ray to. This is basic version of how shadows and lighting is done in 2D games.

In the next sketch, I rendered the rays cast out to a simple 3D scene. Each ray create a ‘slice’ of the view camera (there aren’t that many which is why it isn’t smooth). The box size and color brightness decreases with distance (using the inverse square law). On the top of the sketch window, you can change the FOV. I thought about making boxes instead of lines but I really like how the lines look with higher FOVs and create some weird illusions.

This was a simple look into writing a really quick renderer and simple ray tracer. During college I wrote a ray-tracing engine for an graphics project so doing this bare-bones implementation was pretty interesting.

Avatar
Amrit Amar
Data Engineer

My research interests include data design and engineering, virtual/augmented reality, artificial intelligence (particularly alignment), computational neuroscience, and evolutionary algorithms.