PAC 1. Introducció al 3D en Javascript.

La feina a realitzar consistia en analitzar i modificar els exemples de la pàgina http://www.johannes-raida.de/tutorials.htm. Una bona introducció per anar provant una mica i perdre la por.

http://graumultimedia.com/treballs/mfm/pac1/exemple_1.html

Es converteixen el triangle i quadrat blancs en una figura en forma de casa amb una finestra amb forma de “smiley”. He canviat el color de fons a gris fosc, la distància focal de la càmera i la seva distància en l’eix z (allunyant-nos dels objectes). Del triangle he canviat la posició relativa dels vertexs, i dels dos objectes he canviat el seu color i posició. Finalment, he afegit una figura provinent de http://threejs.org/examples/#webgl_geometry_shapes creada amb cercles i corbes.

http://graumultimedia.com/treballs/mfm/pac1/exemple_2.html

Els colors assignats als vértexs van canviant de forma cíclica. Després de crear dues variables globals (t i s) per controlar l’animació, i declarar com globals les geometries dels dos objectes i unes instàncies de colors, he substituït la trucada a la funció renderScene() per una trucada a animateScene, que incorpora els elements necessaris. Assignem els colors als vértexs tenint especial cura en el cas del quadrat. Per animar els canvis de color es fa servir el sinus d’un contador que es va autoincrementant, aplicant un “offset” a cada color.

http://graumultimedia.com/treballs/mfm/pac1/exemple_3.html

En aquest exemple he canviat la rotació automàtica dels objectes sobre sí mateixos per una rotació conjunta dels dos objectes agrupats, fent servir Object3D, sobre l’origen de coordenades. Després de desplaçar els objectes a les seves posicions relatives dins l’objecte “pare”, s’afegeixen a l’objecte en lloc de a l’escena. Finalment, l’objecte pare és el que s’afegeix a l’escena. Els objectes mantenen les seves rotacions individuals, a les que he realitzat un canvi en els eixos, mentre realitzen un moviment conjunt.

http://graumultimedia.com/treballs/mfm/pac1/exemple_4.html

Per realitzar la modificació d’aquest exemple he canviat els colors dels vértexs de la piràmide, alterant també la seva posició relativa. També he desplaçat la posició de la piràmide i la seva rotació, abans de afegir-la al seu objecte pare. També he escalat l’objecte, allargant-lo en l’eix “y”, modificat posteriorment la seva posició fins l’eix de coordenades i, finalment, l’he afegit a “casa”. Per afegir una mica de varietat, he provat d’afegir una línia. Es crea la geometria, s’introdueixen els vértexs i es defineix la línia amb la geometria anterior. En aquest cas, només l’objecte pare realitza una rotació automàtica.

http://graumultimedia.com/treballs/mfm/pac1/exemple_5.html

Aquest exemple es basa en els següents aspectes: l’ús d’ombres mitjançant la tècnica del shadowMap que es projecten sobre un pla horitzonal amb textura repetida i escalada, un llum spotLight i
un llum ambientLight, l’ús de textures difuses, de normals i especulars en tots els objectes i la modificació de les propietats adients, com bumpScale, shininess, etc.

http://graumultimedia.com/treballs/mfm/pac1/exemple_6.html

Després d’afegir la llibreria OrbitControls.js, que ens proporciona una completa funcionalitat per controlar el moviment de la càmera amb el ratolí, he substituït les característiques d’animació existents i he creat dos llums (un d’ambient i un direccional) que canvien de color aleatòriament en prémer la tecla ´R´.

http://graumultimedia.com/treballs/mfm/pac1/exemple_7.html

En aquest exemple, he procedit a crear un cub addicional dins el cub principal, que alhora presenta una rotació oposada a la del cub que el conté. Això dóna lloc a certes paradoxes visuals degudes a la manera en què el nostre cervell interpreta la perspectiva en observar una imatge en 2D que representa una escena 3D. La tecla ´B´ens permet alternar si és el cub principal o l’interior el que és transparent. S’ha de tenir cura a assignar correctament els mètodes de depthWrite, transparent i opacity del material per visualitzar totes les cares dels cubs correctament.

http://graumultimedia.com/treballs/mfm/pac1/exemple_8.html

En la darrera modificació dels tutorials, he optat per canviar l’algorisme que realitza l’animació. En primer lloc, he canviat la textura d’estrella per una d’un sprite de videojocs i n’he reduït la seva mida. Posteriorment, a cada un dels elements de l’array star li he assignat un angle de rotació inicial i un color aleatoris. L’animació consisteix en situar els elements de l’array en cercle fent servir el sinus i el cosinus d’un contador. També la distància al centre varia en funció d’una relació trigonomètrica. Finalment, cada sprite continua amb la seva pròpia rotació i mentre que la càmera també presenta la seva rotació en l’eix z.

amengual_gomila_pac1

Leave a Reply