如何在3D Javascript引擎中实现背面剔除

Question

最近，我一直致力于在Javascript中创建3D图形引擎。目前，相机可以在x，y和z轴上移动（学习如何旋转相机），并且可以旋转形状。形状基于构成面的顶点组生成。

形状的绘图代码示例如下：

function renderShapes() {
for (i = 0; i < objects.length; i++) { // For each object
    for (j = 0; j < objects[i].faces.length; j++) { // For each face
        var face = objects[i].faces[j];

        var P = project(face[0],objects[i].type);
        if (P == false) { // project the coordinates based on camera. 
            continue;
        }
        ctx.beginPath();
        ctx.moveTo(P.x + cx, - P.y + cy); // Start line at first vertex

        // Draw the other vertices that make up the face
        for (l = 0; l < face.length; l++) {
            P = project(face[l],objects[i].type);
            if (P == false) {
                continue;
            }
            ctx.lineTo(P.x + cx, -P.y + cy); // Draw line to the next vertex
        }


        // Close the path and draw the face
        ctx.closePath();
        ctx.stroke();
        if (objects[i].color != undefined) { // Fill in a color if the object has color property
            ctx.fillStyle = objects[i].color;
            ctx.fill();
        }
    }
}
}

以上代码根据我的旋转方式生成大致相似的内容：

一切都很完美，除了绘制所有面，并且基于它们在对象数组中的顺序，可以重叠一个或另一个。红色立方体是我的问题的一个例子。蓝色钻石是我想要实现的一个例子，清洁面部仅根据相机可以看到的内容进行渲染。它不应渲染钻石的所有8个面，而应仅渲染4个可见的面。它不应该渲染立方体的所有6个面，而应该只渲染2个可见的面。

我已经研究过它来寻找背面剔除，虽然这些例子要么不存在，要么用错误的语言，要么只是难以理解或适合我的情况。

任何人都可以用外行的方式向我解释背面剔除的效果如何？如果可能的话，可以在我的代码中实现它的Javascript示例吗？

或者，对于我想要实现的目标或者更适合的不同流程或算法，是否有不同的单词或短语？

由于