Draw an svg path with pixi.Graphics looks bad

[federicovezzoli]

I'm trying to draw some paths and animate them with gsap.

So far here is what I came up in a couple of weeks of struggle:

https://codepen.io/federicovezzoli/pen/MxMxGo

Basically here is what I'm doing:

let progress = new PIXI.Graphics()

TweenMax.to({ x: newCubicBezierProgress[0].x, y: newCubicBezierProgress[0].y }, 2.5, {
    bezier: { type: "soft", values: newCubicBezierProgress },
    onUpdate: function(){
     progress.lineStyle(1, 0X00F2FF)
     progress.lineTo(this.target.x, this.target.y, 1)
    },
    ease: Sine.easeOut
 })

Where newCubicBezierProgress is an array of coordinates.

As you can see in the codepen the graphics looks not so smooth, anyone knows why or any technique to improve that?

thanks! 

 

[ivan.popelyshev]

webgl antialiasing is worse than 2d context. The good antialias technique, MSAA, is supported only in WebGL2. PixiJS v5 supports WebGL2 but we didnt enable MSAA on framebuffers yet. Also WebGL2 support is 50/50 on user devices, most of mobile devices dont support it, half of PC's too.

Workaround: turn off antialias and increase canvas size twice. Yes, its slow, and you actually need x3 to get result comparable to what Flash does.

[federicovezzoli]

Thanks @ivan.popelyshev!

So maybe is better if I revert everything back to SVG for this kind of work, in terms of performances, results and at least its gonna work everywhere.

Do you think maybe three.js would be better at this job than pixi.js?

thanks a lot for the help.

[ivan.popelyshev]

threejs will have the same problem.

maybe 2d context is better, because it renders stuff basically like browser does. You can create path and just "fill()" and "stroke()" them like you need. That's one of reasons I still use 2d context with PixiJS. You can also switch graphics renderer to canvas using pixi.js-legacy bundle in v5, I hope you can  look in docs and find "forceCanvas:true" param in renderer. I'm on vacation and I cant tell you more because there other issues await

also "graphics.generateCanvasTexture" is good idea if you want both WebGL context and , but bad for animations because it creates new texture every time, maybe you can look in source and make stuff that reuploads canvas every frame with "baseTexture.update()" and backed by canvas2d.

[federicovezzoli]

Thanks, you're shading light in my very confuse mind...

It definetly looks a lot better with the 2d context:

https://codepen.io/federicovezzoli/pen/MxMxGo

In the real application I built I had some text showing up with a displacement map on them, but now with the 2d renderer the displacement map is gone. Does it makes sense to create 2 app with different renderers?

Plus, I can't make it work with pixi 5.0.2 I don't understand how the legacy bundle works:

https://codepen.io/federicovezzoli/pen/OYVRGm

I get: "PIXI.CanvasRenderer is not a constructor"

Thanks a lot!

[ivan.popelyshev]

You need "pixi-legacy.js".

The problem you are trying to solve is difficult. Its a prt of monstrous size problem that 'm working on solution for two years already: full support of Vector graphics. Even if your task is only a part, prepare to study the code of:

1. BaseTexture, SVGResource creation, maybe all TextureResource's

2. How "render()" method of renderer actually works, and how RenderTexture's are created.

3. I dont remember

I'm afraid there's no half-assed solution. You have to dig into this.