GLES2 Glyph SubPixel Rendering - Developing

[prepare]

GLES2 based-HtmlRenderer, early preview

---

pic 1: render with OpenGLES2, Text is rendering with PixelFarm's MiniAgg+ the Typography.

pic 2: render with GDI+ (System.Drawing)

---

see more about lcd technique =>https://www.grc.com/cttech.htm

[prepare]

This version GLES2 -texture glyphs are not crisp.

[prepare]

pic 1: snapshot

pic 2: GLES2 glyph texture with subpixel rendering., (top) use color component1. (middle) use color component2, (bottom) use color component3.

pic 3: compare software-based (left) rendering (MiniAgg) and (right) the glyph-based GLES2 version

---

seperate by channel, similiar to CMYK

pic 4: slash

pic 5: Zoom of pic4

---

_pic 6: CMYK color, from https://en.wikipedia.org/wiki/CMYK_color_model

---

_pic 7: CMYK to RGB, from https://www.rapidtables.com/convert/color/cmyk-to-rgb.html

[prepare]

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

pic 1: original article image, Maxim's Agg, 0.1 px shift to right,

pic 2: our implementation, each image is move to right side 0.1 px, with TrueType hint

pic 3: each image is move to right side 0.1 px

pic 4: each 's' is move to right side 0.1 px

pic 5: each 's' is move to right side 1 px

[prepare]

TrueType Hinting (Only Vertical Hint) + SubPixel Rendering

pic 1: left => original subpix layout, middle => adjust to 0 or 0.5 or 1 px , right => adjust to 0 or 1 px

pic 2: (1) => original subpix layout, (2)=> adjust to 0 or 0.5 or 1 px , (3)=> adjust to 0 or 1 px

[prepare]

TrueType Hinting (Only Vertical Hint) + SubPixel Rendering + adjust x only (not Y)

pic 1: TrueType Hinting +SubPixel + adjust to 0 or 0.5 or 1 px

pic 2: TrueType Hinting +SubPixel +adjust to 0 or 1 px

[prepare]

TrueType Hinting (Only Vertical Hint) + SubPixelRendering +Adjust X and Y

pic 1: TrueType Hinting +SubPixel +adjust X and Y to 0 or 1 px

More cripse!,

But please see oblique of 'x' or '%'. They are too weak! => so, fix it

pic 2: Zoom to 'x' and '%' from pic 1, too weak

[prepare]

TrueType Hinting (Vertical + Horizontal) + SubPixelRendering +Adjust X and Y

pic 1: TrueType Hinting (Both Vertical and Horizontal) +SubPixel +adjust X and Y to 0 or 1 px, need to adjust Y pos agian

pic 2: zoom pic 1

[prepare]

PixelFarm's AutoHint (Vertical Only) + SubPixelRendering +Adjust X and Y

pic 1: snap Y to integer

pic 2: zoom of pic 1, TODO: => fix our AutoHint

[prepare]

pic 1: (1) gray scale, (2) subpix , (3) subpix + contrast filter value=30

[prepare]

Revisit this again...

pic 1: WinGdi+ vs MiniAgg

---

pic 1: CustomFit and GlyphSnap X and Y

[prepare]

Preview Latest AutoFit + SubPixelRendering

pic 1: Tahoma, 8 pt, (1) No AutoFit , (2) with AutoFit, Tahoma, 10pt, (3) No AutoFit, (4) with AutoFit

For this version, The AutoFit feature is nearly complete.

[prepare]

Software-based Renderer, PixelFarm

After software-based renderer is ready, the GLES2 version is easy.

---

pic 1: Tahoma, 8 pt, autofit + subpixel rendering with Typography

---

pic 2: some bugs on left and right bearing, i-a space

---

pic 3: some i-a-i sequence, some bugs or i-a,and a-i

---

pic 4: some i-a-i sequence, no horizontal fit alignment, exact x pos

---

pic 5: iiii sequence

---

pic 6: compare no horizontal fit(1) and horizontal fit(2), shows inter-glyph bugs in (2)

[prepare]

Fine Horizontal Fit Alignment

pic 1: horizontal fit alignment, with vertical autofit and subpixel rendering, Tahoma 8 pt

from pic1,

• inter-glyph bug eg i-a sequence is fixed.
• i-i sequence is intact.
• good result in this version!

---

pic 2: show long text

---

pic 3: with vertical autofit, see horizontal stems of e t and f

[prepare]

Exact Horizontal Position (no Horizontal Fit), Tahoma 8 pts

Vertical Fit only, Tahoma 8 pts, gray-scale (upper) vs subpixel rendering.

without horizontal fitting alignment,you can see the blurriness.

pic 1: i-i-i sequence

from pic 1, the i-i-i seq of Tahoma 8 pt shows color fringe and blurriness

pic 2: e-e-f-f-t-t sequence

[prepare]

Preview, Gdi+ vs the Typography

Windows Gdi+ image (SubPixel Rendering, LCD technique) and its zoom pic. vs PixelFarm's Typography Glyph Rendering, with Vertical AutoFit + Horizontal Fit alignment. Tahoma 8 pts.

pic 1: upper(1) Gdi+ vs (2) Typography subpixel (lcd) rendering vs (3) Typography gray-scale

[prepare]

Tahoma 8 pts,

pic 1: vertical-autofit, and horizontal fit alignment

---

pic 2: vertical-autofit, NO horizontal fit alignment

pic 3: vertical-autofit, and horizontal fit alignment

---

[prepare]

The HtmlRenderer example!

pic 1: HtmlRenderer on GLES2 surface, text are renderered with the Typography

also, please note the text selection on the Html Surface.

(HtmlRender => https://github.com/LayoutFarm/HtmlRenderer,

Typography => https://github.com/LayoutFarm/Typography)

[prepare]

Nov 2018, HtmlRenderer Example

GLES render surface renders font with Lcd-effect , subpixel-rendering glyph texture (https://github.com/PaintLab/PixelFarm/issues/16).

The glyph texture is created with Typography lib.

(Default font of these Html pages are 'Tahoma')

pic 1: GLES vs GDI render surface

---

pic 2: from pic 1, screen comparison

---

pic 3: from 1, GDI render surface

---

pic 4: from 1, GLES render surface

---

pic 5: from 4, zoom in