Drawing with polylines working, but a little slow

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?

http://development.virtualworldframework.com/cesium-webrtc

Scott

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

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

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

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.

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.

https://github.com/virtual-world-framework/vwf/tree/development

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

Sure, no problem.

Cheers,

Rebecca

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?)

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

Your suggestion of multiple polyline collections worked! Thanks for your fast reply!

in cesium through server.js hoe to forward position data to helloworld client application