inmensia

Lo bueno de intentar las cosas por uno mismo es que luego se aprecia mejor el trabajo que realizan los demás. E implementar un simple visor de modelos 3D con alguna sencilla técnica de iluminación hace desarrollar cierto sentido de mirada crítica hacia los pixels. ¡Y te permite encontrar un montón de errores! Veamos un par de ellos que he cometido.

En el primer render que puse obtuve un resultado bastante coherente. Poco más o menos lo que buscaba, una imagen "bonita". Sin embargo, ampliando la imagen y parándome a pensar lo que estaba mostrándose por pantalla, observé algunas zonas un tanto extrañas. Concretamente unas partes donde la textura era completamente negra, que aunque no quedaban mal, intuitivamente me hicieron sospechar de que algo no estaba del todo bien.

En la imagen de la izquierda, con el marco rojo, se aprecian bien las zonas negras, sobre todo en el tanga y el brazalete, aunque en general en todos los complementos. Por su parte, en la imagen con el marco verde, está el modelo con un render más correcto. Las zonas negras han desaparecido, sustituyéndose por transparencias que permiten ver lo que hay detrás.

Mi error fue convertir las texturas desde su formato original TGA a JPG, para poder utilizarlas con WebGL, sin tener en cuenta el canal alfa. Esas zonas negras en realidad son regiones con el canal alfa activo, y que yo estaba simplemente ignorando.

La gracia del asunto es que al convertir las textura de nuevo, esta vez con el alfa correcto, el modelo dejó automáticamente de verse bien. El problema es que si dos polígonos se solapan, el que tradicionalmente se dibuja es el más cercano al observador y el otro se ignora. Y si el más cercano es transparente entonces lo que se dibuja es el fondo de la imagen, cuando en realidad debería dibujarse el polígono ignorado para producir el efecto de transparencia.

La solución habitual en este caso es desactivar el "depth test" y activar el "blend", pero aún así es necesario mandar los polígonos ordenados de atrás hacia adelante para que se dibujen correctamente. Eso es bastante costoso en JavaScript, desde el punto del rendimiento, así que de momento lo he descartado, aunque he tenido un poco de suerte con la geometría del modelo y he podido generar una parte de forma correcta para poder comparar con el original.

Otro error que cometí estaba esta vez en el segundo render. De nuevo una imagen que parecía correcta... pero que no lo es en absoluto.
En la imagen de la izquierda está el detalle de las rodillas del modelo. Dentro del marco rojo está el render original, donde se observa que la iluminación de las rodilleras no es la misma. Una aparece "excavada" hacia afuera mientras que la otra lo hace hacia dentro. Por su parte, dentro del marco verde, está la imagen de un render más correcto, donde ambas rodilleras presentan la misma iluminación.

El problema está en la dirección de los vectores que se utilizan para calcular la iluminación. Al generarlos no había tenido en cuenta que la malla tiene partes simétricas, como las piernas, que utilizan la misma textura, o lo que es lo mismo, las mismas coordenadas uv sobre ella, pero con una orientación contraria.

La solución más común en este caso es calcular, además de la tangente, la orientación, típicamente un valor de 1 ó -1, y utilizarla para corregir el valor de la bitangente. El problema es que implica tener que pasar un nuevo buffer de atributos de entrada al shader, lo que no me ha convencido mucho, pero me ha permitido generar un render parcial más correcto para comparar.

Todos estos errores son muy básicos y existe mucha información para minimizarlos o eliminarlos completamente en función del objetivo que se pretenda conseguir. ¡Pero hasta que no lo intentas no te das cuenta!

¿No encontró lo que buscaba?

Utilice el buscador para encontrar más páginas en esta web o en toda Internet.

	Web www.inmensia.com