gpu font rendering

Renderização da fonte da GPU

Esta é uma demonstração de renderizar texto diretamente na GPU usando os contornos do vetor definidos pela fonte.

Os contornos de um glifo são convertidos em uma lista de curvas bezier quadráticas individuais (definidas por seus pontos de controle), que são carregados na GPU.

Um quad é gerado para cada glifo e o shader do pixel determina se cada pixel está dentro ou fora do glifo. Para fazer isso, o número de enrolamento do pixel é calculado cruzando um raio com as curvas bezier. Em todo cruzamento, o raio entra ou sai da área preenchida, conforme determinado pela direção da curva bezier em relação ao raio. A cada saída, o número de enrolamento é aumentado em um e a cada entrada o número de enrolamento diminui em um. Depois de considerar todos os cruzamentos, o número de enrolamento será diferente de zero se o pixel estiver dentro do contorno.

A direção dos raios não importa para esse cálculo do número de enrolamento, mas a matemática pode ser bastante simplificada usando raios paralelos ao eixo x. Ao subtrair a posição da amostra dos pontos de controle das curvas bezier, o sistema de coordenadas é deslocado para que a origem do raio esteja em $ (0, 0) $ e o raio coincide com o eixo x positivo. Para uma interseção entre o raio e uma curva bezier as condições $ y = 0 $ e $ x ge 0 $ deve então ser verdadeiro. O anti-aliasing (veja abaixo) ocorrerá ao longo da direção dos raios, mas outras direções podem ser alcançadas primeiro girando os pontos de controle das curvas de Bezier ao redor da origem, para que os raios se alinhem novamente ao eixo x.

Para encontrar as interseções entre um raio e uma única curva bezier, lembre -se de que uma curva quadrática de Bezier é descrita pela seguinte fórmula (para o fundo sobre curvas bezier, veja a beleza e o primer):

$$ textbf {c} (t) = (1-t)^2 textbf {p} _0 + 2 (1-t) t textbf {p} _1 + t^2 textbf {p} _2 $$

Pegando apenas o componente y e aplicando a condição $ y = 0 $ resulta em uma equação quadrática simples:

$$ (1-t)^2 textrm {y} _0 + 2 (1-t) t textrm {y} _1 + t^2 textrm {y} _2 = 0 $$

Que pode ser reorganizado em:

$$ textrm {y} _0 -2t textrm {y} _0 + t^2 textrm {y} _0 + 2t textrm {y} _1 - 2t^2 textrm {y} _1 + t^2 textrm {y}

$$ ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y} _1) t + textrm {y}

Para que possa ser resolvido usando a fórmula quadrática:

$$ t_ {0/1} = {-b pm sqrt {b^2-4ac} sobre 2a} $$

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = -2 ( textrm {y} _0 - textrm {y} _1) quadr c = textrm {y {y} _1) quadr c = textrm {y {y} _1)

Substituindo $ B = -2b $ rendimentos:

$$ t_ {0/1} = {-(-2b) pm sqrt {(-2b)^2-4ac} mais de 2a} = {2b pm sqrt {4b^2-4ac} over 2a} = {b pm sqrt {B} {B}}} {4b^2-4ac}}}} = {b pm sqrt {B} {B} {B}}}} {4b^2-4ac}}}} = {b pm sqrt {B} {B}}} {4b^2-4ac}}}} = {B pm sqrt {B.

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = textrm {y} _0 - textrm {y} _1 quadrc = textrm {y}

A equação quadrática pode ter zero, uma ou duas soluções. Além disso, uma solução $ t $ tem que satisfazer $ 0 le T & lt; 1 $ estar no segmento descrito pelos pontos de controle (o ponto final é excluído, pois faz parte do próximo segmento do contorno). Finalmente, dada uma solução $ t $ a coordenada x correspondente pode ser calculada como $ mathbf {c} _x (t) $ Para verificar a segunda condição $ x ge 0 $ para uma interseção.

Nesse ponto, as interseções entre o raio e a curva bezier foram identificadas, mas elas ainda precisam ser classificadas como entrada ou saída. A demonstração fornecida por Dobbie calcula explicitamente a derivada da curva bezier para cada $ t $ valor para fazer isso. No entanto, o derivado também pode ser calculado em geral para ambas as soluções em potencial $ t_0/t_1 $ :

$$ mathbf {c} _y (t) = ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y _ _1)

$$ mathbf {c} _y (t) = em^2 - 2b t + c $$

$$ frac {d mathbf {c} _y (t)} {dt} = 2at - 2b $$

$$ frac{dmathbf{C}_y(t_0)}{dt} = 2a{b - sqrt{b^2-ac} over a} - 2b = 2b - 2sqrt{b^2-ac} - 2b = -2sqrt{b^2-ac} le 0 $$

$$ frac {d mathbf {c} _y (t_1)} {dt} = 2a {b + sqrt {b^2-ac} over a}-2b = 2b + 2 sqr {b^2-}-2b = 2

Portanto, a curva bezier cruza o eixo x em uma direção fixa em cada solução e, combinada com a convenção para a orientação do contorno, $ t_0 $ é sempre uma saída e $ t_1 $ é sempre uma entrada.

Uma abordagem diferente para entender esse relacionamento é perceber que, devido aos diferentes sinais usados nas soluções e na raiz quadrada sendo não negativa, $ t_0 $ tem que vir primeiro ao longo da curva $ (t_0 & lt; = t_1) $ se $ a & gt; 0 $ . Por outro lado, se $ a & lt; 0 $ , então a ordem é revertida e $ t_1 $ tem que vir primeiro $ (t_1 & lt; = t_0) $ . O parâmetro $ a $ pode ser reescrito como $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ , portanto, seu sinal depende se o segundo ponto de controle está acima ou abaixo do ponto médio do primeiro e do terceiro ponto de controle. A figura a seguir mostra que as soluções são sempre classificadas corretamente para todas as combinações da direção da curva e o sinal de parâmetro $ a $ . Observe como a ordem das soluções ao longo da curva muda, mas o raio sempre entra em um $ t_1 $ solução e saídas em um $ t_0 $ solução.

Se o parâmetro $ a $ é 0 (ou suficientemente pequeno em cálculos de ponto flutuante), há uma relação linear entre $ t $ e $ y $ (Isso é verdade para segmentos lineares, mas também para algumas curvas não lineares), e a fórmula quadrática não pode mais ser usada devido à divisão por $ a $ . No entanto, como o relacionamento agora é linear, pode haver no máximo uma solução, que é facilmente calculada e classificada.

O anti-aliasing ao longo da direção do raio é implementado considerando uma janela do tamanho de um pixel em torno da origem do raio. Se uma interseção cair nessa janela, o número de enrolamento será alterado apenas fracionalmente para calcular a cobertura do pixel. O peso fracionário é determinado pela distância da borda esquerda do pixel (isso é consistente com os raios apontando para a direita). Ao considerar as seções individuais, pode-se ver que isso calcula exatamente a cobertura unidimensional.

Observe que também temos que considerar as interseções um pouco atrás da origem dos raios, mas a implementação primeiro calcula qualquer interseção com o eixo x e verifica a posição X, para que não mude muito. Uma maneira diferente de pensar sobre isso é que a condição $ x ge 0 $ implica uma função de ponderação que é 0 para $ x & lt; 0 $ e 1 para $ x ge 0 $ . Podemos remover a descontinuidade introduzindo um segmento linear sobre a largura de um pixel.

Para anti-aliasing completo, podemos usar vários raios ao longo de diferentes direções (por exemplo, uma ao longo do eixo x e uma ao longo do eixo y).

Notas

Esse tipo de técnica está sujeito a artefatos da precisão numérica limitada dos números de pontos flutuantes. A imagem abaixo mostra uma instância desses artefatos quando ampliada totalmente (e sabendo para onde procurar). No entanto, achei que essa implementação já está numericamente estável. Quaisquer artefatos restantes podem ser eliminados usando o algoritmo SLUG, que não é implementado aqui devido à patente associada.

Essa demonstração também não implementa nenhuma otimização de desempenho (como o Banding) e pode ter alto uso de GPU em alguns cenários e ao usar fontes muito complexas.

Construir instruções

1. Submódicos init

Clone o projeto recursivamente para inicializar os submódulos para as dependências (ou executar git submodule update --init se você já clonou o repositório):

 git clone --recursive https://github.com/GreenLightning/gpu-font-rendering.git
cd gpu-font-rendering

2. Use cmake

 # Note: CMake will create the build directory.
cmake -S . -B build
make -j8 --directory build

No Windows, você pode querer usar o CMake GUI e/ou o Visual Studio.

No Linux, você pode precisar instalar pacotes adicionais para o OpenGL Development (por exemplo, sudo apt-get install xorg-dev libgl1-mesa-dev para ubuntu).

3. Corra do diretório principal do projeto

 ./build/main

O programa exige que os diretórios de fonts e shaders estejam no diretório atual para carregar seus recursos. Se você conseguir uma janela preta , esse é provavelmente o problema. Verifique seu diretório de trabalho e verifique o console para erros.

Testado no Windows 10, MacOS Monterey e Ubuntu 22.04.