strawlion Posted November 22, 2015 Share Posted November 22, 2015 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! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 22, 2015 Share Posted November 22, 2015 I had the same idea (SVG in webgl), but we need special shaders for that. Show me what are you trying to convert and we'll think of something UPD. I suppose that you want to animate something with it. Without animation the best way is to cache rendered SVG in texture Quote Link to comment Share on other sites More sharing options...
strawlion Posted November 22, 2015 Author Share Posted November 22, 2015 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 23, 2015 Share Posted November 23, 2015 Lets find more articles on antialiasing in webgl. I studied that problem when I made railways (https://github.com/ivanpopelyshev/railways) but in the end I have choosen canvas fallback. Quote Link to comment Share on other sites More sharing options...
dimumurray Posted November 23, 2015 Share Posted November 23, 2015 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 23, 2015 Share Posted November 23, 2015 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.