colorsjavafxgeometrymeshjavafx-3d

Coloring individual triangles in a triangle mesh on javafx

I have a triangle mesh object in JAVAFX and would like to either

  1. color individual triangles of the triangle mesh

or

  1. color individual vertices of each triangle and have the triangle be colored according to an interpolation of the colors of each vertex (say for instance with a Gouraud shading).

The particular triangle mesh object is an icosphere with millions of faces (that is why I am using a triangle mesh: I need speed).

I have NOT used texture coordinates since I have been unable to find a clear explanation to it using JAVAFX, plus I am hoping that there is a easier way.

Solution

  • The way coloring works in JavaFX 3D meshes is by the material you assign them. For one mesh there's one material, and it's not possible to assing different materials to different triangles of the same mesh.

    So if you want to avoid textures, I'm afraid the only way is grouping triangles with the same color in the same mesh, and creating so many meshes as colors.

    On the contrary, with textures is relatively easy..., since you have just one mesh, one material and one image with all the coloring.

    I've made an example of an icosahedron, built a triangle mesh for it and added a single texture to color all the faces.

    For that, we need:

    Now we need an image with the coloring for each face, based on the net of an icosahedron, like this:

    Net of an icosahedron

    (Image found here)

    Note that the mapping is done from the (0,0) to (1,1) normalized coordinates to the image (left,top) to (right, bottom) pixels.

    Let's finally create the scene, load the mesh and add the texture to its material:

    @Override
public void start(Stage primaryStage) throws Exception {
    Group sceneRoot = new Group();
    Scene scene = new Scene(sceneRoot, 600, 600, true, SceneAntialiasing.BALANCED);
    scene.setFill(Color.BLACK);
    PerspectiveCamera camera = new PerspectiveCamera(true);
    camera.setNearClip(0.1);
    camera.setFarClip(10000.0);
    camera.setTranslateZ(-4);
    scene.setCamera(camera);

    IcosahedronMesh mesh = new IcosahedronMesh();
    mesh.setCullFace(CullFace.FRONT);
    PhongMaterial mat = new PhongMaterial();
    mat.setDiffuseMap(new Image(getClass().getResourceAsStream("icosah_net.png")));
    mesh.setMaterial(mat);
    Rotate rotateY = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS);
    mesh.getTransforms().addAll(new Rotate(30,Rotate.X_AXIS),rotateY);

    sceneRoot.getChildren().addAll(mesh, new AmbientLight(Color.WHITE));

    primaryStage.setTitle("JavaFX 3D - Icosahedron");
    primaryStage.setScene(scene);
    primaryStage.show();        
}

    This is how it looks like:

    Icosahedron

    EDIT

    Now, if you think about how the texture is applied, you could simplify the image up to several squares with the palette of colors you need:

    Palette of colors

    And the texture coordinates can be really simplified:

    m.getTexCoords().addAll(
        0.1f, 0.5f, // 0 red
        0.3f, 0.5f, // 1 green
        0.5f, 0.5f, // 2 blue
        0.7f, 0.5f, // 3 yellow
        0.9f, 0.5f  // 4 orange
);

    Finally, we have to map those points in our faces. Following the same pattern as the net image:

    m.getFaces().addAll(
        1, 0, 11, 0, 7, 0, 
        1, 4, 7, 4, 6, 4, 
        1, 4, 6, 4, 10, 4, 
        1, 2, 10, 2, 3, 2, 
        1, 2, 3, 2, 11, 2,                
        4, 3, 8, 3, 0, 3, 
        5, 3, 4, 3, 0, 3, 
        9, 1, 5, 1, 0, 1, 
        2, 1, 9, 1, 0, 1, 
        8, 0, 2, 0, 0, 0, 

        11, 3, 9, 3, 7, 3,
        7, 1, 2, 1, 6, 1, 
        6, 1, 8, 1, 10, 1, 
        10, 0, 4, 0, 3, 0, 
        3, 0, 5, 0, 11, 0,

        4, 4, 10, 4, 8, 4, 
        5, 4, 3, 4, 4, 4, 
        9, 2, 11, 2, 5, 2, 
        2, 2, 7, 2, 9, 2, 
        8, 3, 6, 3, 2, 3
);

    Now we'll have a very neat icosahedron, since we get rid of the borders and bad resolution of the image:

    Improved icosahedron

    This can be extended to any triangle mesh, or use any algorithm to refine the triangles.