Updating polyline positions is cancelling a previous request to update?

CesiumJS
1

Hi!

We want to draw a line between a point on the tileset, and the mouse. So I registered a MOUSE_MOVE screen space event handler, that sets the `positions` after every move event.

The problem is that the line just doesn't appear at all, unless the mouse is still for about half a second. I did some research and came across a post that said something about the entity shipping of the render request to a web worker, and if you send a new one before the old one is done the old one is cancelled. That sounds like it could have this effect, but still does it really take ~500ms to get a 2 point polyline into that webworker? I have a feeling there's something else going on as well.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

// setup
    viewer.screenSpaceEventHandler.setInputAction(
      (movement: any) => this.handleMouseMove(movement),
      Cesium.ScreenSpaceEventType.MOUSE_MOVE
    )

// handler
handleMouseMove(movement: any) {
    if (!this.measurementReady) {
      const previousPoint = this.measurePoints[this.measurePoints.length - 1]
      if (previousPoint) {
        const position = this.viewer.scene.pickPosition(movement.endPosition)

        this.measuredDistance =
          this.measuredDistanceSoFar +
          Cesium.Cartesian3.distance(previousPoint, position)

          this.measuredDistanceLine.polyline.positions = [
            this.measurePointA,
            this.measurePointB,
        ]

        this.updateMetaData()
      }
    }
  }

The goal is to have a smooth UI where the user sees where the line is going to be before they commit to it. I understand that dynamic buffers are not done yet, but I imagine just sending two vertices to the gpu shouldn't take 500ms. If I should use the primitive api instead of the entity api, is there an example somewhere of rendering a polyline with some material applied to it the primitive way?

I'm using Cesium 1.55, in Chrome on MacOSX.

2

Was that post you found one I wrote? If you still have it, could you link it for context?

In any case, the problem is Cesium is assuming entities won’t change by default. Using a CallbackProperty will mark an Entity as dynamic, so it will update immediately. See this Sandcastle:

https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html

It should be perfectly synced as you draw, and notice that when you right click to finish drawing and create a new, static entity, you can see the delay there.

Let me know if using a CallbackProperty solves your issue (even if it doesn’t update very frame, it can just always return the current position, which you can store as a separate object, and update that when you want to update the property). There’s currently no way to mark a static entity as requiring an update. I posted some thoughts on that here: https://github.com/AnalyticalGraphicsInc/cesium/issues/6631#issuecomment-461841873

3

Hi Omar,

Sorry for the late response. Your suggestions helped me solve the problem. I also had another problem of Vue.JS conflicting with Cesium causing very low framerate that I solved by separating them better. I tried but I could not find the post about the web workers cancelling update requests, but I’m pretty sure it was not relevant.

Thanks!

Tinco