{"id":315,"date":"2016-01-08T07:07:45","date_gmt":"2016-01-08T07:07:45","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/?p=315"},"modified":"2016-01-08T07:09:47","modified_gmt":"2016-01-08T07:09:47","slug":"rubik-vr","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/2016\/01\/08\/rubik-vr\/","title":{"rendered":"Rubik VR"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/blog.jpg\" alt=\"\" \/><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=EG4O4N33Yow\">V\u00eddeo<\/a> &#8211; <a href=\"http:\/\/www.adrianriera.com\/rubikvr\">Aplicaci\u00f3n<\/a><\/p>\n<h2>Autor<\/h2>\n<p>Adri\u00e1n Termen\u00f3n Riera<\/p>\n<h2>Introducci\u00f3<\/h2>\n<p>Quan em vaig plantejar la tasca de fer una aplicaci\u00f3 de Realitat Virtual em van venir molt\u00edssimes idees al cap, per\u00f2 tenia clar que volia desenvolupar alguna cosa per Oculus . Aquesta decisi\u00f3, no nom\u00e9s es deu al fet que ja conte amb certa experi\u00e8ncia tant amb el dispositiu com amb Unity , sin\u00f3 tamb\u00e9 al fet que considero que els visors de realitat virtual , ja siguin d&#8217;escriptori o port\u00e0tils , actualment es troben en aquesta fina l\u00ednia temporal que separa la tecnologia que nom\u00e9s fan servir uns pocs de la que s&#8217;utilitza de manera manera massiva , tal com al seu dia ho van estar els smartphones . En definitiva crec que t\u00e9 futur .<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/visores.jpg\" alt=\"\" \/><\/p>\n<p><a href=\"http:\/\/www.oculus.com\">Oculus<\/a> &#8211; <a href=\"https:\/\/www.google.com\/get\/cardboard\">Google Cardboard<\/a><\/p>\n<p>No obstant, la idea de jugar al cub de Rubik pot semblar una mica avorrida , si es compara amb el que l&#8217;usuari mitj\u00e0 espera de la realitat virtual immersiva. \u00c9s a dir , experi\u00e8ncies trepidants i plenes d&#8217;adrenalina . Per\u00f2 opino que com m\u00e9s continguts hi hagi disponibles , m\u00e9s r\u00e0pid s&#8217;estendr\u00e0 aquesta tecnologia a la societat . Potser per aix\u00f2 i perqu\u00e8 fa bastant anys que s\u00f3c aficionat als cubs vaig prendre la decisi\u00f3 de portar aquest projecte endavant.<\/p>\n<p>&nbsp;<\/p>\n<h2>Proc\u00e9s de treball<\/h2>\n<h3>1. Modelar el cub<\/h3>\n<p>La primera etapa del projecte va consistir en el modelatge 3D del cub , per a aix\u00f2 vaig utilitzar el programari 3DS MAX 2014. Aix\u00f2 , va suposar innombrables avantatges respecte a l&#8217;entorn Java Script en el qual vaig desenvolupar <a href=\"http:\/\/www.adrianriera.com\/rubik\">la primera aplicaci\u00f3<\/a> degut, principalment, a les eines que ofereix la interf\u00edcie de treball de MAX.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap00.jpg\" alt=\"\" \/><br \/>\n<a href=\"http:\/\/www.autodesk.es\/products\/3ds-max\/overview\">Autodesk 3DS Max<\/a><\/p>\n<h3>2. Dissenyar la interacci\u00f3<\/h3>\n<p>Un cop modelat i texturitzat, el seg\u00fcent pas va ser dissenyar la interacci\u00f3 amb el cub en Unity 5. El primer que em vaig plantejar en abordar aquesta tasca \u00e9s que no volia limitar el gir del cub tal com vaig fer en <a href=\"http:\/\/www.adrianriera.com\/rubik\">la primera aplicaci\u00f3<\/a>. Despr\u00e9s de tot, una mica m\u00e9s d&#8217;un any d&#8217;experi\u00e8ncia amb Unity, m&#8217;ha perm\u00e8s familiaritzar-me amb la classe Vector3, la qual ofereix infinitat de m\u00e8todes enfocats a la transformaci\u00f3 d&#8217;objectes en un espai euclidi\u00e0, tal com \u00e9s l&#8217;entorn virtual en el qual es desenvolupa l&#8217;acci\u00f3.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/vector3.jpg\" alt=\"\" \/><br \/>\n<a href=\"https:\/\/unity3d.com\/es\/5\">Unity 5<\/a> &#8211; <a href=\"http:\/\/docs.unity3d.com\/Manual\/index.html\">Unity Manual<\/a><\/p>\n<p>Aix\u00ed doncs, en la primera aplicaci\u00f3 desenvolupada en Java Script , la galleda sempre romania orientat en la mateixa direcci\u00f3 , i era la c\u00e0mera la que rotava al voltant seu quan l&#8217;usuari desitjava girar-lo . Aix\u00f2 simplificava for\u00e7a el maneig de les diferents cares per\u00f2 , al mateix temps , suposava un problema. Calia escriure un codi espec\u00edfic pr\u00e0cticament per a cada pe\u00e7a i cada gir. \u00c9s a dir , si ara volgu\u00e9s fer una versi\u00f3 de la galleda de 4x4x4 o de 5x5x5 , hauria de reescriure pr\u00e0cticament la totalitat del codi. Per contra, en Unity i gr\u00e0cies a les seves eines vectorials he aconseguit que sigui el cub el que gira sobre si mateix mentre que la c\u00e0mera, \u00e9s a dir , el subjecte virtual , roman est\u00e0tic en la mateixa posici\u00f3.<\/p>\n<p>D&#8217;aquesta manera , el gui\u00f3 de la interacci\u00f3 per al maneig del cub \u00e9s el seg\u00fcent :<\/p>\n<p>1 &#8211; seleccionar la pe\u00e7a<\/p>\n<p>L&#8217;usuari fa clic sobre una pe\u00e7a , de manera que el programa guarda a la mem\u00f2ria la cara del cub en q\u00fcesti\u00f3 i el vector normal de la mateixa.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap01.jpg\" alt=\"\" \/><\/p>\n<p>2 &#8211; seleccionar el conjunt de peces<\/p>\n<p>L&#8217;usuari arrossega el cursor sobre el pla de la cara , de manera que es guarda un nou vector que permet al programa saber que conjunt de peces \u00e9s el que es desitja girar.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap02.jpg\" alt=\"\" \/><\/p>\n<p>3 &#8211; girar el conjunt de peces<\/p>\n<p>Un cop guardades les dades necess\u00e0ries , el programa calcula l&#8217;eix i angle de gir a partir del producte vectorial de la normal de la cara i la direcci\u00f3 del moviment del cursor sobre la mateixa.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap03.jpg\" alt=\"\" \/><\/p>\n<p>4 &#8211; finalitzar el gir<\/p>\n<p>Finalment. quan l&#8217;usuari deixa de pressionar el bot\u00f3 del ratol\u00ed el programa restaura la rotaci\u00f3 de la cara en funci\u00f3 de l&#8217;angle m\u00e9s pr\u00f2xim.<\/p>\n<p>A part de la interacci\u00f3 amb el cub est\u00e0 tamb\u00e9 la interacci\u00f3 amb la pr\u00f2pia aplicaci\u00f3, el gui\u00f3 \u00e9s molt senzill. Simplement es basa en els possibles estats en qu\u00e8 es troba el cub o el joc. D&#8217;una banda, si el cub est\u00e0 resolt o no i, d&#8217;altra banda, si el jugador est\u00e0 tractant de resoldre, o simplement aquesta jugant amb ell sense cap finalitat en concret.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/guion.jpg\" alt=\"\" \/><\/p>\n<h3>3. Dissenyar la interf\u00edcie l\u00f2gica<\/h3>\n<p>Arribat a aquest punt , el que volia evitar de totes totes que fa a la primera aplicaci\u00f3 \u00e9s que l&#8217;usuari realitz\u00e9s un gir no desitjat per error . Per a aix\u00f2, em vaig proposar delinear en tot moment els elements susceptibles de ser modificats. D&#8217;aquesta manera , el jugador disposa de la informaci\u00f3 visual necess\u00e0ria per saber amb exactitud que pe\u00e7a o conjunt de peces es disposa a girar.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap04.jpg\" alt=\"\" \/><\/p>\n<p>D&#8217;altra banda, em va semblar bona idea incloure una consola per poder mostrar informaci\u00f3 sobre l&#8217;estat de l&#8217;aplicaci\u00f3, \u00e9s a dir , si la galleda es aquesta desordenant , si el cron\u00f2metre est\u00e0 actiu o si el jugador ha aconseguit resoldre el cub .<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap09.jpg\" alt=\"\" \/><\/p>\n<p>Finalment , vaig afegir uns senzills controls per poder desordenar la galleda o resetejar-lo , con\u00e8ixer les dreceres del teclat , regular la il\u00b7luminaci\u00f3 de l&#8217;escena o la intensitat de la m\u00fasica o poder tancar l&#8217;aplicaci\u00f3 sense necessitat de llevar-se les Oculus .<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap05.jpg\" alt=\"\" \/><\/p>\n<h3>4. Adaptar la interf\u00edcie f\u00edsica<\/h3>\n<p>Per sort , aquesta part del desenvolupament no va suposar cap complicaci\u00f3 , en part pel fet que Unity ja t\u00e9 les opcions de Realitat Virtual i Visi\u00f3 Estereosc\u00f2pica que automatitzen completament els processos de mapejat entre el gir del visor, en aquest cas les Oculus DK2 , i el gir de la c\u00e0mera en l&#8217;escena.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/test.jpg\" alt=\"\" \/><\/p>\n<p>Una mica m\u00e9s complicada va ser la part de mapejar el moviment 2D del ratol\u00ed per adaptar-lo a l&#8217;entorn tridimensional de l&#8217;aplicaci\u00f3. Sobretot en determinades circumst\u00e0ncies en qu\u00e8 l&#8217;usuari havia despla\u00e7ar el cursor virtual al llarg d&#8217;un pla bastant perpendicular a la seva pr\u00f2pia visi\u00f3. Per\u00f2 finalment , no em vaig trobar amb cap problema que no pogu\u00e9s solucionar amb trigonometria b\u00e0sica.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/raton.jpg\" alt=\"\" \/><\/p>\n<h3>5. Dissenyar el concepte<\/h3>\n<p>Ja des del principi tenia bastant clar que l&#8217;entorn havia de ser el m\u00e9s neutre possible . Finalment i despr\u00e9s de fer diverses proves em decanti per integrar un pla a manera de s\u00f2l, que pogu\u00e9s il\u00b7luminar o enfosquir depenent de les prefer\u00e8ncies de l&#8217;usuari . Tamb\u00e9 vaig decidir afegir unes part\u00edcules molt t\u00e8nues situades al voltant de la zona d&#8217;acci\u00f3 , per augmentar la sensaci\u00f3 de profunditat de l&#8217;entorn i afavorir la sensaci\u00f3 de pres\u00e8ncia de l&#8217;usuari.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/cap06.jpg\" alt=\"\" \/><\/p>\n<p>Finalment , el so \u00e9s un factor molt important per potenciar aquesta mateixa sensaci\u00f3 de pres\u00e8ncia tan indispensable en una aplicaci\u00f3 de realitat virtual . De manera que vaig posar especial afecte en aquesta part , buscant una can\u00e7\u00f3 relaxant i gravant sons d&#8217;un cub real per posteriorment , tallar i incloure&#8217;ls de manera aleat\u00f2ria cada vegada que es dugu\u00e9s a terme un gir en l&#8217;aplicaci\u00f3.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/sonido.jpg\" alt=\"\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Dificultats<\/h2>\n<p>Probablement, la major dificultat que m&#8217;he trobat \u00e9s la manera en qu\u00e8 Unity executa el codi . \u00c9s a dir Mai us ha passat quan intenteu jugar a un videojoc molt antic en un ordinador nou que de sobte tot va tan r\u00e0pid que no hi ha forma de manejar ? Doncs si no aneu amb compte , \u00e9s molt probable que en Unity us passi el mateix. Aquest problema sorgeix principalment en utilitzar la funci\u00f3 Update ( ) que b\u00e0sicament \u00e9s cridada per l&#8217;aplicaci\u00f3 un cop per fotograma . \u00c9s ben sabut que, en funci\u00f3 de la pot\u00e8ncia de la targeta gr\u00e0fica o del processador , la quantitat de fotogrames que el joc mostra per segon pot variar entre 30 o 300, la qual cosa influeix s\u00ed o s\u00ed en la velocitat d&#8217;execuci\u00f3 del codi . Per aquest motiu , cal tenir especial cura en com s&#8217;escriuen les diferents instruccions , sobretot les que estan relacionades amb el moviment dels objectes virtuals .<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/dificultad1.jpg\" alt=\"\" \/><\/p>\n<p>Una altra dificultat que em vaig trobar a mig cam\u00ed de dissenyar la interacci\u00f3 amb el cub va ser que el programa havia de fer molt\u00edssims processos en molt poc temps per a calcular que conjunt de peces havien de ser afectades pel gir , el que esdevenia en qu\u00e8 el mateix l&#8217;usuari es trobava girant peces que haurien de quedar-se est\u00e0tiques. Per sort , aquest projecte m&#8217;ha servit per descobrir bastants trucs de com gestionar el temps d&#8217;execuci\u00f3 del codi en Unity , sense els quals , no hagu\u00e9s pogut acabar el desenvolupament de l&#8217;aplicaci\u00f3.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/dificultad2.jpg\" alt=\"\" \/><\/p>\n<p>Por \u00faltimo, est\u00e1 el tema de la escalabilidad. Como ya he comentado, la idea inicial era hacer un programa escalable que una vez terminado, me permitiese implementar el manejo de cubos de distintas dimensiones como el de 4 o el de 5 piezas. No obstante, cuando empec\u00e9 a dise\u00f1ar el c\u00f3digo encargado de detectar si el cubo esta resuelto me di cuenta de lo complicado que era hacer eso. Cada cubo, debido a su topolog\u00eda tiene sus particularidades, con lo que es realmente costoso hacer un c\u00f3digo escalable en ese sentido.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/dificultad3.jpg\" alt=\"\" \/><br \/>\nFinalment , hi ha el tema de l&#8217;escalabilitat . Com ja he comentat, la idea inicial era fer un programa escalable que un cop acabat, em permet\u00e9s implementar el maneig de cubs de diferents dimensions com el de 4 o el de 5 peces . No obstant aix\u00f2, quan vaig comen\u00e7ar a dissenyar el codi encarregat de detectar si la galleda aquesta resolt em vaig adonar del complicat que era fer aix\u00f2. Cada cub , per la seva topologia t\u00e9 les seves particularitats , de manera que \u00e9s realment cost\u00f3s fer un codi escalable en aquest sentit.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/dispositivos.jpg\" alt=\"\" \/><br \/>\n<a href=\"https:\/\/www.leapmotion.com\/\">Leap Motion<\/a> &#8211; <a href=\"https:\/\/www.myo.com\/\">MYO<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Impacte de l&#8217;aplicaci\u00f3<\/h2>\n<p>Realment no es que impacte pot arribar a tenir aquesta aplicaci\u00f3 . Com ja esmentava al principi, jugar al cub de Rubik , no \u00e9s precisament el que s&#8217;espera d&#8217;una experi\u00e8ncia de Realitat Virtual Immersiva , la qual cosa no treu que hi hagi molts aficionats tant del propi cub com de la Realitat Virtual que trobin interessant provar l&#8217;aplicaci\u00f3 . La veritat \u00e9s que buscant &#8221; Rubik Virtual Reality &#8221; a Google apareixen resultats que poc o gens tenen a veure amb aquest projecte , de manera que no descarto publicar l&#8217;aplicaci\u00f3 al web de Oculus , intentar difondre-la a trav\u00e9s de les xarxes socials o fins i tot redactar una nota de premsa i enviar-la a mitjans especialitzats en oci i tecnologia .<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/google.jpg\" alt=\"\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Usos no previstos<\/h2>\n<p>Quant als possibles Hacks o usos no esperats que puguin donar-se en el maneig de l&#8217;aplicaci\u00f3 nom\u00e9s contemplo que alg\u00fa pugui utilitzar-la \u00fanicament per escoltar el tema musical que per cert \u00e9s de lliure difusi\u00f3 i es distribueix a la plataforma Jamendo sota una llic\u00e8ncia Creative Commons BY NC SA . Tant el t\u00edtol de la can\u00e7\u00f3 com la seva autora apareixen en tot moment a la consola de la interf\u00edcie.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.adrianriera.com\/rubikvr\/img\/jamendo.jpg\" alt=\"\" \/><br \/>\n<a href=\"https:\/\/www.jamendo.com\/\">Jamendo<\/a> &#8211; <a href=\"https:\/\/www.jamendo.com\/track\/80704\/serakina\">Serakina<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Conclusi\u00f3<\/h2>\n<p>Com ja he comentat al principi, crec els visors de Realitat Virtual estan a la volta de la cantonada. Potser , perqu\u00e8 aquests esdevinguin un producte de consum massiu , encara \u00e9s necess\u00e0ria l&#8217;exist\u00e8ncia d&#8217;un contingut que sigui indispensable per als usuaris , com ara el va ser el Whats App en els smartphones . Per descomptat , Rubik VR no pret\u00e9n ni de lluny ser aquest tipus de contingut. Per\u00f2 no hi ha dubte , que com m\u00e9s opcions i experi\u00e8ncies puguem oferir als desenvolupadors, m\u00e9s a prop estarem d&#8217;iniciar d&#8217;una vegada per totes aquest nou i apassionant episodi en el m\u00f3n de la tecnologia , l&#8217;oci, i la multim\u00e8dia .<br \/>\nAdri\u00e1n Riera<br \/>\n12 de diciembre de 2015<\/p>","protected":false},"excerpt":{"rendered":"<p>V\u00eddeo &#8211; Aplicaci\u00f3n Autor Adri\u00e1n Termen\u00f3n Riera Introducci\u00f3 Quan em vaig plantejar la tasca de fer una aplicaci\u00f3 de Realitat Virtual em van venir molt\u00edssimes idees al cap, per\u00f2 tenia clar que volia desenvolupar alguna cosa per Oculus . Aquesta decisi\u00f3, no nom\u00e9s es deu al fet que ja conte amb certa experi\u00e8ncia tant amb &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/rv\/2016\/01\/08\/rubik-vr\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Rubik VR&#8221;<\/span><\/a><\/p>\n","protected":false},"author":82,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[98,70,96,52],"class_list":["post-315","post","type-post","status-publish","format-standard","hentry","category-estudiants","tag-cubo-de-rubik","tag-oculus-rift","tag-realidad-virtual-inmersiva","tag-unity","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":24,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"predecessor-version":[{"id":612,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/posts\/315\/revisions\/612"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/rv\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}