Point visibility through semi-transparent polygons and meshes

TonySchwebach — Tue, 22 Oct 2024 15:11:51 GMT

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>

topic Point visibility through semi-transparent polygons and meshes in ArcGIS JavaScript Maps SDK Questions

Point visibility through semi-transparent polygons and meshes