Videotutorial 3 de verge3d. Presentación guión

Este articulo surge como una necesidad adicional a la improvisación con que pienso realizar el resto de los videotutoriales para que sean lo mas naturales posibles. Realizarlos sin siquiera leer el guión redactado previamente, eso si le doy una mirada previa y a continuación me pongo a grabar.

El guión pues es lo que pego a continuación con algún ajuste para que no quede sin sentido, al no mostrar ni capturas y precisar echar un vistazo a como salio el video al final.

Sin duda cubre algún punto que seguramente se me paso por alto por tales motivos descritos.

Ya hemos visto con anterioridad a este tutorial, como se originan los .gltf files de forma manual, al exportar desde blender cualquier malla.

Ahora veremos como se crean automáticamente con la creación de cada proyecto en el app manager desde cualquier navegador web http://localhost:8668 Tal acceso precisa de una previa carga en memoria de la aplicación blender para cargar los scripts python(servidor web en el puerto predeterminado 8668). Comenzamos la Introducción a la programación visual: una vez dado el paso anterior creando un primer proyecto ya podemos abrir y usar en el navegador las fichas de puzzle para adicionar otras cargas de modelos o escenas (*.gltf files ) desde otros blend files adaptados a verge3d(para el caso de personajes ya se explica proceso en tutorial nº2) a la escena predeterminada del proyecto que llamaremos cubo.

La escena predeterminada del blender generada desde app manager, tendrá el nombre del proyecto y cualquier actualización de la misma en blender seguiremos realizando mismo proceso anterior de exportar

Tras crear un primer proyecto en el app manager se generaran automáticamente otros ficheros adicionalmente al .gltf:»miproyectname.gltf» , entre ellos ahora solo os mencionare algunos, el blend file ejemplo «miproyectname.blend» que contendrá el cubo predeterminado como escena a actualizar, lo que podemos cambiar o modificar(ejemplo recomiendo dejar tal cubo con su propiedad blender, context- visibility en show renders, desactivado e ir adicionando con fichas puzzle, a su escena, otros modelos desde otros gltf files).

Los archivos de imagenes o texturas que contenga cualquier material del proyecto ya comentamos que quedaran en mismo directorio raiz del proyecto, luego se recomienda por ello empezar planeando una organización en subdirectorios según se trate; de un personaje, escena para cada nivel, arma, objeto con el que interaccionar como un premio, etc, ubicando cada exportación a gltf desde el blender en un subdir del proyecto que le corresponda. assets/niveles/nivel1/ cada nivel tendrá un escenario ejemplo pisos por eso puede ser como en mi caso el siguiente path. assets/building/city assets/characters/heroe/ assets/pic_objects/premi1/ assets/vehicles/vehicle1

También le acompañara al .gltf exportado un .bin file que hace inviable modificar el tipo de text file .json que constituye el tipo .gltf Y lo dejas comprimido tal .gltf file , ejemplo como recomiendo en producción para reducir así su tamaño, se les añade en paralelo las copias comprimidas con la extensión * .xz correspondiente al .bin y al .gltf Y podrás prescindir de los originales y usar solo los xz, si esta activa la compresión en el puzzle del proyecto, exactamente en la sección init donde se pre configuran los parámetros de partida como son las fuentes de letra, compresión ,etc. Nosotros trabajaremos de partida con sólo dos secciones, la init y «la main» dónde se contendrá el corazón o código visual principal de la aplicación web. La aparición del resto de secciones sera opcional para organizarnos y reducir complejidad, dividendo el contenido. Puede decidirse sobre la marcha y pasarse con copy paste de conjuntos de puzzle de una sección a otra pero con mucha cautela pues el proceso requiere de un tutorial, me anticipo como ejemplo comentando que algunos casos deberás renombrar fichas puzzle duplicadas. También si haces cortar y pegar entre secciones, si estas fichas contienen anidamiento de otras, podrían perderse parte de tal contenido. Por eso estos videotutoriales proponen un modelo de organización que con tales secciones reduce sin duda la complejidad vista en otras alternativas a verge3d y te permite memorizar con solo un vistazo el contenido de las mismas. Para ver en el navegador cualquier actualización de los .gltf usados, se precisara seguir unas pautas sobre mantenimiento de la cache del navegador. Yo recomiendo principalmente la expuesta al articulo siguiente en lo referido al desarrollo sobre equipos escritorios donde desarrollemos contenidos 3d para la web. https://www.n-dimensiones.es/main/como-garantizar-el-acceso-a- cualquier-actualizacion-de-los-contenidos-en-vuestros- navegadores-o-actuales-accesos-en-vuestros- dispositivos/#more-416 Aunque cada cual puede usar las suyas propias.

Podemos empezar a dar seriedad presentando ya el rellenado de variables principales entre las fichas puzzle a desplegar y controlar lo que sucede en cada sección o entre las mismas pero ahora podría resultar dar mucho engorro al tutorial pues puede hacerlo interminable

ejemplos:

stat_game a valor 0, solo cambia a 1 si ya hemos iniciado juego aunque este pausado stat_game_paused a 0, variara a 1 cada vez que una vez comenzado el juego se necesite pausar el tiempo. Ejemplo al mostrar el usuario opciones desplegando el game_menu,

Para si alguién amplia el tema por su cuenta, le expongo un ejemplo de como lograrlo reutilizando algunos de los ejemplos three.js, engine webgl en que se basa verge3d y del que disponemos de ejemplos adaptados a verge3d(actualmente verge3d esta ya disponible la 2.14pre1 pero tales ejemplos sólo están aún actualizados hasta versión 2.12) https://github.com/Soft8Soft/verge3d-code-examples

También puedes precisar en tal caso saber que el sistema de coordenas del blender deja al eje Z up en la vertical. Tenemos el siguiente articulo que nos dice como lo presenta three.js https://www.soft8soft.com/topic/three-js-coordinate-system/#po st-1395 tendra en su lugar del Z, el eje «Y», con su valor en negativo.

Y ahora pasamos a lo que finalmente resulta ser el videotutorial, la carga de una escena donde el personaje aun no se mueva pero si aparezca en la posición central predeterminada y animado con su animación en blender predeterminada, podríamos añadir otros modelos como decorado en la deseada pero extendería demasiado el tiempo empleado a este tercer videotutorial. Y concluimos el tutorial.

Adaptación de cualquier personaje al engine verge3d

Nota actualización: ha sido emitido el videotutorial con los pasos descritos aqui en este articulo para lograr la adaptación de cualquier malla sea cual sea su origen a verge3d, en este caso procedente desdemixamo portal Adjuntamos unas 6 capturas cuya visualización ya deja claro el proceso, aún así se hace necesaria una breve descripción de su contenido.

Partiendo de que hayas descargado la plantilla , así como ejemplo las mallas de personajes 3d y sus originales para seguir el segundo videotutorial, podrás intentar tu mismo siguiendo estas capturas adaptar tales mallas a verge3d. Si dispones de tu propia malla o personaje, todas ellas podras tras tal adaptación probarla ya mismo en mi demo y sólo montar tu propia demo siguiendo los restantes videotutoriales.

La primera captura de las 6, muestra como vemos a continuación, la plantilla al abrirla en blender 2.8 RC2,que proporciona los objetos que hay que importar a tu proyecto de forma fija con un file-append. La siguiente captura muestra este file-append y de que objetos de la misma plantilla has de seleccionar, el resultado predeterminado mantendrá en el destino el emparentado o orden en el árbol de parents objects del apartado outliner, dónde se observan el listado completo de objetos empleados en la escena en blender. La siguiente captura muestra como quedará la malla del personaje una vez emparentado a la plantilla, destacando que hemos sin duda, de hacerlo en una vista estable de perfil de ambos, recomendada para lograrlo trabajar con ajustes de medida como la altura del personaje en una vista ortográfica de lado left o right. Puedes variarlo pero en mi juego o demo la altura trabajada es 0.4metros. Vamos unos enanitos pero cada cual es libre de cambiarlo en sus propias demos.

La siguiente captura muestra un ejemplo de como se opera habitualmente a la hora de manipular los objetos para controlarlos al moverlos por la escena. Se suele situar el cursor al centro de masas seleccionas para si ejemplo los escalas a un tiempo el punto de origen del que parte su aumento o disminución de tamaño sea tal centro. La opción es object-snap-cursor to selected. Luego con las teclas correspondientes, los objetos que sigan seleccionados se escalaran ejemplo pulsar la «s» y al tiempo los números 0.5 lo reducirían a la mitad del tamaño. Con arrastrar adecuadamente el raton al pulsa la «s» también puedes controlar el escalado.

Para desplazar pulsas «g» y arrastras ratón hacia la posición deseada , como esto no controlas sobre que eje, mejor ir haciéndolo sobre un eje concreto ejemplo «eje Z» sobre el que se mantiene «up» el personaje en la escena blender. para ello pulsas tras la «g» la «z» y a continuación mueves el ratón. Y con un click izq sueltas en la posición deseada. El proceso suele comprender con mis personajes originales escalar al tamaño del personaje inicial la plantilla, y desplazarla como se ha mostrado en las capturas, emparentas entonces y solo a continuación escalas y mueves el parent «hunter_physic» hasta que se logre el 0.4m de la altura del personaje

Cuando ya esta en la posición deseada como se ha mostrado en la captura anterior y dimensiones(ahora no el 0.4m del personaje, es algo posterior escalando el que sera su parent superior o hunter_physic, luego la dimension sera la predeterminada o inicial del personaje muchísimo mayor), seleccionando primero al esqueleto del personaje llamado «hunter_rig»(objeto que suele ser padre de la malla o body del personaje) , si el modo en la escena es object en vez de pose, a continuación pulsar»mayús o Shift» al tiempo que boton derecho del ratón sobre el objeto al que deseemos emparentar, en este caso el «hunter_collider» del árbol de la plantilla, sueltas y ambos objetos quedan seleccionados previo al emparentado. Ahora para proceder al mismo, estando el cursor sobre la escena 3d, pulsas la tecla «ctrl» y a continuación la «p» y sólo así se desplegara sobre la escena un listado con la opción deseada «set parent to -object keep transform» que mantiene siempre la posición fijada del objeto hijo en este caso el esqueleto del personaje, respecto del padre o superior del árbol, se desplace este a cualquier sito dónde se desee de la escena.

A continuación en el panel de propiedades, en el contexto output, establecemos algo que aligera la reproducción de la animación del personaje ejemplo «andar», a la recomendada en mi juego desde 24fps predeterminados a 60fps.

Y ya para finalizar, llegamos a la sexta captura o numero 6, y exportamos el resultado con file-export-verge3d gltf(.gltf), sólo cuando concluimos la adaptación a verge3d del personaje, lo que generará el fichero *.gltf , empleado o requerido en mi juego o demo o cualquier presentación 3d. Las opciones seleccionadas son las recomendadas para este caso en concreto del personaje mostrado en la captura, otros pueden requerir añadir algunas otras opciones adicionales como «export contraints». Haber añadido compresión generara adicionalmente el fichero .xz que es el gltf comprimido, que puede ser así el que definitivamente puede usar mi juego en producción.