I am making a perspective projection 3D engine on javascript, link below, and I have run into this issue that I want to patch. When the faces intersect, one as a whole is rendered on top of the other.

Here is an overview on how my system currently works: How this currently works is it gets all of the required points (using a bunch of rotation matrices and translations) and a list of all of the faces (referenced using an index to the points list (like [[2,5,4],[3,1,6,4],[2,1,3]) required for the rendering, then it gets a list of the faces, each with the specific points replaced with the actual points insted of an index for the points in the list (like [[[1,2,3],[2,1,5],[2,1,3]],[[2,1,4],[-2,-4,1],[0,2,6],[2,1,3]],[[1,2,3],[-2,-4,1],[2,1,4]]]) such that it can be cut at a certain Z such that one can not see things behind them. The Z is then cut out using vectors and finding their intercepts with the Z plane, cutting out the parts of the faces on the back side of the plane while retaining the exact shape of them on the front side of the plane. Then the faces are sorted for rendering, using quick sort and getting the average distance from the camera for each point in the face. Then they are rendered to this order.

My issue is that when two faces intersect each other, one just flat out appears on top of the other, instead of having the face cut in some way such that it can actually render properly, like so:

Does this issue have a name already? If so, what is it?

What I am wondering is if it is even feasable to have the faces cut into smaller faces and then ordered correctly, such that the faces actually intersect each other properly.

If so, in what way can I manage this, whether it be changing the formatting of the data yet again, doing a for loop to get their intersections, and what can I look up to get a better understanding of my issue here and get a good grasp on the ideas of how to fix it?

If not, what other kind of rendering type would maybe be appropriate to fix this issue? What resources can I look up to try and make type of engine?

Here is the link to my engine, modified such that there are many objects showing the problem:

https://3d-10-2.kittycraft0.repl.co/

(WASDEQ to move, arrow keys to look around, c/z to zoom in/out)