Drawing with polylines working, but a little slow

1,911 views
Skip to first unread message

Scott Haynes

unread,
Jul 3, 2013, 10:08:33 AM7/3/13
to cesiu...@googlegroups.com
I'm just wondering if anyone has any suggestions on how to speed up the creation of polylines?  Of course some of the blame maybe because of going through vwf, but just wanted to check and see if anyone had any suggestions.  I only create a line if the line's distance is over 80000 units long, and that has helped out a fair bit.  Any other ideas?


Scott

Patrick Cozzi

unread,
Jul 5, 2013, 12:31:57 PM7/5/13
to cesiu...@googlegroups.com
Scott,

Have you profiled this?  Are you sure it is Cesium?  The current PolylineCollection is not well-suited for dynamically adding a single point at a time, but unless there are 1,000s of points in the polyline, it should be better than this.

Longer-term, we are going to extent the Geometry and Appearances work to include near-direct access to vertex buffers for dynamic use cases, but it's a ways out.

Patrick

Rebecca Dengate

unread,
Jul 8, 2013, 12:16:21 AM7/8/13
to cesiu...@googlegroups.com
Hi Scott,

I was having the same problem (polylines were slow to draw, and once drawn interactive navigation slowed to a crawl), but have adopted a polyline as texture solution where the polyline data in geojson format is being converted to image tiles (png files) by TileCache using mapnik. The tiles are drawn onto the Cesium globe using Cesium's WebMapServiceImageryProvider.

This has problems if you need to alter the polylines that are displayed, but I've drawn lines with more than a million vertices using this approach and it's very fast.

Cheers,
Rebecca

Scott Haynes

unread,
Jul 9, 2013, 9:22:53 AM7/9/13
to cesiu...@googlegroups.com
That sounds like a good idea, but I don't currently have time to implement much else before our demo next week.  I may ping you back later to find out more if that would be ok.

Scott

Matthew Amato

unread,
Jul 9, 2013, 9:30:27 AM7/9/13
to cesiu...@googlegroups.com
I was just playing around with your demo and I assume you are trying to speed up the interactive line drawing part?  Can you post the code or at least explain in more detail how you have this implemented?  I can't think of a good reason for it to be that slow.


--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Scott Haynes

unread,
Jul 9, 2013, 9:51:27 AM7/9/13
to cesiu...@googlegroups.com
The lines are being created in vwf(which might be a reason why it's slower), so the creation is in several places.  Patrick suggested profiling, which is the next step to really understanding what is going on. At this point, I've got other issues to work on, and speeding things up is more of a nice to have.


support/client/lib/vwf/view/cesium.js - mouse events captured, and dispatched out

            // left up
            mouse.setInputAction( function( movement ) {
                
                self.state.mouse.leftDown = false;
                var eData = pick( "left", 0, "up", movement.position );
                if ( downID !== undefined ) {
                    self.kernel.dispatchEvent( downID, "pointerUp", eData.eventData, eData.eventNodeData );
                }
                self.state.mouse.leftDownID = undefined;

            }, Cesium.ScreenSpaceEventType.LEFT_UP );

            // left down
            mouse.setInputAction( function( movement ) {
                
                self.state.mouse.leftDown = true;
                var eData = pick( "left", 0, "down", movement.position );
                self.kernel.dispatchEvent( downID, "pointerDown", eData.eventData, eData.eventNodeData );
            
            }, Cesium.ScreenSpaceEventType.LEFT_DOWN );

            // mouse move
            mouse.setInputAction( function( movement ) {
                var bd = self.state.mouse.buttonDown();
                if ( bd ) {
                    var eData = pick( bd, 0, "drag", movement.endPosition );
                    self.kernel.dispatchEvent( downID, "pointerMove", eData.eventData, eData.eventNodeData );
                } else {
                    var eData = pick( "", 0, "move", movement.endPosition );
                    if ( lastOverID === undefined && overID !== undefined ) {
                        self.kernel.dispatchEvent( overID, "pointerEnter", eData.eventData, eData.eventNodeData );
                        lastOverID = overID;
                    } else if ( overID ) {
                        if ( overID !== lastOverID ) {
                            self.kernel.dispatchEvent( lastOverID, "pointerLeave", eData.eventData, eData.eventNodeData );
                            self.kernel.dispatchEvent( overID, "pointerEnter", eData.eventData, eData.eventNodeData );
                            lastOverID = overID;
                        } else {
                            self.kernel.dispatchEvent( overID, "pointerOver", eData.eventData, eData.eventNodeData );
                        }
                    }
                }   
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE );

public/cesium-webrtc/index.vwf.yaml - mouse events are implemented and sends a create, this is the root/application file

    this.pointerDown = function( pointerInfo, pickInfo ) {
      
      switch ( pointerInfo.button ) {
          case "left":
            switch ( this.toolbar.inputMode ) {
              
              case "draw":
                if ( pickInfo && pickInfo.globalPosition ) {
                  this.lastDrawPoint = { pickInfo: pickInfo };
                } else {
                  this.lastDrawPoint = undefined;
                }
                break;
            }          
            break;
      }

    }
    this.pointerMove = function( pointerInfo, pickInfo ) {
      
      switch ( pointerInfo.button ) {
        
        case "left":
          switch ( this.toolbar.inputMode ) {
            case "draw":
              if ( pickInfo.globalPosition ) {
                var dist = this.distanceFromLast( pickInfo );
                console.info( "dist = " + dist + "       this.minDistanceSquared = " + this.minDistanceSquared );
                if ( dist > this.minDistanceSquared ) {
                  this.draw( pickInfo )
                }
              }
              break;
          }
          break;
      }

    }    
    this.pointerUp = function( pointerInfo, pickInfo ) {
      
      switch ( this.toolbar.inputMode ) {
        case "draw":
          if ( pickInfo.globalPosition ) {
            this.draw( pickInfo )
          }
          break;
      }
      this.lastDrawPoint = undefined;
      this.polyLineCollection = undefined;

    }

support/client/lib/vwf/model/cesium.js  - actual creation in creatingNode function, see below 

                this.state.nodes[ childID ] = node = createNode();
                sceneNode = findSceneNode.call( this, node );
                parentNode = findParent.call( this, nodeID );

                if ( parentNode && parentNode.cesiumObj instanceof Cesium.DynamicObject ) {
                    node.cesiumObj = parentNode.cesiumObj.polyline;
                } else { 
                    var primitives = sceneNode.scene.getPrimitives();               
                    if ( parentNode.cesiumObj && parentNode.cesiumObj instanceof Cesium.PolylineCollection ) {
                        node.polylineCollection = parentNode.cesiumObj;
                    }

                    if ( node.polylineCollection === undefined ) {
                        node.polylineCollection = new Cesium.PolylineCollection();
                    }

                    node.cesiumObj = node.polylineCollection.add( childSource );
                    if ( !primitives.contains( node.polylineCollection ) ) {
                        primitives.add( node.polylineCollection );
                    }
                    node.cesiumObj.vwfID = childID;
                }
                node.scene = sceneNode.scene;


Scott



--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/KIafPg_vZdg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.

Rebecca Dengate

unread,
Jul 9, 2013, 7:41:37 PM7/9/13
to cesiu...@googlegroups.com
Sure, no problem.

Cheers,
Rebecca

ja...@meicompany.com

unread,
Aug 26, 2013, 10:50:27 PM8/26/13
to cesiu...@googlegroups.com
I'm experiencing the same issue. I'm able to dynamically add points to the polyline but as the number of points increases, the interactive navigation drags until it is unusable (about after 8000 points in a single polyline). Have there been any updates on this?

Below is the code that I'm using to update the polyline when a websocket message is received:
var positions = polyline3D.getPositions();
positions.push(widget3D.centralBody.getEllipsoid().cartographicToCartesian(Cesium.Cartographic.fromDegrees(data.lon,data.lat,parseFloat(data.alt))));
polyline3D.setPositions(positions);

Is there a better way to do this so that the interactive navigation still is functional with a large number of points? (many polylines? many polyline collections?)


Patrick Cozzi

unread,
Aug 27, 2013, 7:34:29 AM8/27/13
to cesiu...@googlegroups.com
Hi,

The case of adding one point at a time to a polyline or polyline collection with a large number of points is still slow.  This will be improved with dynamic buffers (#932), but starting on it is at least a few months out.  Although it won't help this case, we are starting on making drawing a large number of styled static polylines efficient as part of geometry and appearances (#766).

In the meantime, you could try an approach where after adding, say, 1024 points, you put those points into a new polyline collection, and then create a new polyline collection for the next dynamic 1024 points and so on.

Patrick


--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/KIafPg_vZdg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

ja...@meicompany.com

unread,
Aug 27, 2013, 2:05:57 PM8/27/13
to cesiu...@googlegroups.com
Your suggestion of multiple polyline collections worked! Thanks for your fast reply!

Amit Sardar

unread,
Sep 27, 2018, 9:13:55 PM9/27/18
to cesium-dev
in cesium through server.js hoe to forward position data to helloworld client application
Reply all
Reply to author
Forward
0 new messages