Ground Overlay with gx:LatLonQuad

Hi to all. Great work with Cesium!
Recently we tried many GoogleEarth alternatives (including ArcGis, SharpMap, etc...), but none of them was good enough to replace it.
We are still using googleEarth, but the clock is ticking and we decided to try Cesium.
For now, it looks very promising!
One of the problems we try to solve is to correctly show objects represented with this KML:

<GroundOverlay id="a6925dcd-9c68-437a-9e90-8167a178c0e9">
  <name>Overlay</name>
  <visibility>0</visibility>
  <Icon>
    <href>http://127.0.0.1:14499/frame.jpg</href>
    <viewBoundScale>0.75</viewBoundScale>
  </Icon>
  <gx:LatLonQuad>
    <coordinates>
      -125.7948791,31.7647378,0
      -125.7948905,31.7663583,0
      -125.7995141,31.7679331,0
      -125.7984818,31.7645867,0
      -125.7948791,31.7647378,0
    </coordinates>
  </gx:LatLonQuad>
</GroundOverlay>

What is correctly shown in cesium:
1. gx:LatLonQuad is shown properly
2. Icon/href image is also retrieved (CORS is enabled on the server)

What's wrong:
1. Icon/href is not shown correctly. It looks like it is cropped instead of transformed.

I know that in the current KML implementation this specific feature is not implemented.

Are there some workarounds that may help me to achieve this goal (to show the image on gx:LatLonQuad), and which would be the best?

Hello,

Glad to hear you’re liking Cesium so far!

For your issue, would you be able to post a screenshot of what you expect it to look like and what it looks like in Cesium? That will help me give recommendations to achieve what you’re looking for.

Thanks,

Hannah

Hello, Hannah,
Thank you for the quick response.

Here is the screenshot made in google earth with correctly shown kml:
http://s32.postimg.org/q6scdxldx/ge_example.png

and here is the same kml in cesium:
http://s32.postimg.org/ihmru3n2d/cz_example.png

Here is the whole kml file content:

<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
  <GroundOverlay id="69b165f9-05d7-44a7-b672-d7159cc523aa">
    <name>Overlay</name>
    <visibility>1</visibility>
    <Icon>
      <href>test_frame.jpg</href>
      <viewBoundScale>0.75</viewBoundScale>
    </Icon>
    <gx:LatLonQuad>
      <coordinates>
       -121.7948791,36.7647378,0
       -121.7948905,36.7663583,0
       -121.7995141,36.7679331,0
       -121.7984818,36.7645867,0
       -121.7948791,36.7647378,0
      </coordinates>
    </gx:LatLonQuad>
  </GroundOverlay>
</kml>

and this is test_frame.jpg
http://s32.postimg.org/gly5dg2h1/test_frame.jpg

You are seeing a known limitation of the KML processor in Cesium which I’m seeing reported in the browser console as:

KML - gx:LatLonQuad Icon does not support texture projection.

Correcting this is on the to do list (https://github.com/AnalyticalGraphicsInc/cesium/issues/873), but I can’t say when it will be done.

Scott

P.S. Your LatLonQuad has too many coordinates (five).

Thanks for the response.

I know for that limitation.

Is there some workaround that will allow me to achieve the same result as in GoogleEarth?
Maybe by using CZML, or some custom geometry, or writing some custom shader/renderer, or something else?

Unfortunately, I don’t think there is any easy workaround for this. You would need to implement a custom geometry type that generates the correct texture coordinates, then you would need to connect that type through the entity API and finally modify KmlDataSource to use the new type.
If you would like more information about how to implement this, I can point you to some resources.

-Hannah

We made some complicated workaround.
We warped input image in the way it fits to the groundOverlay in the same way as in googleEarth.
After transformation our image looks like:
http://s32.postimg.org/5h6jitcat/test_frame_warped.png

That works, but it isn't elegant solution because we had to add another layer of abstraction that changes our input image.

There are few of us here that are willing to try to implement at least a custom geometry type with correct texture coordinates (we don't explicitly need to do this through the kml), so any additional information and resources are welcome :slight_smile:

Great! Glad you were able to make that work for now.
So to get a general idea of how the geometry and appearances layer works as a whole, start by reading this tutorial: http://cesiumjs.org/tutorials/Geometry-and-Appearances/

I started writing a tutorial about creating a custom geometry type here: https://github.com/AnalyticalGraphicsInc/cesium/wiki/Geometry-and-Appearances

Some of the code samples may be outdated, but the concepts should still be the same

Take a look at the code for RectangleGeometry: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/RectangleGeometry.js

If you need the latlonqad to curve to the surface of the globe, you’ll probably want to tesselate it in a similar way, just instead of iterating on lat/lon degrees you’ll probably want to interpolate between points using an EllipsoidGeodesic.

You might be able to compute the ‘st’ texture coordinates the same way. The code for finding the normals/tangents/binormals should be similar as well.

If you haven’t already, take a look at our Contributors Documentation. This includes a Build Guide with instructions for pulling down and running the code

You’ll be able to see examples for how to use your new geometry type when you’re running the code locally. In Sandcastle, you’ll see a ‘Development’ tab with examples like this one: http://cesiumjs.org/cesium/Apps/Sandcastle/index.html?src=development/Rectangle.html&label=Development

Let me know if you have any questions! Once you get this part of it working, I can point you to more resources for connecting it to the KmlDataSource.

-Hannah

Hello,

reviving this as I want to know if there are any new developments in this area. I'm trying to visualizes some ground overlays which we used to overlay using google earth. Cesium doesn't seem to apply any rotation. Bellow is an example where you can see that the image inside the box isn't rotated as it should:
https://dl.dropboxusercontent.com/u/10965353/Screen%20Shot%202017-02-13%20at%2018.00.03.jpg

Sorry, dropbox is blocked from my network so I can’t see the image. Can you attach it or insert it into the forum post instead?

-Hannah

Τη Δευτέρα, 13 Φεβρουαρίου 2017 - 6:15:17 μ.μ. UTC+2, ο χρήστης Hannah Pinkos έγραψε:

Sorry, dropbox is blocked from my network so I can't see the image. Can you attach it or insert it into the forum post instead?

-Hannah

On Monday, February 13, 2017 at 11:05:06 AM UTC-5, nikos....@gmail.com wrote:Hello,
reviving this as I want to know if there are any new developments in this area. I'm trying to visualizes some ground overlays which we used to overlay using google earth. Cesium doesn't seem to apply any rotation. Bellow is an example where you can see that the image inside the box isn't rotated as it should:
https://dl.dropboxusercontent.com/u/10965353/Screen%20Shot%202017-02-13%20at%2018.00.03.jpg

I tried to find an attach button but I still do not see it. Here's a link that should work though. Notice that the image/layer isn't rotated inside the box.
http://citisens.eu/rotation.jpg

Ah okay. The best way to do this would be with a Rectangle entity with a rotation. You can see an example here: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Rectangle.html&label=Geometries
We don’t currently have support for LatLonQuads, but we have an issue written up to add support here: https://github.com/AnalyticalGraphicsInc/cesium/issues/4164

-Hannah

Hannah,

thanks for your input. I still cannot figure out how could I fit the pictured overlay inside the background box by defining just two points/corners. Rotation messes up with the overlay’s corners and they do not align with the box corners.

Nikos

I decided that one path forward is to stop using rotations altogether until gx:LatLonQuad is supported fully by Cesium.

My problem now is that although the screen overlay displays OK when terrain view is disabled, when I enable a terrainProvider the overlay isn't clamped to the ground despite setting the clampedToGround option to true in the KmlDataSource.load options. I tried this with other types of KMLs that we use (vector types, polygons, etc.) and the problem remains.

Please tell me that I'm doing something wrong and that the "clamped to ground" functionality is supported is some way.

Make sure you’re using the clampToGround option for the KmlDataSource:

viewer.dataSources.add(Cesium.KmlDataSource.load(’…/…/SampleData/kml/facilities/facilities.kml’, {

camera : viewer.scene.camera,

canvas : viewer.scene.canvas,

clampToGround: true

}));

If you are doing that and your entities are still not clamped to ground, could you put together a sample KML file that reproduces the problem?

Thanks,

Hannah

Yes I tried this but it didn’t work.

To replicate the issue use this code snippet:

var terrainProvider = new Cesium.CesiumTerrainProvider({

url : 'https://assets.agi.com/stk-terrain/world’,

requestVertexNormals : true

});

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

baseLayerPicker : false,

terrainProvider : terrainProvider

});

var options = {

camera : viewer.scene.camera,

canvas : viewer.scene.canvas,

clampToGround : true

};

viewer.dataSources.add(Cesium.KmlDataSource.load('https://dl.dropboxusercontent.com/u/10965353/slope.kml’, options));

I also attach the KML file just in case.

slope.kml (492 Bytes)

Τη Τετάρτη, 15 Φεβρουαρίου 2017 - 5:10:44 μ.μ. UTC+2, ο χρήστης Hannah Pinkos έγραψε:

Make sure you're using the clampToGround option for the KmlDataSource:

viewer.dataSources.add(Cesium.KmlDataSource.load('../../SampleData/kml/facilities/facilities.kml', {

camera : viewer\.scene\.camera,
canvas : viewer\.scene\.canvas,
clampToGround: true

}));

If you are doing that and your entities are still not clamped to ground, could you put together a sample KML file that reproduces the problem?

Thanks,

Hannah

On Tuesday, February 14, 2017 at 11:36:29 PM UTC-5, nikos....@gmail.com wrote:I decided that one path forward is to stop using rotations altogether until gx:LatLonQuad is supported fully by Cesium.
My problem now is that although the screen overlay displays OK when terrain view is disabled, when I enable a terrainProvider the overlay isn't clamped to the ground despite setting the clampedToGround option to true in the KmlDataSource.load options. I tried this with other types of KMLs that we use (vector types, polygons, etc.) and the problem remains.
Please tell me that I'm doing something wrong and that the "clamped to ground" functionality is supported is some way.

Hi Hannah,

did you notice the problem using the files I gave you? I have the same problem when using KMLs containing polygon coordinates (no overlays). The polygons are still not clamped to the ground even when I use the clampedToGround option.

Sorry, I forgot to take a look at this before. Thanks for reminding me.
The problem is because we currently do not have ground clamping support for geometry with an image material. Geometry can only clamp to ground if it has a color material.

I created an issue here so we can keep track of the number of users asking for this: https://github.com/AnalyticalGraphicsInc/cesium/issues/5025

Best,

Hannah

Thanks for the issue report. As I said in my previous email the problem exists not only for image materials but for polygons as well. Try to visualise the attached KML with terrain ON and watch the polygon positions drift when tilting the camera view despite setting clampToGround: true.

Best,

Nikos

fireProb-3.kml (142 KB)

Ground clamping worked fine for that file. Here is the code I used:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var options = {

camera : viewer.scene.camera,

canvas : viewer.scene.canvas,

clampToGround: true

};

var ds = viewer.dataSources.add(Cesium.KmlDataSource.load(’…/…/SampleData/kml/fireProb-3.kml’, options));

viewer.zoomTo(ds);

``

If that doesn’t work, what version of Cesium are you using? Make sure you are using the latest version.

And what OS and browser are you using?

-Hannah