engine
engine copied to clipboard
playcanvas
Can we increase quality of font assets?
We have had a number of issues with some fonts where there are artifacts in the rendering of glyphs.
This thread for example: https://forum.playcanvas.com/t/how-to-display-cyrillic-and-glyphs-characters/18631/14
Is there any way we can increase the quality or have the user have some control about the resolution per glyph to allow for more complex fonts?
Some of the issues looks similar to what have been mentioned here: https://lambdacube3d.wordpress.com/2014/11/12/playing-around-with-font-rendering/
Maybe related. I was looking at the shader used to render this for some other reason, but modifying the value on this line (0.05) which is a threshold seems to have a similar effect on the text I was testing with. Perhaps this needs to be adjusted.
https://github.com/playcanvas/engine/blob/137f6cb19fdb01caf2f936029bd76ae2fe0ce2a9/src/graphics/program-lib/chunks/msdf.frag#L49
I am also being affected by this issue badly see:
It is very frustrating as I spend a lot of time choosing the right font, it is also important to my branding. But overall definitely being badly affected by this in terms of time its costing me.
As a workaround on some fonts I have found if you change the outline/intensity it 'sometimes' fixes the issue but usually depends on how bad the font has been affected and how the font is designed. Also using static vs variable fonts makes a difference as well.
Another workaround is to render the fonts as an image as well then import them as images.
Note to self is to try to see if the font itself has issues and if an external tool can fix this as mentioned here http://inter-illusion.com/assets/I2SmartEdgeManual/SmartEdge.html?HowtofixSDFartifacts.html
Note to self is to try to see if the font itself has issues and if an external tool can fix this as mentioned here http://inter-illusion.com/assets/I2SmartEdgeManual/SmartEdge.html?HowtofixSDFartifacts.html
As I am specifically using the font Spartan here I raised another ticket here to see if they can / add, help with anything as might lead to new solutions for other fonts: https://github.com/MattBaileyDesign/Spartan-MB/issues/11
I gave this a try as discussed on Discord (as person known as: Futile Games)
- Fonts were close together on trying the above solution, but I quickly done it and not sure if done correctly. It seemed to have fixed the main issue I was having with the letter F for font type 'Spartan' https://fonts.google.com/specimen/Spartan but it made the letters close together https://gyazo.com/23291bd3ef7bd4712f73ec3a505f01fa it might be worth trying to above with more precise instructions, I also found it straightened curves on curvy fonts.
- I tried different font types, mainly otf and woff, otf produces same issues, playcanvas does not support woff however...
May I propose going forwards it can be implemented to support woff? Another web engine I use construct 3 only utilises this font type and I never have issues with this font file format:
@Some-T can you reference an article or issue regarding Construct 3 and the use of woff please? I don't see how woff helps in this respect as its basically a compressed font unless data is stored/constructed differently to ttf or otf
@Some-T can you reference an article or issue regarding Construct 3 and the use of woff please? I don't see how woff helps in this respect as its basically a compressed font unless data is stored/constructed differently to ttf or otf
Could not find an article its more something I just remembered as been using this engine a long time I have asked in there forums though: https://www.construct.net/en/forum/construct-3/general-discussion-7/why-woff-ttf-fonts-164367
Could not find an article its more something I just remembered as been using this engine a long time I have asked in there forums though: https://www.construct.net/en/forum/construct-3/general-discussion-7/why-woff-ttf-fonts-164367
In our case, we are converting to SDF so compatibility with browsers doesn't apply here as the font files (ttf, woff) aren't used directly at runtime.