{"id":845,"date":"2019-08-18T17:39:18","date_gmt":"2019-08-18T17:39:18","guid":{"rendered":"https:\/\/www.n-dimensiones.es\/main\/?p=845"},"modified":"2023-07-16T17:24:04","modified_gmt":"2023-07-16T17:24:04","slug":"videotutorial-3-de-verge3d-presentacion-guion","status":"publish","type":"post","link":"https:\/\/www.n-dimensiones.es\/main\/videotutorial-3-de-verge3d-presentacion-guion\/","title":{"rendered":"Videotutorial 3 de verge3d. Presentaci\u00f3n gui\u00f3n"},"content":{"rendered":"\n<p>Este articulo surge como una necesidad adicional a la improvisaci\u00f3n con que pienso realizar el resto de los videotutoriales para que sean lo mas naturales posibles.  Realizarlos sin siquiera leer el gui\u00f3n redactado previamente, eso si le doy una mirada previa y a continuaci\u00f3n me pongo a grabar.<\/p>\n\n\n\n<p>El gui\u00f3n pues es lo que pego a continuaci\u00f3n con alg\u00fan ajuste para que no quede sin sentido, al no mostrar ni capturas y precisar echar un vistazo a como salio el video al final.<\/p>\n\n\n\n<p>Sin duda cubre alg\u00fan punto que seguramente se me paso por alto por tales motivos descritos.<\/p>\n\n\n\n<p>Ya hemos visto con anterioridad a este tutorial, como se originan los .gltf files de forma manual, al exportar desde blender cualquier malla.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Ahora veremos como se crean autom\u00e1ticamente con la creaci\u00f3n de cada proyecto en el app manager desde cualquier navegador web<br> http:\/\/localhost:8668<br> Tal acceso  precisa de una previa carga en memoria de la aplicaci\u00f3n  blender para cargar los scripts python(servidor web en el puerto predeterminado 8668). <\/p>\n\n\n\n<p>Comenzamos la Introducci\u00f3n a la programaci\u00f3n 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\u00ba2) a la escena predeterminada del proyecto que llamaremos cubo. <\/p>\n\n\n\n<p>La  escena  predeterminada del blender generada desde app manager, tendr\u00e1 el nombre del proyecto y cualquier actualizaci\u00f3n de la misma en blender seguiremos realizando mismo proceso anterior de exportar<\/p>\n\n\n\n<p>Tras crear un primer proyecto en el app manager se generaran autom\u00e1ticamente otros  ficheros adicionalmente al .gltf:\u00bbmiproyectname.gltf\u00bb , entre ellos<br>  ahora solo os mencionare algunos, el blend file ejemplo \u00abmiproyectname.blend\u00bb que contendr\u00e1 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).<\/p>\n\n\n\n<p>Los archivos de imagenes o texturas que contenga cualquier material del proyecto<br> ya comentamos que quedaran en mismo directorio raiz del proyecto, luego se recomienda por ello empezar planeando una organizaci\u00f3n en subdirectorios<br> seg\u00fan se trate; de un personaje, escena para cada nivel, arma, objeto con el que interaccionar como un premio, etc,   <br> ubicando cada exportaci\u00f3n a gltf desde el blender en un subdir del proyecto que le corresponda.<\/p>\n\n\n\n<p>assets\/niveles\/nivel1\/    cada nivel tendr\u00e1 un escenario ejemplo pisos  por eso puede ser como en mi caso el siguiente path.<br> assets\/building\/city<br> assets\/characters\/heroe\/<br> assets\/pic_objects\/premi1\/<br> assets\/vehicles\/vehicle1<\/p>\n\n\n\n<p>Tambi\u00e9n le acompa\u00f1ara al .gltf exportado un .bin file que hace inviable modificar el tipo de text file .json  que constituye el tipo .gltf<br> Y lo  dejas comprimido tal .gltf file , ejemplo como recomiendo en producci\u00f3n  para reducir as\u00ed su tama\u00f1o, se les a\u00f1ade en paralelo las copias comprimidas con la extensi\u00f3n * .xz correspondiente al .bin y al .gltf <br> Y podr\u00e1s prescindir de los originales y usar solo los xz,  si esta activa la compresi\u00f3n en el puzzle del proyecto, exactamente en la secci\u00f3n init donde se pre configuran los par\u00e1metros de partida como son las fuentes de letra, compresi\u00f3n ,etc.<br> Nosotros trabajaremos de partida con s\u00f3lo dos secciones, la init y \u00abla main\u00bb d\u00f3nde se contendr\u00e1 el coraz\u00f3n o c\u00f3digo visual principal de la aplicaci\u00f3n web.<br> La aparici\u00f3n 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\u00f3n a otra pero con mucha cautela pues el proceso requiere de un tutorial, me anticipo como ejemplo  comentando que algunos casos deber\u00e1s renombrar fichas puzzle duplicadas. Tambi\u00e9n si haces cortar y pegar entre secciones, si estas fichas contienen anidamiento de otras, podr\u00edan perderse parte de tal contenido.<br> Por eso estos videotutoriales proponen un modelo de organizaci\u00f3n 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.<\/p>\n\n\n\n<p>Para ver en el navegador cualquier actualizaci\u00f3n de los .gltf usados, se precisara seguir unas<br>  pautas sobre mantenimiento de la cache del navegador. Yo recomiendo principalmente la expuesta al articulo siguiente en lo referido <br> al desarrollo sobre equipos escritorios donde desarrollemos contenidos 3d para la web.<br> <a href=\"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\">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<\/a><br> Aunque cada cual puede usar las suyas propias.<\/p>\n\n\n\n<p>Podemos empezar a dar seriedad presentando ya el rellenado de <br> variables principales entre las fichas puzzle a desplegar y  controlar lo que sucede en cada secci\u00f3n o entre las mismas  pero ahora podr\u00eda resultar dar mucho engorro al tutorial pues puede hacerlo interminable<\/p>\n\n\n\n<p>ejemplos:<\/p>\n\n\n\n<p>stat_game  a valor 0, solo cambia a 1 si ya hemos iniciado juego aunque este pausado<br> 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, <\/p>\n\n\n\n<p>Para si algui\u00e9n 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\u00f3lo est\u00e1n a\u00fan actualizados hasta versi\u00f3n 2.12)<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/Soft8Soft\/verge3d-code-examples\">https:\/\/github.com\/Soft8Soft\/verge3d-code-examples<\/a><\/p>\n\n\n\n<p><br> Tambi\u00e9n puedes precisar en tal caso saber que el sistema de coordenas del blender deja al eje Z  up en la vertical. Tenemos el siguiente<br> articulo que nos dice como lo presenta three.js<br> <a href=\"https:\/\/www.soft8soft.com\/topic\/three-js-coordinate-system\/#post-1395\">https:\/\/www.soft8soft.com\/topic\/three-js-coordinate-system\/#post-1395<\/a><br>  tendra en su lugar del Z, el eje \u00abY\u00bb, con su valor en negativo.<\/p>\n\n\n\n<p>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\u00f3n central predeterminada y animado con su animaci\u00f3n en blender predeterminada, podr\u00edamos a\u00f1adir otros modelos como decorado en la deseada pero extender\u00eda demasiado el tiempo empleado a este tercer videotutorial.<br>Y concluimos el tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este articulo surge como una necesidad adicional a la improvisaci\u00f3n con que pienso realizar el resto de los videotutoriales para que sean lo mas naturales posibles. Realizarlos sin siquiera leer el gui\u00f3n redactado previamente, eso si le doy una mirada previa y a continuaci\u00f3n me pongo a grabar. El gui\u00f3n pues es lo que pego &hellip; <a href=\"https:\/\/www.n-dimensiones.es\/main\/videotutorial-3-de-verge3d-presentacion-guion\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abVideotutorial 3 de verge3d. Presentaci\u00f3n gui\u00f3n\u00bb<\/span><\/a><\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[151,156,153,150,155,146,159,154,152,148,158,157,58,149],"_links":{"self":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/845"}],"collection":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":3,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"predecessor-version":[{"id":853,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/posts\/845\/revisions\/853"}],"wp:attachment":[{"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.n-dimensiones.es\/main\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}