PolygonSymbol3D with FillSymbol3DLayer draped at elevation above ground level

[JamesEyre]

I would like to take a graphic which has a 2D polygon for geometry, and apply a PolygonSymbol3D with a FillSymbol3DLayer and have it drape over the underlying topography. I can do this, and it works fine when there is no z value specified for the geometry.

But, I would like to raise this polygon above the ground level, but it should still have a draped effect following the contours of the topography below.

Does anyone know if this is possible?

Cheers,

Jamie

[ThomasSolow]

I suspect you can do this by setting the elevationInfo of the layer in question to relative-to-ground.  So:

layer.elevationInfo = { mode: 'relative-to-ground' };‍

I'm not sure if that will work.  If it doesn't, another option would be to set the elevationInfo mode to 'absolute' and manually calculate the position of each vertex in the polygon.  You can do this with view.basemapTerrain.getElevation(<point>) + offset from terrain (meters).  You'd want to do that for each vertex in the polygon to get a new z value for each one.

[JamesEyre]

Hi Thomas,

Thanks for the suggestions, but neither of those options work.

The polygon vertices are correct, but between the vertices is just a straight line, it does not follow the terrain.

Any other ideas?

Cheers,

Jamie 

[ThomasSolow]

Yeah, you're right.  I'm not sure if this is currently supported/easily achievable.  Ideally there would be a way to specify that a layer is 'on-the-ground' with an offset to get this effect.  But 'on-the-ground' layers ignore the offset.

There is a mesh symbol that is probably suitable for this kind of thing: MeshSymbol3D | API Reference | ArcGIS API for JavaScript 4.3 

The trouble is, I don't know how to specify a geometry in order to describe a surface (rather than a polygon).  It wouldn't be too hard to build your own "mesh geometry" in the browser using view.basemapTerrain.getElevation at some resolution inside your polygon, but I don't see any documentation about how you'd use this data to create geometry in the JS API.

Scene layers often use a mesh symbol and can have a geometry type of "mesh."  So they're able to draw this kind of thing in a scene. It looks like they use this format to hold the geometry data.  You might be able to use arcgis pro to create the geometry you're after and serve it up to the JS API somehow.

Another option would be to use externalRenderers to create the geometry you want and render it as part of the scene.  I've played around with this using Three.js and it should be doable, though it would take some work. I might reply to this thread later if I get a chance to make a sample for this.

[JamesEyre]

Thanks so much for your help so far. I was also at the MeshSymbol3D, but was not sure what kind of geometry I would need in my graphic to have the MeshSymbol3D render it.

A sample would be great.

Cheers,

Jamie

[ThomasSolow]

Here's a sample I made based on the externalRenderers sample in the JS API SDK: JS Bin - Collaborative JavaScript Debugging

Click on the map to add a square of material X meters over the terrain that conforms to the terrain.  I set it to be a mesh, but you can make it solid.  The width, resolution, and height above ground are also adjustable.

This uses Three.js from a CDN to handle the creation and placement of the geometry and some code to sample the terrain elevation where the geometry is placed.

I'm hoping to keep looking at this to see how mesh geometries are rendered in a scene layer situation.  This should be possible without Three.js and with arbitrarily shaped polygons.