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/#post-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.