I convert a text into a image using canvas texture, but when I reduce the size of the text, the picture becomes very low quality, please help.
Use a bigger canvas and larger font size…
I have to use small fonts
i don’t think you have to use small fonts. you just need to shrink down whatever you are using the canvas on.
It seems that everything that gets smaller becomes blurry
Yeah you need to use a larger canvas, a larger font… then scale the canvas down wherever you are using it.
Small fonts don’t render the same on canvas as they do on the dom… on the dom, they are vector based… on canvas they are rasterized onto a bitmap… so to get comparable quality you have to use a larger canvas, and then perhaps scale it down.
1 Like
i would suggest that you don’t do that, making canvas text in webgl look good is wasted effort, i have yet to see anything that is comparable to fonts on the dom, and even if — all the back and forth involving canvas2d api. there are better options, for instance troika troika/packages/troika-three-text at main · protectwise/troika · GitHub which is sdf based, easy to use and crisp. if you 3d transform it it looks better then css3d transformed text on the dom HTML Input fields - CodeSandbox
I want to add decal geometry and place it on a mesh
it wouldn’t matter, you can use troika to add text to anything, including decals. i only have react examples but this one has text in a decal Using decals - CodeSandbox
in vanilla it’s similar: troika-text > rendertarget > texture mapped onto your decal