nuthinking Posted March 16, 2016 Share Posted March 16, 2016 I am trying to figure out the limitations in text rendering of Pixi (or WebGL). Because I am working on a project for Smart TV, the text needs to be as crispier as possible, but I would really do with 60fps. I opened an issue on GitHub and discovered some strange behaviours when caching to bitmap and even comparing vanilla canvas with pixi canvas rendering: https://github.com/pixijs/pixi.js/issues/2393 I get that I can't expect in WebGL the same quality of DOM rendering but I still have hope that I could get closer. Is there some good examples, maybe retina friendly, that I could review? Thanks a lot for any help! Quote Link to comment Share on other sites More sharing options...
mattstyles Posted March 17, 2016 Share Posted March 17, 2016 Have you actually got a requirement for the text to be in a canvas? Just use the DOM for your text and all your questions have already been answered. Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 @mattstyles yes I have a very animated and typographic UI to build and if I use the DOM I probably get around 20fps on the device (which unfortunately is not a PC). I think I need to find a compromise. Would be very happy with 40fps and a bit less crispiness. I tried with canvas elements and the performance doesn't get much better. I believe with an unchanged design the only two options left are Pixi 3d or a single big 2d vanilla canvas (if pixi can't match its rendering with a canvas renderer). Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 Typography here is good: http://curvy.dk/beagle/site/ There must be a way! Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 After all maybe not too far from what I get: Quote Link to comment Share on other sites More sharing options...
themoonrat Posted March 17, 2016 Share Posted March 17, 2016 Have you tried applying this patch to your pixi.js? https://github.com/pixijs/pixi.js/pull/2281 nuthinking 1 Quote Link to comment Share on other sites More sharing options...
Exca Posted March 17, 2016 Share Posted March 17, 2016 Distance field fonts might help also: https://github.com/libgdx/libgdx/wiki/Distance-field-fonts That article is not for pixijs directly but it could be implemented in it. nuthinking 1 Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 Thanks guys, I will look in those promising links and update you! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 17, 2016 Share Posted March 17, 2016 1) Need to implement signed-distance fonts 2) Try to render your text in 2x canvas first. I'll do it for my project soon, will provide a code snippet Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 Thanks Ivan, I was about to try recommendation 2 next. Thanks guys for giving me 60fps hope again! Quote Link to comment Share on other sites More sharing options...
bubamara Posted March 17, 2016 Share Posted March 17, 2016 @nuthinking can you try this, if it suits your needs? http://text.enea.sk I believe I'm using same approach as the site you mentioned above - listening to window resize event and redraw the text with different font size Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 @bubamara will test soon on the device with the same thin font I am using. Thanks for that! Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 @bubamara Looks good on my macbook retina, tonight I will test it on the Android TV. Thanks! Quote Link to comment Share on other sites More sharing options...
nuthinking Posted March 17, 2016 Author Share Posted March 17, 2016 @bubamara Your technique seems to be working very well, I must say! Is there anything you can disclose about it? Quote Link to comment Share on other sites More sharing options...
bubamara Posted March 17, 2016 Share Posted March 17, 2016 Nothing special really. Just detect device resolution, take pixel ratio into account and resize Pixi.text accordingly. Dont forget to round font size and position coordinates for better results... If there is more you would like to know about it, I'll be happy to answer 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.