A renderização de subpixel ( wiki ) é uma maneira de aumentar a resolução visível de uma tela LCD ou OLED renderizando pixels com base nas propriedades da tela. O fato é que cada pixel da tela consiste em subpixels vermelhos, verdes e azuis separados.

Em um post, quero falar sobre o método Haarmony LCD, usado nas últimas versões do freetype, e como adaptá-lo para imagens vetoriais arbitrárias e configurações de sub-pixels.

Fotografia, é difícil transmitir os benefícios. Para comparação, você pode ver a figura a seguir. Se uma das configurações de pixel for a mesma do seu monitor, a diferença deverá ser significativa.

Os criadores do U • HODL entraram em contato comigo com uma proposta para adaptar a renderização de subpixel para o dispositivo. O dispositivo é uma carteira de criptomoeda em miniatura com uma tela OLED de 0,96 "(120 × 180). Eles têm um blog (em inglês) descrevendo como estão atentos à conveniência e como extrair o máximo de uma tela pequena. Portanto, eles precisavam de SPR para ícones e texto.

Plano de fundo (ClearType)

Na Internet, você pode encontrar uma descrição do mecanismo ClearType usado no Windows. A melhor descrição, na minha opinião, está no grc.com . Depois, um pequeno aperto para aqueles que não estão interessados ​​em entrar em detalhes. O ClearType consiste em duas etapas:

1. O texto é renderizado com uma largura de três vezes o original

Cada pixel de renderização é responsável por um subpixel de cor:

Se você simplesmente exibir esse texto na tela, verá uma aberração de cores nas bordas das letras:

2. O filtro altera a cor (mas não o brilho) dos pixels vizinhos

E restaura o equilíbrio de cores local:

Este método tem várias desvantagens:

1. Não é óbvio como aplicá-lo com imagens coloridas.
2. O filtro é complicado se os subpixels não estiverem na mesma linha (a configuração da tela será um pouco menor)
3. O filtro em si é protegido pela patente da Microsoft. Talvez alguém se lembre de que, por padrão, nas versões anteriores da renderização de subpixel do tipo freet foi desativada devido a patentes.

Haarmony lcd

E aqui vem o algoritmo Haarmony LCD. Além da carta de seu autor , na Internet praticamente não há informações sobre o algoritmo. Mas, o próprio algoritmo é simples e intuitivo. É necessário renderizar o texto três vezes com um deslocamento igual ao deslocamento do subpixel e adicionar os canais de cores.

Suponha que você tenha uma matriz dessa configuração:

Você precisa renderizar e adicionar:

1. Um canal azul com um deslocamento horizontal de -0,25 pixels
2. Canal verde com um deslocamento de +0,25 pixels na horizontal
3. Canal vermelho com um deslocamento vertical de +0,5 pixels

O esquema de renderização será algo como isto.

Svg

A maneira mais fácil era renderizar imagens SVG. Apenas enviesando o viewBox (3 vezes), substituindo:

viewBox="0 0 120 180" 

em

 viewBox="0.25 0 120.25 180" 

Um exemplo de ícones de renderização:

Imagens:

Configuração da matriz

O leitor atento poderia substituir o xadrez colorido nas imagens. Isso se deve ao fato de a tela para a qual o algoritmo foi desenvolvido possuir aproximadamente a seguinte matriz:

Ou seja, os subpixels nas linhas pares e ímpares são espelhados. Nesse caso, basta renderizar com duas configurações diferentes e obter linhas pares de uma imagem e linhas ímpares da outra.

P.S. mcufont

Se você precisar usar a renderização de subpixel no mcufont (uma biblioteca para renderizar fontes em microcontroladores), será necessário corrigir o codificador / freetype_import.cc e definir o Haarmony LCD como FT_Render_Glyph (face-> glifo, FT_RENDER_MODE_LCD) . E na conclusão do texto, não esqueça que a largura das letras será três vezes maior que o necessário.