Sistemi multimediali Massimiliano Piscozzi piscozzidico unimi it Prototipi

Sistemi multimediali Massimiliano Piscozzi – piscozzi@dico. unimi. it

Prototipi (3) • La definizione di un prototipo può essere contenuta in un file diverso da quello in cui vengono create le istanze File A File X 3 D-XML contenente la dichiarazione di uno o più prototipi File B File X 3 D-XML contenente la dichiarazione di uno o più prototipi File C File X 3 D-XML contenente la dichiarazione di uno o più prototipi File D File X 3 D-XML che utilizza istanze di prototipi definiti esternamente à Maggiore riusabilità dei nodi definiti dall’utente à Semplificazione nella scrittura dei file X 3 D-XML

Extern. Proto. Declare • La dichiarazione di un prototipo definito esternamente avviene attraverso il tag Extern. Proto. Declare <Extern. Proto. Declare name=“. . . ” url=“. . . ”/> Indirizzo del file in cui è definito il prototipo + nome del prototipo: nome. File#nome. Prototipo Nome utilizzato localmente per la creazione di istanze del prototipo • Esempio. . . File. A. x 3 d <Proto. Declare name=“oggetto”> <Proto. Interface>. . . </Proto. Interface> <Proto. Body>. . . </Proto. Body> </Proto. Declare>. . . File. B. x 3 d. . . <Extern. Proto. Declare name=“oggetto. Esterno” url=“File. A. x 3 d#oggetto”/>. . . <Proto. Instance name=“oggetto. Esterno”>. . . </Proto. Instance>. . .

Scripting • Uno script: – E’ un nodo facente parte dello scene graph – Contiene un “comportamento” definito attraverso funzioni scritte in ECMAScript – Può generare eventi • L’utilizzo di scripts permette di: – Programmare comportamenti più evoluti rispetto a quelli ottenibili tramite i nodi predefiniti (ex: pulsanti a più stati) – Definire matematicamente delle traiettore (ex: parabole, ellissi) – Automatizzare comportamenti (ex: creazione di un gran numero di istanze di un oggetto) – Convertire eventi (ex: roll. Over button) – Modificare dinamicamente lo scene graph e il behaviour graph –. . .

Nodo Script <Script>. . . Interfaccia costituita da campi <field name=“. . . ” type=“. . . ” access. Type=“. . . ” value=“. . . ”/> <![CDATA[. . . ]]> </Script> Funzioni definite in ECMAScript <![CDATA[ ecmascript: . . . lista funzioni. . . ]]> • Per gestire gli eventi in input occorre definire delle funzioni associate ai campi Input. Only o Input. Output • Per spedire degli eventi associati ai campi Output. Only o Input. Output è sufficiente modificarne i valori all’interno delle funzioni

ECMAScript (1) • Variabili – Linguaggio debolmente tipizzato – Tipi predefiniti: boolean, number, string, object, . . . var a; a = 5; print(a); a = ‘Hello World!’ print(a); • Operatori – – Unari: ! (NOT), -, ++ (incremento), -- (decremento) Binari: +, - , * , / , % (modulo) Relazionali: <, >, <=, >=, ==, != Logici: && (AND), || (OR) • Strutture di controllo – Condizionali: if. . else, switch – Iterative: for, while, do. . while if (condition) { statements } else { statements } switch (expr) { case label: statements break; . . . default: statements } for (expr 1; epr 2; expr 3) { statements } while (condition) { statements } do { statements } while (condition)

ECMAScript (2) • Funzioni – Non occorre specificare il tipo del valore restituito function my. Function(parameters) {. . . } function somma(a, b) { return (a+b); } • Oggetto Array – Array dinamico costituito da elementi di qualsiasi tipo – Proprietà: length var a = new Array(); a[0] = 4; a[1] = ‘Bla. Bla’; for (i=0; i < a. length; i++) { print(a[i]); } • Oggetto Math – Oggetto globale: non va istanziato tramite new – Costanti matematiche (proprietà): PI, E, SQRT 2, LN 10, . . . – Funzioni matematiche (metodi): max(), min(), pow(), sqrt(), sin(), cos(), tan(), random()

ECMAScript (3) • ECMAScript e nodi “Script” (X 3 D) – I tipi di dato booleani (SFBool), scalari (SFFloat, SFDouble, SFInt 32, SFTime) e le stringhe (SFString) sono rappresentati attraverso i tipi base di ECMAScript (boolean, number, string) – I restanti tipi di dato “singoli” (SFColor, SFVec 3 f, . . . ) sono rappresentati attraverso degli oggetti • Ex: verde = new SFColor(0, 1, 0); • Ex: origine = new SFVec 3 f(0, 0, 0); – I tipi di dato “multipli” (MFInt 32, MFVec 3 f, . . . ) sono rappresentati attraverso degli array • Ex: v = new MFInt 32(2, 5, 1, -3);

ECMAScript (4) • ECMAScript e nodi “Script” (X 3 D) – Per ogni campo di tipo Input. Only e Input. Output bisogna definire una funzione con lo stesso nome – E’ possibile definire due funzioni richiamate quando lo script è caricato o eliminato dal Browser: initialize() e shutdown() – La funzione print() permette di scrivere sulla console (debug) – Tramite l’oggetto globale Browser() è possibile modificare dinamicamente lo scene graph e il behaviour graph • Browser. create. From. VRMLString(string. VRML) • Browser. add. Route(from. Node, from. Field, to. Node, to. Field) • Browser. delete. Route(from. Node, from. Field, to. Node, to. Field)

Script: esempio • Movimento sinusoidale di un cubo Time. Sensor Script Transform cycle. Interval set_fraction translation loop value_changed ·· · fraction_changed ·· · <Script DEF="My. Script"> <field name="set_fraction" type="SFFloat" access. Type="input. Only"/> <field name="value_changed" type="SFVec 3 f" access. Type="output. Only"/> <![CDATA[ ecmascript: function initialize() { print(‘Script inizializzato!’); } set_fraction(value) oppure set_fraction(value, timestamp) function set_fraction(value) { value_changed[0] = -3 + 6 * value; value_changed[1] = 2 * Math. Sin(value*6. 28); value_changed[2] = 0; } ]]> </Script>

Esempio (1) • Creazione di un prototipo di un pulsante a due stati – Lo stato del pulsante deve essere rappresentato dal suo colore (variazione del diffuse. Color) – Il pulsante deve illuminarsi al passaggio del mouse (variazione dell’emissive. Color) – Il pulsante può avere forme diverse Button Transform ·· · Shape ·· · geometry Touch. Sensor Appearance ·· · is. Over Script touch. Time is. Over ·· · touch. Time diffuse. Color emissive. Color Sphere ·· · Material diffuse. Color emissive. Color ·· ·

Esempio (2) • Dichiarazione del prototipo • Connessione del campo geometry del prototipo <Proto. Declare name=“Button”> <Proto. Interface> <field name="geometry" type="SFNode" access. Type="input. Only"> <Sphere/> </field> </Proto. Interface> Campo costituito da un nodo: <Proto. Body> il valore di default non viene. . . specificato nell’attributo value, </Proto. Body> ma attraverso un tag innestato </Proto. Declare>. . . <Shape> <Appearance> <Material DEF=“material. Button”> </Appearance> <IS> <connect node. Field="geometry" proto. Field="geometry"/> </IS> </Shape>. . .

Esempio (3) • Nodo Script <Script DEF="My. Script"> <field name="is. Over" type="SFBool" access. Type="input. Only"/> <field name="touch. Time" type="SFTime" access. Type="input. Only"/> <field name="state" type="SFBool" access. Type="input. Output"/> <field name="emissive. Color_changed" type="SFColor" access. Type="output. Only"/> <field name="diffuse. Color_changed" type="SFColor" access. Type="output. Only"/> <![CDATA[ ecmascript: . . . ]]> </Script>

Esempio (4) function state(value) {} • Funzioni definite all’interno del nodo Script function touch. Time(value) { state = !state; if (state) { diffuse. Color_changed = new SFColor(1, 0. 2, 0. 5); } else { diffuse. Color_changed = new SFColor(0. 2, 1, 0. 5); } } function is. Over(value) { if (value) { emissive. Color_changed = new SFColor(0. 2, 0. 2); } else { emissive. Color_changed = new SFColor(0, 0, 0); } }

Esempio (5) • Routing degli eventi all’interno di <Proto. Body> • Creazione di istanze del prototipo <ROUTE from. Node="Sensor" from. Field="is. Over" to. Node="My. Script" to. Field="is. Over"/> <ROUTE from. Node="Sensor" from. Field="touch. Time" to. Node="My. Script" to. Field="touch. Time"/> <ROUTE from. Node="My. Script" from. Field="emissive. Color_changed" to. Node="Material. Button" to. Field="set_emissive. Color"/> <ROUTE from. Node="My. Script" from. Field="diffuse. Color_changed" to. Node="Material. Button" to. Field="set_diffuse. Color"/> <Proto. Instance name="button"> <field. Value name="geometry"> <Box/> </field. Value> </Proto. Instance> Campo costituito da un nodo: il valore di default non viene specificato nell’attributo value, ma attraverso un tag innestato

Proximity. Sensor • Rileva quando l’avatar entra (ed esce) in una zona rappresentata da un parallelepipedo • Quando l’utente si trova all’interno del parallelepipedo il sensore traccia la sua posizione e orientazione Proximity. Sensor : X 3 DEnvironmental. Sensor. Node { SFBool [in, out] enabled TRUE SFVec 3 f [in, out] center 000 SFVec 3 f [in, out] size 000 SFTime [out] enter. Time SFTime [out] exit. Time SFRotation [out] orientation_changed SFVec 3 f [out] position_changed SFBool [out] is. Active. . . } à Permette di far iniziare (terminare) delle animazioni quando l’avatar si avvicina (allontana) ad un particolare oggetto à Permette di muovere un oggetto in modo da replicare il movimento dell’avatar (utile per la creazione di interfacce)

Esempio (1) • Animazione di un parallelepipedo in base alla vicinanza dell’avatar Proximity. Sensor enter. Time. Sensor Position. Interp. start. Time set_fraction_changed value_changed ·· · Transform scale ·· · exit. Time ·· · Time. Sensor Position. Interp. start. Time set_fraction_changed value_changed ·· · Shape ·· · Appearance ·· · Box ·· · Material ·· ·

Esempio (2) • Posizionamento di un oggetto in base alla posizione dell’avatar Proximity. Sensor Transform position_changed translation orientation_changed rotation ·· · La grandezza del sensore (campo size) deve essere tale da racchiudere tutta la scena virtuale Occorre disabilitare il rilevamento delle collisioni: <Collision collide=“false”>. . . </Collision> Sistema di coordinate locali corrispondente alla posizione dell’avatar Collision ·· · Transform ·· ·

Visibility. Sensor • Rileva quando un’area rappresentata da un parallelepipedo è visibile all’avatar Visibility. Sensor : X 3 DEnvironmental. Sensor. Node { SFBool [in, out] enabled TRUE SFVec 3 f [in, out] center 000 SFVec 3 f [in, out] size 000 SFTime [out] enter. Time SFTime [out] exit. Time. . . } à Permette di far iniziare (terminare) delle animazioni quando l’avatar può o meno vedere un particolare oggetto (utile per attirare l’attenzione dell’utente)