Point visibility through semi-transparent polygons and meshes

TonySchwebach · ‎10-22-2024

I have a 3D scene view with point and polygon geometries. The polygon symbols are semi-transparent backgrounds, and I want to be able to see the points on the other side of the polygon. Any ideas on how I can make this happen?

Here is a simple stackblitz demo with different graphics. From the starting camera position, you can see a point under the square polygon. As you tilt the camera angle down, the polygon covers the point. Since the polygon is semi-transparent I would like to see the point through the polygon. However, it is completely hidden.

point visible

point hidden by transparent polygon

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Add Graphics to a SceneView | Sample | ArcGIS Maps SDK for JavaScript 4.30
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.30/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.30/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/Mesh",
        "esri/geometry/Point",
      ], (Map, SceneView, GraphicsLayer, Graphic, Mesh, Point) => {
        const map = new Map({
          basemap: "hybrid",
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map,

          camera: {
            // autocasts as new Camera()
            position: {
              // autocasts as new Point()
              x: -0.17746710975334712,
              y: 51.44543992422466,
              z: 1266.7049653716385,
            },
            heading: 0.34445102566290225,
            tilt: 82.95536300536367,
          },
        });

        /*********************
         * Add graphics layer
         *********************/

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        /*************************
         * Add a 3D point graphic
         *************************/

        // London
        const point = new Point({
          // type: "point", // autocasts as new Point()
          x: -0.178,
          y: 51.48791,
          z: 1010,
        });

        const markerSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [226, 119, 40],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2,
          },
        };

        const pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol,
        });

        /****************************
         * Add a 3D polyline graphic
         ****************************/

        const polyline = {
          type: "polyline", // autocasts as new Polyline()
          paths: [
            [-0.178, 51.48791, 0],
            [-0.178, 51.48791, 1000],
          ],
        };

        const lineSymbol = {
          type: "simple-line", // autocasts as SimpleLineSymbol()
          color: [226, 119, 40],
          width: 4,
        };

        const polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol,
        });

        graphicsLayer.add(polylineGraphic);

        /***************************
         * Add a 3D polygon graphic
         ***************************/

        const polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-0.184, 51.48391, 400],
            [-0.184, 51.49091, 500],
            [-0.172, 51.49091, 500],
            [-0.172, 51.48391, 400],
            [-0.184, 51.48391, 400],
          ],
        };

        const fillSymbol = {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: [227, 139, 79, 0.8],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2,
          },
        };

        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol,
        });

        graphicsLayer.add(polygonGraphic);

        // add mesh

        const mesh = Mesh.createSphere(point, { size: 1500, unit: "meters" });

        const meshSymbol = {
          type: "mesh-3d", // autocasts as new MeshSymbol3D()
          symbolLayers: [
            {
              type: "fill",
              material: { color: [237, 118, 0, 0.2] },
              outline: {
                color: [237, 118, 0, 0.35],
                size: 2,
              },
            },
          ],
        };

        const meshGraphic = new Graphic({ geometry: mesh, symbol: meshSymbol });

        graphicsLayer.add(meshGraphic);

        graphicsLayer.add(pointGraphic);

        const point2Graphic = new Graphic({
          geometry: {
            type: "point", // autocasts as new Point()
            x: -0.178,
            y: 51.48791,
            z: 250,
          },
          symbol: markerSymbol,
        });

        graphicsLayer.add(point2Graphic);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>