Spletno vizualizacijsko ogrodje z moznostjo oddaljenegasodelovanja

Primoz Lavric, Ciril Bohak, Matija MaroltUniverza v Ljubljani,

Fakulteta za racunalnistvo in informatikoprimoz.lavric@gmail.com,{ciril.bohak, matija.marolt}@fri.uni-lj.si

Web based visualisation framework withremote collaboration support

In this paper we present a web based visualization frame-work which primarily focuses on the visualization of med-ical 3D mesh and volumetric data. This framework of-fers visualization capabilities like 3D mesh rendering,scene navigation and indirect volume rendering via vol-ume to mesh conversion implemented with computation-ally efficient Marching cubes algorithm. As the volume tomesh conversion with Marching cubes presents one of themain functionalities of this framework, the performanceevaluation of four different implementations (Java, C++,Javascript and ASM.js) is presented. The framework alsoallows users to remotely collaborate by sharing their vi-sualisations with other users of this framework in realtime.

1 UvodZ razvojem novih tehnologij se v vsakdanje zivljenjevse bolj vkljucujejo 3D vizualizacije podatkov s stevilnihpodrocij, kot so na primer medicina, strojnistvo in ge-odezija. V medicini dobra in pravilna 3D vizualiza-cija zajetih podatkov v veliko primerih mocno pripo-more k dolocanju pravilne koncne diagnoze pacientov,saj omogoca natancnejsi vpogled v notranjost cloveskegatelesa in s tem zmanjsuje potrebo po invazivnejsih pose-gih. Volumetricni medicinski podatki so v vecini prime-rov zajeti s pomocjo tehnik volumetricnega skeniranja stehnikami racunske tomografije (angl. computed tomo-graphy - CT) [1, 2], slikanja s pomocjo magnetne reso-nance (angl. magnetic resonance imaging - MRI) [3] inultrazvoka (angl. ultrasound - US) [4]. Tako zajeti po-datki so vecinoma precej obsezni in posledicno njihovavizualizacija predstavlja svojevrsten izziv. V vecini pri-merov se izvaja na namenski, dovolj zmogljivi strojni inprogramski opremi. Taksna oprema je draga in stacio-narna ter zdravnikom ne omogoca podajanja diagnoze inpriprave na poseg na daljavo, kar otezuje pridobivanjedrugega mnenja ali mnenja specialista na oddaljeni lo-kaciji.

Nacine vizualizacije locimo na posredne in neposre-dne. Pri posrednem upodabljanju podatke vecinoma naj-prej pretvorimo v predstavitev s 3D mreznimi modeli[5, 6, 7], ki jih nato izrisemo [8]. Pri neposrednem upoda-bljanju podatke vizualiziramo brez predhodne pretvorbe.

Pri tem se uporabljajo tehnike volumetricnega upodablja-nja [9, 10] in njihove sodobne izpeljanke [11].

Za namene vizualizacije volumetricnih podatkov jebilo razvitih vec ogrodij in aplikacij. Exposure Renderer[12] in SimVascular1 sta namenjeni lokalni vizualizacijivolumetricnih podatkov in podpirata napredne osvetli-tvene tehnike. ParaView2 omogoca paralelno obravnavoin vizualiziranje obseznih podatkov z uporabo namenskihstreznikov. Predstavljena orodja ne podpirajo sirokeganabora platform in so omejena na uporabo na namiznihracunalnikih ali prenosnikih. ParaViewWeb 3 omogocauporabo preko spletnega brskalnika s pomocjo oddalje-nega upodabljanja, a je prav zato njena uporaba nekolikoomejena zaradi manjse odzivnosti. Predstavljeno orodjesicer deluje na veliko platformah, a enako kot prejsnja neomogoca oddaljenega sodelovanja med uporabniki.

V clanku predstavimo ogrodje Med3D, razvito z na-menom vizualizacije volumetricnih podatkov neposrednov spletnem brskalniku z moznostjo oddaljenega sodelova-nja med uporabniki. Ogrodje delno temelji na predhodnorazvitem ogrodju Neck Veins [13]. Spletna implementa-cija poveca doseg uporabnikov in omogoca uporabo tudina mobilnih napravah. Uporabniku omogoca lokalno ob-delavo in vizualizacijo podatkov v okviru zmoznosti na-prave, na kateri deluje, in s tem omogoca visoko stopnjointeraktivnosti. V primeru zahtevnejsih vizualizacij inslabsih uporabniskih naprav (mobilne naprave) ogrodjeomogoca izvajanje zahtevnejsih izracunov na strezniku,kar lahko zajema zgolj obdelavo ali pretvorbo podatkovali celostno oddaljeno upodabljanje. Oddaljeno sodelo-vanje obsega moznost deljenja pogleda z oddaljenim upo-rabnikom in s tem njegov vpogled v dejansko stanje pa-cienta.

V drugem poglavju predstavimo razvito vizualizacij-sko ogrodje. V tretjem poglavju podamo ovrednotenjeogrodja, performancno analizo in primerjavo z drugimiimplementacijami. V cetrtem poglavju predstavimo im-plementacijo oddaljenega sodelovanja med uporabniki.V zadnjem poglavju podamo zakljucke in smernice zamozne razsiritve ogrodja.

1http://simvascular.github.io/2http://www.paraview.org/overview/3http://paraviewweb.kitware.com/

2 Vizualizacijsko ogrodjeOgrodje smo razvili kot spletno aplikacijo, povezano zzalednim delom ogrodja na strezniku. Ogrodje omogocaodpiranje in vizualizacijo podatkov v obliki poligonskemreze ter vizualizacijo volumetricnih podatkov, pred-stavljenih s tridimenzionalnimi skalarnimi polji, ki jihogrodje pretvori v mrezo poligonov. Pretvorbo izvede zalgoritmom Marching cubes [5], izris pa poteka strojnopospeseno z uporabo graficne knjiznice WebGL. Ogrodjeomogoca navigiranje po prostoru s tipkovnico in miskoali z uporabo graficnega vmesnika.

2.1 Vizualizacijsko ogrodje na spletuRazvoja v obliki spletne aplikacije smo se lotili, ker jespletna platforma najbolj razsirjena in dostopna tako naosebnih racunalnikih kot mobilnih napravah. Vizualiza-cijsko ogrodje je primarno namenjeno vizualizaciji 3Dmedicinskih podatkov, lahko pa prikazuje tudi ostale 3Dpodatke tako v obliki poligonske mreze kot tudi volume-tricne podatke, ki jih pretvori v poligonsko mrezo. Sple-tna platforma omogoca boljso dostopnost aplikacije cimsirsemu krogu uporabnikov ter poenostavi moznost upo-rabe oddaljenega upodabljanja in oddaljenega sodelova-nja med uporabniki. Na sliki 1 je prikazan vmesnik razvi-tega ogrodja, oblikovan z namenom uporabe na razlicnihnapravah z razlicnimi zaslonskimi locljivostmi.

Slika 1: Slika prikazuje uporabniski vmesnik ogrodja Med3D.

2.2 Pretvorba volumetricnih podatkov v mrezni mo-del

Vecina neobdelanih volumetricnih medicinskih podatkovje podana v obliki tridimenzionalnega skalarnega po-lja. Kot smo omenili ze v uvodu, se za upodablja-nje taksnih podatkov uporabljajo neposredne in posre-dne tehnike upodabljanja. Zaradi zelje po hitrejsem inracunsko manj zahtevnem upodabljanju, kot tudi zaradizelje po hitrejsem prenosu podatkov do uporabnikov, senajpogosteje uporablja pretvorba volumetricnih podatkovv mrezni model.

Za namen pretvorbe podatkov iz volumetricne oblikev mrezni model smo v ogrodju implementirali metodoMarching cubes. Za pretvorbo obstajajo tudi sodob-nejse metode [14], a smo se za uporabo Marching cu-bes odlocili zaradi relativno nizke casovne in prostor-ske zahtevnosti in moznosti visoke stopnje paralelizacije

[15]. To je pomembno zaradi dejstva, da se lahko algo-ritem poganja tudi v spletnem brskalniku na strani upo-rabnika, ki ponuja omejen dostop do sistemskih virov, seposebej pomnilnika. Pretvorba volumetricnih podatkovje pomembna tudi zaradi oddaljenega sodelovanja, saj jevelikost poligonske mreze precej manjsa od tridimenzio-nalnega skalarnega polja in posledicno omogoca hitrejsosinhronizacijo podatkov med uporabniki.

Pri implementaciji algoritma Marching cubes smo te-stirali hitrostno ucinkovitost stirih implementacij. Zaogrodje sta pomembni implementaciji v programskem je-ziku Javascript in njegovo podmnozico ASM.js4. ASM.jspredstavlja nizkonivojsko podmnozico programskega je-zika Javascript in dosega visoke pohitritve v primerjavi zosnovnimi implementacijami. Ti implementaciji sta po-membnejsi zaradi moznosti njune uporabe tako v sple-tnem brskalniku, kot tudi na strezniku zalednega dela sis-tema. Implementacija zalednega dela sistema temelji nauporabi ogrodja Node.js5. Poleg omenjenih implemen-tacij, ki temeljita na jeziku Javascipt, smo za primerjavopri performancni analizi dodali tudi implementaciji v pro-gramskih jezikih C++ in Java. Rezultat pretvorbe volu-metricnih podatkov z uporabo algoritma Marching cubesje prikazan na sliki 2.

Slika 2: Slika prikazuje rezultat Marching cubes algoritma, iz-vedenega nad tridimenzionalnim skalarnim poljem Utah teapotobjekta.

Implementaciji algoritma Marching cubes v program-skem jeziku Javascript sta realizirani z uporabo apli-kacijskega vmesnika Web Workers6, ki omogoca asin-hrono in paralelno izvajanje algoritma v brskalniku in nastrezniku. Aplikacijski vmesnik pri tem izkorisca paralel-nost centralne procesne enote in za vsako nit sprozi lastnoopravilo. Komunikacija s posameznim opravilom, ki seizvaja preko vmesnika Web Workers, poteka preko stan-dardiziranega dogodkovno vodenega sporocilnega sis-tema. Poleg prenasanja sporocil med kopijami objek-tov omogoca tudi prenos objektov s prenosom njihovegalastnistva. Posledicno velikih objektov (skalarno polje)

4http://asmjs.org/5https://nodejs.org/en/6https://www.w3.org/TR/workers/

ni potrebno podvajati, ampak se na posamezno opravilovmesnika Web Workers prenese zgolj njihovo lastnistvo.S tem se izognemo dodatnemu delu in povecani porabipomnilnika, do katere pride v primeru podvajanja objek-tov. Pomanjkanje pomnilnika lahko zaradi omejitev br-skalnikov povzroci neodzivnost in nepredvideno prekini-tev izvajanja.

Zaradi pocasnejsega delovanja algoritma Marchingcubes, implementiranega v programskem jeziku Java-script, kjer lahko pretvorba velikih skalarnih polj vmrezni model traja tudi vec kot minuto, smo se odlociliza uporabo programske knjiznice ASM.js. Programskaknjiznica ASM.js dosega do desetkratno pohitritev izva-janja. Taksne pohitritve dosega zaradi uporabe preva-jalnika AOT (angl. ahead-of-time), ki prevede in opti-mizira programsko kodo ob zagonu spletne aplikacije.Posledicno se je potrebno odpovedati dinamicnosti pro-gramskega jezika Javascript in uporabiti zapis v oblikiSSA (angl. static single assignment form). Zaradineprakticnosti taksnega zapisa se za generiranje pro-gramske kode ASM.js uporablja namenske prevajalnike.Le-ti ustrezno programsko kodo generirajo iz drugeganizjenivojskega programskega jezika npr. C, C++. Vnasem primeru smo za osnovo uporabili programskokodo zapisano v programskem jeziku C++ in jo preve-dli v obliko, primerno za uporabo s programsko knjiznicoASM.js, z uporabo prevajalnika Cheerp7.

Glavni povod za izbiro prevajalnika Cheerp je po-mnilniska organizacija, uporabljena v prevedeni pro-gramski kodi. Prevedena koda uporablja osnovno Java-script pomnilnisko organizacijo, zato podatkov pred ob-delavo ni potrebno dodatno pretvarjati oz. prenasati. Toje bistvena prednost pred uporabo nekaterih drugih preva-jalnikov, npr. prevajalnika Emscripten8, ki uporablja la-stno pomnilnisko organizacijo, emulirano na pomnilniskiorganizaciji Javascripta.

3 Performancno ovrednotenjeDel nasega dela predstavlja tudi performancna analizapretvorbe volumetricnih podatkov v mrezne modele z al-goritmom Marching cubes. V preformancno analizo smovkljucili stiri zgoraj opisane implementacije: Java, C++,Javascript in ASM.js. Testirali smo jih na sistemu z In-tel i7 6700K (4.2 GHZ) stirijedernim procesorem, 16 GBpomnilnika in operacijskim sistemom Windows 10. Sple-tni implementaciji Javascript in ASM.js smo testirali v64-bitnemu brskalniku Chrome9 (razlicica 51). Kot vho-dne podatke smo uporabili enakostranicne volumne v trehrazseznostih (1283, 2563 in 5123), generirane z enacboenodelnega hiperboloida volxyz = x2 + y2 − z2 − 25, inrealni primer vratnih zil, velikosti 512× 512× 390. Re-alni primer smo testirali s tremi vrednostmi praga: nizko,srednjo in visoko, pri katerih dobimo mrezne modele spriblizno 6, 1 in 0,25 milijona trikotnikov. Vse ome-njene implementacije omogocajo tudi izkoriscanje vzpo-rednega izvajanja, zato smo poleg zaporednega testa v eni

7http://leaningtech.com/cheerp/8https://github.com/kripken/emscripten9https://www.google.com/chrome/

niti hitrost izmerili tudi pri uporabi dveh in stirih niti.Vsaka konfiguracaija je bila ovrednotena s povprecnimrezultatom desetih iteracij. Dobljen povprecni rezultat pasmo ustrezno zaokrozili glede na standardni odklon.

Implementacije, ki omogocajo prevajalnisko optimi-zacijo (C++, ASM.js), so bile za testiranje prevedenez optimizacijo za cim hitrejse izvajanje. Poleg C++ inASM.js pa tudi Java omogoca optimizacije, vendar selemed izvajanjem. Te realizira s pomocjo sprotnega pre-vajalnika, ki pogosto izvedeno vmesno kodo prevede vdomorodno obliko. Zaradi tega smo pri testiranju imple-mentacije v Javi to najprej ”ogreli”, tako da smo predmerjenjem casa izvedli dve iteraciji algoritma, ki nistabili upostevani v rezultatih.

Rezultati ovrednotenja so prikazani v tabeli 1. Kotbi pricakovali, je iz rezultatov razvidno, da je v vseh pri-merih najhitrejsa implementacija v programskem jezikuC++. Pri umetno generiranih podatkih se ji pri vecjih ve-likostih povsem pribliza implementacija v programskemjeziku Java. Kljub temu, da se omenjenima implemen-tacijama pricakovano ne pribliza nobena implementacijav programskem jeziku Javascript, je iz rezultatov razvi-dno, da je uporaba programske knjiznice ASM.js smi-selna, saj doseze na umetno generiranih podatkih tudi veckot osemkratno pohitritev, na izbranem primeru realnihpodatkov pa do 1,5-kratno pohitritev izvajanja.

4 Oddaljeno sodelovanjePri vizualizaciji podatkov se velikokrat pojavi potreba podelitvi in skupni interpretaciji vizualizacij z oddaljenimiosebami. Na primeru medicine to pogosto pomeni pri-dobivanje mnenja oddaljenih specialistov. Delitev po-datkov, lokalno vizualiziranje ter interpretacija so pogo-sto precej neucinkoviti tako z vidika casovne potratnostikot tudi z vidika prenosa informacij med uporabniki. Taproblem smo v predstavljanem vizualizacijskem ogrodjuresili z implementacijo oddaljenega sodelovanja.

Implementacija oddaljenega sodelovanja omogocadelitev vizualiziranih podatkov in realnocasovno sinhro-niziranje prikaza podatkov (scene) in pogleda kameremed uporabniki. Ti uporabniki lahko z ustreznimi do-voljenji tudi prevzamejo nadzor nad kamero in podatki.Tako implementirano sodelovanje omogoca bistveno hi-trejso interpretacijo vizualizacije podatkov in prenos in-formacij ter znanja med uporabniki.

4.1 Sinhronizacija scene med uporabnikiKo uporabnik vzpostavi zeleno sceno, lahko ta pri-kaz pricne deliti z ostalimi uporabniki vizualizacijskegaogrodja. Ob inicializaciji se scena in njeno trenutno sta-nje zapise v obliki formata JSON in se preko protokolaWebSocket prenese na streznik. Preko streznika potekatudi vsa nadaljnja komunikacija. Streznik ob prejemuscene ustvari novo sejo, v katero se lahko preko protokolaWebSocket vclanijo uporabniki vizualizacijskega ogrodjain tako pridobijo sceno ter zacnejo prejemati njene na-daljnje posodobitve. Ko gostitelj seje svojo sceno sinhro-nizira s streznikom, lahko zacne posiljati posodobitve vobliki sprememb deljenih parametrov objektov v sceni.

Tabela 1: Rezultati performancne analize izvajanja algoritma Marching cubes na razlicnih podatkih pri razlicnih stopnjah vzpore-dnega racunanja.

Generirani podatki Volumen vratnih zilVol. Size C++ Java Javascript ASM.js Prag C++ Java Javascript ASM.js

1 nit 1 nit1283 0,02 s 0,03 s 0,66 s 0,16 s Nizek 0,80 s 1,50 s 22,20 s 15,30 s2563 0,11 s 0,21 s 4,85 s 0,98 s Srednji 0,57 s 0,91 s 20,70 s 15,20 s5123 0,79 s 1,32 s 38,00 s 4,63 s Visok 0,52 s 0,85 s 20,20 s 15,10 s

2 niti 2 niti1283 0,01 s 0,03 s 0,38 s 0,11s Nizek 0,47 s 0,70 s 12,30 s 8,90 s2563 0,06 s 0,09 s 2,70 s 0,61s Srednji 0,30 s 0,46 s 11,50 s 8,70 s5123 0,41 s 0,76 s 21,80 s 3,95s Visok 0,28 s 0,44 s 11,20 s 8,70 s

4 niti 4 niti1283 0,01 s 0,01 s 0,26 s 0,08 s Nizek 0,34 s 0,42 s 8,70 s 5,80 s2563 0,04 s 0,05 s 1,60 s 0,42 s Srednji 0,19 s 0,29 s 7,50 s 5,80 s5123 0,27 s 0,47 s 12,50 s 2,42 s Visok 0,17 s 0,26 s 7,40 s 5,50 s

Tako lahko uporabnik prenese spremembe transformacijobjektov, spremembe geometrije in druge podatke. Mi-nimalni cas med posodobitvami se nastavi dinamicno inga je mogoce prilagajati glede na kvaliteto povezave medgostiteljem in streznikom. Prejeto sceno streznik lokalnoshrani in jo posodablja s posodobitvami gostitelja seje.S tem gostitelja seje razbremenimo razposiljanja celotnescene novim udelezencem, saj lahko novi udelezenec pri-dobi trenutno sceno in njeno zadnje stanje neposredno izstreznika.

Slika 3: Slika prikazuje shemo komunikacije pri oddaljenemsodelovanju. Levo zgoraj je gostitelj seje, ki deli sceno z osta-limi uporabniki spletne aplikacije. Gostitelj je na shemi zesinhroniziral sceno s streznikom (spodaj desno) in mu posre-duje posodobitev deljene scene, katero streznik razposlje vsemnarocnikom in posodobi svojo lokalno kopijo scene. Zgoraj nasredini je prikazan udelezenec seje, ki je ze prenesel sceno izstreznika in sedaj prejema posodobitve gostitelja. Desno zgorajpa je nov udelezenec seje, ki iz streznika prenasa zadnjo verzijoscene.

Shema komunikacije pri oddaljenem sodelovanju jeprikazana na sliki 3, kjer je prikazano, kako poteka sin-hronizacija scene med dvema povezanima uporabnikomana primeru spremembe orientacije kamere in potek pri-klopa novega uporabnika, ki prejme celoten opis scene.

Taksna implementacija oddaljenega sodelovanjaomogoca zelo odzivno interakcijo z objekti v sceni inponuja enak vpogled v podatke vec uporabnikom ogrodjasocasno.

5 Zakljucek in nadaljnje deloV tem delu smo predstavili spletno vizualizacijskoogrodje, razvito z namenom sirse dostopnosti vizuali-zacije 3D medicinskih in volumetricnih podatkov ter zmoznostjo oddaljenega sodelovanja med uporabniki. Vdelu smo predstavili tudi performancno analizo algoritmaMarching cubes, ki ga uporabljamo pri pretvorbi volume-tricnih podatkov. V prihodnosti nameravamo v ogrodjedodati naprednejse algoritme za pretvorbo v mrezni mo-del in vgraditi tako podporo za neposredno upodabljanjevolumetricnih podatkov kot tudi oddaljeno upodabljanjena strani streznika. Kot je v delu omenjeno, zelimo zogrodjem podpreti tudi performancno manj zmogljive na-prave in omogociti racunsko zelo kompleksne vizualiza-cije s pomocjo oddaljenega upodabljanja.

Literatura[1] C. R. Crawford and K. F. King, “Computed tomography

scanning with simultaneous patient translation,” MedicalPhysics, no. 17, pp. 967 – 982, 1990.

[2] W. A. Kalender, W. Seissler, E. Klotz, and P. Vock, “Spi-ral volumetric CT with single-breath-hold technique, con-tinuous transport and continuous scanner rotation,” Radi-ology, no. 176, pp. 181 – 183, 1990.

[3] P. A. Rinck, Magnetic Resonance in Medicine. The BasicTextbook of the European Magnetic Resonance Forum. 9thedition. TRTF, 2016, vol. 9.1, e-Version.

[4] D. Krakow, J. Williams, M. Poehl, D. L. Rimoin,and L. D. Platt, “Use of three-dimensional ultrasoundimaging in the diagnosis of prenatal-onset skeletaldysplasias,” Ultrasound in Obstetrics and Gynecology,

vol. 21, no. 5, pp. 467–472, 2003. [Online]. Available:http://dx.doi.org/10.1002/uog.111

[5] W. E. Lorensen and H. E. Cline, “Marching cubes: Ahigh resolution 3d surface construction algorithm,” SI-GGRAPH Comput. Graph., vol. 21, no. 4, pp. 163–169,Aug. 1987.

[6] D. Lesage, E. D. Angelini, I. Bloch, and G. Funka-Lea,“A review of 3d vessel lumen segmentation techniques:Models, features and extraction schemes,” Medical ImageAnalysis, vol. 13, no. 6, pp. 819 – 845, 2009.

[7] M. T. Dehkordi, S. Sadri, and A. Doosthoseini, “A reviewof coronary vessel segmentation algorithms.” J Med Si-gnals Sens, vol. 1, no. 1, pp. 49–54, 2011.

[8] W. J. Bouknight, “A procedure for generation of three-dimensional half-toned computer graphics presentations,”Commun. ACM, vol. 13, no. 9, pp. 527–536, Sep. 1970.

[9] R. A. Drebin, L. Carpenter, and P. Hanrahan, “Volumerendering,” SIGGRAPH Comput. Graph., vol. 22, no. 4,pp. 65–74, Jun. 1988.

[10] M. Levoy, “Display of surfaces from volume data,” Com-puter Graphics and Applications, IEEE, vol. 8, no. 3, pp.29–37, 1988.

[11] E. P. Lafortune and Y. D. Willems, “Bi-directional pathtracing,” in Proceedings if Third International Conferenceon Computational Graphics and Visualization Techiques(COMPUGRAPHICS ’93, 1993, pp. 145–153.

[12] T. Kroes, F. H. Post, and C. P. Botha, “Exposure ren-der: An interactive photo-realistic volume rendering fra-mework,” PLoS ONE, vol. 7, no. 7, pp. 1–10, Jul. 2012.

[13] C. Bohak, S. Zagar, A. Sodja, P. Skrlj, U. Mitrovic,F. Pernus, and M. Marolt, “Neck veins: an interactive3D visualization of head veins,” in Proceedings of the 4thInternational Conference World Usability Day Slovenia2013, 25 Nov, Ljubljana, Slovenia, E. Stojmenova (Ed.),2013, pp. 64–66.

[14] Y. Ohtake, A. Belyaev, M. Alexa, G. Turk, and H.-P. Sei-del, “Multi-level partition of unity implicits,” ACM Trans.Graph., vol. 22, no. 3, pp. 463–470, Jul. 2003.

[15] C. Bohak, A. Sodja, M. Marolt, U. Mitrovic, andF. Pernus, “Fast segmentation, conversion and renderingof volumetric data using gpu,” in IWSSIP 2014 Procee-dings, May 2014, pp. 239–242.