Interacció i Disseny d’Interfícies

Pere Pau Vázquez <pere.pau@lsi.upc.edu>

Isabel Navazo <isabel@lsi.upc.edu>

Laboratori: Àlvar Vinacua <alvar@lsi.upc.edu>


Prova1 (10%): Lab, setmana 3-9 d’octubre

Prova2 (15%): Lab, setmana 21-27 de novembre

Prova3 (15%): Usab i DI, setmana 19-25 de desembre

Prova4 (20%): Dispositius portables, 23 de desembre (avalua competència transversal)

Prova5 (40%): Final, dimecres 18 de gener de 8 a 11h



Tema 1

Realitat virtual

L’objectiu és l’immersió sensorial de l’usuari en l’entorn virtual. El sentit més important per aconseguir aquest objectiu és la vista (3D).

Perifèrics d’entrada (sensors):

Capturen les accions dels participants i les envien a l’ordinador (micròfon, guants, etc).

Perifèrics de sortida (efectors):

Tradueixen els senyals d’àudio, vídeo, etc. generats pel computador en estímuls per als òrgans dels sentits (so, imatges, etc.): visuals (cascs esteroscòpics, pantalles), àudio, força i tacte (dispositius tàctils), equilibri (plataformes mòbils).

Computador

Realitza la simulació interactiva, basant-se en el model geomètric 3D i en el programari de recollida de dades, simulació física i simulació sensorial. És el procés més crític en realitat virtual.

Model geomètric 3D

Permet fer els càlculs d’imatges, generació de so espacial, càcul de coŀlisions, etc.

Programari de tractament

Motor físic, etc.

Programari de simulació sensorial

Calcula la representació digital de les imatges, sons, etc. que el maquinari s’encarregarà de traduir a senyals i finalment a estímuls pels sentits.

Presència (no és essencial)

Sensació d’estar allà.

Realitat augmentada

És la combinació de l’escena real vista per l’usuari i una escene virtual generada per l’ordinador que augmenta l’escena real amb informació addicional.

L’objectiu últim és que l’usuari no vegi la diferència entre la part real i l’augmentació virtual. Els objectes virtuals han d’estar «registrats» amb el món real de forma acurada.

Hi ha diferents maneres de visualitzar la realitat augmentada:

Computació ubíqua (ubiquitous computing)

Ordinadors integrats profundament en l’entorn i les activitats del dia a dia. Per exemple, llums que s’encenen sols, etc.

Altres noms: pervasive computing, ambient intelligence, etc.

Usabilitat i interacció home-màquina

L’HCI (Human Computer Interaction) és el camp que estudia com les persones interactuem amb les màquines. És una qualitat molt important de les aplicacions.

Una interfície gràfica ha de garantir:

L’usabilitat és la facilitat amb que un grup concret, en un entorn concret, pot realitzar unes tasques determinades.

Color

Espectre electromagnètic visible: 400-700 nm.

L’ull té 3 tipus de cons que detecten, aproximadament, els tons vermells, verds i blaus.

Els metamers són colors diferents que ens donen la mateixa sensació.

Representació de colors:

Models de colors:

Existeixen colors CIE que no es poden transformar al seu equivalent RGB.


Tema 2

Informàtica gràfica

L’art i la tècnica de comunicar informació utilitzant dibuixos/imatges generats per computador a partir de models de dades i interactuar amb les dades i visualització.

Segons l’aplicació hi ha diferents requeriments (mapa del temps: 2D; urbanisme: realisme i simulació de les llums; CAD mecànic: exactitud; jocs: velocitat, interacció i visualització; etc).

Dispositius d’entrada

Les pantalles estan formades per una matriu de píxels. Per referenciar-los s’utilitza un sistema de coordenades (amb l’orígen a l’extrem esquerra inferior per a OpenGL i superior per a Qt).

El sistema indica a la pantalla, per a cada píxel, amb quina intensitat de vermell, verd i blau (RGB) s’ha d’iŀluminar. S’utilitza un byte per a cada color, de manera que es pot representar 23*8 = 224 colors.

Les pantalles actuals dibuixen (refresquen) cada píxel un mínim de 30 cops per segon de forma seqüencial (raster). Per no haver d’enviar la informació del colors de cada píxel constantment a la pantalla, les aplicacions l’escriuen en un frame buffer de la targeta gràfica.

Per evitar inconsistències si una aplicació modifica el frame buffer mentre el controlador de la pantalla hi està accedint, se n’utilitzen dos (double buffering).

Un problema inherent de les pantalles, pel fet d’estar formades per píxels discrets, és l’aliasing. Aquest efecte es pot disminuir reduint els canvis bruscs (a canvi d’una mica de nitidesa).

Representació (en memòria)

Com es desa un «dibuix» al disc?

En aquest curs veurem objectes solids (limitats per superfície, rígids i amb cares planes).

Hi ha diferents estructures de dades gràfiques amb les quals podem desar el nostre model:

Per desar una superfície desem les cares individuals. En aquesta assignatura utilitzarem un sistema de referència cartesià tridimensional. Per representar les cares podem utilitzar el pla que tenen en comú tots els punts de la cara. Recordem l’equació implícita del pla:

        

També ens caldrà conèixer les arestes (de manera que també haurem de desar els seus vèrtex).

Per un cub, això significa que ens calen 6 cares (equació), 24 arestes (equació) i 48 vèrtexs (coordenades). Ara, algunes d’aquestes estan duplicades i ens les podem estalviar (hi ha 6 cares, 12 arestes i 8 vèrtexs únics).

Model de fronteres

Guarda explícitament l’informació de la superfície:

Per tal que un model sigui vàlid:

Representarem la informació de la següent manera:

cares

normal (a, b, c)

núm. vèrtex

1r vèrtex

2n vèrtex

3r vèrtex

4t vèrtex

vèrtexs

x

y

z

Algunes maneres alternatives de guardar la informació són:

Models d’escenes

Una escena és un conjunt d’objectes. Com que usualment els objectes tenen com a orígen el seu propi centre, cal modificar les seves coordenades per poder mostrar-los en una escena; anomenarem aquestes transformacions geomètriques TG.

Si un mateix model apareix més d’una vegada en una escena, per tal d’evitar de duplicar-lo en memòria utilitzarem un punter i només duplicarem la seva informació TG.

Hi ha maneres alternatives de representar les escenes. Per exemple:

Visualització OpenGL

Per dibuixar una escena ens calen els següents passos:

Per definir la càmera ens cal indicar:                        gluLookAt(...);

També definim el volum de visió (engloba tots els objectes que poden estar visibles).

        gluPerspective(FOV, zN, zF, raw);  /  gluOrtho(left, right, bottom, up, zN, zF);

Paradigma projectiu i parts ocultes:

A l’hora de renderitzar, OpenGL desa la distància del volum de visió al window de cada píxel que pinta en un buffer de profunditats (z-buffer).

Si totes les cares són orientades, opaques i tancades (com amb el model de fronteres) i la càmera mai està dins d’un objecte, podem utilitzar el backface culling per separa les cares en “no visibles” i “potencialment visibles”. El backface culling per si sol falla per a objectes concaus o quan hi ha més d’un objecte; per això, el que es fa és combinar-lo amb el z-buffer, utilitzant-lo per reduir el nombre de cares que hem d’enviar a renderitzar.

OpenGL fa el backface culling tard en el pipeline (després de gluLookAt, gluPerspective i glViewport), mirant que la normal en Z en coordenades de dispositiu sigui positiva, a partir dels vèrtex de la cara. Si volem fer-lo nosaltres abans, amb coordenades d’aplicació, hem de fer una comprovació diferent segons si la càmera és en perspectiva o axonomètrica (veure transparències de Realisme).

        glCullFace(...); glEnable(GL_CULL_FACE);


Tema 3

Iŀluminació

La llum fa que podem diferenciar diferents cares d’un objecte que sinó serien totes d’un mateix color. Hem de calcular el color de cada punt, segons la quantitat de llum vermella, verda i blava que arriba a l’observador procedent d’aquest punt.

La llum és afectada per:

S’utilitzen models d’iŀluminació per simular les lleis físiques que determinen el color d’un punt i aproximar-lo.

Nosaltres farem servir models locals (o empírics), que només consideren el punt P en què es calcula el color, el focus de llum i l’observador (no consideren altres objectes de l’escena) i que aproximen la transmissió de la llum per fórmules i propietats dels materials per constants. Amb aquests models no podrem tenir ombres, miralls ni transparències.

Model empíric ambient                                        (la  indica que treballem amb RGB)

Només existeix una llum ambient  no direccional. Els objectes la reflecteixen de forma difusa (igual en totes direccions) segons la constat de reflexió ambient  (que depèn del material i el seu color difús -color amb que està pintat-).

Resultat: Totes les cares del mateix material es pinten del mateix color.

Model empíric difús (Lambert)

A més del llum ambient, afegeix la possibilitat de tenir focus de llum. Calculem la llum del focus reflectida amb:

On  és l’angle entre la normal de la cara i el vector que va del punt P al focus de llum. El valor es pot calcular com a si els vectors estan normalitzats; si no ho estan, hem de demanar a OpenGL que ho faci: glEnable(GL_NORMALIZE).

Per obtenir el resultat final  sumem  i els factors per tots els focus de llum.

Resultat: Les cares són de colors diferents segons l’angle.

Model empíric especular (Phong)

En el món real la llum especular es reflecteix amb un cert angle. Introduïm un component addicional per als focus de llum:

On  és l’angle entre el vector que va del punt P a l’observador i el vector de la llum reflectida (el qual és el simètric del vector que va al focus de llum). La constant  (que varia per l’objecte) serveix per tal de reduïr la quantitat de llum.

En total:

Com trobar les constants

  ( depèn del material i  depèn del color)

 ( és independent del color i acostuma a ser )

Implementació en OpenGL

Dins del pipeline d’OpenGL per al càlcul de color segons la llum tenim el problema que el procés de rasterització (que decideix on es projecte el punt i amb quin color) no té les dades per trobar els angles de tots els punts.

Per no haver d’invertir totes les transformacions per cada píxel per saber d’on ve, OpenGL calcula una aproximació del color en funció només dels vèrtexs del polígon (amb les normals de les cares). (Si realment volem el color exacte, podem implementar el procés nosaltres mateixos utilitzant shaders).

Un cop té el color de cada vèrtex hi ha dues possibilitats:

Aquesta aproximació té el problema que la llum especular pot quedar invisible (si no coincideix amb cap vèrtex). Per compensar-ho, podem dividir la cara en molts triangles petits per augmentar el nombre de vèrtex. Això també evita que a l’apropar el focus de llum a una cara aquesta s’enfosqueixi.

Addicionalment, podem voler evitar els canvis de color bruscs entre algunes arestes (suavitzat de vèrtex). Per aconseguir això podem fer que els vèrtexs no utilitzin les normals per cara, sinó utilitzar normals per vèrtex (que siguin la mitjana de les normals de les cares).

En resum, el procés per utilitzar iŀluminació amb OpenGL és:

Hem de tenir compte a l’hora de definir la posició de les fonts de llum:


Teoria de la informació


Resum per a l’examen parcial


Exercici de Llei de Fitts