Arte 3D - I - Threejs.org editor

Descripción General

ThreeJS editor es una plataforma que permite la integración de una escena para ser implementada en web3D.

A continuación veremos qué se puede hacer en el programa y sus limitantes.

Alcances

Alcances de la investigación.

Proceso de Desarrollo

Introducción a ThreeJS Editor

Este editor dispone únicamente de la versión web. y se ve de la siguiente manera. Curiosamente no importa si no tienes señal de internet, puedes acceder a la pagina y trabajar de manera usual, importar y descargar la escena para futuras ediciones.

Con las teclas W, E y R puedes manipular los objetos que cargues en la escena, así mismo, de lado izquierdo dispondrás de estos modificadores.

En la opción de File encontrarás todos los formatos en los que puedes exportar tu escena. Si bien no viene un botón de guardado, puedes escoger la opción de Export Scene, esto descargará automáticamente la escena en tu computadora, con la cual podrás en otro momento abrirlo en la web. Curiosamente, puedes cerrar las ventanas y cuando vuelvas a ingresar cargará la escena en la que estabas trabajando.

En la opción de Add encontrarás diversas geometrías que puedes incorporar a tu escena. Ahí mismo encontraras las cámaras y luces que puedes añadir.

Del lado derecho verás más menús, como:

• Scene: en este verás la jerarquía de tus elementos, y en la parte inferior te habilita los tabs de object, geometry y material. En object verás sus propiedades de escala, rotación, traslación, visibilidad y render order. En Material podrás editar el material que tiene asignado.
• Project: en este verás opciones como antialias, sombras, luces físicas y aquí encontrarás la lista de materiales que tengas en el proyecto.
• Settings: aqui puedes cambiar el lenguaje, las teclas para ser usadas en traslación, rotación y escala y también verás tu historia de movimientos hechos. Así mismo puedes apagar aqui el grid y los recursos visuales de apoyo.

Materiales

En esta plataforma no es posible crear materiales nuevos de manera directa. Respeta los materiales del archivo mismo, sin embargo si quieres asignar un nuevo material sin modificar los ya existentes (por ejemplo, dos geometrías en un inicio comparten el mismo material pero ahora quisieras que cada una tuviera un material distinto, en vez de 1 material ahora necesitarías 2 materiales) tendrías que agregar a tu escena algún modelo, puede ser cualquiera de los que dispones dentro de la plataforma. Ya que al incorporar esa geometría se le añade un material nuevo. Si añades otra geometría, tendrás dos materiales nuevos y así sucesivamente: cada geometría tendrá su propio material. Si borras esas geometrías se borrarán los materiales.

Como queremos (en este ejemplo) obtener un nuevo material, una vez creada la geometría, supongamos que es un cubo, y su material, puede asignarse a la geometría donde lo necesitemos y borrar posteriormente el cubo. El material se mantiene pues ya es usado por otra geometría. Sin embargo para que esto funcione, las geometrías deben de estar separadas, pues se aplica el material al modelo en totalidad y no por partes como en Unity (que aunque la geometría esté junta, reconoce que hay distintos materiales y permite cambiarlos individualmente).

Para asignar un material selecciona la geometría que lo recibirá y dirígete al menú de Project, ahí encontrarás los materiales, selecciona el que vas a usar y da click en Asign. Sólo ten en mente que si un material no está siendo usado, se borrará automáticamente de la lista.

Cuenta con diversos materiales como el lambert, phong, physical, toon, basic, matcap, etc.

Es recomendable trabajar directamente los materiales en esta plataforma, ya que si se trabajan en sketchfab y se transfiere el GLTF, se pasarán como phong y tendrán que re-editarse los materiales. La siguiente es una comparación entre cómo se ve importado directamente el GLTF de Sketchfab y cómo puede llegar a verse el modelo trabajado desde la plataforma.

Animaciones

Para la correcta visualización de los rigs, asignar un material distinto a los objetos que tengan rig ya que dentro del material se encuentra la opción de skinning. Es por ello que si una geometría que es estática comparte material con una que tiene rig, puede que arrastre animaciones indeseadas. Sólo asígnales materiales distintos y revisa que el material de los objetos animados tengan la opción de Skinning activado y que los blendshapes no se rompan.

Iluminación

Al momento de correr la aplicación se verá todo en negro ya que esta plataforma no contiene iluminación por default. Genera desde el menú superior de Add las luces que necesites y dirígete al menú de Scene para ver sus propiedades como intensidad y color. De igual manera puedes asignar dentro del material el EnvMap que necesites, en formato png.

Enlaces de descarga

Los enlaces de descarga ya sean plugins o Assets.

Archivos Adjuntos

Comentarios

Esta plataforma es útil en cuanto a las cuestiones de acomodo de escena, y tal vez, testeo de materiales. Sin embargo, se ha decidido continuar el trabajo con Nunu Studio (para revisar la ficha referirse a Arte 3D - I - Nunustudio ). Esto debido a que la interfaz es menos riesgosa y más clara que este editor; por ejemplo, lo que se comenta en las desventajas, principalmente de los materiales, pues es riesgoso que se borren, que la creación o los cambios de un material se compliquen (esto atrasaría el flujo de trabajo) y que hayan errores al asignar texturas pues se cargan directamente de la computadora y no de una base de texturas dentro del archivo/proyecto. En ambas plataformas el Skinning de los rigs se encuentra en el  material, entonces es importante tener un fácil control de ellos para la asignación de nuevos materiales y la corrección de animaciones.

Aunque en Nunu la organización de estos elementos no sea la mejor (pues no se pueden generar carpetas), bastaría con un orden en los nombres para tener un control de los elementos creados o cargados.

Así mismo, otra gran desventaja serían las animaciones. Si bien en Nunu no se recomienda animar porque no hay control en las curvas, etc. al menos es visible la animación, o las animaciones, del modelo. En este Editor lo único visible respecto a las animaciones el el Play, el Take y la velocidad de reproducción. Tampoco se puede animar, ni editar la animación. Los Blendshapes reaccionan bien con los modelos incorporados pero en cuanto cambias de material, se pierden, se asume porque hay que activar ese parámetro en el material sin embargo el único relacionado es Skinning y ningún Morph Target como en Nunu.

Por último Nunu presenta más opciones que sólo la incorporación de los elementos en la escena y su acomodo y manejo de materiales: también da la posibilidad de manejar partículas, flares, textos y post-processing. Aunado a eso, Nunu ya tiene una iluminación por default y difiere en el manejo de los colores, no se sabe exactamente qué sea, pero siguiendo los mismos pasos (integración del modelo y edición del material) se ve muy distinto al editor de ThreeJS. La siguiente es una comparativa de la misma botella editada en ambas plataformas.

Ventajas

• Se puede usar aún sin internet
• Guarda la memoria de la escena que estás trabajando aunque se cierre la ventana
• Tiene varios materiales para usar

Desventajas

• No hay documentación sobre el editor (no se ha encontrado, el tab de ayuda lleva a la documentación para programación)
• Si bien se almacena la escena que estás editando en web, no es posible tener distintos archivos abiertos al mismo tiempo pues en cada ventana abierta verás el que estás trabajando en ese momento.
• Si no se tiene cuidado al cambiar el material, puede perderse, ya que se borran automáticamente los materiales que no están en uso
• No hay control sobre las texturas dentro de la escena, pues se cargan directamente en el material y no hay algún menú donde se puedan visualizar todas las que se han subido.
• Si bien, cosas sencillas se pueden exportar en GLTF, se hizo la prueba con escenas un más complejas y no lo permite descargar. El problema radica en que no hay un log o un espacio que comparta a qué se debe.
• No se encontró la opción para activar los Blendshapes
• No es posible crear materiales nuevos de manera directa
• No contiene iluminación por default

Ubicación Proyecto

La ubicación del proyecto en el servidor.

Elaboró

Daphne Sánchez