Interakcija Človek-Računalnik: 3D Grafični Vmesniki PDF

Interakcija človek-računalnik 3D grafični vmesniki Niko Lukač Uvod v 3D vmesnike Do sedaj smo spoznali osnove 2D GUI, v prihodnje se bomo osredotočili na 3D GUI, ki pa so osnova za VR in AR tehnologije. 3D vmesniki v osnovi temeljijo na računalniški grafi...

Interakcija človek-računalnik 3D grafični vmesniki Niko Lukač Uvod v 3D vmesnike Do sedaj smo spoznali osnove 2D GUI, v prihodnje se bomo osredotočili na 3D GUI, ki pa so osnova za VR in AR tehnologije. 3D vmesniki v osnovi temeljijo na računalniški grafiki, v tem poglavju se bomo osredotočili le na osnovne tehnike 3D grafike za gradnjo 3D vmesnikov. 2 3D gradniki ⚫ Osnovni gradniki: točke, trikotniki in voksli (3D piksli). ⚫ Vsi kompleksnejši 2D in 3D modeli so sestavljeni iz trikotnikov. ⚫ Topologija: strukturirana ali nestrukturirana. 3 Pristop računalniške grafike ⚫ Izrisovanje (ti. 3D grafični cevovod): Senčilnik Senčilnik Senčilnik pikslov vozlišč Transformacija geometrije Rasterizacija (pixel/fragment (vertex oglišč, pogleda (geometry shader) shader) in vidnega shader) prostora ⚫ V osnovi na grafični procesni enoti (GPE), kar omogoča paralelizacijo operacij nad vozlišči, trikotnikih in pikslih preko GPE jeder. 4 Transformacija oglišč Bolj podrobni pregled transformacij nad nivoju oglišč, ki se izvede v senčilniku za oglišča (angl. vertex shader) 5 Transformacija oglišč 2. Izvedemo transformacije nad 3D modelom (skaliranje, transliranje in rotiranje), kjer upoštevamo koordinatni sistem 3D modela 6 Transformacija pogleda (kamere) 4. Nastavimo kot gledanja, zoom, ter projekcijski prostor kamere Nato projeciramo vidne objekte iz 3D v 2D prostor okna iz smeri kamere 7 Transformacija pogleda (kamere) Dve najbolj znani projekciji kamere: ortogonalna in perpsektivna 8 Rasterizacija Rasterizacija v 3D deluje seveda v 2D prostoru (polnjenje praznih pikslov), postopek je enak kot smo že spoznali pri 2D grafiki. 9 Senčenje BRDF (bidirectional reflectance distribution function) svetlobni model nam razdeli svetlobni vir na tri komponente: ambientalna svetloba, difuzna svetloba in zrcalno odbita svetloba (specular) Aproksimacijo lahko dosežemo z upoštevanjem kota med žarkom svetlobnega vira in normalo (vektor normale je pravokoten na tangento) v danem oglišču oz. pikslu. Primer vektorjev normal: 10 Senčenje Znan primer lokalne aproksimacije modela BRDF je Gouraudovo ali Phongovo senčenje (angl. shading) 11 Senčenje Ambientalna komponenta: svetlobni vir neodvisen od pozicije objekta in vira svetlobe. Zato se smatra kot vseprisotni vir svetlobe. Objektu lahko priredimo RGB barvo materiala (m) za ambientalni vir svetlobe ter ga pomnožimo z RGB barvo ambientalne luči 12 Senčenje Difuzna komponenta je odvisna od pozicije luči glede na 3D objekt ter smer žarkov. Uporabimo Lambertovo kosinusno pravilo z upoštevanjem skalarnega produkta (dot product) vektorja normale in žarka svetlobnega vira. Pri tem imamo dve RGB komponenti: za difuzni material objekta in svetlobnega vira. 13 Senčenje Zrcalno odbita svetloba še upošteva poleg skalarnega produkta eksponentni faktor, ki ojača svetlost (shininess) Doda dodatni občutek realizma 3D objektom Viden samo iz določenega zornega kota 14 Senčenje Pri senčenju tudi lahko upoštevamo atenuacijski factor, ki zmanjša intenziteto svetlobnega vira z razdaljo (npr. efekt svetilke) WebGL demo: http://www.cs.toronto.edu/~jacobson/phong-demo/ 15 Teksturiranje Velikokrat želimo RGBA sliko lepit na 3D objekt – temu postopku pravimo lepljenje teksture. Potrebujemo parametrizacijo 3D modela. Primer parametrizacije za kroglo. d je vektor med središčem krogle in poljubno točko na krogli: Vir slike: WIki 16 Teksturiranje Pri teksturiranju ima tekstura ti. S,T koordinate (texel), ki jih preslikamo v prostor pikslov z mapiranjem (texture mapping) Pikslov je običajno več, popularna dva pristopa polnjenja piksla: najbližji texel ali pa interpolacija sosednjih tekslov 17 Teksturiranje Teksturne mape so zelo pogoste v 3D vmesnikih kot tudi računalniških igrah Vir slike: https://www.instructables.com/Hand-Painted-Game-Texture-Character-Skin/ 18 Teksturiranje Ponavljanje tekstur (v primeru, da imamo premajhne ločljivosti) 19 Zakrite ploskve Za vsak piksel si hranimo vrednost globine (z koordinata). V primeru, da izrišemo novi objekt ter imamo nižjo vrednost v posameznem pikslu pomeni, da je objekt bližje kameri ter upoštevamo dani piksel, hkrati pa posodobimo vrednosti globinskega medpomnilnika (z-buffer oz. depth buffer). < Težave, če imamo dva objekta na enaki globini (z-fighting) Primer z-fighting 20 Mapiranje senc senčenje Ni enako kot senčenje (daje lokalno osvetlitev objektu) Imamo globalni osvetlitveni model, če izračunamo žarke iz svetlobnega vira in gledamo presečišča (ti. sledenje žarkov - ray casting) Aproksimacija je možna s ti. mapiranjem senc (shadow mapping) sence Cilj je izračunat realistične sence glede na osvetlitveni vir Postopek z uporabo globinskega medpomnilnika: - 3. Projeciramo globinski medpomnilnik B iz strani kamere v – 1. Izračunamo globinski medpomnilnik A iz strani vira svetlobe smer perspektive svetlobnega vira - 4. Če je razdalja za dani projeciran piksel večja pri B kot A, potem je piksel prekrit in je v senci – 2. Izračunamo globinski medpomnilnik iz strani kamere (klasično) Vir slike: Jamin, EECS 487: Interactive Computer Graphics 21 Mapiranje senc Težave: – Dobimo trde sence (angl. hard shadows) – Nadozbečnost robov (aliasing) Nazobčenost odpravimo z AA (anti-aliasing) algoritmi, "mehkost" senc pa preko filtrov, ki povprečijo vrednosti glede na okolico (npr. Gaussov filter) 22 Ambientalna okluzija Aproksimacija globalnega osvetlitvenega modela, ki daje boljši rezultat kot lokalni model (Phonovo senčenje) Samo Phongovo senčenje Z ambientalno okluzijo Za vsako točko na objektu skonstruiramo hemisfero v smeri vektorja normale. Hemisfero vzorčimo z "metanjem" mini žarkov ter opazujemo število presečišč. Več presečišč = več senčenja. Popularna metoda je izračun v prostoru pikslov (angl. screen space ambient occlusion, SSAO), uporabimo z-buffer 23 Primer za več luči Demo primer (v WebGL) za več luči: https://tiansijie.github.io/Tile_Based_WebGL_DeferredShader/ Statični viri svetlobe (npr. ambientalna) se lahko tudi zapišejo v teksture (angl. texture baking) 24 Izris na zaslon V zadnjem koraku pred izrisom na zaslon še moramo upoštevat 2D velikost izrisovalnega okna (viewport) Pri tem normaliziramo koordinate pikslov med -1 in 1 ter pretvorimo v prostor z višino ter širino izrisovalnega okna na zaslonu 25 Graf 3D scene Scena nam omogoča grupiranje 3D objektov v hierarhijo in predstavlja osnovno komponento v modernih grafičnih pogonih (Unreal engine, Unity itd) ali modelirnikih (Blender, Maya itd). Z grafom 3D scene lahko tako tudi določamo vse lastnosti 3D objektov in njihovo hierarhijo. Tipična konfiguracija v domensko specifičnem jeziku. Na dani graf lahko tudi dodamo afine transformacije, ki se propagirajo na objekte v hierarhiji. 26 Tipična predstavitev GPE pomnilnika Z uporabo indeksiranja ali brez indeksiranja. 27 Tipična predstavitev GPE pomnilnika Z uporabo indeksiranja ali brez indeksiranja. Z indeksiranjem porabimo manj pomnilnika, saj ni potrebno koordinat ponavljat za sosedne trikotnike. 28 Tipična predstavitev GPE pomnilnika Običajno imamo tri komponente za posamezno oglišče: oglišča (XYZ), normale (XYZ) in koordinat teksture. Optimalni način, da le te hranimo v en grafični pomnilnik, saj tako pohitrimo dostopne čase. Pomnilnik indeksiranja je seveda ločen od danega pomnilnika komponent oglišč. 29 3D modeli Znani formati 3D modelov: 3DS, FBX, STL, OBJ, PLY, itd. Generalno vsebujejo: XYZ oglišča, indeksirane trikotnike, 2D teksturne koordinate, XYZ normale Dodatna podpora: animacije (tranzicije oglišč iz enega v drugo stanje) Primer Wavefront OBJ formata (vklopljena tekstovna oblika): 30 3D modeli Možni zapis normal tudi v obliki teksture (ti. normalmap) 31 Igralni pogoni in grafične knjižnice Tri najbolj znane knjižnice za nizkonivojski izris 3D grafike z uporabo GPE: DirectX, Vulkan, OpenGL. Običajno vsaj 2 podprti v znanem igralnem pogonu: Vir: https://www.guru3d.com/articles-pages/msi-geforce-rtx-3070-gaming-x-trio-review,28.html 32