Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

R3F: Ade font style is not working on some glyphs #286

Closed
AxiomeCG opened this issue Nov 28, 2023 · 5 comments
Closed

R3F: Ade font style is not working on some glyphs #286

AxiomeCG opened this issue Nov 28, 2023 · 5 comments

Comments

@AxiomeCG
Copy link

Hello,

I wanted to use the Ade font and for some reason it is not rendering properly using the drei component, that is wrapping troika-three-text I assume.

I wanted to know if there is anything to do about that ? Is it specific to the font itself ?

Here is the code I tried so far.

<>
  <Text font={"/Ade.ttf"} fontSize={12} position={[-10,5,-5]} color={"#222222"}>
              AAAAAA
  </Text>
  <Text font={"/Ade.ttf"} fontSize={12} position={[-10,5,-5]} fillOpacity={0} strokeColor={"#222222"} strokeWidth={0.175}>
              AAAAAA
              <meshBasicMaterial color={"#222222"} depthTest={false}/>
  </Text>
</>

Glyph generated in 2D in r3f:
image

List of glyph of the font :

image

Here is the font formats that I tried so far of the Ade font.
Ade-font.zip
You can also find it in : https://fontesk.com/ade-display-font/

@lojjic
Copy link
Collaborator

lojjic commented Nov 28, 2023

That font has some very thin line features which can be difficult for SDF-based rendering. You might see some improvement if you set a higher sdfGlyphSize.

@AxiomeCG
Copy link
Author

Thank you for the tip, it makes it better but aliased with sdfGlyphSize=512
image

I happen to have increase the weight of the font in a font editor to see if it would be better, and it is nicer, but I would like if possible to be able to use the lib at its maximum potential for all kind of fonts so it is nice to know there is some adjustments that can be done !

@lojjic
Copy link
Collaborator

lojjic commented Nov 28, 2023

Hmm, there's something else going on weird with that A glyph in particular. It looks like its bounding box is gigantic, which is decreasing the precision of the SDF by a lot...
image

@lojjic
Copy link
Collaborator

lojjic commented Nov 28, 2023

Yeah that A has a stray point way out at -3914,-1812. This needs to be fixed in the font.

image

@AxiomeCG
Copy link
Author

Thank you for your guidance, I guess I can close the issue where it is mostly about the font, more than the lib itself !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants