3° gruppo esercitazioni

Esercitazioni del corso di Grafica Computerizzata

Gruppo

Bulzoni Federico
Guerra Antonio
Zambello Nicola

Esercizio 1

Partendo dal secondo esercizio sviluppato per il I gruppo di esercizi, sviluppate un’applicazione permetta di utilizzare il texture mapping con i seguenti solidi geometrici: cubo, sfera, cono, cilindro, toro, specificando nella sezione initBuffer delle varie geometrie l’associazione coordinate di texture-vertici. Esempi del risultato del corretto texture mapping sono riportate nella tabella presente nella pagina. L’applicazione deve permettere di selezionare la geometria per mezzo di menu gestito tramite dat.gui. Verificate il texture mapping con l’ausilio delle texture allegate all’esercizio.

Esercizio 2

Partendo dall’ esercizio n.1 sviluppate un’applicazione che permetta di modulare il texture mapping 2D combinandolo con un modello di shading che consideri solo la componente diffusa del modello di Phong come descritto dall’equazione:

I = kD ⋅ LD ⋅ max(l ⋅ n, 0)

dove:

• kD è la componente diffusa del materiale rappresentato dal colore del frammento della texture,
• LD è la componente diffusa della luce.

Setup e sviluppo

Setup dell'ambiente di sviluppo

Assicuratevi di avere node e yarn installati.
Per node, è richiesta una versione 8.x.x.

# Using Ubuntu

# Adding ppa refs and installing node
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

# Adding ppa refs and installing yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get -y install yarn

Una volta installato tutto, installate le dipendenze node nella root del progetto, dove è locato package.json:

yarn

Compilare il codice ES

Il codice in ES6 ha bisogno di essere transpilato per essere eseguito su alcuni browser, quindi per sicurezza lo compiliamo con babel:

yarn build

E, mentre si sviluppa, lo si può mettere in watch sui *.js per compilare al salvataggio:

yarn watch

Compilare il codice SASS

Gli stili CSS sono scritti in Sass, quindi per usarli bisogna compilare il Sass:

grunt compile

Si può tenere grunt in watch sui *.scss per compilarli al salvataggio:

grunt

Editor e formattazione

Il codice viene formattato quando si committa tramite un hook che chiama prettier sui file JavaScript.
Si consiglia un editor con un plugin per prettier, è molto più comodo. Bisogna però configurarlo adeguatamente per avere coerenza tra ciò che viene formattato dall'editor e ciò che viene poi formattato da prettier.

Per avviare prettier a mano:

yarn prettier-all

Server di sviluppo

Per avviare il server di sviluppo per vedere i risultati, avviare serve tramite:

yarn start

Pipeline di sviluppo

Per permettere a tutti di essere aggiornati sulle modifiche se non le si fa insieme, usiamo le Pull Request.
Per iniziare modifiche, creiamo un branch:

git branch <nomeUtente_cosaStaiFacendo>

e ci spostiamo su di esso:

git checkout <nomeUtente_cosaStaiFacendo>

Quando si ha committato le modifiche e si ha fatto push su origin:

git add -u
git commit -m "<cosaStaiFacendo>"
git push -u origin <nomeUtente_cosaStaiFacendo>

Dall'interfaccia web di GitHub, quindi, si può creare una PR.
Dal repo -> branches -> <nomeUtente_cosaStaiFacendo> -> Pull request

Aspettate quindi l'approvazione degli altri per revisione o comunque per presa visione delle modifiche.