Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
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”
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.
Epidemia
Cólera
Londres.
John Snow
1854
Epidemia
Cólera
Londres.
John Snow
1854
Epidemia
Cólera
Londres.
John Snow
1854
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
Se crean más
de 481 mil
Tweets
nuevos
Hipótesis
Es posible obtener
Información de estos Datos?
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
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
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.
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)
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.
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.
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)
Taxonomía
Análisis de Imágenes
Info. Numérica
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.
Síntesis de Imagen
Plano
Imagen
Posición
Cámara
Graphic Pipeline
Plano Diplay
Imagen List
Pipeline
Raster
Posición Po
Cámara Cá
Subsurface Scattering
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)
Evolución Polígonos
Composic. Total
5% 447 Personas
70% Softw.
Postprod.
7%
Arte Iluminación
7% 10%
Efectividad Percepción
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
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.
Sensitividad Visual
Sensitividad Visual
Sensitividad Visual
Sensitividad Visual
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
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
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
¡Fíjate a tu alrededor!
Armonía en la propia naturaleza
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
¡Fíjate a tu alrededor!
Armonía en la propia naturaleza
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
Monocromático
Complementarios Análogos
1 primario + 1 primario +
1 secundario 2 terciarios
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
Diseño de interfaces:
Color ¿Cómo elegir un esquema adecuado?
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/
Ejercicio.
Color Análisis de Logos y webs de grandes
marcas.
Ejercicio.
Color Análisis de Logos y webs de grandes
marcas.
PROCESAMIENTO
PREATENTIVO
PROCESAMIENTO
PREATENTIVO
No Requiere
Atención
PROCESAMIENTO
PREATENTIVO
No Requiere Independiente de
Atención los Distractores
(Nº y Tipo)
PROCESAMIENTO
PREATENTIVO
No Requiere Independiente de
Atención los Distractores
(Nº y Tipo)
Color
Color
Forma
Forma
Combinación
Combinación
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
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
Procesam. Preatentivo
¿Cuántos 3 hay?
45567898798451346878927894512
11454534546787981218718999100
21054147899874121556489345012
10477487445412123215487421001
Procesam. Preatentivo
¿Cuántos 3 hay? (combinación
contraste y tamaño)
45567898798451 3 46878927894512
114545 3 4546787981218718999100
21054147899874121556489 3 45012
1047748744541212 3 215487421001
Procesam. Preatentivo
Procesam. Preatentivo
Ceguera al Cambio
Ceguera al Cambio
Ceguera al Cambio
El foco de
atención se
concentra
en una
determinada
región de la
imagen
Sensitividad Visual
Sensitividad Visual
Percepción de la
Iluminación se ve
afectada por la
percepción 3D y
la proyección de
sombras.
Sensitividad Visual
Sensitividad Visual
Sensitividad Visual
Visualización
• Objetivo: Ayudar a las personas a
comprender datos mediante imágenes.
1 2 3
Teniendo en
Visualización
• Objetivo: Ayudar a las personas a
comprender datos mediante imágenes.
1 2 3
Limitaciones...
del Sistema de de la
de Percep- Cómputo Pantalla
ción Humano
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.
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.
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 ≠.
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»).
Canales Visuales
Tipos de datos
Cuantitativo Ordenado Categórico
Posición Posición Posición
Longitud Iluminación Color
Canales Visuales
Sistema Coordenadas
Vectores
a
+b
b a b
a
Suma y Resta Escalado e Inversión
Producto Escalar
Producto Vectorial
Transformaciones
●
Necesarias herramientas para
transformar primitivas.
●
¡Habitualmente triángulos!
Vértices Vértices
Transf.
+ +
Geométrica
Aristas Aristas
Traslación
Ejemplo de aplicación
sobre todos los vérti-
ces del modelo 3D
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
Rotación
Rotación
Rotación
Rotación
Escala
aa
Necesario mecanismo
unificado para aplicar
transformaciones!
Escala
aa
Necesario mecanismo
unificado para aplicar
transformaciones!
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)
Rep. Homogénea
Rep. Homogénea
Transform. Afines
aa
Expresadas
en el Sistema
de Referencia
Universal.
Composición
Composición
Matriz Neta: Obtenida de la composición de
las matrices de transformación.