Explorando AR Try-On con React Native

Estoy muy emocionado de estar aquí hoy y voy a hablar sobre la exploración de AR Tryon con React Native. Así que aquí está la diapositiva de introducción.

Hola, mi nombre es Kadi. Como dijo Yanni, entre sus amables palabras, actualmente soy el jefe de desarrollo móvil en Formidable. He sido ingeniero durante unos diez años, pero durante los últimos cinco años desde 2017, he estado construyendo cosas en React Native. He tenido la gran fortuna de poder trabajar en proyectos realmente emocionantes en React Native y estoy muy emocionado de compartir uno de ellos con ustedes hoy.

Entonces, en esta charla, habrá dos partes. Primero, hablaremos en general sobre lo que está sucediendo en el espacio de AR y VR, y en la segunda parte, repasaremos un estudio de caso de cómo implementamos una función de prueba virtual en una aplicación de React Native.

Para comenzar, ¿qué está sucediendo actualmente en el espacio de AR y VR? Haré una rápida aclaración sobre la diferencia entre AR y VR, porque tendemos a usar esos términos juntos. VR significa realidad virtual y es una experiencia completamente simulada, por lo que puede parecerse al mundo real o puede ser completamente diferente. La característica distintiva de una experiencia de VR es que necesitarás usar algún tipo de auriculares de VR, como Oculus, Google Cardboard o Index VR, pero el punto es que necesitas usar algo para tener esta experiencia inmersiva, y un ejemplo de eso es, por ejemplo, Beatsaber que verás en la pantalla.

AR significa realidad aumentada y es un proceso en el que el mundo real se mejora con gráficos asistidos por computadora. Por lo general, para una experiencia de AR, estarás mirando a través de una pantalla, puede ser la pantalla de tu teléfono, puede ser la pantalla de tu computadora portátil que tiene una cámara que está grabando el mundo real, y luego tu dispositivo agregará algunas mejoras asistidas por computadora. Por ejemplo, podrías usarlo para colocar muebles en tu espacio. Si has seguido las noticias recientemente, es posible que hayas visto que la semana pasada hubo una noticia que circulaba que Amazon ha lanzado una experiencia de prueba virtual de zapatos con AR en su aplicación de iOS. Esto en sí mismo no es particularmente innovador. Amazon está lejos de ser la primera empresa, y no será la última, en lanzar algo así. Pero la razón por la que encontré que era significativo es que nos habla de una tendencia que está sucediendo cada vez más. En el comercio electrónico, AR dejará de ser un truco. Ya no será algo genial que quizás el 5% de las personas usaría. Cada vez más, se está convirtiendo en una parte esperada de nuestra experiencia de compra. Solo para darte un par de ejemplos de cómo he usado AR en mi experiencia de compra. Estas fueron un par de cosas que usé antes de saber que iba a dar esta charla. Bailey Nelson es una empresa que vende gafas. Me gustan mucho sus gafas. En su sitio web, tienen una función de prueba de AR donde puedes probarte las gafas antes de comprarlas. Otra cosa, Gucci tiene una aplicación que es solo para funciones de experiencia. Tienen varias características de AR. Tienen una prueba de zapatos. Tienen una prueba de maquillaje y en este ejemplo, también puedes probar diferentes esmaltes de uñas.

Recientemente me mudé de casa. Bueno, digo recientemente. Fue a principios de año. Y fue la primera vez que me mudé a una casa completamente sin amueblar. Fue la primera vez que me mudé, perdón, puedo escuchar un eco. Fue la primera vez que me mudé a una casa completamente sin amueblar, así que tuve que amueblarla desde cero. Y aquí estaba yo tratando de descubrir cómo colocar un sofá en mi sala de estar con una forma muy extraña. Como puedes ver, ese sofá de esquina era un deseo, pero al final terminé eligiendo una versión más pequeña de esto, um, el sofá de dos plazas.

Ahora te estarás preguntando, ¿cómo hago esto en React Native? Bueno, con todo en React Native, vamos a empezar por mirar las plataformas subyacentes. Tanto iOS como Android proporcionan una plataforma de AR. En iOS se llama ARKit. Fue lanzado en 2017 y está disponible desde iOS 11 en adelante. En Android, para no quedarse atrás, lanzó el equivalente en la plataforma de Android, llamado ARCore, que fue lanzado en 2018 y es compatible con Android 7 en adelante. Como siempre con React Native, alguien en algún lugar ha escrito el puente de React Native para las bibliotecas nativas, y en este caso se llama Duvero, que básicamente construye el puente de React Native para ARKit y ARCore. Es una biblioteca de código abierto. Creo que ahora la han trasladado al espacio de la comunidad. No la están manteniendo activamente. Pero si solo quieres probar AR en React Native sin tener que escribir código nativo por ti mismo, este sería un buen lugar para empezar.

Ahora, veamos cómo implementamos realmente una experiencia de prueba virtual en una aplicación React Native en el mundo real. Como siempre, comencemos con los requisitos. Entonces, lo que nuestro cliente necesitaba era una experiencia de prueba de zapatos de realidad aumentada. Estamos en el espacio del comercio electrónico. Estamos vendiendo zapatos, entre otras cosas, y en nuestra página de detalles del producto, queremos que los usuarios puedan probar los zapatos antes de comprarlos y, con suerte, mejorar la conversión. Querían que esto fuera parte de la aplicación principal de compras. Algunas empresas han decidido tener una aplicación separada específicamente para funciones de experiencia, como gucci es un ejemplo de eso, pero para este cliente, querían que fuera parte de la aplicación que todos los usuarios tendrán, independientemente de si realmente usan la función de AR. También querían que esto fuera una interfaz de usuario personalizada, por lo que el diseño de la interfaz de usuario se realizó mucho antes de que incluso encontráramos un proveedor o construyéramos cualquier código. Y en cuanto a los recursos, teníamos en el orden de semanas en lugar de meses o años para construir esto, lo que significa que es poco probable que podamos comenzar completamente desde cero. Entonces, en base a estos requisitos, encontramos la solución que funcionará para nosotros.

Debido a que es parte de la aplicación principal de compras, el tamaño del paquete y el nivel de API son importantes, por lo que no podemos agregar nada que agregue cientos de megabytes de espacio porque cada usuario tendrá que descargar esta aplicación independientemente de si usan la función. Además, con el nivel de API, debemos asegurarnos de que nuestro nivel de API mínimo sea lo más bajo posible, nuevamente, para asegurarnos de que la mayor cantidad de usuarios pueda instalar esta aplicación.

Y finalmente, debido a que tenemos semanas y no meses para construirlo, nuestra única opción real es utilizar una solución lista para usar para la plataforma nativa e integrar la integración de React Native con ella. Y solo como una nota al margen en este punto, para llevar realmente tu ingeniería de React Native al siguiente nivel, te recomiendo mucho que comiences a aprender código nativo. Entonces, si eres alguien que viene de la web, como yo, es posible que encuentres y tu primera experiencia con el desarrollo de iOS fue un poco de Objective C, lo siento. Sí. Un poco de Objective C. Puede resultarte aterrador, ¿qué son todos estos corchetes? En iOS, puedes usar Swift. Y en Android, puedes usar Kotlin. Y ambos lenguajes son mucho más livianos. Son mucho más funcionales y mucho más fáciles de entender para un desarrollador de JavaScript. Y una vez que te familiarices más con la plataforma nativa y los lenguajes nativos, realmente mejorará la cantidad de funciones que puedes agregar a tu aplicación React Native porque se abre la puerta para poder instalar SDK exclusivos de nativos y escribir tus propias conexiones cómodamente.

Para nuestro AR Trion, analizamos dos empresas diferentes. La primera empresa que utilizamos se llama Wanna. Es una empresa especializada en Trion virtual. Tienen un SDK donde han implementado una experiencia de Trion virtual para zapatos. Puedes usar su SDK para construir tu propia integración. Puedes probar esto por ti mismo. Esta es su aplicación de ejemplo, que está disponible en las tiendas de iOS y Android. Esta es una aplicación que utiliza su propio SDK y puedes ver cómo sería la experiencia de Trion. Desde el punto de vista de la implementación, nos pusimos en contacto con ellos. Nos enviaron un SDK de demostración para que pudiéramos ver cómo integrarlo y cómo se vería en nuestra aplicación. Aquí tienes algunas capturas de pantalla cuando construimos la integración. Obviamente, esto fue una prueba de concepto. La interfaz de usuario no es nada destacable. Pero en general, la API en sí era bastante sencilla. No tuvimos que escribir una gran cantidad de código nativo para construir la integración. Era completamente personalizable, por lo que pudimos renderizar el video de Trion virtual y hacer todo lo demás en JavaScript. Lo que fue un obstáculo para nosotros es que tenía niveles de API mínimos bastante altos en comparación con lo que estábamos buscando. Requiere Android API 26, mientras que nosotros estábamos en 24, y requiere iOS 13, mientras que nosotros estábamos en 11. Esto es un compromiso para algunos clientes, para algunos casos de uso. No importa. Y puedes apuntar a APIs más altas. Pero en nuestro caso, nuestro cliente era bastante sensible para asegurarse de que nadie se quedara fuera debido a sus niveles de API más antiguos. No queríamos actualizar.

¿Sabías que Snap, la empresa que desarrolla Snapchat, tiene un portal para desarrolladores? Y puedes utilizar mucha de su tecnología AR en tu propia aplicación. Puedes visitar developers.snap.com. En realidad, hacen más que solo la prueba virtual de AR. Pero el punto es que proporcionan un par de bibliotecas, especialmente una biblioteca llamada CameraKit, que es básicamente el SDK que impulsa Snap en sí mismo. Por lo tanto, hace mucho más que solo la prueba virtual de zapatos. Hace maquillaje, hace ropa, hace cámara frontal, cámara trasera, todo lo que ves en Snap. Por lo tanto, es muy, muy potente. Y bajo ciertas circunstancias, puedes usarlo en tu propia aplicación. Y algo nuevo que se ha construido recientemente para mejorarlo y que actualmente está en beta es la extensión de compras AR. Esto es algo que Snap proporciona. Es junto con su CameraKit. Y está específicamente diseñado para crear una experiencia integrada para AR en la página de detalles del producto de comercio electrónico. Dentro de la experiencia de compra. Y utilizando el SDK de Snap, esto es lo que obtuvimos. Así que, comenzando desde la izquierda, tenemos la página de detalles del producto con el distintivo de AR en los productos que tienen AR. Luego tenemos la página de detalles del producto con el distintivo de AR. Y finalmente, a la derecha, tenemos el módulo con la experiencia de AR real.

Me doy cuenta de que esta es una charla técnica y no les he mostrado ningún código, lo cual es básicamente un crimen, así que he agregado algo de código. No voy a mostrarles el lado nativo de las cosas, así que solo les mostraré lo que realmente importamos y usamos en el lado de JavaScript.

Entonces, en la página de listado de productos, tenemos estos distintivos de AR, y lo que necesitamos saber de los SDK, que es la fuente de verdad sobre si algo tiene una experiencia de AR, es pasar los IDs de los productos, y hace su magia y nos dice si este producto tiene o no una experiencia de AR. Y si lo tiene, mostraremos el distintivo de AR. Utilizamos el mismo método aquí en la página de detalles del producto.

Y esta es la parte interesante. Esta es la experiencia de AR real. Siendo los desarrolladores de React Native que somos, tomamos la decisión consciente de tener la mayor parte del código posible en el lado de React Native. Por lo tanto, la atribución, el nombre del producto, el botón de la cámara y el selector de variantes, todo esto se renderiza utilizando React Native. Lo único que se renderiza nativamente utilizando el SDK de Stubbs es la experiencia de la cámara real.

La forma en que hemos expuesto esto es como un componente nativo. Y la forma en que funciona en el fondo es que analizamos el ID del producto en este componente nativo. Luego, utilizando este SDK de Stubbs, obtenemos los productos. Esto es del kit de tienda. Obtenemos los productos para esa variante. Luego llamamos al callback de productos cargados, que luego poblará los productos debajo de la pantalla. Luego, lo que hace el SDK es obtener los Lens para el producto seleccionado. Un Lens es una terminología de Snap, pero básicamente es la experiencia de realidad virtual con algo adentro. En este caso, el par de zapatos. Y cuando se obtiene el Lens, llamamos al callback de Lens cargado, que nos dirá que es hora de detener el spinner de carga y que el usuario está listo para continuar.

Y veamos esta experiencia de extremo a extremo. Aquí estoy en una página de detalles del producto. Voy a desplazarme hacia abajo para lanzar AR. En este caso, es la primera vez que lo lanzamos, así que tenemos que decir que sí a la cámara, aceptar los términos, que definitivamente hemos leído. Aquí también podemos ver el modelo 3D del zapato, que está integrado en el Lens, lo cual es bastante genial. Puedes cambiar los colores y ver cómo se ve desde ambos lados como si lo estuvieras sosteniendo. Y luego, si cambias a la experiencia de AR, obviamente puedes mirar hacia abajo y ver los zapatos en tus pies, en los pies de tus amigos. También puedes combinar y mezclar y mostrar uno en tu pie, uno en el pie de tu amigo. Eso también funciona. Y finalmente, puedes tomar una foto y compartirla con tus amigos.

Entonces, en resumen, el Snap SDK, diré que tuvimos que escribir una cantidad considerable de código nativo. Así que la diapositiva anterior que escribí sobre abrazar el código nativo, estaba allí por una razón. Definitivamente tuve que abrazar el código nativo para este proyecto. Pero por otro lado, nos proporcionaron una aplicación de ejemplo completamente funcional. Obviamente, la interfaz de usuario no se parecía en nada a nosotros. Tuvimos que cambiar muchas cosas y construirla desde cero, pero fue de gran ayuda para comenzar. Por otro lado, fue una experiencia muy, muy fluida. Se puede decir que este es un SDK que impulsa una aplicación realmente potente, la propia aplicación de Snapchat. Han tenido muchos ingenieros y años y años de práctica para hacerlo lo más fluido y agradable posible. Así que fue una experiencia final muy agradable con un esfuerzo mínimo de nuestra parte. Y muy importante para nosotros, funciona desde Android API 24 e iOS 11 en adelante.

Entonces, en resumen, en esta charla, las tres cosas principales de las que hablé fueron Viro, que es un puente de React para IA. Si solo quieres probar la realidad virtual y React Native, definitivamente deberías probarlo. Y luego, para la prueba virtual de productos en particular, hablamos sobre Wana y hablamos sobre Snap para desarrolladores. Así que si estás interesado en cualquiera de estas cosas, definitivamente deberías echarles un vistazo. Y un reconocimiento especial a Formidable, la empresa para la que trabajo, gracias a quienes estoy aquí, son increíbles. Hacemos mucho código abierto. Visítanos en formidable.com. Muchas gracias. Muchas gracias.

Oh, hola. Muchas gracias, Kati. Ahora vamos a hacer una breve sesión de preguntas y respuestas. Estamos un poco retrasados, así que lo haremos en unos minutos. Y luego, si tienes más preguntas para Kati, puedes encontrarla en el stand de preguntas y respuestas de los ponentes después. Entonces, la primera pregunta de la audiencia es, ¿cómo obtuviste el modelo 3D de los zapatos que estás vendiendo? Esa es una excelente pregunta. En realidad, hay otra empresa llamada Vertebrae con la que trabajamos, y ellos son los que realmente, bueno, les envían los zapatos. Ellos toman el modelo 3D del zapato y luego trabajan con Snap para integrarlo. ¿Entonces cualquier persona puede ir y obtener sus zapatos modelados, o es como un tipo de acuerdo empresarial? Creo que este en particular es un tipo de acuerdo empresarial, pero estoy seguro de que también hay formas de hacerlo como persona individual.

Creo que la forma más sencilla de hacerlo sería crear un modelo 3D en algún tipo de software de modelado 3D y utilizar eso en lugar del zapato real. Eso es genial. Y por cierto, creo que tenemos una charla sobre eso. Sarah está hablando sobre el modelado en Blender más adelante, así que podría ser un buen momento.

Perfecto. Tengo una pregunta para ti. Esto no es de Slido, pero te dieron un resumen para hacer esto en unas pocas semanas o dentro del plazo de semanas. Eso suena aterrador y difícil. ¿Cómo resultó al final? Creo que siempre hay, creo que cuando la gente intenta resolver las cosas en función de los plazos que tenemos. Creo que si nos hubieran dicho que teníamos dos años para construir esto, probablemente habríamos comenzado desde un nivel mucho más bajo y habríamos dicho, sí, vamos a construir nuestra propia solución de AR personalizada. Pero sabiendo que teníamos un par de semanas, esa opción se descartó de inmediato. Necesitábamos encontrar el mejor SDK, la mejor herramienta para este trabajo.

Genial. Gracias. Ahora, si tienes más preguntas para Catty, eso es todo lo que tenemos en Slido. Así que no dudes en ir y hablar con Catty en el stand de preguntas y respuestas de los ponentes. Pasaremos a nuestra próxima charla. Muchas gracias, Catty. ¡Gracias! Una más para Catty Kramer.