pixi.js pixi.js lineTo drawing is shrinking when a distance between points becomes smaller

[Ravindu89]

I'm building line chart using the pixi.js lineTo method. The problem is the lines are shrinking when a distance between points becomes smaller. For testing purpose, I'm trying to draw 200,000 points on that chart.

Drawing function:

   var dataSet = ohlcStore[chartProperty.sym];

     if (dataSet && dataSet.length > 0) {
            var plot = new PIXI.Graphics();

            plot.setTransform(columnSize, (renderer.view.height - rowSize) + (Val_min * yScale), 1, -1 * yScale);

            plot.lineStyle(0.6, chartProperty.lineColor, 1);

            plot.moveTo(0, dataSet[0].close);

            for (i = 1; i < dataSet.length; i++) {
                try {
                    plot.lineTo(i * xScale, dataSet[i].close);
                } catch (x) {
                    console.error("Error - " + x);
                }
            }

            plot.endFill();

            context.addChild(plot);
        }

 

Result drawing is attached along with this.

In this case, xScale is 0.006475032375161876 and Using the canvas render gives correct results.

Trying to search for the problem, I've found that the Pixi.js may have an issue with non-integer values. Therefore I've rounded values to integer but the problem didn't solve. Please support to fix this problem.

[ivan.popelyshev]

What about native line mode ("new Graphics(true)")?

And yeah, without nativeLine setTransform affects line width and there's no way to evade that, because lines are actually polygons. If you want "setTransform" not affect line width, please use native lines or compute point coords yourself.

https://github.com/pixijs/pixi.js/tree/dev/src/core/graphics/webgl/utils - that's how it actually works. I know that pixi Graphics implementation cant satisfy everyone and there are many things like that. But so far we dont have better implementation

[Ravindu89]

Thank you very much. after changing to native line mode it's working fine.

And I have another question, I'm going to evolve this basic chart to advance speedy data-loading chart. That's why I've chosen WebGL based pixi.js to build my charting framework. Therefore could I know the charting performance can be impacted by this change as I am a newbie for this PIXI framework. It's great pleasure if you can give a descriptive answer.  

[ivan.popelyshev]

Graphics buffer is re-builded completely on every change: https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/webgl/GraphicsRenderer.js#L123 

Depending on the nature of your changes, it can be made faster, but don't do premature optimizations, first check if its slow.

Simplest optimization is to store a number of Graphics objects, and clear/add lines to only one of them will cost you less. If points are always added to the end or beginning, it will be very easy to optimize it on your side.

[Ravindu89]

Thank you for a quick response. Its mean by enabling native line mode is working faster than Pixi line implementation(my first attempt) in a current situation.