[INFO] Glyph Textures - Githubissues

prepare commented 6 years ago

GLES2 surface with Text from Glyph Texture Atlas

blur_glyph

pic 1, TextureKind.StencilGreyScale

(1) not snap (to integer grid) the glyph to x and y axis => Blur Glyph both axis (2) snap (to integer) only on y axis=> Blur Glyph only in X axis (3) snap both x and y axis => Clearer glyphs, improper inter-glyph space, eg. glyph 1 and 2

prepare commented 6 years ago

(All our glyphs are NOT hinted with TrueType instructions)

But when we fit Y to the grid, this happens...

unalign_y

pic 2: left( our texture glyph, unalign Y ) vs right (reference img , gdi)

If we snap only X, ... align_only_x

pic 3: left( our texture glyph, look blur) vs right (reference img , gdi)

Try with Round(X) and Floor(Y) unalign_y pic 4: left( our glyph texture) vs right (reference img , gdi)

Try with Glyph Texture's Lcd Effect

lcd_01

_pic 5: left (grey-scale stencil), middle(lcd effect,without x-shift), right(lcdeffect, with shift 0.33f to right)

lcd_01 _pic6 : left (grey-scale stencil), middle(gdi), right(lcdeffect, with shift 0.33f to right, with sharpen filter)

prepare commented 6 years ago

(All our glyphs are NOT hinted with TrueType instructions)

Agg Text Rasterizer with 3 primary weights (from http://www.antigrain.com/research/font_rasterization/)

“Primary Weight” controls the energy distribution exactly as on Steve Gibson's page: http://www.grc.com/freeandclear.htm. It's good enough to control only the primary weight and calculate the other ones accordingly. Increasing the primary weight you can make the text sharper, but more “color fringy”. Values up to 0.5 are reasonable; above 0.5 the color halos become too visible. To me, Windows ClearType with the default settings looks too “color fringy” as well.

lcd_03

(1) primary weight 0, (2) 0.33 , (3) 0.77

and zoom in

lcd04

(1) primary weight 0, (2) 0.33 , (3) 0.77

prepare commented 6 years ago

Experiment with Sharpen Filter

lcd_sharpen1

(1) with openPDN's sharpen filter , (2) original

't' head

lcd_sharpen2

(1) with openPDN's sharpen filter , (2) original

prepare commented 6 years ago

Test Application : Color Blender

(All our glyphs are NOT hinted with TrueType instructions)

(ported from ColorBlender, https://github.com/wieslawsoltes/ColorBlender)

Glyphs generated by our Typography lib(https://github.com/LayoutFarm/Typography)

sample_screen

pic 1: GLES2 canvas, lcd-effect-stecil-based texture glyph

Zoom on the text.

sample_screen2

pic 2: show lcd-effect-stencil-based texture

prepare commented 6 years ago

(All our glyphs are NOT hinted with TrueType instructions)

texture1

pic 3: (1) before adjust with integer number, (2) after adjust with integer

texture2 pic 4: zoom (1) and (2)

prepare commented 6 years ago

With TrueType Hint

(All our glyphs are HINTED with TrueType instructions)

texture3

pic 5: Tahoma, with TrueType instruction Hinted glyphs

texture4 pic 6: zoom, glyphs are rendered with lcd-stencil effect

prepare commented 6 years ago

Maxim's Suggestion, Vertical only TrueType Hint

(from http://www.antigrain.com/research/font_rasterization/)

texture7

prepare commented 6 years ago

Vertical-only TrueType Hint

texture5

pic 7: Tahoma, Maxim's sugession, vertical-only truetype hint

texture6

pic 8: Zoom

please note that 'x' is too light, we will fix it

plan ....

texture8 pic 9: mixed texture, x in pic 8 was replaced with the original un-hinted version

prepare commented 6 years ago

Patch some glyphs

from pic 7 above, some selected Tahoma glyphs ('x','X','7') are patched with unhinted version. while others are hinted version.

texture9 pic 10: compare with pic7, you can see that 'x' was pacthed

texture10

pic 11: zoom

prepare commented 6 years ago

Latest x-axis snap to grid

latest_glyph_pos

pic 12: x-axis snap to grid

But still need to check space between x-p in Explore again

latest_glyph_pos2

pic 13: diff from prev version

prepare commented 6 years ago

x-axis snap to grid

ioio2

pic 14: i-o-i, Tahoma, 10 pt, GLES2

iii

pic 15: i-i-i, Tahoma, 10 pt, GLES2

prepare commented 6 years ago

Agg surface with alpha mask

typography_lion

pic 16: alpha mask is a glyph atlas, and we draw our lion on it

black_rect_over_font_atlas_red_compo

pic 17: Tahoma, 10 pts, black rect over gray-scaled font atlas, red-component mask

prepare commented 6 years ago

Agg surface with lcd-effect font atlas mask

please note a minor shift on subpixel position

black_rect_over_font_lcd_effect_atlas_rgb_compo pic 18: Tahoma, 10 pts, black rect over (1) red-only compo mask , (2) green , (3) blue

prepare commented 6 years ago

Agg surface lcd-effect glyph over lcd-effect font atlas mask

Similar to pic 18. above,
but now, we fill black color 3 times each time we change the 1. selected mask color component and 2. output mask component.

(same as OpenGLES technique)

Then the output => lcd-effect glyph.

mask_lcd_effect1

pic 19: fill black with lcd effect over lcd-effect font atlas

mask_lcd_effect2_fill_blue

pic 20: fill blue with lcd effect over lcd-effect font atlas

mask_lcd_effect3_fill_yellow_on_black

pic 21: fill yellow with lcd effect over lcd-effect font atlas, black background

prepare commented 6 years ago

(Software-based) MiniAgg's Lcd-Effect FontAtlas

glyph_lcd

pic 22: single font atlas, with multiple 'fill' color, MiniAgg

prepare commented 6 years ago

glyph_draw_aty20px

pic 23: MiniAgg, GlyphTexture + LcdEffect

prepare commented 6 years ago

glyph_lcd02

pic 24: MiniAgg, GlyphTexture + LcdEffect

glyph_greyscale01

pic 25: MiniAgg, GlyphTexture + GreyscaleStencil

prepare commented 5 years ago

(Hardware-based) Glyph Texture on GLES surface

glyph_imgs_05

The same glyph texture can be used with both software-based rendering (above) and hardware-based rendering (the following 3 below).

1. Just Copy from GlyphTexture

glyph_imgs_copy_05_with_ruler pic 26: just copy from glyph texture, with debug marker, (1) blue-line=> top line, (2) red-line=> base-line, (3) magenta-line => bottom line