Introducción a Amazon Sumerian - Amazon Sumerian

Introducción a Amazon Sumerian

Para comenzar a utilizar Amazon Sumerian, cree una escena con los activos de la biblioteca de Sumerian. En menos de una hora, puede crear una escena con efectos, animación y compatibilidad con cascos de realidad virtual (RV). En este tutorial también se muestra el uso básico del scripting con el componente de voz, que utiliza Amazon Polly para representar texto en audio.

Requisitos previos

Para poder utilizar el editor de Sumerian, necesita permiso para utilizar las API de Sumerian en su usuario de IAM. Además, la escena en sí necesita permiso para llamar a Amazon Polly. Debe proporcionar este permiso creando un rol y un grupo de identidades de Amazon Cognito. Siga las instrucciones en Permisos de Amazon Sumerian para configurar ambos.

Puede utilizar el editor en las versiones recientes de Chrome o Firefox. Para ver la escena acabada en RV, utilice la versión más reciente de Firefox. Para el modo de RV, también necesitará un casco compatible.

Hardware compatible

  • Oculus Rift

  • HTC Vive

Crear un proyecto y una escena

Cree un proyecto y una escena. El proyecto puede contener varias escenas, así como paquetes de activos y plantillas creados a partir de dichas escenas.

Para crear un proyecto y una escena

  1. Abra el panel de Sumerian.

  2. Elija Projects (Proyectos), New project (Nuevo proyecto).

  3. Escriba tutorials (tutoriales) para el nombre del proyecto y, a continuación, seleccione Create (Crear).

  4. Elija Create new scene (Crear nueva escena).

  5. Escriba seesaw (balancín) para el nombre de la escena y, a continuación, seleccione Create (Crear).

Configurar la escena

Un skybox es una textura o conjunto de texturas que envuelve la escena para proporcionar una imagen de fondo. Añada un skybox desde la biblioteca Asset (Activos) de Sumerian

Para importar un skybox desde la biblioteca de Sumerian

  1. En la parte superior de la página, elija Import assets (Importar activos).

  2. Elija Blue skysphere (Skysphere azul). Si no la encuentra inmediatamente, haga clic en el icono del skybox para filtrar la lista.

  3. Elija Add (Añadir).

De esta forma se añade el paquete de activos del skybox al panel Asset (Activos). El paquete contiene el activo del skybox y la textura con formato PNG que utiliza el skybox. Añada el skybox a la escena en la configuración de escenas bajo Environment (Entorno). Aquí también puede aprovechar para añadir algo de niebla y nieve.

Para configurar el entorno de la escena

  1. Elija el nodo raíz (seesaw (balancín)) en el panel Entities (Entidades) o haga clic en el fondo de la escena del lienzo. Los grupos de opciones que aparecen en el panel del inspector en la parte derecha de la pantalla son opciones de configuración de escenas.

  2. Haga clic en la sección Environment (Entorno) para ampliarla. Expanda las secciones Skybox, Fog & Ambient (Niebla y ambiente) y Particles (Partículas) que incluye.

  3. Haga clic y arrastre el skybox Blue skysphere (Skyshere azul) desde el panel de activos al campo Drop skybox (Soltar skybox) en el panel del inspector para asociarlo a la escena.

  4. Elija Fog (Niebla) para habilitarla y configurar sus parámetros:

    • Fog near (Niebla cerca): 5

    • Fog far (Niebla lejos): 20

    Esto activa el fundido de entrada de niebla a 5 unidades de distancia de la cámara y oculta por completo todo lo que esté a 20 unidades de distancia o más lejos de la misma.

  5. Elija Snow (Nieve) para habilitarla y, a continuación, configure sus parámetros:

    • Velocity (Velocidad): 20

    • Rate (Tasa): 30

    • Height (Altura): 100

  6. Haga clic en el botón de reproducción en la parte inferior de la pantalla para ver cómo cae la nieve. Ajuste la velocidad y tasa de la nieve a su gusto. Los cambios en esta configuración se aplican inmediatamente durante el modo de reproducción.

Más adelante en este tutorial, configurará la escena para utilizar Amazon Polly para representar texto en audio durante la reproducción. Para ello, la escena necesita credenciales para utilizar el AWS SDK for JavaScript en el navegador web. Otorgue a la escena credenciales asignándole el ID del grupo de identidades que creó en la sección de requisitos previos.

Para configurar las credenciales de AWS SDK for JavaScript

  1. Elija el nodo principal en el panel Entities (Entidades).

  2. Expanda la sección AWS configuration (Configuración de AWS) en el panel del inspector.

  3. Escriba el ID del grupo de identidades de Amazon Cognito

     La sección de configuración de AWS del panel del inspector.

Añadir y configurar entidades

Añada suelo a la escena.

Para añadir un campo nevado a la escena

  1. Seleccione Create entity (Crear entidad).

  2. Bajo 3D primitives (Primitivas en 3D), utilice el cuadrilátero  El icono del cuadrilátero. .

    El cuadrilátero se selecciona automáticamente. Si selecciona otra cosa, puede hacer clic en el lienzo o en el panel de entidades para seleccionarlo de nuevo.

  3. Los componentes del cuadrilátero aparecen en el panel del inspector en la parte derecha del lienzo. Expanda la sección superior y cambie el nombre de la entidad a ground (suelo). El cambio se refleja inmediatamente en el nombre de la sección y en el panel de entidades.

  4. Expanda la sección Transform (Transformación) e indique los siguientes valores:

    • X rotation (Rotación X): -90

    • X, Y, and Z scale (Escala X, Y y Z): 100

    • Static (Estático): habilitado

     La sección de transformación del panel del inspector.
  5. Expanda la sección Material y revise la configuración que se muestra en cada capa. Puede hacer clic sobre los colores difusos o especulares para elegir otro color o soltar archivos de imágenes para añadir texturas.

El espacio cerca de la cámara en este momento es muy oscuro. Añada una luz direccional para iluminar la escena, como si brillara el sol.

Para añadir una luz direccional

  1. Seleccione Create entity (Crear entidad).

  2. En Lights (Luces), elija Directional (Direccionales).

  3. Expanda la sección Transform (Transformación) e indique los siguientes valores:

    • Y translation (Traslación Y): 10

    • X rotation (Rotación X): -30

    • Y rotation (Rotación Y): -60

    • Static (Estático): habilitado

  4. Expanda la sección Light (Luz) y habilite Shadows (Sombras).

Añada una entidad en blanco para representar el balancín y formas para el fulcro y la tabla.

Para añadir el balancín

  1. Seleccione Create entity (Crear entidad).

  2. En Others (Otros), elija Entity (Entidad).

  3. En el panel del inspector, cambie el nombre de la entidad por seesaw (balancín).

  4. Seleccione Create entity (Crear entidad) y, a continuación, añada un cilindro a la escena.

  5. Cambie el nombre del cilindro por fulcrum (fulcro), desmarque Uniform scale (Escala uniforme) y establezca la escala Z en 0.6. Establezca el color difuso en amarillo.

  6. Añada una entidad en blanco. Cambie el nombre por plank (tablón). Esta entidad en blanco servirá como el elemento principal del modelo de tablón, así como una cámara y entidad anfitrión que se moverá con el tablón.

  7. Añada una entidad de cuadro. Cambie el nombre por plank model (modelo de tablón). Aplique la siguiente transformación y establezca el color difuso en azul:

    • Y translation (Traslación Y): .5

    • Z rotation (Rotación Z): 12

    • X scale (Escala X): 4.5

    • Y scale (Escala Y): 0.1

    • Z scale (Escala Z): 0.6

    • Static (Estático): deshabilitado

A continuación, importe un anfitrión desde la biblioteca de Sumerian. Los anfitriones son modelos de personajes proporcionados por Sumerian con animación integrada y compatibles con voz.

Para añadir un anfitrión

  1. Elija Import assets (Importar activos).

  2. Elija Cristine, Luke o Preston. A continuación, elija Add.

     Anfitriones de Sumerian.
  3. Cuando el paquete de activos termine de cargarse, arrastre la entidad del anfitrión desde el panel Asset (Activo) al lienzo.

  4. Aplique las siguientes transformaciones:

    • X translation (Traslación X): 1.95

    • Y translation (Traslación Y): 0.97

    • Z rotation (Rotación Z): 12

    • Y rotation (Rotación Y): -90

    • X, Y, and Z scale (Escala X, Y y Z): 1.3

    • Static (Estático): deshabilitado

Por último, utilice el panel Entities (Entidades) para organizar las entidades que ha creado en una jerarquía. Arrastre una entidad dentro de otra para que una sea la principal y la otra la secundaria.

 Jerarquía de la entidad de balancín.

Añadir comportamiento

Puede añadir comportamiento a su escena adjuntando script o componentes de máquina de estado a las entidades.

Una máquina de estado le permite añadir comportamiento visualmente eligiendo acciones que disparan los eventos y organizándolos en estados. Añada una máquina de estado a la entidad del tablón para animarla, así como sus elementos secundarios.

Para animar el tablón con una máquina de estado.

  1. Elija el plank (tablón) en el panel Entities (Entidades).

  2. En el panel del inspector, elija Add component (Añadir componente). A continuación, seleccione State machine (Máquina de estado).

  3. Haga clic en el signo más junto al campo de comportamiento para crear un nuevo comportamiento. Asígnele el nombre animate (animar).

  4. El panel State machine (Máquina de estado) aparece con un solo estado. Asigne el nombre up (arriba) al estado y, a continuación, elija Add action (Añadir acción).

  5. En Animate (Animar), elija Tween rotate (Rotar interpolador). Aplique las siguientes propiedades:

    • Z rotation (Rotación Z): -24

    • Relative (Relativo): deshabilitado

    • Time (Tiempo): 1000

    • Easing type (Tipo de expansión): Linear (Lineal)

    • Direction (Dirección): In (En)

  6. Seleccione Add action (Añadir acción) de nuevo y, a continuación, agregue una acción Wait (Esperar). Aplique las siguientes propiedades:

    • Time (Tiempo): 2000

    • Random (Aleatorio): 0

  7. En el panel State machine (Máquina de estado), elija Duplicate state (Duplicar estado) para hacer una copia de up (arriba). Haga doble clic en el nuevo estado para abrirlo en el panel del inspector.

  8. Cambie el nombre del estado a down (abajo) y, a continuación, cambie el valor de rotación de 24 a 0.

  9. En el panel State machine (Máquina de estado), cada estado muestra dos evento: uno que se produce al final de la animación y otro que se produce al final de la acción de espera. Haga clic en el evento On wait end (Al finalizar la espera) bajo up (arriba) y arrastre una línea al estado down (abajo). A continuación, haga lo mismo en la otra dirección.

     Conectar acciones de máquina de estado.
  10. Reproduzca la escena para observar la animación del balancín.

Añada una cámara en el otro extremo del balancín y haga que sea la cámara predeterminada. Durante la reproducción, el usuario permanecerá en una ubicación y verá el entorno. Un script de cámara integrada permite al usuario mirar con el ratón antes de entrar en modo de RV.

Para añadir una cámara con los controles de vista con el ratón

  1. Seleccione Create entity (Crear entidad) y, a continuación, añada una cámara fija a la escena. Cambie el nombre a user (usuario) y, a continuación, aplique la siguiente transformación:

    • X translation (Traslación X): -2.5

    • Y translation (Traslación Y): 1.2

    • Y rotation (Rotación Y): -90

  2. En el panel de entidades, arrastre la cámara a la entidad plank (tablón) para que se mueva con el balancín.

  3. En el componente Camera (Cámara), aplique las siguientes propiedades:

    • Main camera (Cámara principal): habilitada

    • FOV (Campo de visión): 35

  4. Elija Add component (Añadir componente) y, a continuación, añada un componente de script a la cámara.

  5. Haga clic en el signo más junto al campo de script y, a continuación, elija Mouse look control (Control de vista con el ratón). Esto agrega una instancia del script integrado de vista con el ratón. Todas las instancias de un script comparten el mismo código de script, pero tienen valores de parámetro distintos.

  6. Para evitar que el usuario mire demasiado abajo, cambie el parámetro Min ascent (Ascenso mínimo) a -40.

  7. Reproduzca la escena y confirme el comportamiento de la cámara. Haga clic y arrastre el botón izquierdo del ratón para pasar por toda la escena. Puede ajustar los parámetros del script durante la reproducción y ver de qué forma afectan a los controles de forma inmediata.

Los anfitriones incluyen un componente de voz. Para utilizarlo, tiene que añadir las credenciales de AWS a la escena, agregar archivos de texto al componente y añadir un script o componente de máquina de estado para activar la voz durante la reproducción.

En este ejemplo, va a utilizar un script para hacer algo que la máquina de estado no puede, es decir, elegir y reproducir un archivo de forma aleatoria. Si aún no ha configurado las credenciales de AWS para la escena tal y como se describe en la sección de requisitos previos, hágalo primero.

Para configurar la voz del anfitrión

  1. Elija el anfitrión en el lienzo o en el panel de entidades.

  2. En Speech (Voz), suelte algunos archivos de texto en el campo de voz. Puede utilizar los ficheros de este archivo: sonnets.zip.

  3. Elija una voz para el anfitrión. Consulte Available voices (Voces disponibles) en la Guía para desarrolladores de Amazon Polly para obtener una lista de las voces ordenadas por configuración regional.

  4. Añada un componente de script al anfitrión.

  5. Haga clic en el signo más junto al campo de script y, a continuación, elija Custom (Personalizar).

  6. Haga clic en editar (icono de lápiz) en los parámetros de la instancia del script para abrir el script en el editor de texto. También puede pulsar sobre la tecla J para abrir el editor de texto en cualquier momento.

  7. Haga doble clic en el nombre del script (Script) en la lista Documents (Documentos) para cambiar el nombre a RandomSpeech (Voz aleatoria).

  8. Sustituya el marcador de posición setup por lo siguiente.

    var setup = function(args, ctx) { sumerian.SystemBus.addListener('aws.sdkReady', () => { var speechComponent = ctx.entity.getComponent("speechComponent"); var speeches = speechComponent.speeches; var speech = speeches[Math.floor(Math.random() * speeches.length)]; speech.play(); }, true ); };

    Este script espera a que AWS SDK for JavaScript cargue y recupere las credenciales. A continuación, obtiene una referencia al componente de voz en la misma entidad (el anfitrión) y una lista de todas las voces adjuntas. A continuación, elige una voz de la matriz y la reproduce.

  9. Reproduzca la escena para ver cómo habla el anfitrión.

  10. Vuelva al componente de voz y, a continuación, haga clic en junto a cada archivo de voz para añadir marcado de gestos.

  11. Reproduzca la escena de nuevo para ver cómo habla y gesticula el anfitrión.

Añadir el modo de RV

Hasta ahora, solo ha utilizado una cámara estándar en el modo de reproducción. Añada una plataforma de realidad virtual (RV) para que los usuarios puedan ver la escena en 3D con un casco de RV y seguimiento de cabeza. Sumerian empaqueta las entidades y scripts necesarios para el modo de RV en un paquete de activos llamado CoreVR.

Para añadir el modo de RV

  1. Elija Import assets (Importar activos) y, a continuación, añada el paquete de activos CoreVR a la escena.

  2. Cuando el paquete de activos se haya cargado, arrastre la entidad VRCameraRig hasta el lienzo para añadirla a la escena.

  3. Elija la entidad VRCameraRig.

  4. Elija el componente VRCameraRig.

  5. Elija la opción Current VR camera rig (Plataforma de cámara de RV actual) para habilitar la plataforma.

  6. Desmarque la opción Start at current camera (Empezar con la cámara actual). Esta opción permite utilizar la plataforma de la cámara desde el lugar donde está colocada en la escena, en lugar de utilizar la ubicación de la cámara que no es de RV cuando el usuario pasa al modo de RV.

  7. En el panel de entidades, arrastre la entidad VRCameraRig hasta la entidad plank para que funcione en paralelo con la cámara del usuario.

  8. Elija la cámara del usuario. Haga clic en el icono de engranaje en la sección Transform (Transformación) y, a continuación, elija Copy (Copiar) para copiar los valores de transformación.

  9. Elija VRCameraRig. Haga clic en el icono de engranaje en la sección Transform (Transformación) y, a continuación, elija Paste (Pegar) para pegar los valores de transformación de la cámara del usuario.

  10. Utilice el controlador de transformación verde para ajustar la altura de la cámara de RV en relación con el tablón.

     Controladores de transformación en la plataforma de cámara de RV.
  11. Reproduzca la escena y, a continuación, haga clic en el icono de casco de RV para pasar al modo de RV.

Publicar y ver la escena

Es hora de compartir la escena con el mundo. Publique la escena con Amazon CloudFront para alojarla como un sitio web para que la pueda ver cualquier persona.

Para publicar y ver la escena

  1. Elija Publish (Publicar) en el menú Scene (Escena) en la parte superior izquierda de la pantalla.

  2. Elija Publish.

  3. Cuando el editor termine con la publicación de la escena, elija View (Ver).

Eliminación

Su escena será pública y permanecerá en línea hasta que anule la publicación.

Para anular la publicación de la escena

  1. Elija Publish (Publicar) en el menú Scene (Escena) en la parte superior izquierda de la pantalla.

  2. Elija Unpublish (Anular publicación).

  3. Seleccione Yes.

Puede conservar la escena y el proyecto de Sumerian para usarlos con otros tutoriales o eliminarlas. También puede restaurar los elementos eliminados desde el menú de la papelera.

Para eliminar el proyecto

  1. Abra el panel de Sumerian.

  2. Elija un proyecto.

  3. En Project details (Detalles del proyecto), elija Delete (Eliminar).

Si creó un grupo de identidades para este tutorial y no piensa utilizarlo de nuevo, elimínelo en la consola de Amazon Cognito.

Pasos siguientes

Obtenga más información sobre Sumerian en el próximo capítulo: Conceptos de Amazon Sumerian.