Web: Integración y validaciones generales

Descripción General

Al momento de trabajar en proyectos Web3D hay puntos que deben ser cuidados independientemente de si son para ThreeJS, Model Viewer, etc. ya que en estos proyectos se utilizan los formatos GLB y GLTF para que los programadores tengan acceso por código a dichos archivos. Es por ello que se tiene que verificar que el archivo que se comparta a programación esté de la forma correcta. A continuación se describen una serie de consideraciones para evitar errores.

Proceso de Desarrollo

Consideraciones si se exporta sólo el modelo 3d

• El modelo deberá estar lo más optimizado posible para que los tiempos de carga sean los menores aunque el límite recomendado de polígonos sean 70k.
• Siempre procurar las buenas practicas: mallas ordenadas, objetos sin historia y con parámetros limpios (rotación, traslación y posición en 0,0,0)
• Tener presente las dimensiones del modelo, pues en caso de Model Viewer, éste presenta los modelos a escala real. En caso de ThreeJS muchas veces los programadores ajustan cámaras con el modelo inician que obtienen, por tanto cambiar la escala posteriormente puede implicar retrabajo de programación.
• Las texturas pueden llegar a pesar más que el modelo mismo, se recomienda trabajar con la menor cantidad de materiales posibles y con texturas de 512px, o 1024px o incluso un mix; ej. tal vez el albedo tiene que ir en 1024px pero las oclusiones pueden ir en 512px
• Para evitar problemas de visualización, los elementos que lleven cualquier tipo de transparencia (ej. vidrios o etiquetas) tendrán que ser otro material pues los objetos sólidos pueden comportarse de manera extraña.
• Siempre meter el archivo GLB o GLTF a https://gltf-viewer.donmccurdy.com/ , es la visualización más fiel de lo que se le comparte a programación. Sketchfab tiene un sistema de render con parametros que a veces no se pueden replicar en otros desarrollos, y si los materiales se realizan en Blender hay que validar que respete los parámetros.

Consideraciones si se exportan animaciones

• En caso de Model Viewer se recomienda que la animaciones estén en loop. En caso de ThreeJS se recomienda ponerse de acuerdo con el programador para ver qué y cómo lo necesita. Algunas veces pedirán los elementos animados en otro archivo, archivos distintos, en un solo track de animación o en distintos.
• Una vez finalizada la animación hay que bakear los parámetros de esa animación. Los errores de animación suelen verse en Sketchfab, pero aunque salgan bien ahí y en Blender hay que verificarlos en https://gltf-viewer.donmccurdy.com/ ← en esta liga es donde ocurren las validaciones más importantes.
• En el caso de usar maya, se pueden hacer pruebas sobre qué tantos parámetros y cuántos niveles de jerarquía hay que bakear es decir, si tengo un carro donde rotan las llantas, se recomienda bakear los 3 ejes de rotación. Si no fuera suficiente, se recomienda bakear la rotación y la traslación del objeto. Si no fuera suficiente, se recomienda ademas comenzar a bakear esos mismos parámetros en el padre del elemento, y asi sucesivamente.
• También se puede  hacer una comparativa entre el peso del archivo sin bakear y bakeando todos los elementos que se van a exportar (aún aquellos que sean padres y no tengan animación), si no hay mucha diferencia, realizar este paso puede ahorrar tiempos de pruebas.
• En general donde más errores se presentan es en las rotaciones, es por ello que se tienen que bakear los 3 ejes y hasta la posición
• Para más detalles sobre animaciones referirse a las fichas en el espacio de Enlaces de Descarga

Ejemplo de flujo

• Se trabaja la escena con los modelos necesarios.
• Una vez listos los modelos, se organiza el archivo, los nombres de materiales y escala (todo tiene que estar debidamente ordenado y nombrado)
• Todos los elementos se limpian  (rotación, traslación y posición en 0,0,0 y limpios de historia). Se ajustan los pivotes en caso de ser necesario
• Todos los elementos se meten a un padre ← este padre tiene su pivote al origen del mundo
• Se trabajan las animaciones necesarias en loop o como solicite el programador.
• Una vez finalizadas, se seleccionan todos los elementos de la jerarquía y se bakean del primer al ultimo key de animación.
• Se exporta el archivo como FBX
• → en este punto se recomienda revisar el fbx en Blender y validar que las animaciones estén bien.
• → Si las animaciones están bien en Blender, subir a Sketchfab, si no, revisarlas
• Realizar los ajustes de material en Sketchfab, guardar y publicar como indica la guía Guía: Cómo exportar en GLTF: Sketchfab y Babylon
• Una vez obtenido el GLTF validar el zip descargado en https://gltf-viewer.donmccurdy.com/
• Si todo está bien, compartir el zip a programación o meter el archivo scenea Blender y reexportar como GLB (para Model Viewer)

Caso extra...

• Si se trabaja con assets comprados, siempre considerar tiempos para la revisión de los mismos. Puede ser desde optimización hasta limpieza (algunas veces hay dobles caras, o mallas que causan malas visualizaciones del modelo)
• Si los assets comprados traen animaciones y presentan error, se recomienda hacer una "reconexión". Es decir, duplicar el modelo + el rig, y reasignar el skin y copiar los pesos de la malla original. Posteriormente copiar los keys de animación del rig original. Bakear esta variante y testear.

Verificación los GLTF

Independientemente del método que se utilice para obtener el GLTF esimportante siempre revisarlo en un visualizador, por ejemplo el de Babylon o https://gltf-viewer.donmccurdy.com/ ya que muchas veces en la escena de maya se ve bien, en Sketchfab se ve bien pero en los visualizadores no. Los visualizadores nos muestran un comportamiento fiel al que manifestará el GLTF con el programador.

Si un modelo desaparece de escena, intenta limpiar su historia. Si sigue sin estar visible puede ser que la cámara del visualizador no lo esté viendo, puede ser un problema de escala o de animación. Esto se comprueba si al apagar la animación aparece o no el modelo; si aparece es probable que sea culpa de la animación. Esto puede corregirse reimportando el FBX a una escena nueva y exportando o en su defecto rehaciendo la animación.

De ser posible evita copiar y pegar frames de una animación a otra, ya que a veces puede traer errores en la animación visibles hasta probar con el visualizador.

A veces, hacer algún truco de un cuadro a otro puede fallar en el sentido de que no es inmediato. Por ejemplo, una escala que tenga en un cuadro 0 y al siguiente 1 puede que se vea cómo se escala, aunque claro, se verá de manera muy rápida.

Si al momento de verificarlo en el visualizador, ocurre un flickr con las geometria de algún modelo, es decir cada frame se posiciona dando en una posicion distinta y da un aspecto rallado en la escena, intenta meter ese elemento a un padre.

Si ocurre un extraño y no sabes qué puede ser, intenta comprobar que el FBX funcione revisándolo en una nueva escena, si sí funciona, expórtalo de esa nueva escena. Esto ayuda a que el FBX quede más limpio que la primera vez. Si al momento de verificarlo en el visualizador vuelve a ocurrir un error, intenta revisar tanto el FBX en Blender así como el GLTF. Si el GLTF se ve raro en el visualizador pero bien en Blender intenta exportarlo desde ahí de la siguiente manera: file>export>gltf2.0 y revisando al exportar, en animation>Group by NLA Track , la opción de Group by NLA Track prueba con eso activado y desactivado.

Consejos cuando se presente un error

El GLTF se ha comportado de manera inesperada llegando tener errores difíciles de deducir. La mayoría se han resuelto siguiendo lo mencionado en la ficha. Sin embargo, si llega a surgir un nuevo error puedes tomar lo siguiente como punto de partida. Al momento de hacer pruebas fíjate muy bien en qué está pasando, las siguientes preguntas pueden ayudar a la solución del problema.

• Qué parte de la escena está mal: toda? o un elemento en particular?
• Qué características tiene ese error: es el material? es su posición? la animación?
• Qué parte del proceso que hice al momento de generar este modelo puede estar causando el problema?
• Qué tiene de diferente a los otros modelos?
• Si lo exporto a Blender o a una escena nueva, cómo se comporta?
• Hay algún elemento que crea que podría hacer que la computadora entre en conflicto?
• Está limpio mi archivo?
• Pertenece a un padre o cambia si lo meto a uno?
• Si lo exporto de una distinta plataforma, genera el mismo error?
• Qué me dice la consola al exportar?  Un programador podría describirme el error o algún concepto del mismo que no entienda?

Consejo extra: si sientes que te estás confundiendo con las pruebas, intenta anotar las ideas o cambios que vayan teniendo los archivos al cambiar cosas para llevar un registro de avance en su solución, ver qué ha servido y/o qué ya se intentó.

Enlaces de descarga

Para detalles sobre cómo trabajar en Model Viewer ver la ficha Modelviewer: Guía de uso Para detalles sobre cómo exportar GLTF ver Guía: Cómo exportar en GLTF: Sketchfab y Babylon Para verificar los archivos : https://gltf-viewer.donmccurdy.com/ Par convertir una imagen a formato webP: https://onlineconvertfree.com/es/convert-format/jpg-to-webp/

Archivos Adjuntos

Comentarios

En caso de Model Viewer, verificar con el programador el uso del formato USDZ (obtenido tanto por sketchfab como por exportación de Blender)

En caso de que el modelo se descargue de Sketchfab tener en cuenta las siguientes consideraciones con programación:

• Si se descarga el gltf de Sketchfab, pero programación necesita que los pivotes estén centrados (ej. una animacion) se tendrá que meter el archivo a Blender, centrar los pivotes y reexportar.
• El archivo descargado de Sketchfab (gltf), al meterlo a Blender puede tener una jerarquía y nombres distintos al FBX original. Tener esto en cuenta para cuando se comparta el archivo pues la diferencia en los nombres es que añade al nombre del objeto, el nombre del material. Por tanto, aun sin cambiar nombres del modelo, es importante mantener también los nombres de los materiales para no causar complicaciones a programación.

Sobre la iluminación: tener en cuenta que en Web3D la mayoría de iluminaciones son por HDRI, en Model Viewer se recomiendan las que trae por default, en otros desarrollos se puede buscar alguno de https://polyhaven.com/hdris

No se siempre pasa pero tener cuidado con los triángulos porque a veces reflejan de manera errónea la luz.

En web3d los métodos más seguros de animación son por propiedades (escala, posición y rotación), rig y blendshapes. Tener cuidado con elementos que se apaguen (pueden presentar errores) y tener en cuenta que animaciones de materiales no serán consideradas (porque al cambiar de software cada uno sufre un cambio de material y los parametros no se copian) <--- aunque este punto hay que verificar en caso de exportación directa de Blender.

Si un elemento con animación fue modificado seleccionar la opción de "delete non-deformer history" para limpiarlo

Ventajas

Desventajas

Ubicación Proyecto

Elaboró

Daphne Sánchez