title: JavaFX - masking a pane reduce visibility over 3D object
body: <p>I am trying to create a visual component that shows a disc with measure lines to show the current value from a source.</p>
  
  <p><a href="https://i.stack.imgur.com/hQS1B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hQS1B.jpg" alt="disc meter"></a></p>
  
  <p>Everything works well, but when I mask the container (Pane) to reduce the visible area the image is shown darkened.</p>
  
  <p>Before mask:
  <a href="https://i.stack.imgur.com/XwYPb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XwYPb.png" alt="before masking it"></a></p>
  
  <p>After mask:
  <a href="https://i.stack.imgur.com/joUzz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/joUzz.png" alt="after masking it"></a></p>
  
  <p>Mask doesn't work, SubScene works:
  <a href="https://i.stack.imgur.com/u6DXm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u6DXm.png" alt="it works"></a></p>
  
  <p>This is the code:</p>
  
  <p><strong>Main.java</strong></p>
  
  <pre><code>package sample;
  
  import javafx.application.Application;
  import javafx.fxml.FXMLLoader;
  import javafx.scene.Parent;
  import javafx.scene.Scene;
  import javafx.stage.Stage;
  
  public class Main extends Application {
  
      @Override
      public void start(Stage primaryStage) throws Exception{
          FXMLLoader loader = new FXMLLoader(
              getClass().getResource("sample.fxml"));
          Parent root = loader.load();
          primaryStage.setTitle("Clock Test");
          primaryStage.setScene(new Scene(root, 800, 200));
          primaryStage.show();
  
          Controller controller = loader.getController();
          controller.initClock();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p><strong>Controller.java [UPDATED]</strong></p>
  
  <pre><code>package sample;
  
  import javafx.fxml.FXML;
  import javafx.scene.Group;
  import javafx.scene.PerspectiveCamera;
  import javafx.scene.PointLight;
  import javafx.scene.SubScene;
  import javafx.scene.image.Image;
  import javafx.scene.layout.Pane;
  import javafx.scene.paint.Color;
  import javafx.scene.paint.PhongMaterial;
  import javafx.scene.shape.Cylinder;
  import javafx.scene.shape.Rectangle;
  
  public class Controller {
  
      @FXML private Pane clock;
  
      public void initClock() {
  
          PerspectiveCamera camera = new PerspectiveCamera();
          camera.setTranslateX(-150);
          camera.setTranslateY(-32.5);
          camera.setTranslateZ(-600);
  
          Group group = new Group();
  
          SubScene subScene = new SubScene(group, 300, 65);
          subScene.setCamera(camera);
  
          Rectangle rectangle = new Rectangle();
          rectangle.setArcWidth(1);
          rectangle.setArcHeight(1);
          rectangle.setX(0);
          rectangle.setY(0);
          rectangle.setWidth(300);
          rectangle.setHeight(65);
  
          Cylinder cylinder = new Cylinder(600, 65);
          PhongMaterial material = new PhongMaterial();
  
          Image diffuseMap
                  = new Image(getClass()
                  .getResource("/images/clock.png")
                  .toExternalForm());
  
          material.setDiffuseColor(new Color(1, 1, 1, 1));
          material.setDiffuseMap(diffuseMap);
          cylinder.setMaterial(material);
  
          PointLight light = new PointLight();
          light.setColor(Color.WHITE);
          light.setTranslateX(0);
          light.setTranslateY(50);
          light.setTranslateZ(-800);
  
          group.getChildren().addAll(cylinder, light);
  
          clock.getChildren().add(subScene);
      }
  }
  </code></pre>
  
  <p><strong>sample.fxml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?import javafx.scene.layout.ColumnConstraints?&gt;
  &lt;?import javafx.scene.layout.GridPane?&gt;
  &lt;?import javafx.scene.layout.Pane?&gt;
  &lt;?import javafx.scene.layout.RowConstraints?&gt;
  &lt;GridPane alignment="center" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.172-ea" fx:controller="sample.Controller"&gt;
    &lt;children&gt;
       &lt;Pane fx:id="clock" prefHeight="65.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1" /&gt;
    &lt;/children&gt;
    &lt;columnConstraints&gt;
       &lt;ColumnConstraints minWidth="10.0" prefWidth="100.0" /&gt;
       &lt;ColumnConstraints minWidth="300.0" maxWidth="300.0" prefWidth="300.0" /&gt;
       &lt;ColumnConstraints minWidth="10.0" prefWidth="100.0" /&gt;
    &lt;/columnConstraints&gt;
    &lt;rowConstraints&gt;
       &lt;RowConstraints minHeight="10.0" prefHeight="30.0" /&gt;
       &lt;RowConstraints /&gt;
       &lt;RowConstraints minHeight="10.0" prefHeight="30.0" /&gt;
    &lt;/rowConstraints&gt;
  &lt;/GridPane&gt;
  </code></pre>
  
  <p>The used image:
  <a href="https://i.stack.imgur.com/j62Mk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j62Mk.png" alt="meter image with lines"></a></p>
  
  <p>Clone it here:</p>
  
  <pre><code>git clone https://your_username@bitbucket.org/diegoluisr/meter3d.git
  </code></pre>