problem on curve line

[Sara]

Hi
I am just using pixi to draw a curvepath
I use quadraticCurveTo or bezierCurveTo for this and everything is fine but when I use alphaFilter or increase the lineWidth it looks bad as shown below
Can you please guide me?
Thank you very much and I apologize for not being able to express my problem very well in English

[ivan.popelyshev]

> when I use alphaFilter

that turns off antialias, you have to use MSAA ( available in webgl2!) like for circle here: https://pixijs.io/examples/#/plugin-picture/blend-modes.js

alternative: use https://github.com/pixijs/graphics-smooth , it doesnt need antialias, it has huge-ass vertex shader

Edited July 27, 2021 by ivan.popelyshev

[Sara]

thank you very much
I use graphics-smooth when I turn off antialis it gets much better but it still exists
I will try that one way(like for circle here: https://pixijs.io/examples/#/plugin-picture/blend-modes.js) to see how it goes

[Sara]

Unfortunately my problem was not solved because I do not want to use beginFill because I am using line
Is there no other solution?

[ivan.popelyshev]

i dont understand whats your problem  please make a demo

[Sara]

     graphics.lineStyle({
            width: 5,
            color: 0x000000,
            join: 'round',
            cap:  'round'
        });
          graphics.moveTo(p1.x, p1.y);
            let i;
            for (i = 1; i < points.length - 2; i++) {
                var xc = (points[i].x + points[i + 1].x) / 2;
                var yc = (points[i].y + points[i + 1].y) / 2;
                graphics.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
            }
            // curve through the last two points
            if (points[i] && points[i + 1]) {
                graphics.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
            }

           let alphaFilter = new PIXI.filters.AlphaFilter();
            alphaFilter.alpha = 0.5;
            alphaFilter.autoFit = true;
            graphics.filters = [alphaFilter];

 

im using graphics-smooth and turnoff antialis

I want the output to look like the figure below
But it does not

[ivan.popelyshev]

color is black, image is violet, so, its not the same. I think it should look like second image, i dont understand how did you get first one.

[Sara]

Im so sorry ? color is violet