Contorno da fonte no OpenGL, FTGL


8

Estou usando a biblioteca FTGL para renderizar fontes no meu jogo, mas não faço ideia de como criar um contorno em torno do texto. Conseguir uma sombra pode ser fácil, porque eu posso simplesmente fazer assim:

(pseudo-código)

font.render(Color::BLACK, position.x + 1, position.y + 1); // Shadow
font.render(Color::WHITE, position.x, position.y)          // Normal text

Mas como criar um esboço? Infelizmente, não encontrei nenhuma solução interessante pela Internet que me pareceu um pouco estranha, porque achei que era um problema bastante popular.

Desenhar esboços com apenas uma fonte maior não é o caminho certo, porque, como eu descobri, as letras simplesmente não coincidem neste caso:

insira a descrição da imagem aqui

Existe alguma maneira simples de criar um esboço para fontes? Como eles fazem isso em jogos reais?

Agradecemos antecipadamente por qualquer resposta


11
Uma solução suja pode ser renderizar para uma textura o mesmo texto e, em seguida, tornar essa textura ampliada em x1.2, por exemplo.
Dan

2
@ Dan Isso levará exatamente ao que ele mostrou em sua imagem acima. Mesmo renderizar uma letra de cada vez dessa maneira, levaria a problemas, pois os contornos externos seriam mais espessos do que os internos (que podem ser inexistentes).
Engineer

11
Que tipo de fonte você está usando? O FTGL suporta fontes Outline prontas para uso em fontes Vector. A largura da linha OpenGL pode ser usada para controlar a espessura.
Paul-Jan

Respostas:


7

Flexível e preciso: Filtros

Use um filtro texel na textura no lado da CPU ou se estiver usando o pipeline programável OpenGL, diretamente no shader de fragmento.

A idéia de um filtro é simplesmente que você execute um loop 2D para processar cada texel. Se for branco, você percorrerá um loop 2D interno para cada um dos pixels adjacentes em algum raio e se adaptará em conformidade. Isso também é conhecido como filtro de caixa, embora, se você incluir a verificação do raio, é realmente um filtro circular - que evita artefatos de todos os eixos.

Uma maneira mais rápida de fazer isso é pré-calcular o conjunto de compensações de cada pixel central que você verifica; Dessa forma, você não precisa executar uma raiz quadrada para cada pixel ao redor de um determinado pixel. Você deseja manter a complexidade baixa em `O (texWidth * texHeight) em vez de O (texWidth * texHeight * filterRadius * filterRadius), em outras palavras.

Fácil: várias renderizações

Outra maneira de obter o efeito seria não redimensionar o texto, mas renderizar o contorno vermelho em cada uma das oito (ou mais) direções, cada uma ligeiramente deslocada do original nessa direção:

 \|/
--+--
 /|\

Ao compensar cada uma das versões vermelhas como essa, você obteria uma borda externa razoavelmente uniforme em torno do texto original. Lembre-se de que, ao deslocar na diagonal, você deve usar a mesma magnitude de vetor que quando desloca horizontal ou verticalmente, em vez de simplesmente compensar pelos mesmos valores x e y (o que leva a um comprimento aproximado de 1,4x - trigonometria básica).

Para sua informação

Esse tipo de efeito é conhecido como dilatação e, às vezes, é realizado via Minkowski Summation , que é a abordagem baseada em vetor (contínua) do filtro de caixa (quantizado) baseado em pixel que descrevi acima.


6

Esse recurso é implementado diretamente no FTGL, mas está disponível apenas na ExtrudeFontclasse. Você simplesmente define um começo para a fonte:

font = new FTExtrudeFont(...);
font->FaceSize(80);
font->Depth(0);
font->Outset(0, 5);

Em seguida, você pode usar uma cor diferente para os dois modos de renderização:

glColor3f(1.0, 1.0, 1.0); /* White inside */
font->Render("Hello", FTPoint(), FTPoint(), FTGL::RENDER_FRONT);
glColor3f(1.0, 0.0, 0.0); /* Red outline */
font->Render("Hello", FTPoint(), FTPoint(), FTGL::RENDER_SIDE);

Aqui está o resultado, com o antialiasing ativado e desativado:

Imagem resultante


Obrigado Sam! Era realmente o que eu queria ouvir - que o FTGL realmente tem algo assim. Obrigado mais uma vez.
Piotr Chojnacki

2

Não está relacionado ao FTGL, mas há um ótimo artigo da Valve sobre a renderização de glifos. Ele fornece renderização de alta qualidade com pouca necessidade de memória e efeitos como contornos ou sombras podem ser simplesmente implementados.


2
Vale avisar o OP de que essa abordagem requer uma compreensão do pipeline da GPU programável, ou seja, shaders.
Engenheiro
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.