Esquema de fuente en OpenGL, FTGL

8

Estoy usando la biblioteca FTGL para representar las fuentes en mi juego, pero no tengo ni idea de cómo crear un esquema alrededor del texto. Lograr una sombra podría ser fácil, porque simplemente puedo hacerlo así:

(pseudocódigo)

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

¿Pero cómo crear un esquema? Desafortunadamente, no he encontrado ninguna solución interesante en Internet que me parezca un poco extraño, porque pensé que es un problema bastante popular.

Dibujar un esquema con una fuente más grande no es la forma correcta, porque, como descubrí, las letras simplemente no coinciden en este caso:

ingrese la descripción de la imagen aquí

Entonces, ¿hay alguna manera simple de crear un esquema para las fuentes? ¿Cómo lo hacen en juegos reales?

Gracias de antemano por cualquier respuesta

Piotr Chojnacki
fuente
1
Una solución sucia podría ser renderizar a una textura el mismo texto, y luego renderizar esta textura a escala x1.2, por ejemplo.
Dan
2
@Dan Eso conducirá exactamente a lo que ha mostrado en su imagen de arriba. Incluso la presentación de una letra a la vez de esta manera, generaría problemas, ya que los contornos externos serían más gruesos que los internos (que podrían no existir).
Ingeniero
1
¿Qué tipo de fuente estás usando? FTGL admite fuentes de contorno fuera de la caja para fuentes vectoriales. El ancho de línea de OpenGL se puede usar para controlar el grosor.
Paul-Jan

Respuestas:

7

Flexible y preciso: filtros

Use un filtro de texel en la textura en el lado de la CPU o si está usando una tubería programable OpenGL, directamente en el sombreador de fragmentos.

La idea de un filtro es simplemente que ejecute un bucle 2D para procesar cada texel. Si es blanco, entonces se ejecuta a través de un bucle 2D interno para cada uno de sus píxeles circundantes en algún radio, y se adapta en consecuencia. Esto también se conoce como un filtro de caja, aunque si incluye la verificación del radio, en realidad es un filtro circular, que evita la artefactos de eje.

Una forma más rápida de hacer esto es calcular previamente el conjunto de desplazamientos de cada píxel central que verifica; de esta manera, no necesita ejecutar una raíz cuadrada por cada píxel que rodea a un píxel dado. Desea mantener la complejidad en `O (texWidth * texHeight) en lugar de O (texWidth * texHeight * filterRadius * filterRadius), en otras palabras.

Fácil: múltiples renders

Otra forma de lograr el efecto sería no escalar el texto, sino representar su contorno rojo en cada una de las ocho (o más) direcciones, cada una ligeramente desviada del original en esa dirección:

 \|/
--+--
 /|\

Al compensar cada una de las versiones rojas como esta, obtendría un borde exterior bastante uniforme alrededor de su texto original. Tenga en cuenta que cuando cambie diagonalmente, debe usar la misma magnitud de vector que cuando cambia horizontal o verticalmente, en lugar de simplemente compensar con los mismos valores x e y (lo que conduce a una longitud aproximadamente 1.4x más larga - trigonométrico básico).

FYI

Este tipo de efecto se conoce como dilatación, y a veces se realiza a través de la suma de Minkowski , que es el enfoque basado en vectores (continuo) del filtro de caja basado en píxeles (cuantificado) que describí anteriormente.

Ingeniero
fuente
6

Esta característica se implementa directamente en FTGL pero solo está disponible en la ExtrudeFontclase. Simplemente defina un comienzo para la fuente:

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

Luego puede usar un color diferente para los dos modos de renderizado:

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);

Aquí está el resultado, con antialiasing activado y desactivado:

Imagen resultante

sam hocevar
fuente
Gracias Sam! Eso es realmente lo que quería escuchar: que FTGL en realidad tiene algo como esto. Gracias una vez más.
Piotr Chojnacki
2

No está relacionado con FTGL, pero hay un gran artículo de Valve sobre la representación de glifos. Proporciona renderizado de alta calidad con un pequeño requisito de memoria, y los efectos como contornos o sombras se pueden implementar simplemente.

Thelvyn
fuente
2
Vale la pena advertir al OP que este enfoque requiere una comprensión de la tubería de GPU programable, es decir, sombreadores.
Ingeniero