Jump to content

Better antialiasing of sprites


strawlion
 Share

Recommended Posts

Hey all, I'm new to Pixi and trying to convert an SVG visualization to WebGL for performance reasons. It's a smooth process for the most part, but I'm not able to get the same level of detail for some components.

For example, I'm using a TilingSprite to display a dashed line, which looks fine normally, but when drawing it diagonally the dashes are really blurry.

The default image is 4x1 pixels, is always scaled at this ratio, and I'm using antialias true in the webGL renderer.

Does anyone have any suggestions? Thanks!

post-17201-0-87942600-1448221835.png

Link to comment
Share on other sites

Hey Ivan, it would be nice to support sharper rendering by default, whether it be through simulating SVG or otherwise.

In this case I am working with a 4x1 pixel png scaled up (the original was SVG). It seems to look fine in canvas, which uses bicubic interpolation to my understanding. Is there any open source shaders for doing bicubic interpolation in WebGL?

 

Link to comment
Share on other sites

Depending on how complex your SVG graphics are, you might try writing a custom parser that converts svg paths to draw commands in Pixi's Graphics API. I believe the Graphics API can leverage the webgl renderer so that should help with better anti-aliasing.

 

Just dont forget that when we move or scale PIXI.graphics all antialiasing will break, because graphics is in RenderTexture and AA doesnt apply when you put it on actual screen buffer

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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