Skip to content
Clases
Clase 4: WebVR
28.3.2022
Introducción a Web VR con A-Frame
0-Hola mundo!
Etiquetas HTML
Ejemplo de etiqueta html.
Comentarios
1-A-Frame Boilerplate / Plantilla
La plantilla de A-Frame no tiene ningún elemento (o primitiva como ya veremos), solo nos ayuda a iniciar con las secciones principales HTML y que luego vamos a usar para agregar entidades.
Importante: Lo que no puede faltar es la línea que apunta al framework A-Frame que contiene todas las funciones y operaciones disponibles.
Primitivas
Las primitivas con las formas básicas que nos ofrece A-Frame.
Imagen de referencia de las primitivas básicas y sus etiquetas.
Vista completa de la etiqueta y atributos de la primitiva a-box.
Anexo: Sistema de Coordenadas
Detalle de la primitiva a-box y el uso de coordenadas para posición y rotación.
Anexo: Sistema hexadecimal
El sistema hexadecimal (abreviado hex.) es el sistema de numeración posicional que tiene como base el 16. Su uso actual está muy vinculado a la informática y ciencias de la computación donde las operaciones de la CPU suelen usar el byte u octeto como unidad básica de memoria.
En principio, dado que el sistema usual de numeración es de base decimal y, por ello, solo se dispone de diez dígitos, se adoptó la convención de usar las seis primeras letras del alfabeto latino para suplir los dígitos que faltan. El conjunto de símbolos es el siguiente:
S = { 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , A , B , C , D , E , F }
Se debe notar que las letras corresponden a los siguientes valores numéricos decimales:
A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15.
En ocasiones se emplean letras minúsculas en lugar de mayúsculas. Como en cualquier sistema de numeración posicional, el valor numérico de cada dígito es alterado dependiendo de su posición en la cadena de dígitos, quedando multiplicado por una cierta potencia de la base del sistema, que en este caso es 16.
Por ejemplo: 3E0A16 = 3× 16 a la 3 + E× 16 a la 2 + 0× 16 a la 1 + A× 16 a la 0 =
3×4096 + 14×256 + 0×16 + 10×1 = 15882.
There are 256 possible shades each of red, green and blue (0 through 255). If we wanted to produce white (the brightest levels of all three colors combined), we’d need to write #255255255. That’s nine digits long.
Hex codes use the hexadecimal number system to make it possible for 256 numbers to be represented with only two digits. Instead of counting 0 through 10 like our regular decimal number system, it counts 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F and then 10, followed by 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F and then 20. Make sense?
This means that 256 numbers can be represented using only two digits, instead of the 100 that are possible with our decimal number system (0 through 99). So the highest possible two digit number is not 99 but FF (equal to 255). This is why white is #FFFFFF, pure red is #FF0000, pure green #00FF00 and pure blue #0000FF.
Herramienta de prueba - Comparación RGB y Hexadecimal
Tabla de Sistemas Numéricos 2
2-Texturas
TIP: si al cargar texturas Glitch muestra un mensaje de error, exportar los archivos en formato JPEG desde cualquier software de edición de imágenes y subir.
3-Environment
Uso de imágenes 360º
Las imágenes equirectangulares deben ser en relación de aspecto 2:1 (ancho doble que el alto).
Recomendación: 4096 x 2048px
4-Audio
5- Texto, imágenes y video
TIP: al usar imágenes escribir la ruta del archivo con el modo inline.
Los videos en Oculus no se reproducen automáticamente.
Tarea para clase 5
De forma individual, crear un entorno virtual que los describa, defina y represente a ustedes.
Dentro de este espacio personal, se deberá proponer un recorrido, que nos haga transitar por distintos micro espacios (mínimo 3) que reflejen diferentes emociones o aspectos de su persona.
Para ello se deberán utilizar las distintas herramientas explicadas durante la clase.
- Objetos básicos 3D
- Texturas
- Colores
- Sonidos
- Imágenes
- Texto
En su blog personal, deberán colocar:
- Link a proyecto (https)
- Breve descripción de lo que se quiso reflejar y comentar el proceso creativo de cómo fue pensado el entorno.
- Mediante herramientas como Figma, illustrator o Photoshop, crear una imagen de planta del espacio, indicando un posible recorrido.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.