cesium 3D point clouds measuring

[radoslavirha]

Hi,

I'm trying to create simple measuring tool for cesium 3D point clouds, but I think onClick method returns incorrect data for point. Not sure if I'm right, but it seems to me onClick does not work fine in 3D.

I have z coordinate from deck.pickObject. When I try to draw geojson from coordinates (geojson is not good solution, but very quick visualisation for now), z coordinate is +- 0 (my point cloud is 300m+). And coordinates seems to be reprojected to ground. Like it takes pixels from screen, but ignores altitude?

deck2.mov

onClick: (info, event) => {
  const pickInfo = info.layer.context.deck.pickObject({
     x: info.x,
     y: info.y,
     radius: 5,
     unproject3D: true,
     layerIds: [ this.currentLayer.label ]
  })

  this.measurePoints.push({
    type: 'Feature',
    properties: {
      name: this.measurePoints.length + 1,
      color: '#000000'
    },
    geometry: {
      type: 'Point',
      coordinates: [ pickInfo.coordinate[0], pickInfo.coordinate[1], pickInfo.coordinate[2] ]
    }
  });

  if (this.measurePoints.length > 1)
  {
    this.measureLines.push(
      {
        type: 'Feature',
        properties: {
          name: '',
          color: '#ff0000'
        },
        geometry: {
          type: 'MultiLineString',
          coordinates: [
          [
            this.measurePoints[this.measurePoints.length - 2].geometry.coordinates,
            [ pickInfo.coordinate[0], pickInfo.coordinate[1], pickInfo.coordinate[2] ]
          ]
        ]
        }
      })
  }

  this.measureGeoJSON = {
    type: 'FeatureCollection',
    features: [
      ...this.measurePoints,
      ...this.measureLines
    ]
  }

Then I found info.object.content.cartographicOrigin and I thought it could be coordinates of clicked point. But it seems to be coordinates (center?) of the top tile in current view (Tile Header)? The blue arrows point to where I clicked.

onClick: (info, event) => {
  this.measurePoints.push({
    type: 'Feature',
    properties: {
      name: this.measurePoints.length + 1,
      color: '#000000'
    },
    geometry: {
      type: 'Point',
      coordinates: [
        info.object.content.cartographicOrigin.x,
        info.object.content.cartographicOrigin.y,
        info.object.content.cartographicOrigin.z
      ]
    }
  });

  if (this.measurePoints.length > 1)
  {
    this.measureLines.push(
      {
        type: 'Feature',
        properties: {
          name: '',
          color: '#ff0000'
        },
        geometry: {
          type: 'MultiLineString',
          coordinates: [
          [
            this.measurePoints[this.measurePoints.length - 2].geometry.coordinates,
            [
              info.object.content.cartographicOrigin.x,
              info.object.content.cartographicOrigin.y,
              info.object.content.cartographicOrigin.z
            ]
          ]
        ]
        }
      })
  }

  this.measureGeoJSON = {
    type: 'FeatureCollection',
    features: [
      ...this.measurePoints,
      ...this.measureLines
    ]
  }

So I don't know if I'm doing something wrong, or picking engine is not working good with point clouds. How can I pick 3D coordinates of point?

Thanks

[Pessimistress]

If you want pickingInfo.coordinate to be 3D, you need to call pickObject manually with unproject3D: true.

I am not familiar with the Cesium point cloud format, but most likely the points (pickingInfo.object) are in meter offsets mode.

[ibgreen]

@radik24 very interested to hear if the approach works for you. Loaded tiles typically do have local meter coordinates and a composed transformation matrix, so there are reasons to believe that it could work for most tilesets.

@belom88 If this works, this could be a great feature to add to the loaders.gl examples you are working on in https://loaders.gl/examples/i3s-debug

[radoslavirha]

Hi I returned back to this issue.

Basically the same approach but first I need to know XYZ coordinates of point.

onClick: info => {
  console.log(info)
  const info2 = info.layer.context.deck.pickObject({
    x: info.x,
    y: info.y,
    radius: 5,
    layerIds: [ info.layer.id ],
    unproject3D: true
  })

  console.log(info2)
}

First log:

Second:

Z coordinate is wrong, it should be ~200m

Is it possible to get coordinates from picked index (like I3S)? Or how can i get correct coords?

Thanks

[ibgreen]

You want the relative coordinates within that tile? You may be able to access the tile content through the layer field and use the index to look up the original coordinates?

[radoslavirha]

I need world coordinates of point. I'm totally lost in info.layer. I'm trying to find some array of points and find my point with index from pick.

[bortomar]

Hello, I've got same problem. I've tried to compute world coordinates [longitude,latitude,elevation] using Cesium JS, but coordinates not coresponding real position of picked feature from Tile3DLayer. So I've tried to created PointCloudLayer from all points I've found in info.object.content.attributes.positions and I've got shifted shape. How could I compute right coordinates?

new deck.Tile3DLayer({
  	id: 'tile-3d-layer',
  	data: 'https://assets.cesium.com/33301/tileset.json',
  	loader: loaders.CesiumIonLoader,
  	loadOptions: {
		'cesium-ion': { accessToken: '...'},
  	},
  	pickable: true,
  	pointSize: 2,
	onClick: (info) => {
		const cartesianOrigin = info.object.content.cartesianOrigin
		const positions = info.object.content.attributes.positions
		const points = []
		for (let i = 0; i < info.object.content.featuresLength; i++) {
			const cartesian = new Cesium.Cartesian3(
				cartesianOrigin[0]+positions[i*3],
				cartesianOrigin[1]+positions[i*3+1],
				cartesianOrigin[2]+positions[i*3+2]
			)
	
			const radians = Cesium.Cartographic.fromCartesian(cartesian)
			const  coords = [
				Cesium.Math.toDegrees(radians.longitude),
				Cesium.Math.toDegrees(radians.latitude),
				radians.height
			]

			points.push({
				"position": [coords[0],coords[1],coords[2]],
				"color" [0,0,255],
			})
		
			const pcLayer = new deck.PointCloudLayer({
				id: 'point-cloud-layer',
    				data: points,
    				pointSize: 1,
    				getPosition: d => d.position,
    				getColor: d => d.color
  			})
	}
})

[radoslavirha]

Hi, it seems to be working on 8.7.0 👏 👏 👏 with:

onClick: info => {
  const info2 = info.layer.context.deck.pickObject({
    x: info.x,
    y: info.y,
    radius: 5,
    layerIds: [ info.layer.id ],
    unproject3D: true
  });
}

info2.coordinate seems to be accurate

small red dot is geojson layer created from info2.coordinate

Thank you!

[lymperis-e]

For anyone who might have faced the same situation as me, I was struggling for quite some time with this. info2.coordinate was only returning 2 components rather than 3..

I was using deckgl@9.0.1, which apparently had a bug.. downgraded to 8.7.0 and everything works like a charm! v9.0.1 also has a weird rendering bug, whereby the point cloud disappears from certain distances/angles.

I will also test v9.0.9 to see if the bugs are fixed.