{"id":66487,"date":"2025-05-12T15:48:08","date_gmt":"2025-05-12T20:48:08","guid":{"rendered":"https:\/\/niixer.com\/?p=66487"},"modified":"2025-05-12T19:45:16","modified_gmt":"2025-05-13T00:45:16","slug":"realidad-aumentada-con-8th-wall","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/","title":{"rendered":"Realidad aumentada con 8TH WALL"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Que es 8th Wall?<\/h2>\n\n\n\n<p>Niantic Studio <a href=\"https:\/\/www.8thwall.com\/\">8thwall<\/a> es una plataforma que permite desarrollar experiencias de realidad aumentada (AR) y realidad mixta (XR) directamente en navegadores web, sin necesidad de usar aplicaciones o o hardware especializado. Su objetivo principal es hacer que la creaci\u00f3n de AR sea m\u00e1s accesible, permitiendo a los desarrolladores crear aplicaciones interactivas y experiencias inmersivas que puedan ser accesibles desde dispositivos m\u00f3viles o de escritorio a trav\u00e9s de un simple enlace web.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Incluye funciones avanzadas como:<\/li>\n\n\n\n<li>&nbsp;Seguimiento de superficies (SLAM)<strong>:<\/strong> esta plataforma usa algoritmos de Simultaneous Localization and Mapping para detectar y mapear planos y superficies de su entorno en tiempo real. Y con esto lo que se logra es anclar el contenido 3D con m\u00e1s precisi\u00f3n, inclusive cuando el dispositivo o el usuario se mueven.<\/li>\n\n\n\n<li>Reconocimiento de im\u00e1genes: Emplea bases de datos de marcadores digitales o impresos para lograr identificar r\u00e1pidamente patrones o logotipos. Al detectar una imagen de referencia, la plataforma carga din\u00e1micamente modelos y animaciones vinculados sin afectar el rendimiento.<\/li>\n\n\n\n<li>Rastreo de objetos en 3D: Gracias al rastreo basado en visi\u00f3n por computadora, 8th Wall puede mantener el seguimiento continuo de objetos f\u00edsicos, aplicando texturas, sombras y efectos de iluminaci\u00f3n para integrarlos perfectamente en la escena.<\/li>\n\n\n\n<li>Funciona en dispositivos iOS y Android.<\/li>\n\n\n\n<li>Desarrollo con JavaScript.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-7-1-1024x460.png\" alt=\"\" class=\"wp-image-66489\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-7-1-1024x460.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-7-1-300x135.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-7-1-768x345.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-7-1.png 1336w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Paso a paso de la experiencia de realidad aumentada<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Acceso a la plataforma y panel principal<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1.1 Inicio de sesi\u00f3n:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nos debemos dirigir a la p\u00e1gina oficial de 8th Wall.<\/li>\n\n\n\n<li>hacemos click en \u201cLog In\u201d y elegimos la opci\u00f3n de autenticaci\u00f3n con correo electr\u00f3nico o &nbsp; cuenta de Google.<\/li>\n\n\n\n<li>Una vez autenticado, nos dirigir\u00e1 al panel principal<\/li>\n\n\n\n<li>Nos registramos utilizando una cuenta puede ser de Google.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"400\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-10-1.png\" alt=\"\" class=\"wp-image-66491\" style=\"width:527px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-10-1.png 534w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-10-1-300x225.png 300w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Indicamos el prop\u00f3sito para el cual utilizaremos 8th Wall (por ejemplo, para desarrollo personal, educativo o profesional).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"409\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-12-1.png\" alt=\"\" class=\"wp-image-66494\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-12-1.png 628w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-12-1-300x195.png 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Asignamos un nombre personalizado al proyecto o cuenta para completar el proceso de registro.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"449\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-11-1.png\" alt=\"\" class=\"wp-image-66493\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-11-1.png 577w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-11-1-300x233.png 300w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/figure>\n\n\n\n<p><strong>1.2 <\/strong>Despu\u00e9s de habernos registrado, se abre el <strong>panel principal<\/strong> con todas las herramientas disponibles para crear proyectos de realidad aumentada.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Barra lateral izquierda<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>My Projects<\/strong>: aqu\u00ed se muestra todos tus proyectos personales.<\/li>\n\n\n\n<li><strong>Workspace<\/strong>: justo debajo se el nombre de la organizaci\u00f3n o espacio de trabajo<\/li>\n\n\n\n<li><strong>Accesos r\u00e1pidos:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Workspace<\/strong>: lista de proyectos de todo el espacio.<\/li>\n\n\n\n<li><strong>Team<\/strong>: proyectos compartidos con el equipo.<\/li>\n\n\n\n<li><strong>Public Profile<\/strong>: gestiona c\u00f3mo se ve el perfil p\u00fablico.<\/li>\n\n\n\n<li><strong>Account: <\/strong>ajustes del usuario (plan, facturaci\u00f3n, API keys).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Barra de navegaci\u00f3n superior<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Documentation<\/strong>: enlace directo al sitio de documentaci\u00f3n oficial de 8th Wall.<\/li>\n\n\n\n<li><strong>Project Library:<\/strong> cat\u00e1logo de ejemplos y plantillas que se pueden clonar.<\/li>\n\n\n\n<li><strong>Product y Resources:<\/strong> men\u00fas desplegables con noticias de producto, SDKs, integraciones y enlaces a la comunidad.<\/li>\n\n\n\n<li><strong>Perfil de usuario<\/strong>: ajustes personales, cierre de sesi\u00f3n y acceso a los planes.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Zona central: \u201cRecent Projects\u201d<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Banner principal<\/strong>: suele incluir enlaces a starter kits o novedades destacadas.<\/li>\n\n\n\n<li>Pesta\u00f1as:\n<ul class=\"wp-block-list\">\n<li><strong>Sample Projects<\/strong>: muestras de proyectos ya montados que se pueden explorar o clonar.<\/li>\n\n\n\n<li><strong>Tutorials:<\/strong> gu\u00edas paso a paso para crear experiencias concretas.<\/li>\n\n\n\n<li><strong>News<\/strong>: actualizaciones y notas de versi\u00f3n de la plataforma.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Tarjetas de proyecto<\/strong>: cada proyecto muestra:\n<ul class=\"wp-block-list\">\n<li>Miniatura para identificar visualmente la experiencia.<\/li>\n\n\n\n<li><strong>Icono de ojo<\/strong>: abrir una vista previa web inst\u00e1ntanea.<\/li>\n\n\n\n<li>Icono de corchetes o \u201c&lt;\/&gt;\u201d: clonar el proyecto a el workspace para editarlo.<\/li>\n\n\n\n<li>T<strong>\u00edtulo clicable<\/strong>: abre el editor en modo proyecto.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-13-1-1024x480.png\" alt=\"\" class=\"wp-image-66497\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-13-1-1024x480.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-13-1-300x140.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-13-1-768x360.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-13-1.png 1341w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>&nbsp;Bot\u00f3n \u201cNew Project\u201d<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Situado arriba a la derecha, en morado.<\/li>\n\n\n\n<li>Al pulsarlo, se abre el asistente para crear un proyecto desde cero: ah\u00ed se define nombre, tipo de experiencia y configuraciones iniciales.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-14-1-1024x423.png\" alt=\"\" class=\"wp-image-66498\" style=\"width:486px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-14-1-1024x423.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-14-1-300x124.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-14-1-768x317.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-14-1.png 1074w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-15-1-1024x581.png\" alt=\"\" class=\"wp-image-66499\" style=\"width:522px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-15-1-1024x581.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-15-1-300x170.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-15-1-768x436.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-15-1.png 1083w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Selecci\u00f3n de \u201cImage Targets\u201d<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ubicar el mosaico \u201cStudio: Image Targets\u201d Es el primero en la lista de Quick Start.<\/li>\n\n\n\n<li>Identificar los controles del mosaico: Se debe dar clic sobre el rect\u00e1ngulo de la tarjeta para iniciar el asistente de creaci\u00f3n.<\/li>\n\n\n\n<li>Completar los campos del asistente lateral:\n<ul class=\"wp-block-list\">\n<li>Upload Target Image\n<ul class=\"wp-block-list\">\n<li>Se debe arrastrar la imagen (JPEG\/PNG) o hacer clic para buscarla en los archivos internos del disco.<\/li>\n\n\n\n<li>El sistema nos mostrar\u00e1 una miniatura y validar\u00e1 autom\u00e1ticamente si tiene buena calidad para tracking.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Target Name\n<ul class=\"wp-block-list\">\n<li>Asignar un nombre descriptivo (por ejemplo \u201cWhacAMoleMarker\u201d).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>A\u00f1adir el marcador\n<ul class=\"wp-block-list\">\n<li>Pulsar \u201cAdd Target\u201d (o \u201cSave Target\u201d).<\/li>\n\n\n\n<li>8th Wall procesa la imagen, generar\u00e1 internamente el archivo de tracking y lo listar\u00e1 en la secci\u00f3n Image Targets del proyecto.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Crear el proyecto\n<ul class=\"wp-block-list\">\n<li>Tras a\u00f1adir el marcador, el bot\u00f3n \u201cCreate Project\u201d se habilita.<\/li>\n\n\n\n<li>Al hacer clic, 8th Wall crea el esqueleto de tu proyecto en tu workspace.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Nota sobre la \u00faltima actualizaci\u00f3n sobre los archivos index.html y main.js tras la actualizaci\u00f3n deben crearse manualmente:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En el editor, abrir el panel de archivos (sidebar izquierda).<\/li>\n\n\n\n<li>hacer clic en \u201cAdd File\u201d \u2192 \u201cNew File\u201d, nombrar el archivo index.html y confirmar.<\/li>\n\n\n\n<li>Repetir tambi\u00e9n para crear el archivo &nbsp; main.js<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-16-1-1024x554.png\" alt=\"\" class=\"wp-image-66500\" style=\"width:513px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-16-1-1024x554.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-16-1-300x162.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-16-1-768x416.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-16-1.png 1079w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una vez cargado el proyecto, se mostrar\u00e1n todas las herramientas disponibles para su edici\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Herramientas disponibles de edici\u00f3n en proyecto<\/strong><\/h3>\n\n\n\n<p><strong>3.1. Barra superior de acciones<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build \/ Land \/ Publish: botones para compilar tu proyecto<\/li>\n\n\n\n<li>Play \/ Connect Device: vista previa instant\u00e1nea en navegador o env\u00edo directo al m\u00f3vil conectado para probar en tiempo real.<\/li>\n<\/ul>\n\n\n\n<p><strong>3.2. Vista 3D (Viewport)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El lienzo central donde se renderiza la escena AR sobre una cuadr\u00edcula de referencia. Aqu\u00ed se coloca, mueve y orienta los modelos y marcadores.<\/li>\n<\/ul>\n\n\n\n<p><strong>3.3. Panel \u201cScene Graph\u201d (izquierda, secci\u00f3n Default)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u00c1rbol de nodos: lista jer\u00e1rquica de todos los objetos de la escena (luces, c\u00e1mara, modelos, marcadores).<\/li>\n\n\n\n<li>Buscador (+): filtra nodos por nombre o a\u00f1ade nuevos elementos (luz, c\u00e1mara, objetos 3D).<\/li>\n<\/ul>\n\n\n\n<p><strong>3.4. Panel de archivos y assets<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Files \/ Modules \/ Image Targets: organizaci\u00f3n de los ficheros index.html, scripts, m\u00f3dulos y objetivos de imagen.<\/li>\n\n\n\n<li>Bot\u00f3n \u201c+\u201d: para crear o subir nuevos assets (texturas, modelos, targets).<\/li>\n<\/ul>\n\n\n\n<p><strong>3.5. Gizmo y controles de navegaci\u00f3n (abajo a la izquierda)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gizmo XYZ: eje de colores para mover, rotar o escalar objetos seleccionados.<\/li>\n\n\n\n<li>Iconos de c\u00e1mara y mano: cambiar entre modo orbitar, paneo o zoom para inspeccionar la escena.<\/li>\n<\/ul>\n\n\n\n<p><strong>3.6. Inspector de propiedades (derecha)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Default Settings: ajustes globales (c\u00e1mara activa, skybox y gradiente, colores de fondo).<\/li>\n\n\n\n<li>Project Settings: configuraci\u00f3n de espacios de entrada, gestor de inputs y opciones de control de versi\u00f3n.<\/li>\n\n\n\n<li>Play Mode: activar \u201cLive Sync\u201d para actualizaci\u00f3n autom\u00e1tica en dispositivos.<\/li>\n<\/ul>\n\n\n\n<p><strong>3.7. Consola y estado de compilaci\u00f3n (zona inferior)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Barra morada con hash y sello de tiempo de la \u00faltima build.<\/li>\n\n\n\n<li>Show Console: desplegable para ver logs, errores y avisos en tiempo real al compilar o ejecutar la experiencia.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-17-1-1024x477.png\" alt=\"\" class=\"wp-image-66501\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-17-1-1024x477.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-17-1-300x140.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-17-1-768x357.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-17-1.png 1362w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Introducci\u00f3n de modelos 3D<\/strong><\/h3>\n\n\n\n<p>En este punto, procedemos a cargar los dos modelos 3D previamente descargados desde <a href=\"https:\/\/sketchfab.com\/\">Sketchfab<\/a>, los cuales utilizaremos como parte del desarrollo del proyecto.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"554\" height=\"495\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM-1.jpg\" alt=\"\" class=\"wp-image-66502\" style=\"width:254px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM-1.jpg 554w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM-1-300x268.jpg 300w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"587\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM.jpg\" alt=\"\" class=\"wp-image-66503\" style=\"width:259px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM.jpg 685w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.00-PM-300x257.jpg 300w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creamos una imagen adecuada para usar como Target, asegur\u00e1ndonos de que tenga buen contraste y detalles visuales para facilitar su reconocimiento.<\/li>\n\n\n\n<li>Luego, organizamos el entorno 3D sobre ese Target, posicionando correctamente los modelos que se proyectar\u00e1n al ser detectada la imagen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1024x628.jpg\" alt=\"\" class=\"wp-image-66505\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1024x628.jpg 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-300x184.jpg 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-768x471.jpg 768w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1536x942.jpg 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM.jpg 1570w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Despu\u00e9s, definimos un punto de c\u00e1mara y a\u00f1adimos luces para mejorar la visualizaci\u00f3n y lograr una experiencia de realidad aumentada m\u00e1s realista y estable.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"620\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1.jpg\" alt=\"\" class=\"wp-image-66506\" style=\"width:490px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1.jpg 1012w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1-300x184.jpg 300w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-1.03.01-PM-1-768x471.jpg 768w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. C\u00f3digo del juego<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Una vez establecido c\u00f3mo se ver\u00e1 la experiencia de realidad<\/li>\n\n\n\n<li>aumentada adjuntaremos a los archivos un json que contenga el comportamiento o la l\u00f3gica de las entidades.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"909\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-2.24.19-PM.jpg\" alt=\"\" class=\"wp-image-66507\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-2.24.19-PM.jpg 667w, https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/WhatsApp-Image-2025-04-30-at-2.24.19-PM-220x300.jpg 220w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Conclusiones<\/strong><\/h3>\n\n\n\n<p>Despu\u00e9s de hacer un recorrido detallado paso a paso del trabajo en la plataforma 8th Wall, empezando por el registro y exploraci\u00f3n del panel de trabajo, pasando por la selecci\u00f3n de la plantilla \u201cImage Targets\u201d, la carga y la configuraci\u00f3n del marcador, hasta el uso del editor con los paneles de escena, assets y consola, se pudo obtener varias conclusiones:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Accesibilidad sin barreras t\u00e9cnicas<\/strong>: La interfaz gr\u00e1fica de plataforma est\u00e1 pensada y dise\u00f1ada para guiar a usuarios incluso sin alg\u00fan tipo de experiencia previa en AR o programaci\u00f3n. Los paneles fueron organizados de una forma sencilla que permiten visualizar r\u00e1pidamente cada cambio sin necesidad de salirse del editor. Esto facilita a dise\u00f1adores como a desarrolladores para adentrarse en el mundo de la realidad aumentada sin mucha dificultad<\/li>\n\n\n\n<li><strong>Flexibilidad y control sobre los archivos<\/strong>: Con la \u00faltima actualizaci\u00f3n de la plataforma en la cual ya no se incluyen autom\u00e1ticamente los archivos index.html y el main.js hace que podamos tener una participaci\u00f3n m\u00e1s activa en el proyecto flexibiliz\u00e1ndolo y permitiendo modificar y personalizar a\u00fan m\u00e1s nuestros proyectos, aunque claramente tambi\u00e9n representa pasos adicionales.<\/li>\n\n\n\n<li><strong>Potencia de las \u201cImage Targets\u201d para experiencias inmersivas<\/strong>: Pudimos apreciar la importancia de trabajar con marcadores, el seguimiento 3D y reconocimiento de im\u00e1genes, asegura que las experiencias se anclen de una forma muy estable y realista a nuestro entorno real.<\/li>\n\n\n\n<li><strong>Una plataforma en constante evoluci\u00f3n<\/strong>: 8th Wall nos ofrece una gran biblioteca de plantillas y ejemplos, lo que nos ayuda a mantenernos al d\u00eda con las nuevas caracter\u00edsticas y tendencias<\/li>\n<\/ol>\n\n\n\n<p>8th Wall nos facilita la creaci\u00f3n, edici\u00f3n y publicaci\u00f3n de experiencias AR de gran impacto, combinando un \u00e1rea de trabajo intuitiva con el poder de lenguajes de programaci\u00f3n como JavaScript y WebXR. Y con los conceptos y pasos detallados en esta gu\u00eda, cualquier persona puede tener bases para empezar a crear su propio proyecto de realidad aumentada y llevarlo desde su imaginaci\u00f3n a un lienzo y finalmente a un p\u00fablico deseado.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Presentaci\u00f3n de Paso a paso<\/strong><\/h2>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/realidad-aumentada-con-8th-wall.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Incrustado de Realidad aumentada con 8th wall.\"><\/object><a id=\"wp-block-file--media-74e48cb5-b385-4fcf-99e8-66889b802a50\" href=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/realidad-aumentada-con-8th-wall.pdf\">Realidad aumentada con 8th wall<\/a><a href=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/realidad-aumentada-con-8th-wall.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-74e48cb5-b385-4fcf-99e8-66889b802a50\">Descarga<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Video tutorial Paso a paso <\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Video tutorial de 8th wall studio\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/DrGFtY584lI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Cr\u00e9ditos:<\/h2>\n\n\n\n<p><strong>Autor:<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/niixer.com\/?s=Brandon+Smith+Vallejo+Maldonado#google_vignette\">Brandon Smith Vallejo Maldonado<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/niixer.com\/?s=Diego+Alejandro+Daza+Ripoll\">Diego Alejandro Daza Ripoll<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/niixer.com\/?s=Julian+Esteban+P%C3%A9rez+Salcedo\">Julian Esteban P\u00e9rez Salcedo<\/a><\/p>\n\n\n\n<p><strong>Editor:<\/strong>&nbsp;<a href=\"https:\/\/niixer.com\/?s=Carlos+Iv%C3%A1n+Pinz%C3%B3n+Romero\">Carlos Iv\u00e1n Pinz\u00f3n Romero<\/a><\/p>\n\n\n\n<p><strong>Codigo:<\/strong>&nbsp;<a href=\"https:\/\/niixer.com\/?s=UCRVG1-10\">UCRVG1-10<\/a><\/p>\n\n\n\n<p><strong>Universidad:&nbsp;<\/strong><a href=\"https:\/\/niixer.com\/?s=Universidad+Central\">Universidad Central<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Que es 8th Wall? Niantic Studio 8thwall es una plataforma que permite desarrollar experiencias de realidad aumentada (AR) y realidad mixta (XR) directamente en navegadores web, sin necesidad de usar aplicaciones o o hardware especializado. Su objetivo principal es hacer que la creaci\u00f3n de AR sea m\u00e1s accesible, permitiendo aSeguir Leyendo<\/p>\n","protected":false},"author":1896,"featured_media":66490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[30],"tags":[],"class_list":["post-66487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-niixer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Realidad aumentada con 8TH WALL &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos<\/title>\n<meta name=\"description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Realidad aumentada con 8TH WALL\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Realidad aumentada con 8TH WALL &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"og:description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Realidad aumentada con 8TH WALL\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-12T20:48:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-13T00:45:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1254\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jperezs7\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"jperezs7\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Realidad aumentada con 8TH WALL &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Realidad aumentada con 8TH WALL","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/","og_locale":"es_ES","og_type":"article","og_title":"Realidad aumentada con 8TH WALL &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","og_description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Realidad aumentada con 8TH WALL","og_url":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2025-05-12T20:48:08+00:00","article_modified_time":"2025-05-13T00:45:16+00:00","og_image":[{"width":2400,"height":1254,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","type":"image\/png"}],"author":"jperezs7","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"jperezs7","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/"},"author":{"name":"jperezs7","@id":"https:\/\/niixer.com\/#\/schema\/person\/78adbee53d6c433890dbee00676f3a20"},"headline":"Realidad aumentada con 8TH WALL","datePublished":"2025-05-12T20:48:08+00:00","dateModified":"2025-05-13T00:45:16+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/"},"wordCount":1644,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","articleSection":["Niixer"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/","url":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/","name":"Realidad aumentada con 8TH WALL &#8211; Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","datePublished":"2025-05-12T20:48:08+00:00","dateModified":"2025-05-13T00:45:16+00:00","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Realidad aumentada con 8TH WALL","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","width":2400,"height":1254},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2025\/05\/12\/realidad-aumentada-con-8th-wall\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Realidad aumentada con 8TH WALL"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/78adbee53d6c433890dbee00676f3a20","name":"jperezs7","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/55bd10d4c45b8db499fb49d23f0641b569f6163ef308d0d49658025107b39f1a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/55bd10d4c45b8db499fb49d23f0641b569f6163ef308d0d49658025107b39f1a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55bd10d4c45b8db499fb49d23f0641b569f6163ef308d0d49658025107b39f1a?s=96&d=mm&r=g","caption":"jperezs7"},"url":"https:\/\/niixer.com\/index.php\/author\/jperezs7\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2025\/05\/image-8-1.png","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/66487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/1896"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=66487"}],"version-history":[{"count":9,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/66487\/revisions"}],"predecessor-version":[{"id":66556,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/66487\/revisions\/66556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/66490"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=66487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=66487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=66487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}