Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GLES2 Glyph SubPixel Rendering - Developing #3

Open
prepare opened this issue Mar 21, 2017 · 18 comments
Open

GLES2 Glyph SubPixel Rendering - Developing #3

prepare opened this issue Mar 21, 2017 · 18 comments

Comments

@prepare
Copy link
Member

prepare commented Mar 21, 2017 •
edited

GLES2 based-HtmlRenderer, early preview

gles2_html2

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

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

see more about lcd technique =>https://www.grc.com/cttech.htm
@prepare
Copy link
Member Author

prepare commented Mar 21, 2017

This version GLES2 -texture glyphs are not crisp.

subpix06

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

subpix01
pic 1: snapshot

subpix04

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

subpix03

subpix05

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

seperate by channel, similiar to CMYK

sep_channel1

pic 4: slash

sep_channel2
pic 5: Zoom of pic4

cmyk

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

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

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

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

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

subpix07

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

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

subpix11

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

subpix12

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

@prepare prepare mentioned this issue Mar 21, 2017
Open
@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

TrueType Hinting (Only Vertical Hint) + SubPixel Rendering

subpix_15

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

subpix16

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

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

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

subpix_18

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

subpix_19

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

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

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

subpix_20

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

subpix_20

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

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

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

subpix_22

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

subpix_23
pic 2: zoom pic 1

@prepare
Copy link
Member Author

prepare commented Mar 21, 2017 •
edited

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

pic 1: snap Y to integer

subpix_25

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

@prepare prepare closed this as completed Mar 21, 2017
@prepare prepare reopened this Mar 21, 2017
@prepare
Copy link
Member Author

prepare commented Apr 10, 2017

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

@prepare
Copy link
Member Author

prepare commented Apr 17, 2017 •
edited

Revisit this again...

subpix_26
pic 1: WinGdi+ vs MiniAgg

subpix_27

pic 1: CustomFit and GlyphSnap X and Y

@prepare prepare mentioned this issue May 3, 2017
Open
@prepare
Copy link
Member Author

prepare commented May 8, 2017

Preview Latest AutoFit + SubPixelRendering

glyph_analysis_e_26

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
Copy link
Member Author

prepare commented May 11, 2017 •
edited

Software-based Renderer, PixelFarm

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

autofit_a

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

autofit_a2

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

autofit_a3

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

no_autofit_a6

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

autofit_a5

pic 5: iiii sequence

autofit_a7

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

@prepare
Copy link
Member Author

prepare commented May 12, 2017 •
edited

Fine Horizontal Fit Alignment

h_fit01

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!

autofit_a8
pic 2: show long text

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

@prepare
Copy link
Member Author

prepare commented May 16, 2017 •
edited

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.

autofit_no_h_fit

pic 1: i-i-i sequence

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

autofit_no_h_fit_2

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

@prepare
Copy link
Member Author

prepare commented May 17, 2017 •
edited

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.

autofit_hfit01

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

@prepare
Copy link
Member Author

prepare commented May 22, 2017 •
edited

Tahoma 8 pts,

autofit_f1

pic 1: vertical-autofit, and horizontal fit alignment

autofit_f3

pic 2: vertical-autofit, NO horizontal fit alignment

autofit_f2

pic 3: vertical-autofit, and horizontal fit alignment

@prepare
Copy link
Member Author

prepare commented Dec 30, 2017 •
edited

The HtmlRenderer example!

html_renderer_with_selection2

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 prepare mentioned this issue Sep 18, 2018
Closed
@prepare
Copy link
Member Author

prepare commented Nov 30, 2018 •
edited

Nov 2018, HtmlRenderer Example

GLES render surface renders font with Lcd-effect , subpixel-rendering glyph texture (#16).

The glyph texture is created with Typography lib.

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

2018-11-30_09-37-10

pic 1: GLES vs GDI render surface

2018-11-30_09-40-11

pic 2: from pic 1, screen comparison

gdi_htmlbox

pic 3: from 1, GDI render surface

gl_html_box

pic 4: from 1, GLES render surface

gl_html_box2

pic 5: from 4, zoom in

@prepare prepare mentioned this issue Nov 30, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@prepare