Subpixel rendering ( wiki ) is a way to increase the visible resolution of an LCD or OLED display by rendering pixels based on screen properties. The fact is used that each pixel of the screen actually consists of separate red, green and blue subpixels.

In a post I want to talk about the Haarmony LCD method, which is used in recent versions of freetype, and how to adapt it for arbitrary vector images and sub-pixel configurations.

Photography, it’s difficult to convey the benefits. For comparison, you can look at the following picture. If one of the pixel configurations is the same as your monitor, the difference should be significant.

The creators of U • HODL approached me with a proposal to adapt subpixel rendering for their device. The device is a miniature cryptocurrency wallet with a 0.96 "OLED screen (120 × 180). They have a blog (English) that describes how they are attentive to convenience and how to squeeze the maximum out of a small screen. Therefore, they needed SPR for icons and text.

Background (ClearType)

On the Internet you can find a description of the ClearType mechanism that is used in Windows. The best description, in my opinion, is on grc.com . Then a short squeeze for those who are not interested in going into details. ClearType consists of two steps:

1. The text is rendered with a width of three times the original

Each render pixel is responsible for one color subpixel:

If you simply display such text on the screen, you will see color aberration at the edges of the letters:

2. The filter changes the color (but not brightness) of neighboring pixels

And restores the local color balance:

This method has several disadvantages:

1. It’s not obvious how to apply it with color images.
2. The filter is complicated if the subpixels are not on the same line (the screen configuration will be slightly lower)
3. The filter itself is protected by Microsoft patent. Perhaps someone remembers that by default in early versions of freetype subpixel rendering was disabled due to patents.

Haarmony lcd

And here comes the Haarmony LCD algorithm. In addition to the letter of its author , on the Internet there is practically no information about the algorithm. But, the algorithm itself is simple and intuitive. It is necessary to render the text 3 times with an offset equal to the subpixel offset, and add the color channels.

Suppose if you have a matrix of this configuration:

You need to render and add:

1. Blue channel with a horizontal offset of -0.25 pixels
2. Green channel with an offset of +0.25 pixels horizontally
3. Red channel with a vertical offset of +0.5 pixels

The rendering scheme will be something like this.

Svg

The easiest way was to render SVG images. Just biasing the viewBox (3 times), replacing:

viewBox="0 0 120 180"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

on

 viewBox="0.25 0 120.25 180"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

An example of rendering icons:

Images:

Matrix Configuration

The attentive reader could replace color chess on the images. This is due to the fact that the display for which the algorithm was developed has approximately the following matrix:

That is, subpixels on even and odd lines are mirrored. In this case, it is enough to render with two different configurations, and take even lines from one image, and odd lines from the other.

P.S. mcufont

If you need to use subpixel rendering in mcufont (a library for rendering fonts on microcontrollers), you need to patch encoder / freetype_import.cc and set the Haarmony LCD mode FT_Render_Glyph there (face-> glyph, FT_RENDER_MODE_LCD) . And at the conclusion of the text, do not forget that the width of the letters will be 3 times larger than necessary.