Jump to content

Draw an svg path with pixi.Graphics looks bad


Recommended Posts

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:


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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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


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:


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

Thanks a lot!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...