Saltar al contenido principal

Three.js: Escenas con modelos + iluminación + animación

Descripción General

Three.js es una biblioteca para crear gráficos en 3D en un navegador web, por lo que tiene su propio flujo de trabajo y consideraciones que el modelador debe tomar en cuenta.

Alcances

Demo de la investigación:

Mazda - https://ejemplo3d-web.netlify.com/

Nota: Hay un bug en la escena, por lo que se ve todo negro. En los controles del lado derecho se tiene que cambiar el color en la pestaña de Directional Light para activar la luz de la escena.

PSW  -

Cupra  -  Capacitación (vw-capacitacion-web3d-develop.netlify.app)  ( fecha nacimiento   1/1/1999 y concesionaria 1111)

Oxxo - Oxxo Piso de venta (entienda-oxxo-3d.netlify.app)

Consideraciones

Modelos y materiales

  • El modelo idealmente debe estar en el origen.
  • El modelo debe ser un .glb o un .gltf. El .gltf, se obtendrá un archivo .bin, el cual idealmente no debería pesar más de 20MB. Este peso es el que afecta el rendimiento en tiempo real en la escena web.
  • Cada objeto tendrá que tener un solo material asignado en Maya, de lo contrario no se verá reflejado el material puesto por código.
  • El tiling de la textura se le ajusta por código. Las UVs del modelo no deben sobrepasar el cuadrante del editor, de otra forma no leerá la textura asignada. *esto queda por confirmar que sigue siendo así*

  • Los objetos que requieran AO deberán tener 2 UV Sets. El segundo Set será utilizado únicamente para el AO, mientras que el primero lo ocuparán el resto de los mapas. En la imagen siguiente, ambos UV Sets tienen desplegados los Shells de la misma forma.

  • Para hacer ajustes muy puntuales y mínimos, se le puede pedir al programador que añada sliders. Así, el modelador podrá hacer un setup más minucioso de los materiales que lo requieran.

  • Es importante revisar que el modelo tenga solo los UV sets necesarios y tengan el mismo nombre para todos los objetos. En el proyecto PSW , se necesitaban resaltar algunas partes del modelo y hacer transparente le resto, pero  se presentaban dos tonalidades de gris en el modelo, esto se solucionó revisando los uv sets y se encontró que algunos objetos tenían más de un set.

Flujo de trabajo en Blender​

  • Se puede realizar el set up de materiales y la exportación a .glb o .gltf en Blender.
    • Si el modelo no se trabajó en Blender se puede importar como FBX  desde File >  Import > fbx
    • Para la conexón de texturas se deberá cambiar a la pestaña de Shading , aparecerá un editor de nodos. Primero se debe seleccionar el objeto, se puede acceder a sus materiales seleccionándolos en la Colección de la escena o en en el panel de propiedades. Una vez seleccionado aparecerá el nodo del material en el editor.

. 

    • Para conectar las texturas al material, selecciona el nodo del material más CTRL + SHIFT + T , se abrirá el archivo y puedes seleccionar al mismo tiempo las texturas Base Color , Metallic , Normal , etc da clic en aceptar, y blender conectará las imágenes automáticamente (* es importante que los mapas de textura estén bien nombrados) En caso de que una imagen no sea reconocida se puede agregar manualmente copiando (SHIFT + D) uno de los nodos de imagen creados y conectarlo al canal correspondiente.

    • Se puede hacer tiling de una textura en  Blender, usando el nodo Mapping ymodificando el valor Scale.

    • Materiales con opacidad, Si la textura de Base color tiene información de transparencia se puede conectar su información de alpha  al alpha del material. Si se usa una imagen como mascara (blanco y negro) se debe  cargar la imagen en otro nodo image texture y conectar su información de color al alpha del material.

  • Materiales transparentes y cristales

La transmisión es diferente de la mezcla alfa, porque la transmisión permite reflejos especulares de fuerza completa. En glTF, la combinación alfa pretende representar materiales físicos que faltan parcialmente en la geometría especificada, como una gasa médica. La transmisión pretende representar materiales físicos que son sólidos pero permiten que la luz no reflejada de forma especular se transmita a través del material, como el vidrio.

Para materiales que sean cristales se debe configurar la propiedad transmisión en lugar del Alpha , también es importante asegurarse que los ajustes en Blend Mode este en Opaque, para evitar siluetas en los objetos detrás del cristal.

 

Configurar un material shadeless

Este  shader es el equivalente a un shader unlit en unity, no es afectado por la  luz y se ve igual que su mapa de albedo.

Texturas

  • Las texturas deben estar en las dimensiones (...)-512-1024-2048-4096-(...) pixeles, de otra forma se redimensionarán automáticamente y esto ocupa recursos.
  • Las dimensiones de la imagen afectan al rendimiento en tiempo real, mientras que al tiempo de carga le afecta el peso de la imagen.
  • Todas las imágenes deben estar en las dimensiones más bajas posibles sin comprometer la calidad. Los Albedo o Normal Maps podrían ser de 1024x1024 solo si no se ven bien en dimensiones más bajas.
  • Para mapas como Roughness, Metallic, etc que pueden llegar a tener poca información, se recomienda bajarlas aún más.
  • Si se tienen mapas que son lisos, como luego lo pueden llegar a ser los de Roughness o Metallic, se puede bajar la dimensión hasta 1x1 pixel.
  • Se puede bajar aún más el peso a las imágenes en la siguiente liga: https://tinypng.com/. Hay que cuidar que no comprometa la calidad final.
  • Usar  tiled textures solo en elementos que no van a necesitar bake de iluminación.

Iluminación de elementos sin environment.

Bake de Iluminación para escenarios  (en proceso)

Caso de ejemplo : Cupra

Requerimientos:

  • Todos los objetos que van a ser bakeados necesitan tener las UVs desplegadas y distribuidas por todo el cuadrante del mapa, evitar encimar islas de UVs.
  • Se aconseja manejar  atlases de texturas para objetos pequeños - medianos
  • Manejar una sola textura para los pisos
  • Manejar una sola textura para las paredes
  • Para lograr que en threejs el piso refleje los objetos del escenario  no el HDRI , el piso debe ser un plano rectangular (de cuatro vértices, una cara) con un solo material.  (la configuración en threejs  la hace progra).

Proceso:

  • En Blender​

  1. Acomodo y configuración de materiales
  2. Si hay objetos a los que se les aplicará el bloom , agruparlos en un padre para que programación los identifique  y agregue  el custom property para el bloom selective. [ TUTORIALS ] Three.js selective bloom pass (youtube.com)
  3. Iluminación y acomodo de luces
    1. Tutoriales :   Why I love creating videos with Envato Elements (@PremiereGal) (youtube.com) ,
  4. Bake de iluminación en Blender
    1. Tutorial :   Blender Texture Baking in 3 Steps (youtube.com)
  5. Obtención de mapas de textura
  6. Ajustes de PS si lo requiere
  7. Optimización de mapas (Cambio de tamaño, formato y/o reducción en tiny panda)

Ejemplo

Desde blender :

Algunas texturas usadas para el piso y paredes (geometría grande)

Parte de las texturas para objetos ambientales

2. Dentro de threejs​

Una vez obtenido el glb exportado desde Blender, debemos llevarlo a Threejs editor para testearlo. Idealmente el como se ve en Blender es como se ve en la versión web, sin embargo en temas de iluminación no siempre es igual.

  1. Importamos a threejs
  2. Ajustamos materiales si lo necesitan
  3. Bloom selectivo (en esto nos puede ayudar progra)
  4. Agregarnos el HDRI
  5. Agregamos luces si hace falta
  6. Exportación para programación.
    1. Una vez terminado, vamos a hacer dos exportaciones :
      1. Archivo .JSON : Este es el que se le da a programación. Ya viene incluido el glb + las luces , NOTA: no incluye el HDRI este debe pasarse por separado.
      2. GLB : este glb ya contiene las configuraciones hechas en threejs, si hay ajustes, puedes usar este glb en blender   y posteriormente importarlo de nuevo a threejs, y ya tendrá los ajustes que hiciste anteriormente.

INCLUIR CAPTURAS DEL ESCENARO EN LA WEB

Incluir tutorial del proceso de ajuste . PENDIENTE

Extra:

Se encontró este plug in para Blender a  threejs BIG threejs Baking tutorial is now online! (youtube.com)

Tutoriales sobre iluminación en Blender : (538) Architecture Topics - YouTube

Documentación sobre render baking en Bledner Render Baking — Blender ManualB

Animaciones​

Hay dos formar para exportar las animaciones desde Blender

1- Un solo clip de animación : Exporta todas las animaciones en escena como un solo clip de animación

  1. Varios clips  (Acciones) : Exporta  varios clips de animación previo a una configuración establecida

Un solo clip​

Para exportar un solo clip, solo se debe desmarcar la casilla Group by NLA track en la pestaña de animation,  al momento de exportar  el glb

 

Exportación de varios clips​

Blender reconoce los clips como Actions, por lo que para exportarlos hay que usar el panel de Nonlinear animation y el Dope sheet editor. Se puede hacer la animacion conforme se van creando las acciones, o se puede importar un FBX que contenga todas las animaciones hechas en Maya y separarlas en blender.

Proceso para separar clips en Blender con un FBX importado:

  1. Importar FBX
  2. Desde la pestaña Animation - Abrir el panel Nonlinear animation y el panel Dope sheet -  Action editor
  3. Identificar bloques de animacion y renombrarlos para identificarlos facilmente
  4. Seleccionar el objeto que tiene la animacion (el esqueleto o objeto con blendshape)  en el panel non linear animation
  5. En el panel Dope sheet - Action (Shape key editor en el caso de blendshapes) selecciona  el bloque de animacion que contiene todas las animaciones y da clic en push down para crear un track, en el panel Nonlinear animation aparecerá el nuevo track, renómbralo como full animations para tener un backup de todas las animaciones.
  6. Para crear los clips, repite el paso 4 , selecciona el bloque con todas las animaciones  y duplica el bloque haciendo clic en el botón de las dos hojas. Renómbralo como la acción correspondiente
  7. En el panel Dope Sheet, elimina o edita  los keyframes que no abarcan la acción correspondiente. RECUERDA mover los keyframes al frame 0
  8. Cuando termines la edición, da clic en Push Down y en el panel de non linear animation renombra el nuevo track.
  9. Cuando termines de crear todos los clips, elimina el track backup de todas las animaciones
  10. Exporta el GLB asegurandose de tener activada la casilla  group by NLA Track.

Animación con blendshapes

:Algunos modelos tienen animaciones de blendshapes, blender coloca estas animaciones como tracks separados ya que se encuentran en objetos separados del esqueleto. Esto se puede solucionar de dos maneras

  • Usar un driver que controle los blendshapes, esto se debe de hacer desde el inicio  añadiendo un hueso como controlador, para que al momento de separar/crear los clips el proceso se haga  desde el mismo objeto en el action editor.
  • Si ya se tienen animados los blendshapes  sin un controlador,  los blendshapes se de deben editar desde el dope sheet - Shape key editor, además los tracks en el nonlinear animation panel deben tener el mismo nombre que su correspondiente clip con el esqueleto de joints, para que sean incluidos como un mismo clip al momento de exportar. Este caso requiere mas tiempo debido a que el numero de objetos aumenta segun el número de objetos que contengan blendshapes.

Este video contiene todo el proceso  con más detalle (abrir en YT):

Comprueba los clips usando gltf viewer , en la pestaña animation y morph targets

Asignación de clips entre rigs con misma jerarquía en Blender​

En este tutorial se explica le proceso para añadir un nuevo clip de animación a un modelo ya existente, ambos modelos tienen el mismo rig.  (el video esta oculto, para verlo ábrelo en  youtube)

Problemas con transparencias caso WEB TEC MTY​

En este proyecto se tenia un escenario con paredes de cristal, en el exterior tenia arboles cuyas hojas usan Alpha clip, además de varios personajes  que tenían cabello con materiales transparentes. El usuario podía moverse por todo el escenario y estar dentro de las oficinas.

Problemas presentados :

  • El cabello de algunos personajes desaparecía al acercarse o mover la cámara. (se soluciona con ajustando una propiedad de la cámara)
  • El cabello desaparecía cuando se miraba desde dentro de las oficinas a través de la paredes de cristal.
  • Las hoja de los arboles desaparecía al mirarse desde el interior a través de las paredes de cristal.
  • Los objetos con materiales transmisivos no se renderizan cuando están detrás de otro del mismo tipo.

Cristales con trasmisión VS cristales con metalic y alpha  ** Se distinguen las separaciones por el mapa de oclusión y por que las líneas son un objeto opaco

Consideraciones y soluciones:

  • No usar Alpha Hash (no esta soportado aun)
  • Usar una sola imagen (PNG ) y conectar ambas propiedades (Color y Alpha)  al material.
  • Usar alpha clip mode , para objetos parcialmente transparentes (hojas de arboles, cabello, objetos con huecos, etc. )
  • Alpha blend  mode para objetos traslucidos(ej. lograr un cabello mas realista y fino), aunque este tiende a consumir mas recursos y produce problemas si hay mas elementos con alpha blend
  • Los objetos con la propiedad transmission , se usa para simular el vidrio, este permite conservar la especularidad, para web no reconoce el transmission roughness , pero si el roughness por default del material , recuerda dejar el alpha blend mode en Opaque.
  • No tener objetos transmisivos uno detrás de otro por que no se verán.
  • Se puede hacer cristales subiendo el metallic y bajando el alpha
  • Algunos errores con transparencia no se ven en Blender, siempre verificar en glTF viewer o threejs editor.

Configuración de materiales en Tec Mty

Árbol con alpha clip, usando una misma imagen para el canal alpha y color.

Configuración cristales  -  Hecho con metallic y specular, para conservar reflejos, con alpha en .120 y blend mode en Alpha blend.

Configuración del cabello,  con alpha clip

Configuración de cabello con Alpha Blend, con esta configuración no se veía bien el cabello.

Settings de exportacion  de GLB en clips de animacion

Importante activar NLA  Tracks (non linear animations tracks)

Notas:

Esta guía se basa en la version 2.92 de Blender

Se puede usar este visualizador para modelos glb/glTF   glTF Viewer (donmccurdy.com) y el editor de threejs  https://threejs.org/editor/

Documentación de  GLB/GLTF en blender   glTF 2.0 — Blender Manual

Enlaces de descarga

Los enlaces de descarga ya sean plugins o Assets.

Ventajas

  • El producto final puede llegar a ser muy realista
  • Una vez sabiendo qué se debe considerar como modelador, no es muy diferente a trabajar en Unity.
  • Tener muchos objetos con transparencias puede producir problemas de renderizado
  • Blender permite tener un flujo más rápido para  configurar y exportar GLB

Desventajas

  • Las versiónes posteriores  de blender 3.6 causa problemas de exportación de blendshapes en GLB.
  • La conversión a .gltf es muy tardada por medio de sketchfab. En su momento se bajó un plug in para Maya que no sirvió. También se sabe que Blender exporta en este formato, pero rompe las animaciones al cambiar los pivotes. Antes de comenzar un proyecto con Tree.js, sería bueno investigar esta parte para no perder tanto tiempo.
  • Hay muchas cosas que hasta el momento no sabemos. Quizás alguna de las consideraciones descritas es la versión larga de algo que no conocemos, ya que todo esto se dedujo con base en prueba y error porque casi no hay documentación al respecto. También hay muchos efectos de postprocessing que sabemos que existen pero que por falta de tiempo no se implementaron. Hay muchas cosas que habría que seguir investigando y probando.

Elaboró

Dani Burri

Diana Delfino