Politecnico di Milano - Facoltà del design

FAQ per gli studenti del laboratorio di computer grafica C2
(risposte a domande frequenti)

© Prof. Giovanni Gigante - Revisione 8 (9 febbraio 2006)

Cronologia delle revisioni

8 (9 febbraio 2005): aggiunte domande 2.13, 3.1, 3.2, 3.3
7 (12 febbraio 2005): aggiunta domanda 2.12
6 (30 gennaio 2005): aggiunte domande 1.5, 1.6, 2.10, 2.11
5 (21 ottobre 2004): aggiunta domande 1.4

1. HTML
1.1. Come si apre una finestrina (pop-up) con javascript?
1.2. Come si chiude una finestrina (pop-up) con javascript?
1.3. Si può ruotare una scritta (fatta di testo) con i CSS?
1.4. Perché se imposto al 100% l'altezza di una tabella, essa non occupa tutta l'altezza della finestra del browser?
1.5. Come posso avere link di due stili diversi nella stessa pagina?
1.6. Perché il testo ALT nelle immagini non si vede in Netscape/Mozilla/ecc.?
2.3. Come si inserisce un mondo VRML all'interno di una pagina HTML?

2. VRML
2.1. Come si crea un sensore orientato secondo assi/piani diversi da quelli predefiniti?
2.2. Come si fa a nascondere una parte di un oggetto?
2.3. Come si inserisce un mondo VRML all'interno di una pagina HTML?
2.4. Non riesco a capire come interagiscono tra loro le traslazioni e le rotazioni all'interno del nodo transform
2.5. Si può creare un clone a specchio di un oggetto?
2.6. Si può animare un'estrusione?
2.7. Si può cambiare dinamicamente una texture a un oggetto?
2.8. Cos'è uno script?
2.9. Perché quando clicco sul mio sensore l'oggetto balza in un'altra posizione?
2.10. Come si fa a eseguire un'animazione una volta sola a partire da quando un oggetto viene cliccato?
2.11. Come si fa a creare un pulsante che si può premere per accendere e spegnere un'animazione?
2.12. Cosa sono i nodi "switch" che si creano esportando da Maya?
2.13. Come si fa, esportando da Maya, a ottenere un modello VRML di dimensioni contenute?
3.1. Come si carica un modello VRML in Flash?

3. Flash
3.1. Come si carica un modello VRML in Flash?
3.2. Perché la mia maschera non funziona?
3.2. Perché il mio pulsante non funziona?

1. HTML


1.1. Come si apre una finestrina (pop-up) con javascript?

Utilizzare una funzione javascript nel link che deve aprire la finestrina. Scrivere il link nel modo seguente:

<a href="javascript:void(0);"
onclick = "finestra=window.open('nomedocumento.html', 'nome', 'caratteristiche'); finestra.focus();"
> apri la nuova finestra </a>

finestra è il nome javascript della finestra, che potrà verrà usato in altre funzioni javascript (in questo caso non serve)
nomedocumento.html è l'indirizzo del file da aprire nella nuova finestra
nome è il nome HTML della finestra, che potrà anche essere usato, per esempio, come target dei link
caratteristiche è una serie di coppie parametro=valore, separati da virgole. Si possono usare solo quelli che interessano. Per esempio:

'height=200,width=300,left=50,screenX=50,top=80,screenY=80,scrollbars=no,status=no,toolbar=no'

crea una finestra alta 200 pixel, larga 300, posizionata a 50 pixel dal bordo sinistro e 80 da quello superiore, senza barre di scorrimento, senza barra di stato, senza barra degli strumenti. (Attenzione: usare questo tipo di restrizioni soltanto se servono davvero!).


1.2. Come si chiude una finestrina (pop-up) con javascript?

Per creare un link che chiude la finestra in cui si trova, scriverlo come segue:

<a href="javascript:self.close();">
chiudi questa finestra </a>

1.3. Si può ruotare una scritta (fatta di testo) con i CSS?

Attualmente, con i CSS standard non si può. Esiste un'estensione dei CSS di Internet Explorer che permette di farlo, ma in quanto estensione proprietaria non va usata.

1.4. Perché se imposto al 100% l'altezza di una tabella, essa non occupa tutta l'altezza della finestra del browser?

Perché questo comportamento non è definito dallo standard, anche se la maggior parte dei vecchi browser lo supporta. Perché funzioni, occorre che la pagina contenga una dichiarazione DOCTYPE adeguata (tipicamente, html 4.01 transitional).

1.5. Come posso avere link di due stili diversi nella stessa pagina?

Assegnando i link a classi diverse. Nell'esempio seguente, tutti i link sono rossi (rai) ma quelli assegnati alla classe "inglesi" sono verdi (bbc):: 

<html>
<head>
	<style type="text/css">
		a { color: red }
		a.inglese { color: green }
	</style>
</head>
<body>
	<a href="http://www.rai.it">RAI</a>
	<a class="inglese" href="http://news.bbc.co.uk">BBC</a>
</body>
</html>

1.6. Perché il testo ALT delle immagini non si vede in Netscape/Mozilla/ecc.?

Il testo alternativo (attributo alt) non si deve vedere, a meno che non si stia usando un browser non grafico (es. lettori per non vedenti). Internet Explorer trasgredisce a questo standard.
Il modo corretto per visualizzare una piccola scritta quando si tocca un'immagine è invece di usare l'attributo title:

<img src="duomo1.jpg" alt="il duomo di milano" title="notate il colore della pietra!">

2. VRML

2.1. Come si crea un sensore orientato secondo assi/piani diversi da quelli predefiniti?

Per creare un sensore orientato non nel modo predefinito, per esempio un sensore cilindrico che ruota attorno all'asse Z anziché all'asse Y, si deve: (1) creare l'oggetto da ruotare, il relativo sensore, e racchiuderli in un nodo Transform che sarà la destinazione dell'uscita del sensore; (2) creare un ulteriore nodo Transform di livello superiore, e usarlo per ruotare tutto il sistema (sensore e oggetto) secondo l'orientamento che si vuole dare al sensore; (3) usare un nodo Transform interno che circonda soltanto l'oggetto (non il sensore) per raddrizzare l'oggetto.
Per esempio, seguendo questo procedimento (manualmente o con Cosmoworlds, è lo stesso) si è costruito l'esempio seguente, che è un cono orientato nel modo predefinito, ma che si può far ruotare con il mouse attorno all'asse Z:

#VRML V2.0 utf8
Transform {
	rotation 1 0 0 1.571
	children [
		DEF MOVIMENTO Transform {
			children [
				DEF SENSORE CylinderSensor { }
				Transform {
					rotation -1 0 0 1.571
					children Shape {
						geometry Cone { }
					}
				}
			]
		}
	]
}
ROUTE SENSORE.rotation_changed TO MOVIMENTO.set_rotation

2.2. Come si fa a nascondere una parte di un oggetto?

In generale non si può. Bisogna dividere l'oggetto in più parti, e poi nasconderle secondo la necessità. Per farle sparire, si può spostarle lontanissimo, rimpicciolirle a scala piccolissima (non a 0 perché non è legale in VRML), o impostare la trasparenza a 1, o meglio usare un nodo Switch. Per decidere quali parti nascondere e in quali circostanze potrebbe essere necessario ricorrere a uno script (chiedere al docente).

2.3. Come si inserisce un mondo VRML all'interno di una pagina HTML?

Si può, naturalmente, aprire un documento vrml direttamente a tutta pagina, oppure all'interno di un frame. Ma si può anche includerlo all'interno di una pagina, come se fosse un'immagine o un'animazione fatta con Flash. A tale scopo Internet Explorer usa l'elemento HTML object, e Netscape usa embed. Per fare in modo che il codice funzioni con tutti i browser, scrivere il codice HTML seguente, che li comprende entrambi:

<OBJECT
CLASSID="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
CODEBASE="http://www.parallelgraphics.com/bin/cortvrml.cab#Version=4,1,0,90"
WIDTH="300" HEIGHT="200">
<PARAM NAME="SRC" VALUE="nomefile.wrl">
<EMBED SRC="nomefile.wrl" TYPE="x-world/x-vrml" WIDTH="300" HEIGHT="200">
</EMBED>
</OBJECT>

Modificare i parametri in rosso secondo le proprie necessità (sono tutti scritti due volte).
Esiste anche la possibilità di introdurre ulteriori parametri per specificare il colore di sfondo, la presenza o meno dei controlli di navigazione, e così via. Per ulteriori informazione vedere questa pagina.Ricordarsi di modificare sia l'elemento object che l'elemento embed.

2.4. Non riesco a capire come interagiscono tra loro le traslazioni e le rotazioni all'interno del nodo Transform

Quando si crea un oggetto, o un gruppo, esso ha un sistema proprio di assi di riferimento. In condizioni normali, l'origine di questi nuovi assi viene posizionata in corrispondenza dell'origine degli assi del contesto (l'effetto pratico è che il nuovo oggetto o gruppo appare nelle coordinate 0-0-0 del contesto).
Il nodo Transform permette di trasformare (ruotare, traslare, scalare) il sistema di assi di riferimento del nuovo oggetto. Il sistema di assi viene: 1) traslato, 2) ruotato, 3) scalato; in quest'ordine. Se si specifica anche il centro di rotazione (centre), esso viene specificato rispetto alle coordinate del contesto, cioè a monte di eventuali traslazioni-rotazioni-ecc.

2.5. Si può creare un clone a specchio di un oggetto?

Teoricamente si potrebbe applicando una trasformazione di scala con valori negativi. Purtroppo questa possibilità non è prevista né dagli standard né dai browser. L'unico sistema per creare automaticamente una copia a specchio è uno script che modifichi appropriatamente i dati geometrici di un oggetto.
X3D, il successore di VRML, prevede invece la creazione di copie a specchio utilizzando trasformazioni di scala negative.

2.6. Si può animare un'estrusione?

Si può animare il percorso di un'estrusione (cioè, spostare i punti che lo compongono) con un nodo CoordinateInterpolator. Per allungare o accorciare il percorso di un'estrusione (cioè, aggiungere o togliere punti sulla spina) è invece necessario uno script.

2.7. Si può cambiare dinamicamente una texture a un oggetto?

Occorre uno script.

2.8. Cos'è uno script?

Uno script è un piccolo programma, contenuto dentro un nodo VRML "Script". Viene scritto, tipicamente, nel linguaggio Javascript, lo stesso che si usa nelle pagine Web. Con uno script è possibile cambiare praticamente qualsiasi aspetto di un mondo VRML, e creare comportamenti interattivi anche molto complessi.
Lo scripting del VRML è un argomento complesso che non viene trattato da questo corso: richiede, oltre alla conoscenza della programmazione in Javascript, la conoscenza del modello secondo cui esso si interfaccia al VRML e ai suoi oggetti.

2.9. Perché quando clicco sul mio sensore l'oggetto balza in un'altra posizione?

Se succede questo, significa che il sensore invia i suoi dati a un nodo transform che ha valori iniziali diversi da quelli che gli invia il sensore. Per esempio, succede questo se in Cosmoworlds si applica un sensore a un oggetto, e si sposta l'oggetto trascinandolo con il mouse.
Si può ovviare in due modi:
a) impostando nel campo offset del sensore gli stessi valori che si trovano inizialmente nel nodo transform: in questo modo quando il sensore inizia ad operare, i suoi valori saranno automaticamente compensati per la posizione effettiva dell'oggetto
b) creando un ulteriore nodo transform (gruppo in Cosmoworlds), che avrà valori iniziali a zero, e instradando i dati del sensore a questo transform, anziché a quello precedente.

2.10 Come si fa a eseguire un'animazione una volta sola a partire da quando un oggetto viene cliccato?

Si veda il codice di questo esempio

2.11 Come si fa a creare un pulsante che si può premere per accendere e spegnere un'animazione?

Occorrerebbe uno script per realizzarlo bene; tuttavia è possibile creare qualcosa di simile anche utilizzando soltanto sensori e interpolatori. Si veda il codice di questo esempio nel quale il pulsante esiste in due versioni, accesa e spenta, una delle quali viene rimpicciolita in modo da nasconderla alla vista.

2.12. Cosa sono i nodi "switch" che si creano esportando da Maya?

Il nodo VRML "Switch" è una specie di gruppo multiplo, che rende visibile solo uno dei suoi componenti (choice), e in particolare quello il cui numero è indicato nell'attributo "whichchoice", contando a partire da zero (quindi, 1 mostra la seconda alternativa, 2 la terza, ecc; -1 vuol dire che nessuna è visibile).
L'esportazione da Maya crea dei nodi di questo tipo quando nel modello ci sono layer o oggetti nascosti. Per evitarlo si possono cancellare questi elementi in Maya prima di esportare il VRML, oppure cancellarli dopo in Cosmoworlds.

2.13. Come si fa, esportando da Maya, a ottenere un modello VRML di dimensioni contenute?

3. Flash

3.1. Come si carica un modello VRML in Flash?

Non è possibile aprire direttamente un modello VRML in Flash, perché Flash non è in grado di gestire questo formato. Si può però far aprire a Flash una nuova finestra del browser, che contenga al suo interno il file VRML, che verrà così renderizzato dal browser stesso.

Per aprire un file in una finestra esterna, in Flash si può usare la funzione getURL, fornendogli l'indirizzo del file da aprire. Questo file potrà essere, nel nostro caso, una pagina HTML che contiene il modello VRML, oppure anche direttamente il nome del file VRML.
Per esempio, il codice seguente, associato a un pulsante, gli fa aprire il file modello.wrl in una nuova finestra del browser: 

on (release) {
	getURL("modello.wrl", "_blank");
}
Notare che non è possibile specificare da Flash le dimensioni di questa finestra (per la cronaca, è possibile farlo dall'interno della finestra stessa utilizzando Javascript).

3.2. Perché la mia maschera non funziona?

Accertarsi di non aver disegnato la maschera con un bordo tratteggiato o simile. Le maschere devono avere un bordo continuo o nessun bordo, altrimenti non funzionano.

3.3. Perché il mio pulsante non funziona?

Accertarsi che il codice actionscript (p.es. on (release)...) sia stato posizionato sul pulsante, e non sul frame dove si trova il pulsante.
(Se il codice si scrive finché il pulsante è selezionato, lo si associa a quello, mentre se il pulsante non è selezionato, il codice va a finire nel frame. L'effetto è differente).