Rastering y Rendering

 

¿ Que es Rastering y Rendering?

Rasterización

Rasterización. Proceso por el cual una imagen descrita en un formato gráfico vectorial se convierte en un conjunto de píxeles o puntos para ser desplegados en un medio de salida digital, como una pantalla de computadora, una impresora electrónica o una imagen de mapa de bits (bitmap)

Origen

La palabra ráster proviene del inglés raster, anteriormente utilizada en el vocabulario técnico de la televisión para referirse a un tubo catódico. Por analogía con los surcos dejados por un rastrillo. El ráster o rastrum es una pequeña pluma de escritura provista de cinco puntas y utilizada para trazar pentagramas musicales. El uso de la palabra ráster se testifica en el latín medieval en referencia a la herramienta que sirve para rastrillar el sembrado: rastra, rastrillo, rastro.

 

Aplicación

El término rasterización puede ser aplicado en general a cualquier proceso por el cual la información vectorial puede ser convertida en formato de mapa de bits. En el uso cotidiano, el término se refiere también a los algoritmos de renderizado para la visualización de figuras 3D en una computadora. La rasterización es una de las técnicas más populares para producir gráficos 3D en tiempo real. Las aplicaciones en tiempo real deben responder inmediatamente a lo qué el usuario haga y por ende producir al menos 25 cuadros por segundo para conseguir una animación suave.

 

Comparado con otras técnicas de renderizado 3D como Ray tracing, la rasterización es extremadamente rápida. Sin embargo, esta es simplemente el proceso de computar el mapeado desde la geometría de la escena hasta los píxeles y no lleva a una forma particular de computar el color de los mismos. El Sombreado, incluyendo sombrado programable, puede estar basado en transporte de luz física o motivo artístico. Al estar las pantallas modernas orientadas al despliegue de mapas de bits, la diferencia los mismos y los gráficos vectoriales está en dónde ocurre el proceso de rasterización; del lado del cliente, en el caso de gráficos vectoriales, a diferencia de lo rasterizado en el servidor.

 

Este procedimiento se suele usar en momentos muy concretos:

 

Cuando se trabaja con imágenes de una gran complejidad (con muchos objetos independientes, muchos rellenos degradados, muchas capas, etc.) Ahora bien, puesto que al crear un mapa de bits se elimina toda información de los objetos vectoriales, debe tenerse en cuenta la posibilidad de efectuar copias de seguridad del archivo vectorial antes de ser rasterizado, o bien esperar a que la parte de la imagen que se va a rasterizar sea ya definitiva...

Cuando se van a aplicar filtros a la imagen resultante, cosa que no se efectúa con los objetos iniciales.

El resultado de este método de trabajo híbrido es un archivo que presenta ciertas partes vectoriales y ciertas partes bitmap. El mismo puede guardarse sin mayor problema en el formato correspondiente al programa de ilustración (en algunos casos, se permite que el mapa de bits no forme parte del archivo, sino que se enlace externamente al fichero vectorial solamente).

 

Enfoque básico

El algoritmo de rasterización más simple toma una escena 3D, descrita en polígonos y la proyecta sobre una superficie 2D, usualmente un monitor de PC. Los polígonos son representados como un conjunto de triángulos, estos últimos representados por tres vértices en tres espacios. A un nivel muy básico, los rasterizadores solo toman una cantidad de vértices, los transforman en puntos bidimensionales correspondientes a un monitor y rellenan los triángulos bidimensionales transformados de forma apropiada.

 

Recorte

Una vez que los vértices de los triángulos son transformados a sus localizaciones 2D previstas, algunas de esas localizaciones pueden quedar fuera de la ventana de visualización, o del área de la pantalla en la cual los píxeles pueden ser representados. Clipping es el proceso de cortar los triángulos de manera que ocupen el área visible. La técnica más común es la del algoritmo Sutherland-Hodgeman. En esta aproximación, cada una de las 4 esquinas del plano de imagen es probada en un tiempo. Para cada esquina, probar todos los puntos a ser renderizados. Si el punto queda fuera de la esquina, este se elimina. Por cada borde de triángulo que es intersecado por la esquina del plano de imagen, o sea, un vértice de la esquina está dentro de la imagen y otro fuera, un punto es insertado en la intersección y el punto exterior es eliminado.

 

Conversión de escaneo

El paso final en el proceso de rasterización tradicional es rellenar los triángulos bidimensionales, que están de forma comprobada dentro del plano de la imagen. Esto también es conocido como conversión de escaneo. Para que un píxel sea renderizado, este debe estar dentro de un triángulo y no debe estar oculto, o bloqueado por otro píxel. Al ser difícil saber si el motor de rasterización dibujará todos los píxeles de adelante hacia atrás tiene que haber alguna manera de asegurarse que los píxeles cerca del observador no están siendo superpuestos por píxeles más lejanos. Un Z buffer es la solución más común, ya que cada vez que un píxel es dibujado, este actualiza el z buffer con su valor de profundidad. Cada nuevo píxel debe verificar su valor de profundidad con el valor de z buffer antes de ser dibujado. Los píxeles más cercanos son dibujados mientras que los más lejanos son descartados. Para averiguar el color de un píxel, deben ser aplicados cálculos de texturas y sombreado.

 

Antes de que el color final del píxel sea decidido, un cálculo de iluminación debe ser computado para sombrear a los píxeles basados en alguna luz que puede estar presente en la escena. Por lo general hay tres tipos de luces comúnmente usadas en escenas: luces direccionales , luces de punto y los focos.

 

Existen varios algoritmos de sombreado para los rasterizadores. Todos los algoritmos de sombreado deben tomar en cuenta la distancia desde la luz y el vector normal del objeto sombreado con respecto a la dirección incidente de la luz. Los algoritmos más rápidos simplemente sombrean todos los píxeles sobre cualquier triángulo dado con solo un valor de iluminación, también conocidos como sombreado plano. No hay forma de crear la ilusión de superficies suaves con este método excepto subdividiendo en triángulos más pequeños. Los algoritmos pueden también sombrear vértices separadamente e interpolar el valor lumínico de los vértices al dibujar los píxeles. Esto es conocido como sombreado Gouraud. La más lenta pero más realista aproximación es calcular la luz separadamente para cada pixel, también conocido como sombreado Phong. Este realiza interpolación binaria de los vectores normales y usa el resultado para hacer cálculos de iluminación locales.

 

Técnicas de aceleración

Para extraer el máximo rendimiento de un motor de rasterización, un número mínimo de polígonos debe ser enviado al renderizador. Unas cuantas técnicas de aceleración se desarrollaron a través del tiempo para remover objetos no visibles. La forma más simple de eliminar polígonos innecesarios es eliminar todos aquellos que el observador no puede ver. Esto se conoce como backface culling. Ya que la mayoría de los objetos 3D son completamente cerrados, los polígonos no enfrentados al observador están siempre bloqueados por polígonos que sí lo están, excepto cuando el observador está dentro del objeto. El enfrentamiento de un polígono está definido por el winding u orden en el que sus vértices se envían al renderizador. Un renderizador puede definir un winding en el sentido de las agujas del reloj o contrario como enfrentamiento hacia el frente o hacia atrás. Una vez que un polígono se transformó a un espacio en la pantalla, su winding puede ser verificado y si está en la dirección opuesta, no es dibujado. Por su puesto, backface culling no puede ser usado con volúmenes abiertos o degenerados.

 

Mejoras posteriores

Si bien el proceso de rasterización básico hace décadas que se conoce, las aplicaciones modernas siguen haciendo optimizaciones y adiciones para aumentar el rango de posibilidades del motor de rasterización.

 

Filtrado de texturas

Las texturas son creadas a resoluciones específicas, pero ya que la superficie en donde están aplicadas puede estar a cualquier distancia del observador, estas pueden mostrarse en tamaños arbitrarios en la imagen final. Como resultado, un píxel en la pantalla usualmente no corresponde directamente a un texel. Alguna técnica de filtrado debe ser aplicada para lograr imágenes claras a cualquier distancia. Hay varios métodos, con diferentes relaciones entre calidad de imagen y complejidad computacional.

 

Mapeado del entorno

Environment mapping es una forma de mapeado de texturas en la cual las coordenadas de la textura son dependientes de la vista. Una aplicación común, por ejemplo, es simular reflejo en un objeto con brillo. Uno, por ejemplo, se puede mapear el entorno de un cuarto a una copa de metal, como el observador se mueva alrededor de la copa, las coordenadas de la textura en los vértices de la copa se mueven proporcionalmente, dando la ilusión de metal reflectivo.

 

Mapeado de imperfecciones, golpes, rugosidad

Bump mapping es otra forma de mapeado de textura que no provee a los píxeles de color sino de profundidad. Especialmente con pixel shaders modernos, bump mapping crea la sensación de rugosidad dependiente de la luz y el punto de vista en una superficie para aumentar el realismo.

 

Nivel de detalle

En muchas aplicaciones modernas, el número de polígonos en una escena puede ser impresionante. Sin embargo, un observador en una escena solo podrá discernir detalles de objetos cercanos. Los algoritmos de nivel de detalle varían la complejidad de la geometría en función de la distancia al observador. Los objetos justo enfrente del observador pueden ser mostrados en su completa complejidad mientras que los objetos que están más lejos pueden ser simplificados dinámicamente, o inclusive reemplazados por sprites.

 

Sombras

Los cálculos de iluminación en el tradicional proceso de rasterización no tienen en cuenta la obstrucción de objetos. Shadow mapping (mapeado de sombras) y shadow volumes (volúmenes de sombras) son dos comunes técnicas modernas para crear sombras.

 

Rendering

 

El término renderizado (representación gráfica) es un anglicismo que viene de rendering y se considera un vulgarismo en español, que se aplica en informática en aquellos casos en los que el ordenador dibuja, pinta o representa algo en la pantalla. En una página web el renderizado de la página ocurre cuando se visita y su contenido se pinta en la pantalla. También ocurre cuando se usa alguna herramienta como mobile friendly test o también desde Google Search Console, para comprobar si el robot de Google interpreta la página correctamente. Estas herramientas nos mostrarán el renderizado que hace de la página el robot, pintándola sobre una imagen que nos devolverá como resultado.

¿Por qué es importante para el SEO?

Ver cómo representa gráficamente el robot de Google una página nos ayuda a detectar archivos CSS o JavaScript bloqueados por el archivo robots.txt u otros problemas que puedan obstaculizar su renderizado. Esta información es importante para Google, pues si existen partes ocultas, les dará menos importancia en el posicionamiento y, además, debe comprobar si la página se renderiza correctamente en dispositivos móviles. Si impedimos su acceso y no logra renderizar la página, podría afectar negativamente.

También nos ayuda a ver si existen errores de JavaScript o incompatibilidades con el motor de JavaScript de la araña de Google, que impidan una visualización correcta de los contenidos.

¿Por qué es importante para el WPO?

La optimización del renderizado en el navegador es importante para mejorar la experiencia de usuario, ya que los estilos y las animaciones mal implementadas harán la página más lenta, bloqueando la interfaz al usuario, obteniendo peor nota de rendimiento de cara a Google. Esto puede repercutir directamente en el posicionamiento.

La optimización del renderizado de página requiere aplicar correctamente CSS y JavaScript en cada caso. En general, se recomienda:

• Optimizar el JavaScript (con diversas técnicas que caen fuera del ámbito de esta definición). Puedes leer nuestro post sobre cómo optimizar el JavaScript.
• Evitar que se produzcan repintados de pantalla.
• Evitar usar reglas de CSS complejas. O consulta nuestro post sobre cómo optimizar el CSS.
• Optimizar las animaciones.
• Evitar tamaños del DOM excesivos.

¿Cómo hace el navegador el renderizado de la página?

El renderizado se inicia debido a una carga de la página o a un cambio por JavaScript lo cual obliga al navegador a ejecutar varios algoritmos, en el orden siguiente, para mostrar la página al usuario:

1. Cálculos de estilo: se calculan los estilos que corresponden a cada elemento del HTML, mirando qué reglas de CSS encajan con los elementos de la página y aplicando sus estilos en cascada.
2. Diseño: cada elemento HTML se representa internamente como un rectángulo o capa. Con los estilos calculados en el paso anterior, se puede representar internamente la posición, el tamaño y espacio que deberá ocupar cada uno de estos rectángulos.
3. Pintado: se rellenan en memoria los píxeles con los textos, colores, imágenes, bordes y sombras de cada una de las capas.
4. Composición: cada una de las capas pintadas en memoria se llevan a la pantalla.  Puesto que las capas pueden solaparse, se deben dibujar en la pantalla en el orden correcto, para que las capas superiores aparezcan pintadas sobre las inferiores.