TIEA311 Tietokonegrafiikan perusteet
Kurssin suorittaminen
Tee ja palauta ohjeiden mukaan neljä koodausharjoitusta (T1, T2, T3 ja T4) joihin ohjeet löydät alempaa kohdasta Tehtävät. Kaikki tehtävät eli demot ovat pakollisia. Kurssilla ei ole tenttiä (vaikka Sisussa niin lukisikin).
Oppimateriaali ja ympäristöt
Tehtävien palautus, salaiset polkuavaimet videoihin, vertaistukiryhmän liittymislinkit ja muuta ei-julkista asiaa Moodlessa (vaatii kurssi-ilmoittautumisen ja kirjautumisen JYUn tunnuksilla).
Luentovideot Moniviestimessä (vaatii polkuavaimen, joka löytyy Moodlesta).
Luentokalvot ja videoiden sisältökuvaukset julkisena Aiemman vuoden kurssisivulla.
Suomenkielistä apumateriaalia julkisena TIMistä.
Asennusurakka
Jotta päästään jouhevasti liikkeelle ja homman alkuun, niin lue huolella seuraavat kohdat. C++-ympäristöjä on välillä vaikea saada toimimaan, mutta näillä ohjeilla pitäisi toimia. Kun saat esimerkkikoodit käännettyä ja ajettua, olet valmis kirjoittamaan omaa koodia. Ei yhtään aikaisemmin. Kaiken saamiseksi kuntoon voi mennä parikin päivää, joten älä hermostu ja kysy apua kurssikavereilta kurssin chatissä (Telegram/Matrix).
Asennettavat ohjelmat
Tehtävät tarkastetaan käyttäen näitä ohjelmistoja Windows- tai Linux-koneella käyttäen MSVC- tai GCC-kääntäjää, riippuen tarkastajasta. Pidä siis huoli, että koodisi kääntyy näissä ympäristöissä ja näillä kääntäjillä!
Windows
Kaikkien näiden asentaminen pitäisi onnistua asennusvelhojen vinkkejä seuraamalla.
- Visual Studio 2026 Asennusohjelman tarjoamista paketeista tämän kurssin tarpeisiin riittää Desktop development with C++. Tätä kirjoittaessa mallikoodien projektit ovat vuosimallia VS2022, klikkaa ensimmäistä kertaa avattaessa, päivitä projekti tms.
- Jokin tekstieditori kannattaa aina olla olemassa, esim. SublimeText, Visual Studio Code, Vim tai Emacs
- Git-työkalut. HUOM. Asennusvelho kysyy tosi paljon kysymyksiä. Valitse kaikkiin suositeltu vaihtoehto, jos et tiedä mitä pitäisi valita.
GNU+Linux
- Jokin IDE tai sellaiseksi muunnettu tekstieditori kannattaa olla, esimerkiksi JetBrainsin CLion on opiskelukäyttöön maksuton
- Git tarvitaan, asennusohjeet eri jakeluille löytyy esimerkiksi täältä
- GNU Compiler Collection (gcc). Myös Clangia voi kokeilla käyttää, mutta huomaa, että tarkastaja käyttää GCC:tä
MacOS
Tehtäväpohjat on pyritty muokkaamaan toimivaksi myös Macilla, mutta koska opettajistolta ei Applea löydy, ilmoitathan, jos tulee ongelmia. Ratkotaan niitä sitten yhdessä.
- Jokin IDE tai sellaiseksi muunnettu tekstieditori kannattaa olla, esimerkiksi JetBrainsin CLion on opiskelukäyttöön maksuton, myös Applen XCode saattaa toimia.
- Git tarvitaan, asennusohjeet löytyy esimerkiksi täältä
- GNU Compiler Collection (gcc). Myös Clangia voi kokeilla käyttää, mutta huomaa, että tarkastaja käyttää GCC:tä
Pohjakoodit
Tehtävissä käsitellään neljää eri pohjakoodia nimiltään Assignment 0, Assignment 1, Assignment 2, Assignment 4 (A0, A1, A2, A4). Kyllä, indeksit on oikein ja A3:a ei ole, koska teemme vain osan alkuperäisestä MIT:n kurssista.
Lataa pohjakoodit Gitillä seuraavasti:
- luo jonnekin (omalle koneellesi siis) kansio "TIEA311"
- luo sen alle kansiot "A0", "A1", "A2", "A4"
- käy jokaisessa alikansiossa ja avaa sinne Git Bash (hiiren oikealla tyhjältä alueelta ja valikosta Git Bash here)
- aja seuraavat kloonauskomennot nimiään vastaavissa kansioissa
git clone https://github.com/puavous/tiea311-assn0git clone https://github.com/puavous/tiea311-assn1git clone https://github.com/puavous/tiea311-assn2git clone https://github.com/puavous/tiea311-assn4
Jatkossa tässä ohjeessa oletetaan, että olet nimennyt kansiot näin, mutta muuten kansioiden nimillä ei ole merkitystä.
Nyt sinulla pitäisi olla neljä alikansiota, joissa kussakin on yksi alikansio, jossa on paljon koodia. Saat koodin auki Visual Studioon tuplaklikkaamalla projektifilua eli esim. A0:n tapauksessa navigoi TIEA311/A0/tiea311-assn0/ ja tuplaklikkaa tiedostoa zero.vcxproj.
Handouts
Kurssi perustuu MIT:ssä aikanaan pidetylle grafiikkakurssille. Meidän kurssilla tehdään siitä osa.
Suorat linkit MIT:n handoutseihin (PDF) alla. Tallenna tiedostot omalle koneellesi esim. kansioon TIEA311/handouts.
Handoutseissa kerrotaan miten kussakin tehtävässä pääsee alkuun (yleensä koodiesimerkeillä). Niissä myös kerrotaan MIT:n kurssitoteutuksen vaatimukset, joita meidän kurssi noudattaa vaihtelevasti. Noudata aina meidän kurssin vaatimuksia vaikka ne olisivat ristiriidassa handoutsien vaatimusten kanssa!
Handouteissa on virheitä ja epäjohdonmukaisuuksia. Näiden kanssa pitää opetella koodausmaailmassa pärjäämään ja käyttämään omaa järkeä.
Tehtävät
Jokainen kurssin neljästä tehtävästä rakentuu siten, että ensin koodataan pyydettyjä asioita ja kirjoitetaan Itsearvio omasta suorituksesta. Tehtävä palautetaan Moodleen (ohjeet alla) ja opettaja arvioi tehtävän, jonka seurauksena Moodlessa aukeaa mallivastaus. Sen luettuasi kirjoita vielä Mitäopin-tehtävä joka on omana palautuslaatikkonaan Moodlessa. Vasta tämän jälkeen pääset siirtymään seuraavaan tehtävään.
Kirjalliset reflektointitehtävät (Itsearvio ja Mitäopin) ovat tyyliltään ja pituudeltaan hyvin vapaamuotoisia. Voit kirjoittaa vaikka siihen tyyliin miten kirjoittaisit itsellesi lyhyen päiväkirjamerkinnän tai muistilapun aiheesta.
Itsearvion vaatimukset:
Itsearvio.txt -tiedoston sisältö korvataan plaintext-formaatissa (UTF-8 -koodauksella, opettele säätämään koodaus tekstieditorisi asetuksista!) tekstillä, jossa on vähintään seuraavat asiat:
- Tekijän nimi
- Numeerinen itsearvio 1-5 (ks. vaatimukset alla) ja luettelo toteutetuista ominaisuuksista, joilla itsearvio perustellaan.
- Rehellinen vastaus kysymykseen "miltä tehtävä tuntui, mikä oli vaikeinta, ja mitä koet oppineesi siitä".
Viimeinen kohta on tärkeä! Älä aliarvioi reflektoinnin ja sanallistamisen merkitystä omalle oppimisellesi.
Tehtävän palautus
Tehtävät palautetaan Moodlen tehtäväkohtaisiin palautuslaatikoihin patch-tiedostona. Patch-tiedosto on tekstitiedosto (voi avata ihan tekstieditorilla itselleen ihmeteltäväksi), jossa lukee muutokset alkuperäiseen pohjakoodiin verrattuna. Patchin luomiseen tarvittavat komentorivikomennot on annettu jokaisen tehtävän kuvauksessa. Käytä patchin luomiseen Windowsilla Git Bash -ohjelmaa, jotta merkistökoodaus menee suoraan oikein (UTF-8). Väärä merkistökoodaus aiheuttaa yleensä tehtävän palautumisen opiskelijalle suoraan bumerangina, koska opettajan skriptit ei osaa käsitellä mielivaltaisia merkistökoodauksia.
Vielä yksinkertaistettuna:
- lataa pohjakoodi
- toteuta pyydetyt ominaisuuden pohjakoodia muokkaamalla (muista myös Itsearvio.txt muokkaus)
- aja annettu patchin luontikomento oikeassa kansiossa
- palauta luotu patch-tiedosto Moodlen palautuslaatikkoon
Mitäopin-tehtävät voit kirjoitella mallivastauksen tutkimisen jälkeen Moodlen omaan tekstieditoriin tai palauttaa tekstitiedoston. Kumpi tuntuu itsellesi luontevammalta.
Tiedostojen muokkaus ja luominen
Jos tehtävässä on käsketty muokata jotain tiettyä tiedostoa, älä koske muihin.
Jokaisessa tehtävässä täytyy muokata vain yhtä Itsearvio.txt -tiedostoa. Eli vaikka palautuksena olisi A2 ja A4, joissa molemmissa on itsearvio, muokkaa vain jompaakumpaa.
Älä luo uusia tiedostoja muuten kuin jos niin pyydetään tekemään. (Ainoastaan tehtävän T2 kohta 4.)
Pidä myös huoli, ettet lisää epähuomiossa käännösartefakteja tai muuta epäolennaista versionhallintaan ja siitä luotavaan patchiin. Versionhallinnan perusteiden pitäisi olla ohjelmoinnin peruskurssien jälkeen hallussa, kertaa jos on tarve!
A4:n komentoriviargumentit
Assignment 4:ää edistetään melkein joka tehtävässä ja lähes kaikissa on vaatimuksena "kuva jonka koko ja nimi määrittyvät komentoriviltä". Tämä toteutetaan esim. kovakoodatusti niin, että kuvan kooksi laitetaan stoi(argv[4]) vaakaan ja stoi(argv[5]) pystyyn ja tulostiedoston nimeksi argv[7]. Tehkää tämä heti oikein.
Komentoriviargumentit löytyvät Windows-käyttäjillä Visual Studion (VS) Project Properties-kohdasta. Esim. A4:n tapauksessa VS:n vasemmassa laidassa on Solution 'a4', jonka alla on a4-projekti. Klikkaa hiiren oikealla a4-projektin päällä ja valitse Properties (alimmaisena). Valitse avautuvasta ikkunasta Configuration properties -> Debugging. Oikean puolen listassa komentoriviargumentit näkyvät Command Arguments kohdassa esim.:
-input scene01_plane.txt -size 110 100 -output AAA1.bmp
Handouteissa neuvotaan miten samat argumentit työnnetään Linux-koneelle (varmaankin myös Macille sama). Oleellisena erona siis Linuxilla syötetään komentoriville myös ohjelman nimi:
./a4soln -input scene01_plane.txt -size 110 100 -output AAA1.bmp
Windows + VS siis ei tarvitse ohjelman nimeä. Eikä sitä saa sinne laittaa, koska muuten teillä hajoaa argumenttien indeksointi ja yllä mainittu kovakoodiratkaisu ei toimi suoraan.
Tehtävän tarkastaja kutsuu teidän ohjelmaa tasan tarkaan näin (tietysti argumenttien arvot vaihtelee), joten pitäkää huolta että tämä toimii.
T1 (A0 ja A4)
Tämä on kurssin ensimmäinen ja viimeinen tehtävä josta on tarjolla "helppoja" pisteitä, joten kannattaa tehdä tämä 5/5 tasolla (joka nostaa kurssiarvosanan 1 -> 2, vaikka loput tehtävät olisi tolppia). Fiksut opiskelijat tietenkin osaavat tälläistä optimointia harrastaa sanomattakin lukemalla heti kurssin aluksi kaikki tehtävänkuvaukset läpi.
Muokattavat tiedostot
Tehtävässä muutetaan Assignment 0:n ja Assignment 4:n tiedostoja main.cpp ja Itsearvio.txt (riittää kun kirjoitat itsearvion joko A0 tai A4 palautukseen).
Patchin luomiskomennot
A0/tiea311-assn0/kansiossa:git diff -w v2026.1 > vastaus_T1_assn0.patchA4/tiea311-assn4/kansiossa:git diff -w v2026.1 > vastaus_T1_assn4.patch
Assignment 0:n toteutettavat ominaisuudet
Vaatimus 1 (1 piste): MIT:n perusosio Assignment 0:sta (handoutin luku 2) oltava tehty.
- Värin vaihto (toggle)
- Valon paikan vaihto
- Meshin lataaminen
Vaatimus 2 (1 piste): Yksi lisäominaisuus toteutettu.
Vaatimus 3 (1 piste): Kolme lisäominaisuutta toteutettu (eli kaksi edellisen lisäksi).
Lisäominaisuudet (toteuta yksi tai kolme)
- Mallin pyöritys r-näppäimellä
- Sulava (smooth) värin vaihto
- Kameran kääntö ja zoomaus hiirellä
- Display listin käyttö (työläs ja ei kovin oleellinen kurssin kannalta)
HUOM! Handoutsien hard-osio ylittää kurssin sisältörajauksen; sen saa tehdä harrastelupohjalta ja omalla vastuulla eikä siihen käytetystä ajasta saa erityiskorvausta tämän kurssin puitteissa.
Lisäominaisuuksien mukaista toimintaa demoava lyhytvideo löytyy kurssin Moniviestin-kansiosta.
Assignment 4:n toteutettavat ominaisuudet
Vaatimus 4 (1 piste): jos tehty jo vähintään vaatimus 1 ja Assignment 4 aloitettu seuraavasti
- tulostaa (eli tallentaa tiedostoon) bmp-kuvan, jonka koko on vähintään 100 x 100 pikseliä. Kuvan on oltava erilainen kuin esimerkkiohjelman tekemä punainen piste mustalla pohjalla.
Vaatimus 5 (1 piste): jos tehty vähintään vaatimustaso 1 ja 4 ja Assignment 4 jatkettu seuraavasti
- komentoriviargumentit määrittävät tulostuvan kuvan koon ja tallennettavan tiedoston nimen
- kuvan sisällön tulee edelleen olla erilainen kuin esimerkkiohjelman tuottama kuva
- kuvan tulee edelleen olla minimissään 100 x 100 pikselin kokoinen (eli tarkista käyttäjän syöte ja pakota minimikoko)
- komentoriviargumenttien on toimittava juuri niinkuin ylempänä kohdassa "A4:n komentoriviargumentit" on neuvottu
Ota myös huomioon että käyttäjän pyytämä kuva ei välttämättä ole neliön muotoinen vaan voi olla esim. 400 x 112 px. Ohjelman ei pitäisi kaatua tälläisessäkään tilanteessa.
Tämä on helppo lisäpiste ja vaatimuksena joissain pisteissä myöhemmin, joten kannattaa tehdä nyt.
Patchin luomiskomennot
A1/tiea311-assn1/kansiossa:git diff -w v2026.1 > vastaus_T2_assn1.patch
Assignment 1:n toteutettavat ominaisuudet
Vaatimus 1 (1 piste): Valitse jompikumpi allaolevista
- kuutiollinen Bezier ja B-spline niin, että V asettuu oikein, mutta T,N,B ei tarvitse
- profiilipinta (generalized cylinder) niin, että
tor.swptoimii (ei tarvitse omaa käyräkoodia)
Vaatimus 2 (1 piste): edellisen lisäksi (valitse taas jompikumpi)
- profiilipinta (edellisen kohdan minimivaatimuksin)
- pyörähdyskappale siten että
wineglass.swptoimii oikein
Vaatimus 3 (1 piste): Käyrät JA pyörähdyspinta JA profiilipinta niin, että
wineglass.swptoimii oikein- oma käyräkoodi tekee V, T, N ja B ohjeen mukaisesti ja pinnat näyttää sileiltä vähintään pyyhkäisykäyrän 4:n peräkkäisen kontrollipisteen osamatkalla
- saa olla epäjatkuvuuksia
weird.swp:ssä jaweirder.swp:ssä
Vaatimus 4 (1 piste): Edelliset kohdat JA jompikumpi seuraavista
- oma luovasti tehty swp-tiedosto
- oma proseduraalinen erikoiskäyrä (esim. lisätehtävässä mainittu Trefoil knot tai joku itse keksimäsi härveli)
Tämä on helpohko ja erittäin hauska lisätehtävä, joten kannattaa tehdä. Myöskin kurssin ainut tehtävä, jossa pääsee toteuttamaan omaa taiteellisuuttaan.
Vaatimus 5 (1 piste): Kaikki edelliset JA
- suljetun pyyhkäisykäyrän orientaation epäjatkuvuus korjattu ohjeen mukaan eli
weird.swpjaweirder.swptoimivat nätisti
Muokattavat tiedostot
Muokkaa tiedostoja tarpeen mukaan.
Patchin luomiskomennot
A2/tiea311-assn2/kansiossa:git diff -w v2026.1 > vastaus_T3_assn2.patchA4/tiea311-assn4/kansiossa:git diff -w v2026.1 > vastaus_T3_assn4.patch
Assignment 2:n toteutettavat ominaisuudet
Vaatimus 1 (1 piste): Assignment 2:ssa
- MatrixStack
- tiedostonluku (
.skel-pääte) - palloja piirtyy johonkin (saa olla "väärissä paikoissa")
Vaatimus 2 (1 piste): Edellisen lisäksi
- pallot piirtyy oikeellisesti nivelten kohdalle
Vaatimus 3 (1 piste): Edelliset (myös kohta 2.5: Assignment 4 edistäminen) JA
- ohjeen mukaiset tikut pallojen välissä
Vaatimus 5 (1 piste): Edelliset (1, 2, 2.5, 3, 4) ja Assignment 2:n käyttöliittymä ohjeen mukaan
- Whenever a joint rotation slider is dragged, the application calls
setJointTransform, passing in the index of the joint to be updated and the Euler rotation angles set by the user. You should implement this function to set rotation component of the joint’s transformation matrix appropriately.
Assignment 4:n toteutettavat ominaisuudet
Vaatimus 2.5 (0.5 pistettä): Kohdat 1 ja 2 JA Assignment 4:n jatkettu seuraavasti:
- ohjelma toimii testiskriptillä ja tulostaa skriptissä määritetyn kokoiset ja nimiset kuvatiedostot (jos teit tämän jo tehtävässä T1, niin ei tarvitse tehdä mitään)
- komentoriviargumenttien on toimittava juuri niinkuin ylempänä kohdassa "A4:n komentoriviargumentit" on neuvottu
- kuvan sisältönä on tasainen gradienttiliukuma siten, että vasen alakulma on musta, oikea yläkulma keltainen, ja muissa pikseleissä punaisen intensiteetti interpoloituu lineaarisesti välille [0,1] x-koordinaatin mukaisesti ja vihreän intensiteetti vastaavasti y-koordinaatin mukaisesti
Vaatimus 4 (1 piste): Kohdat (1, 2, 2.5, 3) toteutettu JA Assignment 4 jatkettu seuraavasti:
pääsilmukka kutsuu Camera -luokkaan alustavasti toteutettua generateRay()-metodia pikselistä riippuvilla x,y -koordinaateilla väliltä [-1,1]
generateRay() ampuu säteitä kovakoodatusti pisteestä (0,0,-2)^T kohti xy-tasoa niin, että neliskulmaisen kuvan äärikulmien säteet kulkevat pisteiden (-2,-2,0)^T, (-2,2,0)^T, (2,2,0)^T ja (2,-2,0)^T kautta ja
kuvan keskimmäisen säteen suunta on suoraan kohti origoa. Tarvittaessa hahmottele paperille. Jos onnistuit tässä tehtävässä ilman hahmottelua paperille, niin yritä keksiä itsellesi joku toinen tehtävä, joka ei onnistu sinulta ilman hahmottelua paperille. Hahmottele siihen sitten ratkaisu paperille. Tee tässä kohtaa edes jotain, mitä et pysty tekemään pelkästään päässäsi ilman apuvälineitä. Opittava asia on apuvälineiden käyttö ja sen tiedostaminen, milloin pelkkä apuvälineetön ajattelu ei riitäkään.Tulostuva kuva visualisoi säteen suuntavektorin x- y- ja z-koordinatit punaisen (x), vihreän (y) ja sinisen (z) intensiteetteinä.
Tässä luonnollisesti vaatimus 4 ylikirjoittaa vaatimuksen 2.5, joten voit jättää toisen poiskommentoiduksi.
Muokattavat tiedostot
Muokkaa tiedostoja tarpeen mukaan.
Patchin luomiskomennot
A4/tiea311-assn4/kansiossa:git diff -w v2026.1 > vastaus_T4_assn4.patch
Assignment 4:n toteutettavat ominaisuudet
Vaatimus 1 (1 piste): Ohjelma tuottaa pikselikuvan
- jonka koko ja nimi määrittyvät komentoriviargumenttien mukaan
- komentoriviargumenttien on toimittava juuri niinkuin ylempänä kohdassa "A4:n komentoriviargumentit" on neuvottu
- johon piirtyy vähintään varjostamaton kovakoodattu yksikköpallo origossa kovakoodatulla perspektiivikameralla (eli luennolla näytetyt koodit ihan itse kirjoitettuna omin käsin). HUOM tässä on käytettävä
Sphere-luokasta instansoitua oliota
Vaatimus 2 (1 piste): Edellisen lisäksi
Groupon toteutettu, eikä pallo-oliota tai kameraa enää luoda kovakoodatusti, vaan sellaiset syntyvät automaattisesti lataamalla jokin pallon sisältävä näkymäpuu valmiiksi toteutetunSceneParser-luokan instanssilla.- Lisäksi vähintään JOKO pallon normaalivektorin laskenta JA visualisointi TAI etäisyyden visualisointi.
Pääohjelmassa tehdään siis oikeellisesti vain näkymän lataus ja intersect() pää-Groupille. Näin ollen nyt esimerkistä scene03_sphere.txt piirtyy ympyrän muotoinen hahmo, jonka ei tarvitse olla oikeellisesti skaalattu littanaksi. Sen sijaan esimerkistä scene02_cube.txt ei piirry mitään, koska siinä ei ole yhtään palloa.
Kameran ja pallon toiminta saavat yhä olla kovakoodatut ja saa olla bugeja, mutta pallokuvassa ei saa enää olla vakioväri, vaan jokin pallon geometriasta aiheutuva sävytys, jossa käytetään Hit-olion lopputilasta luettavia asioita. Pallo saa edelleen olla origossa ilman muunnoksia. Toisin sanoen Handoutin luvun 4 listasta kohdat 1-7, joihin saa jäädä bugeja ja "placeholder" -tyyppisiä kovakoodattuja toteutuksia.
Vaatimus 3 (1 piste): Edellisten lisäksi yksikköpallo niin että
- diffuusi valaistus toimii vähintään origossa sijaitsevalle yksikköpallolle. (ts. Handoutin luvun 4 kohdat 1-11 alustavalla toteutuksella)
Vaatimus 4 (1 piste): Pallon lisäksi vähintään taso
- muunnokset ja perspektiivi toimivat siten, että tasoista ja palloista koostuvat malliesimerkit piirtävät primitiivit oikeisiin paikkoihin suhteessa handoutin mallikuviin.
Saa olla pientä summittaisuutta, bugia tai kummaa valaistusilmiötä, mutta kuvien pitää piirtyä tunnistettavasti mallikuvien kaltaisiksi. (Handoutin luvun 4 kohdat 1-12 ja 14)
Vaatimus 5 (1 piste): Handoutin luvun 4 listasta on toteutettu kohdat 1-15 ja esimerkkikuvat piirtyvät läheisesti saman näköisiksi kuin handoutin esimerkeissä. Pieniä häröjä saa olla... niistä ei yksittäisen pikkukurssin aikaskaalassa päästä eroon, ja se on vaan maailman fakta.
HUOM: Handoutin listan kohta 16 eli tekstuurikartta ei kuulu maksimitavoitteeseen, tosin se on aika triviaali lisäys, jos siihen asti on saatu tehtyä ja haluaa brassailla
Jatkoa?
Jos/kun pääsit tänne asti, onnea! Tämä peruskurssi toimii suorana esitietona seuraaville kursseille:
Tiedustele vastuuopettajalta (Paavo) itsenäisen suorituksen mahdollisuutta Sisussa listattujen toteutusten lisäksi.
These are the current permissions for this document; please modify if needed. You can always modify these permissions from the manage page.