protectwise / troika

A JavaScript framework for interactive 3D and 2D visualizations

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

R3F: Ade font style is not working on some glyphs

AxiomeCG opened this issue · comments

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/

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.

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 !

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

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

image

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