Large group of lines - drawing too long

[akaleth]

The topic title is pretty vague but hopefully these images will illustrate the issue I'm having.

 

I'm working on a graphing utility as described in a previous post here: http://www.html5gamedevs.com/topic/6962-zoom-camera/

 

I'm having no issue drawing a small amount of dummy data. I get a widthRatio of pixels per data point for the x axis, and a heightRatio of pixels per units, whatever that unit may be, for the y axis, using the largest point in the data set and adding a 10% buffer so that the largest data point is still inside the graph and not along the edge. After that, it's just a series of lineTo() calls to create the graph from the data.

 

With 57 data points, it works fine:

 

 

However, as I add more data points and the graph becomes more and more compressed, the lines start being drawn outside the graph boundaries (1831 pts):

 

 

And it only gets worse and worse as the data set becomes larger and larger (5493 pts):

 

 

I've gone through debugging, and the ratios and max values for the data sets is the same in each case, as it should be (the larger sets are just the small set repeated several times.) Yet the lines very clearly go past the pixel that they should be drawn at.

With the way that I'm drawing, it's possible that more than one data point would be drawn at the same x pixel (at 1200px width and 6000 data points, that's 5 points per x.) However, this issue appears with smaller data sets than would be necessary for that situation to occur. I have also tested this with and without anti aliasing, and the issue is still there, albeit much more pixelated of course.

 

I cannot find any issues with my drawing code, and thus I have to assume it is an issue with Pixi, though I don't know in what way. Can someone explain why this is happening, and, hopefully, how to fix it?

[akaleth]

Bump with some extra info: this appears to only happen with the WebGL renderer. I disabled WebGL in Chrome to check speeds without WebGL, and the lines for the graph were drawn correctly with the Canvas renderer:

 

 

I still don't know exactly what's causing this issue, but hopefully it helps narrow down the possibilities.

 

EDIT: I figured out a "fix": instead of making it a chain of lineTo calls, I call moveTo(point) after each time I call lineTo(point) so the lines are treated as separate. This confirms my suspicion that this is caused by some kind of interpolation to keep lines from having hard edges; in this case, the angle from one point to another was so small that the line smoothing went very far past the points that I used in the lineTo calls. My main concerns at this point are

1) how inefficient this might be; I honestly don't know, I suspect it is a minimal increase in time since there isn't any drawing happening with the moveTo, but it is another function call nonetheless

2) a way to turn off this "line smoothing": it obviously looks nicer, but I have to imagine there should be a way to turn it on/off, because in this case it was a huge loss of precision. Perhaps this project is an outlying case where this matters, but, depending on the effort necessary to implement this, I do think this is worth trying out at the very least. I'll be submitting a feature request on the issue tracker just to see where it gets.