Está en la página 1de 127

Realidad Virtual y

Aumentada
Escuela Superior de Informática
Curso 20/21

Tema 1
Introducción
a la visualización
Javier A. Albusac Jiménez
JavierAlonso.Albusac@uclm.es
¿Cómo influye el modo
en el que presentamos
la información?
Y
QUE
VIVA LA
LA BUENA VIDA
El ODREN no IPMOTRA

Sgeun un etsduio de una uivenrsdiad ignlsea, no


ipmotra el odren en el que las ltears etsan ersciats, la
uicna csoa ipormtnate es que la pmrirea y la utlima
ltera esten ecsritas en la psiocion cocrrtea. El rsteo
peuden estar ttaolmntee mal y aun pordas lerelo sin
pobrleams. Etso es pquore no lemeos cada ltera por si
msima preo la paalbra es un tdoo.
El modo en el que se
presenta la información
repercute directamente en
el modo en el que se
interpreta
Pasamos

4.4 de tiempo libre con


pantallas al día

horas
Fuente: The New Multi-screen World: Understanding
Cross-platform Consumer Behavior (Google, 2012)
Incremento
a partir de
2014
España

6.5 horas
China

8 horas
Fuente: Forbes.es (2014)
«Nomophobia»
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Tabla de Contenidos
1. Introducción
2. Historia
3. Taxonomía
4. Percepción Visual
5. Visualización
6. Transformaciones
6.1. Homogéneas
6.2. Afines

Lecturas Recomendadas

• Theoharis et. al “Graphics & Visualization (Principles and Algorithms)”, Chapters 1, 3 & 4.

Shirley et. al “Fundamentals of Computer Graphics”, Chapters 1, 6 ,7, 22, 27.

Ware C. “Information Visualization: Perception for Design (2nd Ed)”, Chapters 1, 7 & 8.

Healey C. G. “Attention and Visual Memory in Visualization and Computer Graphics”

Javier Alonso Albusac Jiménez [Trp 17]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Introducción
Visualizar (Definción RAE)
2. tr. Representar mediante imágenes ópticas
fenómenos de otro carácter; p. ej., el curso de
la fiebre o los cambios de condiciones
meteorológicas mediante gráficas, los cambios
de corriente eléctrica o las oscilaciones
sonoras con el oscilógrafo, etc.
3. tr. Formar en la mente una imagen visual de un
concepto abstracto.
5. tr. Inform. Hacer visible una imagen en un
monitor.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 18]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Visualización dela Información


«Encontrar la memoria artificial que mejor apoye
nuestros mecanismos naturales de percepción»
Bertin 1983
«Transformación de lo simbólico en geométrico»
McCormick et al. 1987
«El despliegue de información utilizando
representaciones espaciales o gráficas, para facilitar la
comparación, el reconocimiento de patrones, detección
de cambios y otras capacidades cognitivas utilizando el
sistema visual»
Hearst 2003

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 19]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Epidemia
Cólera
Londres.
John Snow
1854

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 20]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Epidemia
Cólera
Londres.
John Snow
1854

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 21]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Epidemia
Cólera
Londres.
John Snow
1854

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 22]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ejemplo Extraído de “Information


Visualization” por John Stasko

Datos 1 Datos 2 Datos 3 Datos 4


10.0, 8.04 10.0,9.14 10.0, 7.46 8.0, 6.58
8.0, 6.95 8.0,8.14 8.0, 6.77 8.0, 5.76
13.0, 7.58 13.0,8.74 13.0,12.74 8.0, 7.71
9.0, 8.81 9.0,8.77 9.0, 7.11 8.0, 8.84
11.0, 8.33 11.0,9.26 11.0, 7.81 8.0, 8.47
14.0, 9.96 14.0,8.10 14.0, 8.84 8.0, 7.04
6.0, 7.24 6.0,6.13 6.0, 6.08 8.0, 5.25
4.0, 4.26 4.0,3.10 4.0, 5.39 19.0,12.50
12.0,10.84 12.0,9.13 12.0, 8.15 8.0, 5.56
7.0, 4.82 7.0,7.26 7.0, 6.42 8.0, 7.91
5.0, 5.68 5.0,4.74 5.0, 5.73 8.0, 6.89

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 23]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ejemplo Extraído de “Information


Visualization” por John Stasko

Datos 1 Datos 2 Datos 3 Datos 4


10.0, 8.04 10.0,9.14 10.0, 7.46 8.0, 6.58
8.0, 6.95 8.0,8.14 8.0, 6.77 8.0, 5.76
13.0, 7.58 13.0,8.74 13.0,12.74 8.0, 7.71
9.0, 8.81 9.0,8.77 9.0, 7.11 8.0, 8.84
11.0, 8.33 11.0,9.26 11.0, 7.81 8.0, 8.47
14.0, 9.96 14.0,8.10 14.0, 8.84 8.0, 7.04
6.0, 7.24 6.0,6.13 6.0, 6.08 8.0, 5.25
4.0, 4.26 4.0,3.10 4.0, 5.39 19.0,12.50
12.0,10.84 12.0,9.13 12.0, 8.15 8.0, 5.56
7.0, 4.82 7.0,7.26 7.0, 6.42 8.0, 7.91
5.0, 5.68 5.0,4.74 5.0, 5.73 8.0, 6.89

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 24]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ejemplo Extraído de “Information


Visualization” por John Stasko

Datos 1 Datos 2 Datos 3 Datos 4


10.0, 8.04 10.0,9.14 10.0, 7.46 8.0, 6.58
8.0, 6.95 8.0,8.14 8.0, 6.77 8.0, 5.76
13.0, 7.58 13.0,8.74 13.0,12.74 8.0, 7.71
9.0, 8.81 9.0,8.77 9.0, 7.11 8.0, 8.84
11.0, 8.33 11.0,9.26 11.0, 7.81 8.0, 8.47
14.0, 9.96 14.0,8.10 14.0, 8.84 8.0, 7.04
6.0, 7.24 6.0,6.13 6.0, 6.08 8.0, 5.25
4.0, 4.26 4.0,3.10 4.0, 5.39 19.0,12.50
12.0,10.84 12.0,9.13 12.0, 8.15 8.0, 5.56
7.0, 4.82 7.0,7.26 7.0, 6.42 8.0, 7.91
5.0, 5.68 5.0,4.74 5.0, 5.73 8.0, 6.89

Características ●
Comprender grandes cantidades de datos.
de la ●
Percibir propiedades emergentes de los datos.
Visualización ●
Identificación de errores en las muestras.

Facilita la formación de hipótesis.
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 25]
Sociedad
Infoxificada

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 26]


Sociedad
Infoxificada
Cada minuto...

Se crean más
de 481 mil
Tweets
nuevos

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 27]


Sociedad
Infoxificada
Cada minuto...

Se crean más Se envían


de 481 mil más de 180
Tweets millones de
nuevos emails

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 28]


Sociedad
Infoxificada
Cada minuto...

Se crean más Se envían


de 481 mil más de 180 Visualizados
Tweets millones de 4.3 millones
nuevos emails de vídeos

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 29]


Sociedad
Infoxificada
Cada minuto...

3.7 millones de búsquedas en Google

18 millones de mensajes en Whatsapp

Más de 800.000 $ en gastos en tiendas online.

973.000 Logins en Facebook

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 30]


Sociedad
Infoxificada

Hipótesis
Es posible obtener
Información de estos Datos?

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 31]


Evolución Histórica
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Prehistoria)

1961: Space Wars (1er Videojuego)

1963: Ivan Sutherland [MIT] Sketchpad

1964: DAC1 [IBM + General Motors]

1965: Exhibiciones Arte por Ordenador

1969: Primer ACM SIGGRAPH

Space Wars Sketchpad DAC1

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 33]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Niñez)

1970: RAM (1er Frame Buffer)

1971: Ivan Sutherland Digitaliz.Coche

1974: Ed. Catmull: Zbuffer + TexMapping

1975: Benoit Mandelbrot: Fractales

1978: James Blinn: Bump Mapping
Texture Bump Mapping
Mapping

Car Digitalization

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 34]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Adolescencia)

1980: Turner Whitted: Raytracing

1982: Disney: Efectos Especiales Tron

1982: James Clark: Silicon Graphics

1984: Goral et al. Radiosity (Cornell Box)

1985: Pixar: Luxo Jr.

Whitted Raytracer Tron Cornell Box

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 35]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Etapa Adulta)



1987: Lorensen: Marching Cubes

1988: Pixar: Renderman (1ªt Versión)

1991: ILM: Terminator 2 (Morphing)

1992: SGI: OpenGL

1993: ILM: Jurassic Park (IK)

1995: Microsoft: Direct3D

Jurassic Park Marching Cubes OpenGL

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 36]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Madurez)

1995: Pixar: Toy Story

1998: Pixar: Geri's Game (Subdivision)

2000: Playstation II (2 Millions Polígonos/Frame)

2001: Lord of the Rings (Animación Facial)

2009: Planet 51 (55 Millones €, 170 Países)

2009: Avatar (Película +Taquillera de la Historia)

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 37]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Historia (Madurez) 2010 – 2020

https://www.youtube.com/watch?v=VWrhRBb-1I
Big data
g
https://www.youtube.com/watch?v=VZk9mdVLb5w
AI
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 38]
Taxonomía
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Taxonomía
Los Métodos de Visualización están
basados en el sistema visual humano. Alto
ancho de banda.
Relacionados con la gestión de
información gráfica (2D y 3D).
Espacio Continuo: Vectorial.
Espacio Discreto: Raster/Voxel.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 40]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Taxonomía
Los Métodos de Visualización están
basados en el sistema visual humano. Alto
ancho de banda.
Relacionados con la gestión de
información gráfica (2D y 3D).
Espacio Continuo: Vectorial.
Espacio Discreto: Raster/Voxel.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 41]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Taxonomía
Espacio Continuo: Espacio Discreto:
definición por comprensión definición por extensión

Imagen
Espacio 2D Imagen
Discreta
Vectorial
(Raster)

Información
Modelo
Volumétrica
Espacio 3D Vectorial
(Voxel)

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 42]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Taxonomía
Análisis de Imágenes
Info. Numérica

Cartografía (2D) Visión por Computador


Diseño Interfaces de Usuario Análisis de Imágenes
Ilustración Industrial Reconocimiento OCR
Vectorial
Imagen 2D Animación y Videojuegos

Vectorial Tratamiento
Vectorización Imagen 2D de Imágenes
Raster
Diseño y Arte
Cartografía (3D)
Síntesis de Imagen Visualización científica
Modelado Modelo 3D Animación
(médica, industrial...)
Vectorial Voxelización Tratamiento
Modelo 3D de Volúmenes
Isosurfacing Discreto

Espacio Continuo
Espacio Discreto
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 43]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Equiv. Sist. Información


Sistema de Información Sistema Gráfico
Base de Datos Modelo
Búsqueda Rendering
Filtro Cámara Virtual

Modelo = Visualización (Datos)


Imagen = Rendering (Modelo)

Existen diferentes métodos para Rendering



Graphic Pipeline / Rendering Directo

Métodos de Síntesis de Imagen.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 44]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Equiv. Sist. Información


Sistema de Información Sistema Gráfico
Base de Datos Modelo
Búsqueda Rendering
Filtro Cámara Virtual

Modelo = Visualización (Datos)


Imagen = Rendering (Modelo)

Existen diferentes métodos para Rendering



Graphic Pipeline / Rendering Directo

Métodos de Síntesis de Imagen.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 45]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Equiv. Sist. Información


Sistema de Información Sistema Gráfico
Base de Datos Modelo
Búsqueda Rendering
Filtro Cámara Virtual

Modelo = Visualización (Datos)


Imagen = Rendering (Modelo)

Existen diferentes métodos para Rendering



Graphic Pipeline / Rendering Directo

Métodos de Síntesis de Imagen.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 46]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Síntesis de Imagen
Plano
Imagen

Posición
Cámara

Javier Alonso Albusac Jiménez


Ray casting
Realidad Virtual y Aumentada [Trp 47]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Graphic Pipeline
Plano Diplay
Imagen List

Pipeline
Raster
Posición Po
Cámara Cá

Javier Alonso Albusac Jiménez GPU (Pipeline


RealidadHardware)
Virtual y Aumentada [Trp 48]
Tema 1
Inter. Visualiz. Info.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Luxo JR (1986) Uncharted 3 (2011)


Shadow Maps SubSurfaceScattering

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 49]


Tema 1
Inter. Visualiz. Info.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Subsurface Scattering

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 50]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Evolución Polígonos
Tomb
40.000 Raider:
Underworld
(32.000)

30.000

20.000

Metal Gear
10.000 The Legend Solid 3
of Zelda (4.000)
Tomb
Raider (2.800)
(230)

1996 1998 2000 2002 2004 2006

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 51]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Evolución Polígonos

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 52]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Cifras: A Bug's Life...


Cámara Render Historia
Sombreado 3% 3% 5% Otros
5% 20%

Composic. Total
5% 447 Personas
 70% Softw.
Postprod.
7%

Arte Iluminación
7% 10%

Sw. Propio Animación


12% Modelado 15%
8%

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 53]


Percepción Visual
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Efectividad Percepción

Herramientas Sistema Visión


Artistas Humano
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 55]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual
• Basada en propiedades de iluminación
incidente.
• Patrones de luz (no valor absoluto).
• Cómo de sensible es frente a:
• Brillo y Contraste
• Color
• Movimiento

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 56]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual
• Los colores no existen. Son
percepciones subjetivas.
• La iluminación influye en el modo en el
que percibimos los colores.
• También influye nuestra base de
conocimiento. Lo que hemos aprendido
a lo largo de nuestra vida.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 57]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 58]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 59]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 60]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 61]


Percepción Visual
El COLOR
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

• Colores Primarios: rojo, azul y


amarillo
• Colores Secundarios: verde,
morado y naranja.
• Colores Terciarios: Celeste,
violeta, rosa, naranja oscuro, cian,
etc.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 63]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color Importancia de la elección del color

• Incrementa el reconocimiento de
marca hasta un 80%
• Aumenta la lectura hasta un 40%
• Acelera el aprendizaje entre un
55% y un 78%
• Incrementa la comprensión en un
73%
• Los anuncios en color son leídos
hasta un 42% más que los anuncios
en blanco negro

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 64]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

¡Fíjate a tu alrededor!
Armonía en la propia naturaleza

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 65]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

¡Fíjate a tu alrededor!
Armonía en la propia naturaleza

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 66]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 67]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

Monocromático

Complementarios Análogos
1 primario + 1 primario +
1 secundario 2 terciarios

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 68]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

Adyacentes Triádicos Tetrádicos


1 primario + 2 pares + 2
2 terciarios complementarios

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 69]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

• Elegir entre 2 y 4 colores.


• Diseñar primero Logotipo (marca)
• Elegir Denominación: monocromática,
complementaria, adyacente, etc.
• Realización de pruebas.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 70]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?

• Recursos:
• https://www.colourlovers.com/palettes
• http://www.colorcombos.com/
• https://www.degraeve.com/color-palette/

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 71]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ejercicio.
Color Análisis de Logos y webs de grandes
marcas.

Piensa en un gran marca


internacional

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 72]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ejercicio.
Color Análisis de Logos y webs de grandes
marcas.

Repetir el ejercicio con grandes cuadros de la


historia

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 73]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

PROCESAMIENTO
PREATENTIVO

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 74]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

PROCESAMIENTO
PREATENTIVO

No Requiere
Atención

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 75]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

PROCESAMIENTO
PREATENTIVO

No Requiere Independiente de
Atención los Distractores
(Nº y Tipo)

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 76]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

PROCESAMIENTO
PREATENTIVO

No Requiere Independiente de
Atención los Distractores
(Nº y Tipo)

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 77]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Color

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 78]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Color

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 79]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Color - ¿sabemos dónde ir?

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 80]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Forma

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 81]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Forma

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 82]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Combinación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 83]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Combinación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 84]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo
SUJETOS PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP
CERTAIN QUICKLY PUNCHED ELEMENTOS NIATREC YLKCIUQ
SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE
GOVERNS PRECISE EXAMPLE MERCURIO SNREVOG ESICERP
CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ
GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP
SCIENCE ENGLISH RECORDS COLUMNS PRESENTA HSILGNE
SUBJECT VIDEOS QUICKLY OXIDIZED TCEJBUS DEHCNUP
CERTAIN QUICKLY PUNCHED CASITAS NIATREC YLKCIUQ
SCIENCE ENGLISH RECORDS COSAS ECNEICS HSILGNE

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 85]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo
SUJETOS PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP
CERTAIN QUICKLY PUNCHED ELEMENTOS NIATREC YLKCIUQ
SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE
GOVERNS PRECISE EXAMPLE MERCURIO SNREVOG ESICERP
CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ
GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP
SCIENCE ENGLISH RECORDS COLUMNS PRESENTA HSILGNE
SUBJECT VIDEOS QUICKLY OXIDIZED TCEJBUS DEHCNUP
CERTAIN QUICKLY PUNCHED CASITAS NIATREC YLKCIUQ
SCIENCE ENGLISH RECORDS COSAS ECNEICS HSILGNE

El texto NO es Preatentivo
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 86]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo
¿Cuántos3hay?

45567898798451346878927894512
11454534546787981218718999100
21054147899874121556489345012
10477487445412123215487421001

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 87]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo
¿Cuántos 3 hay?

45567898798451346878927894512
11454534546787981218718999100
21054147899874121556489345012
10477487445412123215487421001

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 88]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo
¿Cuántos 3 hay? (combinación
contraste y tamaño)
45567898798451 3 46878927894512
114545 3 4546787981218718999100
21054147899874121556489 3 45012
1047748744541212 3 215487421001

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 89]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo

orientación longitud apertura tamaño

curvatura densidad número color

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 90]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Procesam. Preatentivo

intensidad intersecciones terminaciones profundidad 3D

parpadeo movim. (dirección) movim. (velocidad) dirección luz

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 91]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ceguera al Cambio

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 92]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ceguera al Cambio

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 93]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Ceguera al Cambio

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 94]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Foco de Atención - Ceguera

El foco de
atención se
concentra
en una
determinada
región de la
imagen

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 95]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 96]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Percepción de la
Iluminación se ve
afectada por la
percepción 3D y
la proyección de
sombras.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 97]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 98]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

La Ilusión de Munker-White: contraste simultáneo.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 99]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sensitividad Visual

La Ilusión de Craik-O'Brien: Dependencia de bordes

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 100]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Visualización
• Objetivo: Ayudar a las personas a
comprender datos mediante imágenes.

1 2 3
Teniendo en

Características Conjunto Tarea a


cuenta...

del Sistema de de datos Resolver


Percepción
Humano

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 101]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Visualización
• Objetivo: Ayudar a las personas a
comprender datos mediante imágenes.

1 2 3
Limitaciones...

Capacidad Capacidad Capacidad


Con las

del Sistema de de la
de Percep- Cómputo Pantalla
ción Humano

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 102]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Tipos de Datos
• Tabla: Filas son items (elementos),
columnas son las dimensiones o
atributos de los elementos.
Tipos de dimensiones:

Cuantitativo: Numérico (algorítmicos).

Ordenados: No permiten algoritmos.

Categóricos: Sólo distinguimos = o ≠.
Resulta crítico tener en cuenta el número de
dimensiones y de items. Posible uso de
dimensiones derivadas.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 103]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Tipos de Datos
• Tabla: Filas son items (elementos),
columnas son las dimensiones o
atributos de los elementos.
Tipos de dimensiones:

Cuantitativo: Numérico (algorítmicos).

Ordenados: No permiten algoritmos.

Categóricos: Sólo distinguimos = o ≠.
Resulta crítico tener en cuenta el número de
dimensiones y de items. Posible uso de
dimensiones derivadas.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 104]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Tipos de Datos
• Tabla: Filas son items (elementos),
columnas son las dimensiones o
atributos de los elementos.
Tipos de dimensiones:

Cuantitativo: Numérico (algorítmicos).

Ordenados: No permiten algoritmos.

Categóricos: Sólo distinguimos = o ≠.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 105]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Canales Visuales
• Los elementos gráficos transmiten la
información mediante canales visuales.
• Características de los canales visuales:
• Distinguible.
• Separable de otros canales.
• Sobresaliente («Pop up»).

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 106]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Canales Visuales
Tipos de datos
Cuantitativo Ordenado Categórico
Posición Posición Posición
Longitud Iluminación Color
Canales Visuales

Ángulo Saturación Textura


Inclinación Color Conexión
Precisión

Area Textura Contenido


Volumen Conexión Iluminación
Iluminación Contenido Saturación
Saturación Longitud Forma
Color Ángulo Longitud
Textura Inclinación Ángulo
Conexión Area Inclinación
Contenido Volumen Area
Forma Forma Volumen

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 107]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Sistema Coordenadas

• Sistema de referencia Global: Compartido por todos


los elementos de la escena (Sistema de Ref. Universal).
•Sistema de referencia Local: Propio de cada objeto.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 108]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Vectores
a

+b
b a b

a
Suma y Resta Escalado e Inversión

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 109]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Producto Escalar

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 110]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Producto Vectorial

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 111]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Transformaciones

Necesarias herramientas para
transformar primitivas.

¡Habitualmente triángulos!

Vértices Vértices
Transf.
+ +
Geométrica
Aristas Aristas

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 112]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Traslación

Ejemplo de aplicación
sobre todos los vérti-
ces del modelo 3D

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 113]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Traslación

Ejemplo de aplicación
sobre todos los vérti-
ces del modelo 3D

Javier Alonso Albusac Jiménez Prof. Anteriores : Carlos Gzlez y David Vallejo [Trp 114]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Traslación

Ejemplo de aplicación
sobre todos los vérti-
ces del modelo 3D

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 115]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rotación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 116]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rotación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 117]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rotación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 118]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rotación

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 119]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Escala

aa

Necesario mecanismo
unificado para aplicar
transformaciones!

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 120]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Escala

aa

Necesario mecanismo
unificado para aplicar
transformaciones!

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 121]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rep. Homogénea
Representación Homogénea:
Añade parámetro adicional h
P (x,y) → Ph (x,y,h)
De forma que P(x,y) = P(xh/h, yh/h)
siendo h ≠ 0
Permite realizar transformaciones
sólo mediante multiplicaciones
(matricialmente)

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 122]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rep. Homogénea

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 123]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Rep. Homogénea

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 124]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Transform. Afines
aa

Expresadas
en el Sistema
de Referencia
Universal.

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 125]


Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Composición

Multiplicación de Matrices es asociativa


pero no conmutativa!
Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 126]
Tema 1
Realidad Vir. Y Aum.
Escuela Superior de Informática Fundam. Historia Taxonomía Percepción Visualiz. Transf.

Composición
Matriz Neta: Obtenida de la composición de
las matrices de transformación.

Ejemplo: Rotar el modelo α grados sobre el punto P.


¿Cuál es la MN?

Javier Alonso Albusac Jiménez Realidad Virtual y Aumentada [Trp 127]

También podría gustarte