vallentin / glText

Cross-platform single header text rendering library for OpenGL
zlib License
167 stars 16 forks source link

Custom fonts? #10

Open 8-BIT-DEV opened 3 years ago

8-BIT-DEV commented 3 years ago

is or will there be any way to use custom fonts?

vallentin commented 3 years ago

Assuming the user would handle loading image data. Then it would definitely be possible to implement custom fonts in the form of bitmap fonts. The default (only) font, is actually a bitmap font baked into the header.

8-BIT-DEV commented 3 years ago

how would i go about creating one of these bitmap fonts?

8-BIT-DEV commented 3 years ago

Assuming the user would handle loading image data. Then it would definitely be possible to implement custom fonts in the form of bitmap fonts. The default (only) font, is actually a bitmap font baked into the header.

instead could you point me to where the font is baked in to the header?

vallentin commented 3 years ago

The baked in font data, is packed into _gltFontGlyphRects which stores the rectangle information of each glyph, and _gltFontGlyphData which stores the pixels of each font in relation to the rectangle bounds. By packed I mean it quite literally, as bit packing is used minimize the amount of data. For instance, the pixels are only 2-bit, i.e. 00 is transparent, 01 is white, 10 is black.

You can see all the logic for unpacking the data, along with creating the font in the subsequent _gltCreateText2DFontTexture() function. However, if we were to introduce a new function, e.g. gltCreateFont(image_data, glyph_rects), then the logic needed to implement that function is essentially already found in _gltCreateText2DFontTexture() if you ignore all the unpacking.

If you're able to and want to give a go at implementing it, then I'd happily mentor.

how would i go about creating one of these bitmap fonts?

Essentially, you'd be able to just draw a font in any image editing application. However, you wouldn't be able to load it (easily), until that functionality is implemented of course.

Then when you have the image data, you'd essentially need to define a list of glyphs (_GLTglyph). Which include the char it represents, the bounds on the image, the bounds translated into UVs and a boolean drawable representing if it's a drawable glyph, i.e. a TAB is a valid glyph, but in the baked font it draws nothing of course.

https://github.com/vallentin/glText/blob/8200fa70e32acec0a3cd777d404f41ee0c203ca4/gltext.h#L173-L183

8-BIT-DEV commented 3 years ago

The baked in font data, is packed into _gltFontGlyphRects which stores the rectangle information of each glyph, and _gltFontGlyphData which stores the pixels of each font in relation to the rectangle bounds. By packed I mean it quite literally, as bit packing is used minimize the amount of data. For instance, the pixels are only 2-bit, i.e. 00 is transparent, 01 is white, 10 is black.

You can see all the logic for unpacking the data, along with creating the font in the subsequent _gltCreateText2DFontTexture() function. However, if we were to introduce a new function, e.g. gltCreateFont(image_data, glyph_rects), then the logic needed to implement that function is essentially already found in _gltCreateText2DFontTexture() if you ignore all the unpacking.

If you're able to and want to give a go at implementing it, then I'd happily mentor.

how would i go about creating one of these bitmap fonts?

Essentially, you'd be able to just draw a font in any image editing application. However, you wouldn't be able to load it (easily), until that functionality is implemented of course.

Then when you have the image data, you'd essentially need to define a list of glyphs (_GLTglyph). Which include the char it represents, the bounds on the image, the bounds translated into UVs and a boolean drawable representing if it's a drawable glyph, i.e. a TAB is a valid glyph, but in the baked font it draws nothing of course.

https://github.com/vallentin/glText/blob/8200fa70e32acec0a3cd777d404f41ee0c203ca4/gltext.h#L173-L183

as one more question in the struct _GLTglyph does x and y represent pixels offset or some other form of offset? same with w and h

vallentin commented 3 years ago

as one more question in the struct _GLTglyph does x and y represent pixels offset or some other form of offset? same with w and h

Yes, the x and y is the pixel position in the image data, and the w(idth) and h(eight) is the size in pixels.

So knowing the glyph rect and the image size, then calculating UVs, is of course as follows:

u1 = x / imageWidth
v1 = y / imageHeight

u2 = u1 + (w / imageWidth)
v2 = v1 + (h / imageHeight)
8-BIT-DEV commented 3 years ago

the only hard part seems to be loading the image data isn't it

8-BIT-DEV commented 3 years ago

btw how could I say convert a TTF to a bitmap one?

vallentin commented 3 years ago

the only hard part seems to be loading the image data isn't it

If we take _gltCreateText2DFontTexture() as a reference again. Then the new e.g. gltCreateFont() function would start at line 1161, as that and forward is essentially the logic it needs. As gltCreateFont() would need to receive image_data and glyphs and thus all the previous logic can be extracted immediately from those.

how could I say convert a TTF to a bitmap one?

There's many tools for that, if you just search "TTF to bitmap font". I've previously heard about Bitmap Font Generator, but I don't recall if I've used it.

8-BIT-DEV commented 3 years ago

will this work on Linux? Edit: the ttf to bitmap

vallentin commented 3 years ago

Hmm, doesn't seem so, or at least not in a straight forward manner. I just looked here on GitHub, and I found fontbm, which mentions Linux. But once again, I haven't used it, I literally just found it.

8-BIT-DEV commented 3 years ago

I'll have to look into that later

vallentin commented 3 years ago

I fixed the "fontbm" link.

warmwaffles commented 3 years ago

Would definitely be cool to be able to specify multiple baked fonts.

Something like

gltUseFont(text, blob, blob_size, blob_glyph_count)