javafxgraphicsshadowjavafx-3djavafx-css

JavaFX - "Pointless" (CSS) Shadow Effect, Drastically decrices Graphics Performance


Hello, People [...]

🤔 Summary

👁️ Preview

demonstration / Preview .GIF

⚠️ Recreating The Issue

Files Needed:

App.java | main.fxml | AnchorPane.css | MathUtils.java | SimpleFPSCamera.java

📝 General Code

(You can refer to Recreating The Issue Section for more Informations too)

AnchorPane.css

#BorderPane1 {
    -fx-effect: dropshadow(three-pass-box, rgb(26, 26, 26), 50, 0.6, 0, 0); /* Comment it*/
}

App.java

public class App extends Application {
    @FXML
    
    public Parent root;
    public TabPane TabPane1;
    public BorderPane BorderPane1;
    
    public static void main(String[] args) throws Exception {
        launch(args);
    }

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

        FXMLLoader loader = new FXMLLoader(getClass().getResource("main.fxml"));
        loader.setController(this);

        root = loader.load();
        Scene RootScene = new Scene(root, 1120, 540);

        primaryStage.setScene(RootScene);

        Thread t = new Thread() {
            public void run() {

                //Setting NewButton2
                Button NewButton2 = new Button();

                NewButton2.setId("Button2");
                NewButton2.setText("test2");
                NewButton2.setPrefWidth(150);
                NewButton2.setPrefHeight(50);
                NewButton2.setTranslateX(-75);
                NewButton2.setTranslateY(-25);
                NewButton2.setTranslateZ(900);

                // Setting group
                Group SubRootGroup = new Group(NewButton2);

                SubRootGroup.setTranslateX(0);
                SubRootGroup.setTranslateY(0);
                SubRootGroup.setTranslateZ(0);

                // Setting Scene
                SubScene SubScene1 = new SubScene(SubRootGroup, 0, 0, true, SceneAntialiasing.BALANCED);

                SubScene1.setId("SubScene1");
                SubScene1.setFill(Color.WHITE);
                SubScene1.heightProperty().bind(RootScene.heightProperty());
                SubScene1.widthProperty().bind(RootScene.widthProperty());

                // Initializing Camera
                SimpleFPSCamera SimpleFPSCam = new SimpleFPSCamera();
                
                // Setting Camera To The Scene
                SubScene1.setCamera(SimpleFPSCam.getCamera());

                // Adding Scene To Stage-TabPane.Tab(0)
                TabPane1.getTabs().add(new Tab("Without Shadows"));
                TabPane1.getTabs().get(0).setContent(SubScene1);

                // Loading Mouse & Keyboard Events
                SimpleFPSCam.loadControlsForSubScene(SubScene1);
            }
        };
        t.setDaemon(true);
        t.run();

        primaryStage.show();

    }
}

Things I 've Tried Until Now

setCache(true);
setCacheShape(true);
setCacheHint(CacheHint.SPEED);

(i have tried using it with all components without having any success [it might be my poor javaFX knowledge too , [using it in the wrong way?] ])

💛 Outro

Any Idea? Thanks In Advance, Any help will be highly appreciated, 💛 [...]
George.


Solution

  • Most probably, you will have figured this out by now, but since I was also banging my head about this same issue in the past, here is your answer:

    The drop shadow effect is "expensive" and drawing it is slow. If you use it on a node with many descendants and move any of the descendants, it will cause the effect to be re-calculated on the parent, so the whole animation becomes slow (regardless if the parent itself is animated or not).

    I solved this by using a StackPane as the top-most container, to which I added a Pane as a first child (which has the css drop-shadow effect) and the normal top-level container for the actual controls as a second child.

    This way, the "shadow" pane is not updated when something is animated down the layout tree and, voila, you have a working drop-shadow effect without a performance hit :-)