Use 2D Text into 3D scenes in JavaFX results in blurry texts

Question

I'm trying to display various Text objects inside a 3D scene

The problem is that when i zoom close to the text it looks very blurry.

Here's a screenshot from my app

Question: how can i improve the graphic quality of the text on the screen?

I've tried setting cache as in JavaFX 2D text with background in 3D scene because it seemed to improve graphics quality on the answer screenshots but it did not help me in my case.

Below is a compileable example stripped down form my app. It just create some random Text objects with positions and provides you a way to move around. Notice how the texts displays horribly when you zoom close.

You F10 and F11 to zoom in and out and mouse drag to move the camera.

package timelinefx;

import static javafx.application.Application.launch;
import java.util.Random;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.SceneAntialiasing;
import javafx.scene.SubScene;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
import javafx.scene.CacheHint;


public class TextInto3DScene extends Application {
    static Stage stage;
    static Scene scene;
    static Group root;
    static Group subSceneRoot;
    static PerspectiveCamera camera;
    static SubScene subScene;
    static boolean cached = true;
    static int width = 1000;
    static int height = width;

    @Override
    public void start(Stage primaryStage) throws Exception {
        createWindow();
    }

    protected static void createWindow(){
        stage = new Stage();
        root = new Group();
            root.setCache(cached);
            root.setCacheHint(CacheHint.QUALITY); //doesn't work
        scene = new Scene(root, 1500, 700, true, SceneAntialiasing.BALANCED);
        //Initialize the camera
        camera = new PerspectiveCamera(true);
        camera.setNearClip(0.1);
        camera.setFarClip(5000);
        camera.setTranslateZ(-200);

        //creates the SubScene and add the camera to it!
        subSceneRoot = new Group();
            subSceneRoot.setCache(cached); //doesn't work

        subScene = new SubScene(subSceneRoot, 1800, 700, true, SceneAntialiasing.BALANCED);
            subScene.setCache(cached);
            root.getChildren().add(subScene); 
        subScene.setFill(Color.WHITE);
        subScene.setCamera(camera);

        //Create random texts
        for( int i = 0;i<=100;++i){
            Text text = new Text(Math.random()* width-width/2, Math.random()*height-height/2, randomText() );
            text.setFill(  Color.BLACK  );
            text.setTranslateZ( Math.random()*750 );
            text.setCache(cached); //doesn't work
            text.setCacheHint(CacheHint.QUALITY);
            subSceneRoot.getChildren().add(text);
        }
        stage.setScene(scene);
        setEventHandlers();
        stage.show();
    }

    static void setEventHandlers() {
        scene.setOnMouseDragged((event) -> {

            //camera.setRotate(event.getX());
            double translateX = (event.getSceneX() - 0) / stage.getWidth();
            translateX = translateX * width - width/2;
            double translateY = (event.getSceneY() - 0) / stage.getHeight();
            translateY = translateY * height - height/2;
            double tz;
            if(!camera.getTransforms().isEmpty()){
                tz = camera.getTransforms().get(0).getTz();
            } else {
                tz = camera.getTranslateZ();
            }
            camera.getTransforms().clear();
            camera.getTransforms().addAll(  new Translate(translateX, translateY, tz)     );
        });

        //KEY PRESSED
        scene.setOnKeyPressed((event) -> {
            switch (event.getCode().toString()) {
                case "F10":
                    double amt = event.isControlDown() ? 100 : 30;
                    camera.setTranslateZ(camera.getTranslateZ() + amt);
                    break;
                case "F11":
                    amt = event.isControlDown() ? -100 : -30;
                    camera.setTranslateZ(camera.getTranslateZ() + amt);
                    break;
            }
        });
    }

    static String randomText(){
        String out = "";
        Random r = new Random();
        for(int i = 0;i<=10;++i){
            char c = (char) (r.nextInt(26) + 'a');
            out += c;
        }
        return out;
    }

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

}

score 4 · Accepted Answer · answered Mar 24 '18 at 22:35

The main difference between what you are trying to do and the referred question is the camera movement: cache worked in that question because while rotating the node, the camera remained at the same position.

But in your case, you render the Text nodes at a given position, and with a given quality, and when you start translating the camera, these nodes are not rendered differently (with different size or quality), thus they become blurry.

If cache won't work, there is another possibility, as suggested in this other question: using 3D nodes.

This has the obvious cost of dealing with 3D objects, more heavy weight than the 2D text nodes.

The main idea is: for a given text, we'll write the text into an image, and we'll use this image as the diffuse map of a 3D cuboid. Then we'll add the cuboid to the sub scene and translate to the x,y,z coordinates.

We need the CuboidMesh from FXyz3D library, as the built-in 3D Box places the same image into every face, so that wouldn't work. We can implement a 3D prism with a custom TriangleMesh as well, but the cuboid already provides that.

Then we can generate a net image for the cuboid, and set it so we have the desired card:

private CuboidMesh generateCard(String message) {

    Text text5 = new Text(message);
    text5.setFont(Font.font("Arial", FontWeight.BLACK, FontPosture.REGULAR, 60));
    GridPane grid = new GridPane();
    grid.setAlignment(Pos.CENTER);

    CuboidMesh contentShape = new CuboidMesh(40, 8, 0.01);
    PhongMaterial shader = new PhongMaterial();

    GridPane.setHalignment(text5, HPos.CENTER);

    grid.add(text5, 3, 1);

    double w = contentShape.getWidth() * 10; // more resolution
    double h = contentShape.getHeight() * 10;
    double d = contentShape.getDepth() * 10;
    final double W = 2 * d + 2 * w;
    final double H = 2 * d + h;

    ColumnConstraints col1 = new ColumnConstraints();
    col1.setPercentWidth(d * 100 / W);
    ColumnConstraints col2 = new ColumnConstraints();
    col2.setPercentWidth(w * 100 / W);
    ColumnConstraints col3 = new ColumnConstraints();
    col3.setPercentWidth(d * 100 / W);
    ColumnConstraints col4 = new ColumnConstraints();
    col4.setPercentWidth(w * 100 / W);
    grid.getColumnConstraints().addAll(col1, col2, col3, col4);

    RowConstraints row1 = new RowConstraints();
    row1.setPercentHeight(d * 100 / H);
    RowConstraints row2 = new RowConstraints();
    row2.setPercentHeight(h * 100 / H);
    RowConstraints row3 = new RowConstraints();
    row3.setPercentHeight(d * 100 / H);
    grid.getRowConstraints().addAll(row1, row2, row3);
    grid.setPrefSize(W, H);
    grid.setBackground(new Background(new BackgroundFill(Color.WHITESMOKE, CornerRadii.EMPTY, Insets.EMPTY)));
    new Scene(grid);
    WritableImage image = grid.snapshot(null, null);
    shader.setDiffuseMap(image);
    contentShape.setMaterial(shader);
    return contentShape;
}

The card looks dark, but with ambient light we can get rid of its dark background.

Let's generate the 100 cards:

for (int i = 0; i <= 100; i++) {
    CuboidMesh card = generateCard(randomText());
    card.setTranslateX(Math.random() * width - width / 2);
    card.setTranslateY(Math.random() * height - height / 2);
    card.setTranslateZ(Math.random() * 750);
    subSceneRoot.getChildren().add(card);
}

Finally set the subScene:

subScene.setFill(Color.WHITESMOKE);
subSceneRoot.getChildren().add(new AmbientLight(Color.WHITE));

and run it:

and zoom with the camera:

The text doesn't look blur anymore. If you still want more resolution you can create bigger snapshots, but that comes with a memory cost.

There is still a small issue, as the cards are not transparent and cover those behind them (I've tried to reduce their height as much as possible).

Thanks a lot for clearing the issue and for the example! Just out of curiosity, why not using ImageView instead of a Cuboid? I just did some tests and it works I also just did a small routine that checks for white pixels on the image (R, G and B >= 0.8 for ex) and replace them with a transparent color so you can see through holes in the chars. — Henri Augusto, Mar 29 '18 at 00:58
I didn't try the ImageView, but obviously if you are creating a snapshot and showing a high resolution image it should work (and allow transparency as you mentioned). Whenever I have to use 3D I prefer to use only 3D nodes, there is no good mixture of 2D and 3D, as you have experienced. — José Pereda, Mar 29 '18 at 08:18

Use 2D Text into 3D scenes in JavaFX results in blurry texts

1 Answers1