Crea experiencias WebAR con Image Tracking fácilmente - Mind AR Open Source

[@emiliusvgs]

Support me and download the files on patreon -> www.patreon.com/emiliusvgs Conoce MindAR -> hiukim.github.io/mind-ar-js-doc/

[@patomariano]

Buenisimo! me encantó el multi tracking! Siempre quise hacer una demo de cartas en el cual los modelos interactúen entre sí, se ataquen, activen animaciones, etc. pero debe ser bastante mas difícil de implementar! Los ejemplos que vi son con el SDK de Unity. Un saludo!!

[@willians387]

emilio te adoro es lo que te pedi hace un año de como hacer face tracking fuera de spark ar para pagians web, para clientes, Muchas Gracias ! te sigo hace años sigue asi tio

[@emiliusvgs]

hey!! Se viene segundo video con face tracking! Este es un proyecto muy nuevo por eso quizá hace un año no lo conocíamos :D

[@alextinyverse]

in documentation i only saw how to put only 1 Target Image in one mind file, but i cannot understand how in these examples they're using two target images in one "mind" file

[@chemaexposito9919]

Genial proyecto! Ojalá sirva de referencia para acercar la realidad aumentada a gente sin conocimientos amplios en programación y les sirva como introducción a ello

[@emiliusvgs]

Exacto!! permite iniciarse en el mundo AR con una buena tecnología. Se viene el segundo video con face tracking

[@UnderLabMx]

Hola amigo me gusto mucho tu video, pero tengo una duda, con esta plataforma puedo insertar un video y utilizar greenscreen para que el video se mezcle con la realidad?

[@alexismejiasdepexproP510]

Que interesante y que importante es saber de programación, no había escuchado de esas plataformas, hay que probarlas...

[@AlvaroSicilia]

Buen día Emilius! El Face Tracking de Mind AR tiene muy buena pinta👌 Te ánimo a que hagas un próximo tutorial!

[@emiliusvgs]

Hola!!! sí espero que salga esta semana, sino ya sería para la otra ;)

[@lokito85ja]

Excelente Emilio, creo que se ve más practico a la hora de etquetar el marcador y los modelos 3D en comparacion con AR.js que usa ntf y se hace más pesado,,, bueno mi punto de vista jeje

[@nicolasalvarado6678]

es muy bueno! realizé unos testeos, cambiando las imagenes de marcador, los modelos 3D etc. y funciona tal como se puede ver en el video. Si quisiera poder rotar el 3D con la mano o cambiar el tamaño, que linea sería la adecuada? Muchisimas gracias!

[@emiliusvgs]

hola! pues allí lo recomendable es crear unas líneas de código para permitir rotate or scale a través de pinch, quizá a través de otra librería

[@nicolasalvarado6678]

@@emiliusvgs Hola, Gracias x responder! Si estoy viendo opciones para involucrar otra librería, ojalá pueda compartirles pronto algún ejemplo. Gracias!!

[@Books_in_English]

Hola amigo que tipo de lenguaje de programacion es necesario saber para este tutrorial por ejemplo?

[@emiliusvgs]

hola! javascript es fundamental y también conocimientos de html. Creo que eso es la base

[@soyjosemillan]

Es similar a AR.js que bueno

[@deimovprojects]

Hola. estuve experimentando con MIND AR. pero realize el deploy en vercel y resulta que se ve todo en blanco. tenes idea que puede ser?

[@emiliusvgs]

hola! me parece raro. En realidad el deply es rapido y sencillo. A menos que el servidor requiera permisos especiales

[@loand]

se puede integrar elementos como videos o secuencias de imagenes en la vista previa?

[@emiliusvgs]

hola! sí claro, eso dependerá de tu propia creación front-end

[@ronycaceres1621]

hola como puedo hacer mostrar los modelo 3d sin un marcador solo que reconozca el lugar para que lo posione en cualquier lugar el objeto porque quiero desarrollar un sitio web para una tienda online

[@emiliusvgs]

hola, te refieres a world tracking (posicionar objetos en el ambiente). Puedes utilizar onirix, model viewer y entre otros :)

[@ronycaceres1621]

@@emiliusvgs ok gracias amigo eh estando probando model viewer de Google pero cuando muestro el modelo con la cámara de mi teléfono Android no me carga el ar no pasa nada sabes por pasa eso?

[@IAN-mq2dg]

buenas tardes, a la hora de abrir la camara con el enlace de glitch esta se queda cargando permanentemente, ya sea chrome safari internet explorer u otros dispositivos. sabrías una solución?

[@emiliusvgs]

posiblemente sea una tema de conexión o quizá un tema del propio script que no está respondiente. De todas maneras eso es un caso inusual

[@kevinwechsler8349]

Buen video. Una pregunta, si quiero usar dos targets diferentes, cómo puedo cargarlos dentro de un mismo link como en el ejemplo? Hay otra forma de cargar dos imagenes target? Gracias

[@emiliusvgs]

hola! si se puede, tan solo agrega más marcadores y crea la experiencia. El link te permitirá que uses dos marcadores o más.

[@kevinwechsler8349]

@@emiliusvgs para mi proyecto necesito usar dos marcadores personalizados, como puedo cargar dos imagenes en un mismo link?

[@HarshDivecha_FTR]

Hey @Emiliusvgs I am implementing it on react, i implemented the code as you've shown and also followed the document. Buti n react the camera starts only as a rectangular box, not in full screen as you've showed. Any idea what might be happening ?

[@emiliusvgs]

Hi! I have not worked with React! I couldn't help you in that way

[@javierdiaz6007]

Hola emilius! una consulta. que linea de codigo o como podria buscarlo al trabajar son AFRAME si lo que quiero es que la camara capte el mundo real al visualizar un objeto 3D? no puedo lograrlo.

[@emiliusvgs]

hola! no lo he probado de esa manera. Se tendría que investigar más

[@corsicroz5343]

Si ocupando exactamente el mismo código, solo se queda con el círculo cargando, qué estoy haciendo mal?

[@emiliusvgs]

hola! checa si el peso del archivo es muy pesado? quizá se demora en cargar

[@camilomorcillo4015]

@@emiliusvgs Me pasa exactamente lo mismo

[@luisantoniogonzalestorres336]

par aque se pueda ver ?

[@emiliusvgs]

acabo de responder en otro comentario

[@ishalaisha]

Se ve fácil, lo intentaré! Gracias

[@emiliusvgs]

Pruébalo!

[@The12345624]

I am facing one problem. I am unable to play video using mindAR and A Frame. Can you please help me

[@emiliusvgs]

Hi! what kind of problem?

[@alextinyverse]

muy buen video tutorial, pero ¿puede decir por favor, cómo poner 2 imágenes de destino (2 target images) en 1 archivo ".mind", porque en la documentación no vi eso, cómo hacerlo?

[@emiliusvgs]

hola! es una buena idea para tratarlo en otro video :)

[@alextinyverse]

@@emiliusvgs okay, gracias

[@Yosep-tu4hf]

@@emiliusvgs Yo tengo la misma duda y creo que no has sacado ese video, estuve investigando pero hasta ahora no he encontrado nada :/

[@ADORIANYT]

Hola supiste como se puede hacer?

[@SergioEscobarLondoño]

Al ejecutar la web se queda en la pantalla de carga "Loading, please wait...", Conoces alguna solución?

[@emiliusvgs]

hola! quizá falta el modelo 3D o algún bug respecto al código en sí. Podrías probar poco a poco el código para saber que falta corregir

[@Raikishadows]

Buen video ese tema es interesante para reproducir un video, solo se debe cambiar la etiqueta de la esfera y poner la etiqueta de video?

[@emiliusvgs]

hola! sí el tema va por ese camino. Revisa igual todos los detalles

[@danielasilva2469]

Me encanta tu video!! Quisiera saber cuál es la etiqueta correcta para insertar un video

[@emiliusvgs]

Hola! hay diferentes formas pero básicamente el código estaría relacionado a A-Frame. Sería cuestión que investigues el proceso

[@luisantoniogonzalestorres336]

como se prueba esto, dodne se pone el url?

[@emiliusvgs]

hola! cuando se genera la experiencia en WebAR, la misma plataforma te brinda una URL para que pueda ser compartible

[@luisantoniogonzalestorres336]

donde se ponia el link

[@emiliusvgs]

Hola! al crear tu primer proyecto web tendrás un código html que tendrás que subir a tu propio servidor. Al hacer eso debes generar también una URL. Esa url la puedes transformar en un código QR para compartir

[@sincelejo2.0]

Tengo problemas, no me detecta la imagen o no me sale la esfera :c

[@emiliusvgs]

Hola! Prueba imágenes de alto contraste

[@sincelejo2.0]

@@emiliusvgs tenía problemas con el código, ya me funciona. Donde puedo conseguir un tutorial para poder interactuar con el AR ya que vi un ejemplo final en la página de mind AR donde se podía pasar las imágenes y dirigirme a otros lugares probando el mismo render

[@jotgeluyz]

Que tal muchas gracias por ayudarme en un proyecto, en esta ocasión ya tengo todo pero me deja el circulo cargando y no hace nada que problema podrá ser? Saludos

[@emiliusvgs]

Hola! revisa el tema de seguridad de tu página web y si el navegador soporta esta tecnología

[@josemanaure1789]

@@emiliusvgs hola amigo me pasa lo mismo se queda cargando entro a seguridad y sigue igual cambien de navegador solo sale cargando y no refleja nada

[@omaremmanuelmedrano8635]

EMILIUS estoy por desarrollar un proyecto de cartas de menu de restaurant interactivas , escaneadas con polycam, y leerla por medio de codigo qr, cual de tus videos, es el que debo ver para poder orientarme a realizar este proyecto ? y cual es la tecnologia indicada para iniciar este proyecto sin recurso economico ?

[@emiliusvgs]

Hola posiblemente te sirva mucho Mind AR, tendrás que desarrollar tu experiencia para lograr el resultado deseado

[@d-gart]

Podrías hacer un nuevo tutorial? En este momento ese código no me está reconociendo la cámara, a pesar de que uso los ejemplos de los tutoriales.

[@emiliusvgs]

hola! justo lo acabo de probar ayer y todo funcionó. Qué mensaje de error o información te indica?

[@d-gart]

no me funciono, a pesar de que segui los pasos, ahora, logre que me funcionara la camara pero los marcadores personalizados no me quieren leer, solo me lee el marcador hiro, aunque no este en la programación, es raro pero me pasa

[@VeneDrummer]

estoy tratando de subirlo a mi pagina propia en hostinger. sabras pq mew dice Couldn't find the requested file /dist/mindar-image.prod.js in hiukim/mind-ar-js. cuando abro la pag?

[@emiliusvgs]

hola! al parecer te falta ese archivo ...de mind-ar.js. Lo ideal es usar links que apunten hacia la librería alojada en github o servicio online o en todo caso alojarlo en tu mismo hostinger

[@VeneDrummer]

@@emiliusvgs chido gracias. note que en el tutorial de su pagina tienen un link diferente a sus libraries

[@ai2025rules]

copie exactamanente y no funciona :(

[@ai2025rules]

creo que mi problema era que el glft era muy pequeño el tamaño, fisico d la animacion, la edite en blender y va mejor, que odio las texturas, que dificil emparejarlas gracias por estos videos, estoy aprendiendo muchisimo

[@emiliusvgs]

qué bueno que funcionó!

[@elamigobilustracionesanima7676]

Muy buenos tus tutoriales como siempre, una consulta tengo un modelo que he creado en Blender y lo he exportado a GLTF, pero no consigo que se muestre en la experiencia. Haber si me puedes ayudar. Un saludo.

[@elamigobilustracionesanima7676]

Ya que nadie me ha respondido , me respondo a mi mismo, el objeto se mostraba en la experiencia, pero era tan pequeño que no se mostraba. En las propiedades del objeto le cambie la escala: scale="0.1 0.1 0.1" . El objeto esta en formato .glb

[@emiliusvgs]

hola! trato de responder lo más rápido que pueda, pero qué bueno que te haya funcionado! éxitos en tu proyecto

[@omarmendoza5972]

Muy buen video como todos los que realizas, tengo un par de dudas, la primera es si solo funciona para Android?? porque según tengo entendido para iOS se usan archivos USDZ, pero no escuche que los mencionaras en el video y segundo y saliendo un poco de este tema en si pero si retomando lo de iOS, estoy empezando a modelar en Blender, pero si puedo generar archivos en GLB pero no en USDZ, conoces algún método donde pueda convertir los archivos? Probé con unos convertidores pero siempre resulta como un archivo dañado o sin texturas, espero recibir tu ayuda y a fin de mes creo que me vuelvo Supporter para que sigas creando contenido, gracias.

[@emiliusvgs]

Hola! en mi próximo video abordaré eso. Creo que no debería haber mayor problema. Lo que comentas le pasaba mucho a Model viewer. Ellos también actualizaron

[@omarmendoza5972]

@@emiliusvgs quedó a la espera de tu próximo video entonces, muchas gracias.

[@manuelvarelarubio3295]

Genial el video. A mí no se me conecta la cámara 100%, por lo que no puede rastrear el marcador. ¿Alguien sabe porqué ocurre eso?.

[@emiliusvgs]

hola! te aparece algún mensaje ? es raro que ocurra eso

[@MOVIMIENTOARTYCO]

Hola, Geniales tus videos! muy claros y bien explicados, Gracias. y ¿se podria hacer que con un solo marcador nos diera varias opciones respecto a que objeto mostrar? Gracias

[@emiliusvgs]

Hola! Sí claro, es posible hacer lo que comentas

[@MOVIMIENTOARTYCO]

@@emiliusvgs Gracias, y alguna orientación de como podría ser? o mejor un tutorial? Gracias

[@pabloflorest]

Hola Emilio, ya lo he hecho paso a paso como lo haces tú, solo tengo una consulta en teléfonos como Samsung al momento de habilitar la cámara aparece con el máximo de Zoom y no enfoca el marcador, podrías explicar como solucionar eso?

[@emiliusvgs]

hola! qué raro. Ese zoom no debe pasar. Prueba otro navegador para validar eso y luego genera un feedback en la plataforma MindAR

[@pabloflorest]

@@emiliusvgs gracias, probaré en otro navegador

[@jeffersondefaria]

Alguém está com problema para abrir ele o site no celular ?

[@emiliusvgs]

Hi! What kind of problem do you have?

[@paullaurent127]

Can WE play a video in ar with mindar qnd how ? Can WE use ? Good work, i follow your tutorial even if i dont speak spanish, keep going ;)

[@emiliusvgs]

Hi! you can use english captions :) about your question, its possible add a video, you need to use aframe script

[@DanielZuluagaGomez]

podrias hacer un tutorial de como hacerlo mas interactivo, con eventos de clicks para reproducir animaciones y eso

[@emiliusvgs]

hola! claro que sí. Estoy por lanzar más contenido sobre WebAR. Hoy justo lancé otro kzbin.info/www/bejne/qWTIg2WhZ7eYmrc

[@axwelllllll]

merci le s

[@emiliusvgs]

Thanks!

[@ah6403]

muy buen video pero vas demasiado rápido

[@emiliusvgs]

Hola! lo tomaré en cuenta. Trato que el video sea dinámico para que las personas puedan entender la lógica general, pero luego puedes parar o bajar la velocidad

[@luisantoniogonzalestorres336]

donde meto el url

[@emiliusvgs]

acabo de responder :D