This is a basic software renderer written in JS using p5.js.
The main rendering code lives in sketch.js and the math utility functions are in utils.js.
Functionality:
- load OBJ files with obj_to_json.py script
- simple light source shading
- FPS camera and movement
- triangle clipping
In Progress:
- adding textures
You can play the demo here: benjaminnow.github.io/renderer/
Controls:
- WASD for movement
- mouse for looking around
- Shift for going down
- Space for going up
If you click in the window, your mouse will disappear and you can get it back by pressing Escape.
Some concepts were pretty mathematical so I spent some time writing my own notes to understand them better.
In order:
- How the Projection Matrix is made
- How the Camera Transformation Matrix is made
- How to add First-Person control to the camera
- How to Clip Triangles to prevent artifacts
I can't thank Javidx9 on YouTube enough for explaining many of these concepts in a simple way.