TriangleMesh - Backside faces are visible

Question

Good Day! I have the following issue. The graphic model is not displayed correctly: some backside faces of the model that should be hidden by the frontside remain visible. Here are some exmples to clarify: (isometry)

(issue)

This issue comes out especially notable when applying light and material. So the the question is how this can be solved for JavaFX?

UPD:

public class VertexTest extends Application {

    PerspectiveCamera camera;
    Cam cam = new Cam();
    double mouseOldX, mouseOldY, mousePosX, mousePosY, mouseDeltaX, mouseDeltaY;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        TriangleMesh mesh = new Shape3DRectangle(100, 100, 100);
        MeshView view = new MeshView(mesh);
        view.setDrawMode(DrawMode.LINE);
        view.setMaterial(new PhongMaterial(Color.RED));

        cam.getChildren().add(view);

        Scene scene = new Scene(cam, 1000, 1000, true);

        addEvents(view, scene);

        camera = new PerspectiveCamera();
        camera.setTranslateX(-500);
        camera.setTranslateY(-500);
        camera.setTranslateZ(1000);


        scene.setCamera(camera);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void addEvents(MeshView view, Scene s) {

        s.setOnMouseDragged(new EventHandler<MouseEvent>() {
            public void handle(MouseEvent me) {
                mouseOldX = mousePosX;
                mouseOldY = mousePosY;
                mousePosX = me.getX();
                mousePosY = me.getY();
                mouseDeltaX = mousePosX - mouseOldX;
                mouseDeltaY = mousePosY - mouseOldY;
                cam.ry.setAngle(cam.ry.getAngle() - mouseDeltaX);
                cam.rx.setAngle(cam.rx.getAngle() + mouseDeltaY);
            }
        });
    }

    class Cam extends Group {
        Translate t = new Translate();
        Translate p = new Translate();
        Translate ip = new Translate();
        Rotate rx = new Rotate();
        {
            rx.setAxis(Rotate.X_AXIS);
        }
        Rotate ry = new Rotate();
        {
            ry.setAxis(Rotate.Y_AXIS);
        }
        Rotate rz = new Rotate();
        {
            rz.setAxis(Rotate.Z_AXIS);
        }
        Scale s = new Scale();

        public Cam() {
            super();
            getTransforms().addAll(t, p, rx, rz, ry, s, ip);
        }
    }



    public class Shape3DRectangle extends TriangleMesh {

        public Shape3DRectangle(float Width, float Height, float deep) {

            this.getPoints().setAll(-Width / 2, Height / 2, deep / 2, // idx p0
                    Width / 2, Height / 2, deep / 2, // idx p1
                    -Width / 2, -Height / 2, deep / 2, // idx p2
                    Width / 2, -Height / 2, deep / 2, // idx p3
                    -Width / 2, Height / 2, -deep / 2, // idx p4
                    Width / 2, Height / 2, -deep / 2, // idx p5
                    -Width / 2, -Height / 2, -deep / 2, // idx p6
                    Width, -Height / 2, -deep / 2 // idx p7
            );

            this.getTexCoords().addAll(0.0f, 0.0f);

            this.getFaces().addAll(5, 0, 4, 0, 0, 0 // P5,T1 ,P4,T0 ,P0,T3
                    , 5, 0, 0, 0, 1, 0 // P5,T1 ,P0,T3 ,P1,T4
                    , 0, 0, 4, 0, 6, 0 // P0,T3 ,P4,T2 ,P6,T7
                    , 0, 0, 6, 0, 2, 0 // P0,T3 ,P6,T7 ,P2,T8
                    , 1, 0, 0, 0, 2, 0 // P1,T4 ,P0,T3 ,P2,T8
                    , 1, 0, 2, 0, 3, 0 // P1,T4 ,P2,T8 ,P3,T9
                    , 5, 0, 1, 0, 3, 0 // P5,T5 ,P1,T4 ,P3,T9
                    , 5, 0, 3, 0, 7, 0 // P5,T5 ,P3,T9 ,P7,T10
                    , 4, 0, 5, 0, 7, 0 // P4,T6 ,P5,T5 ,P7,T10
                    , 4, 0, 7, 0, 6, 0 // P4,T6 ,P7,T10 ,P6,T11
                    , 3, 0, 2, 0, 6, 0 // P3,T9 ,P2,T8 ,P6,T12
                    , 3, 0, 6, 0, 7, 0 // P3,T9 ,P6,T12 ,P7,T13
            );
        }
    }

}

Answer 1

I've been playing around with your sample, and I think I've found out the reason of your issues.

First, I checked the winding of the faces. All of them are counter-clockwise, so all their normals go outwards, as they should be.

Then I modified other vertices instead of the last one. In some cases there were no issues, in others, the issue was still there.

Basically, the issue happens when there are "concave" surfaces, meaning that two faces have normals that will cross. And it doesn't happen when all the surfaces are "convex", meaning that their normals point outwards and won't cross.

This is a clear image of both type of meshes taken from here:

Back to your sample, you are defining a concave mesh:

But if instead of modifying vertex #7, we make the #5 larger, we have a convex mesh, with no rendering issues:

Obviously, while this fix the rendering problem, it changes your initial shape.

If you want to keep your initial geometry, the other possible solution is changing the faces, so you don't have any concave areas.

Let's have a look at the faces 5-1-3 and 5-3-7, and let's say we want to move now the vertex #1.

If we keep your triangles, face 5-1-3 and 5-3-7 will define a concave surface to be render (their normals will cross), while if we change those triangles to 5-1-7 and 1-3-7, then the surface will be convex (their normals won't cross):

Back to your initial shape, this change in those two faces will solve the rendering issues.

While the vertices are the same, the geometry is a little bit difference. So it requires some refinement (more elements). Adding those elements should be done keeping in mind this convex concept. The problem is not trivial, though, as you can see here.