Actualmente estoy tratando de entender algunas cosas sobre la rasterización de gráficos vectoriales y las diferentes formas en que se implementa en varios tipos de aplicaciones.
Probé y comparé algunos programas y noté que hay una gran diferencia en la forma en que se comporta el suavizado en el proceso de rasterización. Estoy especialmente interesado en el comportamiento de representación en Illustrator . Verá por qué leyendo más.
Para mis pruebas, utilicé una composición realmente simple de triángulos organizados en un hexágono irregular con diferentes colores.
Software de gráficos vectoriales
Aquí hay tres renders del mismo gráfico vectorial en Illustrator, Affinity e Inkscape. (La imagen producida en Affinity e Inkscape es exactamente la misma).
Como puede ver, hay una línea blanca no deseada en cada uno de los bordes de la imagen renderizada con Afinidad e Inkscape. El suavizado no llena esta área con un color sólido, lo que resulta en un pequeño espacio entre las formas adyacentes.
Aunque no hay espacio en el renderizado de Illustrator, los bordes de las formas se ven tan suaves como el renderizado de Affinity.
Aquí hay una imagen que muestra la misma área de cada imagen mejorada.
Hay una diferencia muy sutil entre las dos imágenes. El render de Affinity es un poco más suave, pero es casi imposible ver la diferencia al mirar las imágenes en su tamaño original.
Navegadores
Representación SVG
La visualización de los mismos gráficos exportados como SVG en un navegador es muy similar a la imagen ráster producida por Affinity e Inkscape.
Hay diferencias muy pequeñas en el suavizado de bordes (que realmente no vale la pena mostrar aquí), pero la rasterización SVG en los navegadores comunes se comporta más o menos igual.
Render descompuesto
Al probar Illustrator un poco más, intenté dividir partes de mis gráficos y exportarlos individualmente para luego volver a componerlos con un software de edición de trama.
En teoría, resultaría en la misma imagen que tenerla en una sola pieza, pero el resultado es ligeramente diferente con este método.
Como se muestra, cuando las dos partes están compuestas, hay un pequeño espacio entre ellas. Aunque es más sutil, es muy similar al gráfico representado en Affinity.
Representación poligonal
Blender (software 3D)
Blender le permite importar archivos SVG y manipularlos como objetos de curva. Aquí está el gráfico importado que se muestra en la vista 3D. (De forma predeterminada, el material se verá afectado por las luces en la escena. Al marcar la propiedad sin sombra en el panel de propiedades del material, se podrán representar las formas con sus colores originales).
Aquí hay un render hecho del SVG dentro de Blender.
No tiene ningún espacio entre los triángulos. Es muy probable que otros softwares 3D funcionen de la misma manera. Entonces Blender se comporta igual que Illustrator , ¿o no? Tal vez es al revés?
Las verdaderas preguntas
- ¿Qué biblioteca de dibujo vectorial usa Illustrator detrás de escena?
- ¿Podría ser posible que Illustrator utilice una especie de motor de renderizado 3D? ¿Es de código abierto? (¿probablemente no?)
- ¿Puede alguna de las conocidas bibliotecas de dibujo vectorial como Cairo y Skia lograr el mismo comportamiento de representación? (Sin espacio entre formas)
- ¿Existe alguna biblioteca de dibujo vectorial menos conocida que tenga el mismo comportamiento?
