Blog de Amazon Web Services (AWS)

Entornos virtuales integrados con Amazon Sumerian

Por: Arturo Velasco, Specialist Solutions Architect Media & Entertainment y Javier Huerta, Sr. Partner Solutions Architect

 

El 2020 nos ha mostrado la importancia de contar con herramientas y servicios que nos permitan interactuar de manera virtual, de forma eficiente, segura y óptima en costos; y, sin embargo, muchas veces seguimos utilizando plataformas tradicionales, por desconocimiento de las opciones existentes.

A continuación, revisaremos como construir una solución sin servidores, en un esquema de pago por uso, el cual les permita a sus usuarios interactuar en un entorno virtual, con un anfitrión inteligente, el cual es capaz de interactuar, y compartir información con ellos.

 

 

Amazon Sumerian es un servicio administrado que permite crear y ejecutar escenas en 3D, utilizando técnicas de Realidad Aumentada (AR) y Realidad Virtual (VR), las cuales se ejecutan en tus dispositivos VR, móviles, y navegadores. Esta solución está basada en tecnologías Web, por lo que lo único que se necesita es un navegador para utilizarlo; también es compatible con dispositivos Oculus (Go y Rift) y HTC (Vive y Vive Pro).

En el siguiente tutoria,l construiremos un escenario 3D con los siguientes elementos: una habitación virtual, un anfitrión el cual te explicará el uso de la misma, una pantalla de TV en la cual podrá ver videos pregrabados, y una segunda pantalla donde su cámara web se activará para interactuar con su audiencia.

En el Back-end, se construirá una un flujo de transcodificación para subir los videos (en cualquier formato y resolución), los cuales serán procesados y adaptados a un formato de streaming para la escena.

 

 

Diagrama general de la solución.

 

La arquitectura utiliza servicios serverless, para minimizar cargas no diferenciadas, y pagar únicamente por el uso de la solución. Los elementos que estaremos utilizando en este tutorial son:

  • Cuenta de AWS
  • Webcam
  • Archivos de video, puedes ver la compatibilidad aquí

 

 

Flujo de la solución.

  1. Ingesta de la media:

a. Se suben los videos a un bucket de Amazon S3.

b. Se definen los parámetros del video en AWS Elemental MediaConvert.

c. Los parámetros del video (nombre, ancho, alto, resolución, tasa de bits y ruta) se almacenan en Amazon DynamoDB.

d. Se genera un tópico en Amazon SNS, y se envía un correo electrónico al dueño del proceso indicando el inicio de la conversión del video.

 

 

2. Procesamiento de video

a. Utilizando los parámetros del video, se selecciona el perfil de conversión (video original en 4K, 1080P, o 720P), y utilizando AWS Elemental MediaConvert, los videos se convierten en los formatos DASH, HLS, ABR, y MP4.

b. Los videos convertidos se almacenan en Amazon S3, y los metadatos en Amazon DynamoDB se actualizan.

 

 

3. Publicación

a. Dentro de Amazon DynamoDB, se almacena el URL donde puede descargarse el video desde Amazon CloudFront.

b. El archivo original del video se almacena en Amazon S3 Glacier.

 

 

4. Consumo

a. La escena de realidad virtual se descarga desde Amazon CloudFront hacia el navegador.

b. El navegador del usuario adopta un rol no autenticado con Amazon Cognito, y adquiere permisos para ejecutar Amazon Polly, Amazon Lex, etc.

c. El navegador ejecuta la escena, descarga los videos generados desde Amazon CloudFront, y los componentes requeridos para animar al anfitrión.

 

 

La implementación de esta solución consta de dos partes: el AWS Solutions Implementations Video on Demand on AWS, y el componente de Amazon Sumerian para realidad virtual.

 

Procedimiento Parte 1: Transcodificación de Videos

Para esta parte utilizaremos una solución pre-construida de AWS:

  1. Despliega la solución Video on Demand on AWS.

Una vez implementada la solución, quedará el siguiente flujo:

 

 

Nota: La solución completa y su guía de implementación se encuentran en esta liga.

Asegúrate de cuando menos subir un video al Bucket de origen de Amazon S3 para poder presentarlo en tu escena 3D, puedes utilizar el que siguiente video para la prueba.

 

Procedimiento Parte 2: Creación de la escena de Amazon Sumerian

En los siguientes pasos, se construirá la escena de realidad virtual en Amazon Sumerian, con los siguientes componentes:

El anfitrión de la escena

Amazon Sumerian cuenta con componentes llamados “Hosts”, los cuales son personajes que tienen las siguientes características:

  1. Son pre construidos – sólo es necesario seleccionar al anfitrión, e insertarlo en la escena.

2. Listos para usarse – el anfitrión cuenta con un conjunto de comportamientos pre-definidos, los cuales están disponibles sin necesidad de codificarlos. Ejemplos son:

3. Movimiento coordinado del anfitrión (gestos y expresión corporal) dependiendo de la situación.

4. Rastreo de la cámara con la mirada.

 

 

 

 

 

 

 

 

 

El cuarto virtual

El cuarto virtual es el entorno en el cual el anfitrión, y los objetos del entorno, interactuarán. Las condiciones del cuarto son:

1. Deberá incluir dos pantallas: una para desplegar video, y otra para desplegar la transmisión de video de nuestra cámara.

2. Incluirá distintos componentes en 3D del repositorio de Amazon Sumerian, como superficies, muebles y texturas.

3. Puede incluir fuentes de luz de distintos tipos, para crear un ambiente más natural.

 

 

 

 

 

 

 

 

 

 

 

Integración de los servicios

Amazon Sumerian genera escenas de realidad virtual visibles en un navegador. Así que es necesario asignar un rol de AWS Identity and Access Management a la escena, para ejecutar los servicios utilizados, a través de Amazon Cognito.

 

Para darle voz a nuestro anfitrión, usaremos Amazon Polly.

 

La escena completa puede ser descargada para su importación en Amazon Sumerian, d1ymba1n5f8i90.cloudfront.net/sumerianrest/Amazon_Sussmerian_Demo.zip.

Nota: Deberás crear los roles en Amazon IAM, y el Pool de Usuario en Amazon Cognito para la escena.

 

 

 

 

 

 

 

 

 

 

Paso 1 – Amazon Cognito

 Crear un Pool de Identidades: El Pool de Identidades nos permitirá asignar un rol específico, con permisos en particular, a la escena de Amazon Sumerian.

1. Entrar a Amazon Cognito, y seleccionar “Manage Identity Pools”. Crear un nuevo “Pool de Identidades”

 

 

2. El “Pool de Identidades” deberá permitir entidades no autenticadas. Seleccionar un nombre, y crear el Pool.

 

 

3. Se crearán 2 roles de Amazon IAM: Uno autenticado y otro no autenticado. Anotar los nombres de ambos roles ya que serán utilizados posteriormente, luego dar clic en “Allow”.

 

 

4. Se generará el Pool, y los roles.

 

 

5. En el tablero de control (Dashboard), dar clic en “Edit Identity Pool”.

 

 

6. Anotar el ARN del Identity Pool que generamos para pasos posteriores.

 

Paso 2 – Amazon IAM

 En este paso se modificarán los roles creados para brindar los permisos necesarios de acceso al servicio Amazon Polly.

Nota: Usaremos los nombres de los roles del paso anterior.

 

1. Entrar a Amazon IAM, y seleccionar “Roles”.

 

2. Editar el Rol no autenticado.

 

3. Adjuntar nuevas políticas al rol no autenticado , clic en “Attach policies”.

 

4. Buscar y seleccionar la política “AmazonPollyReadAccess”, luego clic en el botón “Attach Policy”.

 

5. Validar la política adjunta al rol.

 

Paso 3 – Amazon Sumerian – configuración de la escena

En este paso, se creará y configurará la escena de Amazon Sumerian, para permitir la interacción con los servicios de AWS.

1. Entrar a Amazon Sumerian, seleccionar un nombre, y crear una nueva escena.

 

2. Entrar al editor de Amazon Sumerian.

3. Configurar el Identity Pool de Amazon Cognito usando el ID que obtuvimos en el paso 6 de la configuración de Amazon Cognito.

 

 

Paso 4 – Amazon Sumerian – construcción de la escena

En este punto se pueden añadir cuantos componentes (elementos como muebles o detalles) se requieran a la escena.

Nota: El límite será el poder de procesamiento del equipo de cómputo en el que se construye y ejecuta la escena.

Tip: Para navegar dentro de tu escena 3D, sigue los siguientes comandos:

a. Botón izquierdo del mouse + arrastrar: Mueve la escena alrededor de la cámara.

b. Botón derecho del mouse + arrastrar: Selecciona objetos dentro de la escena.

c. Para enfocarte en un objeto: selecciónalo del panel Entities, y da clic en la letra “F” en tu teclado.

 

 

  1. Construcción de la habitación. Todos los componentes de Amazon Sumerian son entidades. Las entidades están en la parte superior de la ventana. En este paso, importaremos elementos para generar instancias de entidades. Si deseas crear entidades por su cuenta, consulte la sección referencias de este artículo. A continuación, dar clic en “Import Assets”.

 

 

  1. Se abrirá una ventana con todos los elementos que puede usar en Amazon Sumerian. Buscar en el cuadro de texto “Room”, seleccionar el objeto, y clic en “Add” para añadir el cuarto a su escena.

 

 

  1. En el apartado “Assets” se visualiza el elemento “Room”. Seleccionar el elemento “fbx”, y Arrastrarlo a la escena presionando clic izquierdo del mouse. Se debe asegurar que las coordenadas de la habitación sean 0,0,0, como se muestra en la pantalla.

 

 

  1. La habitación es creada y se deberá agregar iluminación. Dar clic en “Create Entity”.

 

 

  1. Seleccionar una fuente luminosa tipo

 

 

  1. Configurar las siguientes coordenadas, y características de la fuente de luz.
  2. La habitación debe quedar como se muestra a continuación.

 

 

  1. Se integrarán dos pantallas de TV. Una para ver tus videos y una segunda para transmitir la señal de video de la Webcam. Nuevamente ir al apartado de Assets, seleccionar Import Assets y buscar Television Hanging. Agregar dando clic en Add, y cuando esté disponible arrastrar el objeto fbx a la escena. Las coordenadas del objeto deben ser las que se muestran a continuación.

 

 

  1. Repetir el paso anterior y configurar las coordenadas por las que se muestran a continuación. El resultado serán dos pantallas de TV como se muestran en la imagen.

 

 

  1. Para poder utilizar la pantalla para el video bajo demanda (VoD), debe aplicarse un HTML3D que nos permitan mostrar la media. Dar clic en Create Entity, y seleccionar

 

 

  1. Entrar a la consola al servicio Amazon DynamoDB, abrir la tabla VideoOnDemand, buscar en los elementos el campo mp4Outputs y tomar la URL del video previamente transcodificado.

Nota: La tabla de DynamoDB fue generada en la primera parte de este tutorial.

 

 

  1. Seleccionar el objeto 1 (pantalla TV para VoD) HTML3D, introducir el valor 300 en Width, y dar clic en “Open in Editor”. Generar un iFrame con el siguiente código. Dar clic en Save.

 

 

  1. Para la pantalla de la Cámara Web, seleccionar el objeto 2 y configurar los siguientes valores.

 

 

  1. Seleccionar Add Component, y dar clic en

 

 

  1. Dar clic en “+” y seleccionar Custom (Legacy Format).

 

 

  1. Editar el script y poner el código que se muestra a continuación. Una vez editado el script, dar click en Save .

Código:

// Called when play mode starts

function setup(args, ctx) {

const material = ctx.entity.meshRendererComponent.materials[0];

new sumerian.TextureCreator().loadTextureWebCam().then( (data) => {

material.setTexture('DIFFUSE_MAP', data.texture);

ctx.mediaStream = data.stream;

}, () => {

console.error('Error loading webcam texture');

});

}

// Called when play mode stops

function cleanup(args, ctx) {

// Close the webCam media stream

if(ctx.mediaStream) {

ctx.mediaStream.getTracks()[0].stop();

} }

 

  1. En la parte inferior de la pantalla de trabajo, estarán los íconos de control de reproducción. Dar clic en el ícono de “Play” para reproducir la escena, permitir el uso de la cámara web y validar la correcta reproducción del video seleccionado en la primera pantalla y la reproducción de la cámara web en la segunda pantalla.

 

 

  1. A continuación, se insertará el anfitrión. Seleccionar Import Assets, en el cuadro de búsqueda escribir “Cristine Hoodie” y añadir el asset a la escena. En la ventana Assets, seleccionar el objeto “Cristine Hoodie” con un hexágono a la izquierda, y arrastrar a la escena. Colocar con las siguientes coordenadas.

 

 

  1. Expandir las características del host, seleccionar Point of Interest como Look at Entity, y Target Entity como Fly Cam (o la cámara que este configurada), esto hará que el anfitrión este mirando la cámara web durante la escena.

 

 

  1. El anfitrión puede comunicarse con la audiencia para interactuar con la misma. Para esta habilidad debe configurar Speech con los siguientes parámetros dentro de los parámetros de configuración del anfitrión.

 

 

  1. En Speech Files, dar clic en el signo +, y en la ventana emergente teclear el texto que desee que el anfitrión pronuncie en la escena, después clic en Save para guardas.

 

 

  1. Crear un State Machine, la cual se configurará para que en el momento en que inicie la escena, Amazon Polly y Amazon Sumerian trabajen en conjunto en la animación del anfitrión. Dar clic en el signo +.

 

 

  1. En la ventana emergente, dar clic en “Add Action”.

 

 

  1. Buscar y seleccionar Start Speech.

 

 

  1. Configurar Speech como se muestra a continuación:

 

 

  1. Configurar la cámara web selecciona el objeto en la ventana de

 

 

  1. Colocar la cámara en estas coordenadas.

 

 

Paso 5 – Amazon Sumerian – Publicación de la escena

  1. Guardar la escena (Scene / Save). En el menú del lado derecho, seleccionar

 

 

  1. Una vez publicada la escena, copia el URL de tu escena, y ejecutarla en el navegador de su preferencia (para este tutorial demo, https://f0ee3fa4c96244c0bc34c9931247bf38.us-east-1.sumerian.aws/?). Ejecuta la escena: selecciona los controles de video, observa las expresiones del anfitrión, y valida la visualización de la cámara Web.

 

 

 

Limpieza

Para eliminar los componentes instalados, elimina el stack de AWS CloudFormation que fue creado, utilizando el siguiente manual:

https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-delete-stack.html

Nota: No olvides eliminar cualquier archivo que hayas almacenado en Amazon S3.

 

 

Conclusión.

Con esta solución, aprendimos a configurar una escena de realidad virtual, completamente Serverless, utilizando servicios de AWS. Este es sólo un punto de partida, y puedes comenzar a configurar múltiples comportamientos de la escena utilizando servicios como Amazon Lex, para hacer un Chatbot con el anfitrión, o usar la máquina de estados para añadir múltiples comportamientos en la escena.

 

Como siempre, sigue construyendo, con AWS.

 

Sobre los autores

Arturo Velasco es Arquitecto de Soluciones Especialista en Media y Entretenimiento, con más de 9 años de experiencia en la industria. Su objetivo es ayudara a los clientes a comprender cómo pueden utilizar los servicios de AWS, las mejores prácticas y evangelizar las soluciones de Media y Entretenimiento en AWS.

 

 

 

Javier Huerta es Arquitecto Sr. para Partners, con más de 24 años de experiencia en la industria de TI. Actualmente labora apoyando a los Partners de AWS a alcanzar sus metas y objetivos en aspectos técnicos y de negocio, y está especializado en Media & Entertainment.