Webgebaseerde visualisatie van ultrasound-afbeeldingen

(1)

Bachelor Informatica

Webgebaseerde visualisatie van

ultrasound afbeeldingen

Ralph Erkamps

June 12, 2020

Inf

orma

tica

—

Universiteit

v

an

Ams

terd

am

(2)

(3)

Abstract

Recente verbeteringen in webgebaseerde computergraphics bieden nieuwe mogelijkheden op het gebied van embryologisch onderwijs. Door toepassing van volume raycasting in WebGL is het nu mogelijk geworden om ultrasound-volumes interactief te visualiseren in webbrowsers. Het is waardevol voor echoscopisten om doorsnijdingen van deze ultrasound-volumes te kun-nen bestuderen. Hiervoor wordt gebruik gemaakt van een clipping-plane. We implementeren een CPU en een GPU gebaseerde clipping-plane oplossing en vergelijken de rendertijden van

deze implementaties. Bij de CPU implementatie observeren we een exponenti¨ele toename

van rendertijd wanneer het volume qua omvang toeneemt. Het gevolg hiervan is dat real-time interactie bij grotere volumes niet meer mogelijk is. Dit maakt deze implementatie ongeschikt voor het bestuderen van ultrasound-volumes. De GPU implementatie vertoont een lineaire toename qua rendertijd bij vergroting van de volumes. De rendertijd van de GPU implementatie is hierdoor laag genoeg om ook grotere volumes en dus ultrasound-volumes interactief te kunnen visualiseren.

(4)

(5)

Introductie

Het gebruik van computergraphics voor visualisatie van data ten behoeve van geneeskunde on-derwijs is een groeiende trend [24]. Visualisatie maakt het mogelijk om een dieper inzicht en een beter begrip van de onderliggende data te verkrijgen [5]. Voorbeelden van computergraphics in het medische onderwijs zijn, interactieve anatomische modellen, virtual reality simulaties van operaties en educatieve animaties [2] [24]. Daarnaast zijn digitale atlassen, die 3D modellen digitaal weergeven, een groeiende trend [1] [24] [20]. Het gebruik van computergraphics heeft verschillende voordelen. In tegenstelling tot fysieke modellen hoeft een digitaal model maar één keer geconstrueerd te worden en kan dan makkelijk digitaal gedeeld worden. Door medische operaties te simuleren kan ervaring opgedaan worden zonder dat patiënten gevaar lopen [24]. Ook bij gebrek aan patiënten kunnen digitale middelen gebruikt worden om medische studenten tot op zekere hoogte praktijkervaring op te laten doen. Ondanks een toename in gebruik, zijn er nog veel gebieden waar de voordelen van computergraphics niet volledig benut worden.

Embryologie is een vakgebied waar deze digitale middelen goed toegepast kunnen worden. On-derwijs over menselijke embryologie is van belang doordat geboorte-afwijkingen de voornaam-ste oorzaak van kindervoornaam-sterfte zijn in de leeftijdsgroep onder 1 jaar [13]. Met echoscopie, een veelgebruikte visualisatietechniek binnen de geneeskunde, kunnen deze afwijking opgespoord en vroegtijdig verholpen worden. De ervaring van een echoscopist speelt een beduidende rol voor het detecteren van deze afwijkingen [13]. Bij de afdeling Embryologie van het UMC (afdeling AMC) wordt gewerkt aan de constructie van een bibliotheek van ultrasound-scans van afwijkende em-bryonale ontwikkeling. Een applicatie die deze scans voor gebruikers inzichtelijk maakt zodat zij voorbeelden uit de praktijk kunnen bestuderen, zou kunnen helpen met het opdoen van ervaring. De mogelijkheid om ultrasound-data te bestuderen door de data zo te presenteren dat de orig-inele klinische afbeeldingen kunnen worden weergegeven, stelt beginnende echoscopisten in staat om ook buiten de praktijk ervaring op te doen. Ook stelt het studenten in staat om in aan-raking te komen met verschillende medische situaties die in de praktijk niet vaak voorkomen. Daarnaast merken studenten dat 3D visualisatietechnieken helpen bij het verkrijgen van betere spati¨ele kennis [28]. Door studenten de mogelijkheid te bieden om op laagdrempelige wijze hun vaardigheden te verbeteren en theoretische kennis toe te passen, kunnen zij zich beter voorberei-den op de praktijk [7].

In deze scriptie doen we onderzoek naar het visualiseren van ultrasound-data met behulp van web-technologie. Door middel van een webgebaseerde visualisatie-applicatie bieden we een laag-drempelige oplossing voor embryologische educatie die echoscopisten in staat stelt om op een toegankelijke manier meer ervaring op te doen.

(8)

(9)

CHAPTER 2

Achtergrond

In dit hoofdstuk bespreken we de huidige staat van het onderwijs dat de ontwikkeling van het menselijke embryo behandelt. Daarnaast bespreken we de ontwikkelingen van webgebaseerde graphics toepassingen.

2.1 Menselijke embryologie

2.1.1 De huidige staat van onderwijs in menselijke embryologie

De prevalentie van geboorte-afwijkingen nadert 3% en is verantwoordelijk voor ongeveer 21% van de sterfgevallen onder pasgeborenen [13]. De studie van het menselijk embryo speelt een belangrijke rol in het voorkomen van deze sterfte. Onderwijs over embryologie is echter moeilijk. Dit komt mede doordat studenten moeite hebben met het doorgronden van de vele veranderin-gen die een embryo doormaakt tijdens de ontwikkeling [13]. Daarnaast is het belangrijk voor het bestuderen van de anatomie dat er beschikking is over hoge kwaliteit modellen [2]. Doordat embryologie een ethisch gevoelig onderwerp is, zijn weinig fysieke modellen beschikbaar. Verder is ook de degradatie van kwaliteit van verouderende fysieke modellen een bijkomend probleem. Uit een vragenlijst bleek dat het merendeel van de studenten Psychobiologie aan de Univer-siteit van Amsterdam moeite hadden met het visualiseren van de anatomie van embryo’s [8]. Studenten merkten op dat alleen 2D modellen beschikbaar waren hetgeen visualisatie moeilijk maakte. Niet alleen studenten ervaren een gebrek aan educatieve middelen. Ook echoscopisten hebben aangegeven dat zij niet altijd makkelijk toegang hebben tot mogelijkheden om te oefenen [21].

2.1.2 Het formaat van medische data

Het is gebruikelijk om medische data volgens de DICOM (Digital Imaging and Communications in Medicine) standaard op te slaan [9]. Ook binnen de embryologie wordt dit dataformaat gebruikt. Ultrasound-data wordt in dit formaat opgeslagen als een opeenvolgende reeks afbeeldingen. In figuur 2.1 wordt een reconstructie van een 3D volume uit ultrasound-afbeeldingen getoond. Deze ultrasound-volumes zijn interessant voor echoscopisten om te bestuderen omdat ze veel informatie bevatten over de anatomie van embryo’s. De standaard rendertechnieken voor opper-vlaktemodellen zijn echter niet geschikt voor het renderen van deze volumetrische data. Hiervoor zijn speciale algoritmen nodig die een volume direct kunnen renderen [4]. Dit maakt het renderen van deze medische data op het web een uitdaging.

(10)

Figure 2.1: Reconstructie van een volume aan de hand van ultrasound-afbeeldingen [29]

2.2 Ontwikkeling van webgebaseerde visualisatie

Visualisatie via het internet is een belangrijk onderzoeksgebied [14]. Door de opkomst van het gebruik van visualisatietechnieken in de medische wereld, social media en het bedrijfsleven, is de belangstelling hiervoor verder toegenomen [14]. Met name webgebaseerde visualisatie is een gebied waarvoor veel belangstelling is. Dit komt doordat visualisatie via het internet een groot aantal voordelen heeft [3] [14].

Webgebaseerde visualisatie-toepassingen kunnen vanuit een centrale server beschikbaar gesteld worden. Ook stelt het gebruikers in staat om altijd toegang te hebben tot de meest recente versie van de toepassing. Dit is namelijk een kwestie van het herladen van de webpagina [14]. Een ander voordeel is dat gebruikers geen software hoeven te installeren om de toepassing te kunnen gebruiken [26]. Het enige dat een gebruiker nodig heeft is een webbrowser. Doordat webbrowsers vandaag de dag op bijna alle computerapparatuur beschikbaar zijn, is het mogelijk voor gebruikers om overal toegang te krijgen tot de visualisatiemiddelen zolang ze een internet-connectie hebben [14].

Historisch gezien werd van webgebaseerde visualisatie afgezien door limiteringen van browsertech-nologie, latency en bandbreedte problemen [14]. Huidige webgebaseerde visualisatiemiddelen zijn echter aanzienlijk verbeterd en kunnen nu gebruik maken van de graphics processing unit (GPU) en de voordelen van HTML5. Dit zorgt ervoor dat er een betere performance geleverd kan wor-den door zware berekeningen op de GPU uit te voeren. Als gevolg is het nu mogelijk om scenes te renderen op webpagina’s die voorheen onhaalbaar waren [14].

2.2.1 Shaders

Een belangrijke ontwikkeling in computergraphics is de evolutie van een vaste pijplijn naar een programmeerbare pijplijn. Dit houdt in dat de verschillende stages van de grafische pijplijn aangepast kunnen worden. De programma’s die beschrijven wat er in deze stages gebeurt heten shaders. We geven hier korte definities van de vertex- en fragment-shader. Hoewel er meer shaders zijn, gaan we hier niet op in omdat deze niet relevant zijn voor het onderzoek. In figuur 2.2 is een voorbeeld van een grafische pijplijn met de posities van de shaders weergeven. Vertex shading

De stage van de grafische pijplijn waar alle bewerkingen op de vertices uitgevoerd worden heet vertex shading [25]. De vertex-shader is een programma dat op de GPU draait en beschrijft welke operaties uitgevoerd moeten worden op de binnenkomende vertices. Voorbeelden van operaties zijn transformaties van de co¨ordinaten van een vertex of kleuren toekennen aan een vertex.

(11)

Fragment shading

De fragment-shader is ook een programma dat op de GPU draait. Hiermee worden de door het rasteren gegenereerde fragmenten verwerkt. De fragment-shader krijgt als input een fragment en wijst vervolgens aan iedere pixel binnen dit fragment een kleur toe.

Figure 2.2: Een overzicht van een typische WebGL rendering pijplijn, de shaders zijn oranje gekleurd [10].

2.2.2 Volume raycasting

De opkomst van programmeerbare grafische pijplijnen waarin shaderprogramma’s het func-tioneren van de pijplijn bepalen, heeft veel invloed gehad op visualisatietechnieken. Volume raycasting is een techniek die hierdoor sterk verbeterd is [19].

Bij volume raycasting worden rays door iedere pixel van het scherm geschoten. Over deze rays worden verschillende samples genomen van de data die ze doorkruisen. Elk sample krijgt ver-volgens afhankelijk van zijn waarde een kleur en doorzichtigheidsfactor toegewezen. Verver-volgens worden de samples van een ray samengesteld tot de uiteindelijke kleurwaarde. De pixel waar de ray doorheen ging krijgt deze kleurwaarde toegewezen [11]. In figuur 2.3 is dit gevisualiseerd.

Figure 2.3: Schets van een raycasting algoritme [11]

De introductie van de fragment-shader maakt het mogelijk om dit algoritme effici¨enter te imple-menteren [19]. Dit is mogelijk door het volume met een kubus te omringen, deze te rasteriseren en de resulterende fragmenten naar de fragment-shader te sturen. Vervolgens is het alleen nog nodig om te raycasten door de pixels van deze fragmenten. Alle andere pixels kunnen uitges-loten worden van het algoritme hetgeen performancewinst oplevert. De rays die door deze pixels zouden gaan, doorsnijden het volume namelijk niet en veranderen daardoor niet van kleur.

(12)

(13)

CHAPTER 3

Design

De applicatie dient te voldoen aan een aantal doelstellingen. Op basis hiervan zijn in het design verschillende afwegingen gemaakt. In dit hoofdstuk beschrijven we de doelstellingen van de applicatie, gaan we in op deze design overwegingen en verklaren we de gemaakte keuzes.

3.1 Doelstellingen

Het voornaamste doel van dit onderzoek is het visualiseren van volumetrische ultrasound-data met behulp van technologie. Om dit doel te bewerkstelligen implementeren we een web-applicatie. In deze sectie bespreken we de eisen die we aan deze applicatie stellen.

Allereerst willen we de gebruiker de mogelijkheid bieden om ultrasound-afbeeldingen uit het volume te extraheren om deze te kunnen bestuderen. Hierbij beperken we ons niet tot de orig-inele ultrasound-afbeeldingen waaruit het volume is opgebouwd. Een doel is ook om de gebruiker ultrasound-afbeeldingen te tonen op basis van een door de gebruiker bepaalde doorsnede van het volume.

Om een doorsnede te kunnen maken is het van belang dat de gebruiker kan interacteren met het volume door middel van user-interface controls. Er zijn verschillende vormen van interactie die we willen implementeren. Ten eerste willen we de gebruiker in staat stellen om het volume van verschillende kanten te bestuderen. Hiermee kan de gebruiker een goed beeld krijgen van de 3D structuur van het volume. De andere interactiemogelijkheid die we de gebruiker willen geven is de mogelijkheid om een doorsnede van het volume te visualiseren. Alle interactie willen we met hoge performance kunnen leveren. Het doel daarbij is om de gebruiker in real-time, zonder merkbare rendertijd, met de applicatie te laten interacteren.

3.2 Software

Voor het werken met 3D graphics zijn verschillende APIs beschikbaar. Omdat we streven naar een web-applicatie in verband met de gewenste lage toegangsdrempel, beperkt dit de keuze tot webgebaseerde APIs. De uiteindelijke API die in deze scriptie gebruikt wordt voor 3D graphics is WebGL [26].

(14)

3.2.1 WebGL

WebGL is een webgebaseerde graphics API en een javascript interface van OpenGL. WebGL werkt cross-platform op verschillende besturingssystemen en apparatuur. De voornaamste browsers, Chrome, Safari, Edge en Firefox ondersteunen WebGL en zijn betrokken bij de ontwikkeling van de API [26]. Doordat WebGL direct door verschillende browsers ondersteund wordt zonder ex-terne plugins, is het toegankelijk voor een grote groep gebruikers.

Integratie van WebGL op een web-pagina gaat met hulp van het HTML5 canvas element. Dit canvas element wordt via de HTML DOM aan een web-pagina toegevoegd. Ontwikkelaars kun-nen daarna met WebGL computergraphics op dit canvas tokun-nen.

De belangrijkste functionaliteit van WebGL is dat het web-pagina’s gebruik laat maken van de rekenkracht van de GPU op de client. Dit zorgt ervoor dat het mogelijk is om computer-graphics lokaal te renderen [14].

WebGL wordt voornamelijk gebruikt voor het renderen van oppervlaktemodellen en biedt geen directe support voor het renderen van volumetrische data. Het is echter wel mogelijk om in de fragment-shader algoritmen te implementeren waarmee dit alsnog gedaan kan worden. Dit maakt WebGL alsnog geschikt voor ons doel, het visualiseren van volumetrische data.

3.2.2 GLSL

WebGL biedt ontwikkelaars een programmeerbare grafische pijplijn door middel van twee shaders. De vertex- en de fragment-shader. Voor het schrijven van deze shaders maakt WebGL gebruik van de Graphics Library Shading Language (GLSL). GLSL is een programmeertaal die veel op ‘C’ lijkt. Naast de standaard functionaliteiten zoals for loops if statements etc... biedt GLSL ook support voor vector en matrix operaties. Doordat we WebGL zullen gebruiken, hebben we ook GLSL nodig.

3.3 Visualisatietechnieken

WebGL biedt de gebruiker twee verschillende manieren om in de browser scenes te renderen. De eerste techniek maakt gebruik van oppervlaktemodellen. De tweede techniek maakt gebruik van ray-casting [14].

3.3.1 Visualisatie met een oppervlaktemodel

Normaal werken real-time 3D grafische applicaties met oppervlaktemodellen. Er zijn veel ver-schillende formaten die deze oppervlaktemodellen beschrijven. Sommige hiervan zijn zelfs ge-specialiseerd voor het web. WebGL ondersteunt deze modellen en is in staat om deze met hoge performance te renderen [4].

De data waar we echter mee willen werken zijn ultrasound-volumes, geen oppervlaktemod-ellen. Hierdoor kunnen we niet op de gebruikelijke manier, direct met een oppervlaktemodel, de ultrasound-data visualiseren. Het is echter mogelijk om 3D volumes te converteren naar op-pervlaktemodellen en deze vervolgens te visualiseren [12]. Het converteren van de data heeft verschillende nadelen. Het grootste probleem is dat er bij de conversie data verloren gaat. Be-halve de geometrie van de oppervlakte, kan er na conversie geen andere informatie meer uit het model gehaald worden. Juist deze informatie die verloren raakt is interessant voor echoscopisten. Om deze reden gebruiken we geen visualisatie door middel van een oppervlaktemodel. In figuur 3.1 wordt een voorbeeld van visualisatie op basis van een oppervlaktemodel getoond.

(15)

Figure 3.1: Visualisatie door middel van een oppervlaktemodel van de bekende Utah teapot [22]

3.3.2 Visualisatie met raycasting

Volume raycasting is de huidige state of the art visualisatietechniek die gebruikt wordt voor het renderen van volumes [14]. Het renderen door middel van volume raycasting benadrukt de belangrijke eigenschappen van de data [4]. Daarnaast heeft het algoritme een hoge performance waardoor het mogelijk wordt om real-time interactie toe te voegen. Deze eigenschappen maken volume raycasting geschikt als visualisatietechniek voor onze applicatie. In figuur 3.2 wordt een voorbeeld van visualisatie op basis van volume raycasting getoond.

(16)

(17)

CHAPTER 4

Implementatie

4.1 Volume raycasting in WebGL

Er is veel kennis over volume raycasting in WebGL beschikbaar. Omdat er al meerdere imple-mentaties van zijn, hebben we eerst gekeken of deze impleimple-mentaties geschikt zijn als startpunt voor onze applicatie. Langs deze weg zijn we uitgekomen op de implementatie van Will Usher [23]. Deze implementatie maakt gebruik van het ‘.raw’ fileformaat. Om onze data te kunnen gebruiken moeten we dus eerst ons DICOM fileformaat omzetten naar een ‘.raw’ file. Voor deze conversie hebben we gebruik gemaakt van de conversie-functionaliteit van Paraview [16]. Will Ushers volume raycasting implementatie maakt gebruik van een fragment-shader gebaseerd algoritme zoals beschreven in hoofdstuk twee. In figuur 4.1 wordt de ultrasound-data gevisu-aliseerd met deze implementatie. Deze visualisatie is echter niet geschikt voor het bestuderen van het volume doordat alleen de buitenste laag zichtbaar is.

Figure 4.1: De ultrasound-data gevisualiseerd met Will Ushers volume raycaster.

4.2 Interactie

Om echoscopisten de interessante delen van het volume te laten visualiseren is interactiefunc-tionaliteit nodig. Hiermee stellen we de gebruikers in staat om het gewenste deel van het volume te inspecteren. In de volgende secties gaan we dieper in op de ge¨ımplementeerde interactie-functionaliteit.

(18)

4.2.1 Camera

Will Ushers volume raycaster staat al enige vorm van interactie toe met het volume. Dit gebeurt door middel van een arcball camera [15]. Dit is een camera die altijd gericht staat op een vooraf gedefinieerd punt. Door de muis te bedienen roteert de camera om dit punt. Dit geeft gebruikers de mogelijkheid om het 3D volume van alle mogelijke kanten te bestuderen. Echter blijft het probleem bestaan dat alleen de buitenste laag van het volume zichtbaar is.

4.2.2 Clipping

Voor echoscopisten is het essentieel om de binnenkant van het volume te kunnen bestuderen. Met alleen de functionaliteit van de camera is dit onmogelijk. Om dit toch mogelijk te maken willen we de gebruiker een beweegbaar clipping-plane laten gebruiken. Een clipping-plane is een vlak dat een scene in twee gedeelten opsplitst. Van deze gedeelten wordt de ene kant gerendered terwijl de andere kant niet zichtbaar is (weggeclipped wordt). Dit maakt de binnenzijde van het volume zichtbaar.

Het clipping-plane defini¨eren we in point normal form. Point normal form beschrijft een plane met twee vectoren. De eerste vector definieert de oorsprong van het vlak. De tweede vector is de normaalvector van het vlak en bepaalt de helling. Figuur 4.2 laat een voorbeeld zien van een vlak gedefinieerd in point normal form.

Figure 4.2: Een vlak in point normal form [17].

Voor het bepalen welke voxels van het 3D volume geclipped moeten worden is een clippingtest nodig. Als test gebruiken we een functie die de afstand tussen het vlak en een voxel berekent. In onderstaande pseudocode wordt beschreven hoe we de afstand berekenen.

f l o a t p o i n t P l a n e D i s t a n c e ( v e c p l a n e O r i g , v e c planeNor , v e c p o i n t ) { p l a n e N o r = n o r m a l i z e ( p l a n e N o r ) ;

v e c temp = p l a n e O r i g − p o i n t ; return d o t ( temp , p l a n e N o r ) ; }

De distance-functie heeft drie variabelen nodig om de afstand tussen een punt en een vlak te bepalen. De planeOrig en PlaneNor variabelen zijn de vectoren die het vlak defini¨eren. Point is het punt waarvan we de afstand tot het plane willen berekenen. De eerste stap hiervoor is het normaliseren van de normaal-vector. Nadat dit gedaan is, trekken we het punt waarvan we de afstand willen weten af van de oorsprong-vector. Het resultaat hiervan is de vector tussen deze twee punten. Door deze resulterende vector te projecteren op de normaal-vector krijgen we de afstand tussen het punt en het vlak. Doordat de normaalvector genormaliseerd is, is deze projectie een kwestie van het dot-product nemen van de normaal-vector en de vector tussen de oorsprong en het punt [18]. Afhankelijk van aan welke kant van het vlak het punt ligt is het dot-product positief of negatief. Normaal neem je de absolute waarde van dit resultaat omdat

(19)

een negatieve afstand niet logisch is. Voor ons is het echter van belang om te bepalen aan welke kant van het vlak het punt zich bevindt. Door naar het teken van het dot-product te kijken kunnen we bepalen aan welke kant van het vlak het punt ligt.

Op deze manier is het mogelijk om clipping functionaliteit toe te voegen aan Will Ushers ray-caster. We hebben twee verschillende clipping implementaties ontwikkeld: Een central processing unit (CPU) gebaseerde implementatie en een GPU gebaseerde implementatie.

4.2.3 CPU clipping

De CPU clipping implementatie is ge¨ımplementeerd in javascript en wordt uitgevoerd op de CPU. Om clipping te implementeren past deze implementatie de renderloop aan. Aan deze renderloop voegen wij code toe die het volume bijwerkt wanneer het clipping plane van positie verandert. Hieronder volgt de pseudocode voor het algoritme:

// Main r e n d e r i n g l o o p { . . . updatedVolume = volume ; i f ( u p d a t e d C l i p p i n g P l a n e ) { f o r ( v o x e l i n volume ) { i f ( p o i n t P l a n e D i s t a n c e ( p l a n e O r i g , planeNor , v o x e l ) > 0 ) { updatedVolume [ v o x e l ] = 0 ; // 0 i s empty } } } updateGPUVolume ( updatedVolume ) ; . . . }

In bovenstaande pseudocode wordt bijgehouden of het clipping-plane bijgewerkt is. Wanneer er sprake is van een gewijzigde positie van het clipping-plane wordt over iedere voxel ge¨ıtereerd. Indien de afstand tussen de voxel en het clipping plane positief is, wordt deze geclipped. Zo wordt een nieuw volume opgebouwd waarin iedere geclipte voxel gelijkgesteld is aan nul. Nul houdt hier in dat de voxel leeg is en dus niet tijdens het raycasten een bijdrage levert. Zodra het nieuwe volume is opgebouwd, wordt het in het GPU geheugen geplaatst. Het volume raycasting algoritme gebruikt vervolgens dit volume om het uiteindelijke beeld te visualiseren. In figuur 4.3 wordt een mogelijk beeld, verkregen met deze implementatie getoond.

(20)

Figure 4.3: Een ultrasound-afbeelding zichtbaar gemaakt door het volume met een verticaal clipping-plane te doorsnijden met de CPU implementatie.

4.2.4 GPU clipping

De GPU implementatie gebruikt hetzelfde principe als de CPU implementatie. Ook hier ge-bruiken we de clippingtest om te bepalen welke voxels geclipped dienen te worden. We imple-menteren deze test echter in de fragment-shader zodat het op de GPU draait. Hieronder volgt de bijbehorende pseudocode: . . . r a y P o s i t i o n = r a y S t a r t ; f o r ( r a y P r o g r e s s = r a y S t a r t ; r a y P r o g r e s s < rayEnd ; r a y P r o g r e s s += S t e p S i z e ) { i f ( p o i n t P l a n e D i s t a n c e ( p l a n e O r i g , planeNor , r a y P o s i t i o n ) > 0 ) { r a y P o s i t i o n += r a y D i r e c t i o n ∗ s t e p S i z e ; continue ; } . . . // S a m p l i n g h a p p e n s h e r e } . . . // r e t u r n c o l o r c o m p o s i t e d from s a m p l e s

De for-loop in de bovenstaande pseudocode itereert over het pad van een ray die door een pixel wordt geschoten. Aan het einde van elke iteratie wordt de positie van de ray bijgewerkt en een sample van het volume genomen voor het bepalen van de uiteindelijke kleur. Nieuw is het if-statement dat de test bevat. In plaats van de afstand tussen een voxel en het clipping-plane te berekenen, berekenen we de afstand tussen de ray-positie en het clipping-clipping-plane. Indien de afstand tussen de ray-positie en het clipping-plane positief is, worden er geen samples van het volume genomen. De ray-positie wordt bijgewerkt en de volgende iteratie begint. Op deze wijze worden aan de ene zijde van het clipping-plane geen samples genomen. Hierdoor wordt het gedeelte van het volume aan de ene zijde van het clipping-plane niet gerenderd. In figuur 4.4 wordt een beeld getoond dat verkregen is met deze implementatie. Zoals te zien, is er nauwelijks verschil waar te nemen in vergelijking met figuur 4.3.

(21)

Figure 4.4: Een ultrasound-afbeelding zichtbaar gemaakt door het volume met een verticaal clipping-plane te doorsnijden met de GPU implementatie.

4.2.5 Verplaatsing van het clipping-plane

De gebruiker kan met behulp van een user-interface het clipping-plane positioneren. Door de gebruiker de positie en helling van het clipping-plane te laten bepalen met de user-interface, kan hij het gewenste gedeelte van het volume in beeld brengen.

De positie van het vlak kan aangepast worden door translaties toe te passen op de oorsprong-vector. De translaties uitgevoerd op de oorsprong-vector zullen ook op alle andere punten van het vlak worden uitgevoerd. Voor het veranderen van de helling van het vlak kan de normaal-vector geroteerd worden. De eigenschap van de normaal-vector is dat deze loodrecht op het vlak staat. Wanneer de normaal-vector geroteerd wordt, staat hij niet meer loodrecht op het originele vlak. De helling van het vlak waar de normaal-vector na rotatie op staat, is de nieuwe helling van het clipping-plane.

Via de user-interface stellen we de gebruiker in staat om aan te geven welke rotaties en trans-laties op deze vectoren uitgevoerd dienen te worden. Hiervoor zijn zes sliders toegevoegd aan de user-interface van de applicatie. Drie van de sliders regelen de translatie van de oorsprong-vector. Deze drie sliders bepalen de translatie in de x-, y- of z-richting. De andere drie sliders bepalen de rotatie van de normaal-vector om de x-, y- of z-as.

(22)

(23)

CHAPTER 5

Resultaten

Rendertijd is de maatstaf die we gebruiken voor het quantificeren van de performance van de ultrasound-visualisatie. We defini¨eren rendertijd als de tijd die het kost om een scene te ren-deren. De initi¨ele initialisatie van variabelen, het compileren van shaders en andere operaties die niet iedere iteratie worden aangeroepen worden niet in de berekening van de render-tijd meegenomen. De renderrender-tijd valt in twee componenten op te splitsen. De render-tijdsduur van een render-iteratie waarin de CPU werk levert noemen we de CPU gebonden rendertijd. De tijdsduur waarin de GPU werk levert noemen we de GPU gebonden rendertijd.

Om een correct beeld te krijgen van de tijd die nodig is voor het renderen van een scene met plane, renderen we 50 verschillende scenes. Iedere scene met een verschillend clipping-plane. Hiervan nemen we de gemiddelde rendertijd als resultaat. Dit doen we voor volumes waarvan de dimensies steeds verdubbelen.

5.1 Resultaten van de CPU gebaseerde implementatie

Figure 5.1: Gemiddelde rendertijden van de CPU gebaseerde implementatie. Merk op dat dit een logaritmische schaal is.

(24)

Wanneer we de resultaten van de CPU gebaseerde implementatie bestuderen, observeren we een exponenti¨ele toename van de rendertijd. De volumes waarvan de dimensies groter zijn dan 128x128x128, hebben exponentieel hogere rendertijden in vergelijking met de kleinere volumes. De rendertijden bij de kleinere volumes zijn nog voldoende laag om interactie mogelijk te maken. De eerste grote toename van rendertijd zien we bij het volume met dimensies van 256x256x256. De rendertijd is hier zodanig hoog dat de gebruiker niet meer makkelijk met de scene kan inter-acteren. Iedere keer wanneer de gebruiker interacteert met de scene door middel van de sliders duurt het 0.4 seconden om de nieuwe scene te renderen. Bij het grootste volume duurt het bijna 3 seconden om een scene met nieuw clipping-plane te renderen.

Wanneer er gekeken wordt naar de CPU en GPU gebonden tijd valt het op dat de CPU tij-den veel langer zijn dan de GPU tijtij-den. De GPU tijd neemt lineair toe met de dimensies van het volume. De CPU tijd neemt daarentegen exponentieel toe.

Deze exponenti¨ele toename van de CPU tijd valt te verklaren met de toename van het aantal voxels. Het kleinste volume heeft 323 voxels terwijl het grootste volume 5123 voxels heeft. Op ieder van deze voxels moet de clipping-test toegepast worden hetgeen op de CPU gebeurt. Dit kost deze implementatie veel performance.

5.2 Resultaten van de GPU gebaseerde implementatie

Figure 5.2: Gemiddelde rendertijden van de GPU-gebaseerde implementatie. Merk op dat dit een logaritmische schaal is.

De resultaten van de GPU-gebaseerde implementatie laten een lineair verband zien. Dit geldt zowel voor het CPU gebonden gedeelte van de rendertijd als het GPU gebonden gedeelte van de rendertijd. Bij ieder volume is de rendertijd laag genoeg om interactie met de scene toe te staan. Wanneer we de CPU en GPU rendertijden met elkaar vergelijken zien we dat deze tijden bij de kleine volumes ongeveer gelijk zijn. Wanneer de volumes echter groter worden, neemt de GPU gebonden rendertijd meer toe dan de CPU gebonden rendertijd. De performance blijft echter wel op een acceptabel niveau.

(25)

5.3 Discussie

De GPU implementatie levert dus een aanzienlijk betere performance dan de GPU implemen-tatie. Het voornaamste verschil zit in de CPU gebonden rendertijd. Terwijl deze exponentieel toeneemt bij de CPU implementatie, neemt deze slechts lineair toe bij de GPU implementatie. De GPU gebonden tijd van zowel de CPU als GPU implementaties vertonen een lineair verband met de grote van de dimensies. Bij grotere dimensies is de GPU gebonden tijd echter lager dan de GPU implementatie. Dit valt te verklaren doordat we minder samples nemen tijdens het raycasten met de GPU implementatie. Wanneer een ray geen sample hoeft te nemen kan hij direct door naar de volgende positie. Dit zorgt ervoor dat de CPU implementatie meer samples moet afhandelen dan de GPU implementatie waardoor de GPU gebonden tijd hoger is. Bij de kleine dimensies worden weinig samples genomen dus is dit verschil klein. Echter wanneer de dimensies groter worden en er meer samples genomen worden tijden het raycasten, neemt het verschil toe.

De grafieken geven een duidelijk overzicht van hoe de rendertijd toeneemt wanneer de grootte van de dimensies toeneemt. Bij deze metingen zijn echter de dimensies altijd gelijk aan elkaar gehouden. Het is niet mogelijk om uit deze resultaten te bepalen wat de invloed is van een individuele dimensie op de rendertijd. Om dit te bepalen zouden extra tests uitgevoerd moeten worden waarin slechts een enkele dimensie wordt aangepast.

Embryologie is een gebied met veel ethisch gevoelige onderwerpen. Het is belangrijk om stil te staan bij de ethische gevolgen van onze applicatie. Veel discussies over embryologisch onder-zoek bespreken of het kweken en gebruik van embryo’s en foetussen voor onderonder-zoek acceptabel is [6] [27]. Doordat onze applicatie puur educatief is en gebruik maakt van al bestaande digitale datasets, kunnen we aannemen dat er geen ethische bezwaren tegen onze applicatie zijn.

(26)

(27)

CHAPTER 6

Conclusie

Het is mogelijk om op effici¨ente wijze ultrasound-data te visualiseren op een webpagina. Volume raycasting is hier een effectieve techniek voor. Met behulp van WebGL kan volume raycasting op de GPU uitgevoerd worden. Dit is mogelijk door het algoritme in de fragment-shader te implementeren.

Gebruikers kunnen via de user-interface het clipping plane in de gewenste positie brengen om zo het bijbehorende ultrasound-beeld te verkrijgen. Dit stelt gebruikers in staat om iedere mogeli-jke doorsnede van het volume te bestuderen. We hebben twee verschillende implementaties van clipping functionaliteit vergeleken.

De CPU implementatie is niet geschikt voor interactie. Bij interactie via de sliders met grotere volumes is de rendertijd zodanig hoog dat de gebruikers hier hinder van ondervinden. De sliders blijven hangen tot het beeld gerenderd is. Dit kan meerdere seconden duren bij grotere volumes. Dit komt doordat de implementatie exponentieel meer tijd nodig heeft voor het renderen van grotere volumes.

De GPU implementatie vertoont significant betere performance. De rendertijd neemt bij deze implementatie slechts lineair toe met de grootte van het volume. De rendertijd was hierbij zo-danig laag dat gebruiker zonder merkbare haperingen het clipping-plane kan positioneren met behulp van de sliders. Op deze wijze is visualisatie van het volume met real-time interactie goed mogelijk.

6.1 Vervolgonderzoek

In deze scriptie bespraken we de implementatie en performance van de webgebaseerde visual-isatie van ultrasound-data. Naar de effectiviteit van deze webgebaseerde visualvisual-isatie hebben we geen onderzoek gedaan. Door echoscopisten en studenten daadwerkelijk met de applicatie te laten werken en vervolgens feedback te verzamelen, kan verder onderzoek worden gedaan. Op basis van deze gebruikerservaringen kan vastgesteld worden hoe de educatieve waarde van we-bgebaseerde ultrasound-visualisatie verder verbeterd kan worden.

Naast volumetrische ultrasound-data zijn ook oppervlaktemodellen van embryo’s beschikbaar. Webgebaseerde visualisatie van dit soort modellen zou ook mogelijkheden kunnen bieden voor embryologisch onderwijs. Het originele doel van deze scriptie was om naast visualisatie van ultrasound-volumes ook methoden te zoeken voor de visualisatie van oppervlaktemodellen. Helaas zijn we hier niet aan toegekomen. De combinatie van volume raycasting met visualisatie van op-pervlaktemodellen biedt mogelijkheden waarmee educatieve middelen verder uitgebreid kunnen worden.

(28)

(29)

Bibliography

[1] Bernadette S de Bakker et al. “An interactive three-dimensional digital atlas and quanti-tative database of human development”. In: Science 354.6315 (2016), aag0053.

[2] David Brazina, Rostislav Fojtik, and Zuzana Rombova. “3D visualization in teaching anatomy”. In: Procedia-Social and Behavioral Sciences 143 (2014), pp. 367–371.

[3] Ken Brodlie, Nuha El-Khalili, and Ying Li. “Using web-based computer graphics to teach surgery”. In: Computers & Graphics 24.1 (2000), pp. 157–161.

[4] John Congote et al. “Interactive visualization of volumetric data with webgl in real-time”. In: Proceedings of the 16th International Conference on 3D Web Technology. 2011, pp. 137– 146.

[5] Thomas A DeFanti, Maxine D Brown, and Bruce H McCormick. “Visualization: Expanding scientific and engineering research opportunities”. In: Computer 8 (1989), pp. 12–25.

[6] _{Embryonic stem cell research: an ethical dilemma. June 2020. url: https://www.eurostemcell.} org/embryonic-stem-cell-research-ethical-dilemma.

[7] Vivien Gibbs. “An investigation into sonography student experiences of simulation teaching and learning in the acquisition of clinical skills”. In: Ultrasound 22.3 (2014), pp. 173–178. [8] Devin Hillenius. “Augmented Reality aided learning of human embryo anatomy: A study on motivation and usability, Bachelor thesis Computer Science, University of Amsterdam”. In: (2018).

[9] Hector Jacinto et al. “A web interface for 3D visualization and interactive segmentation of medical images”. In: Proceedings of the 17th International Conference on 3D Web Tech-nology. 2012, pp. 51–58.

[10] Piotr Janik. Using WebGL to Accelerate Advanced Physics Simulations in the Browser. June 2020. url: https://concord.org/newsletter/2012-fall/under-the-hood/. [11] Tao Ling and Qian Zhi-Yu. “An improved fast ray casting volume rendering algorithm

of medical image”. In: 2011 4th International Conference on Biomedical Engineering and Informatics (BMEI). Vol. 1. IEEE. 2011, pp. 109–112.

[12] William E Lorensen and Harvey E Cline. “Marching cubes: A high resolution 3D surface construction algorithm”. In: ACM siggraph computer graphics 21.4 (1987), pp. 163–169. [13] Suzana Guimar˜aes Moraes and Luis Antonio Violin Pereira. “A multimedia approach for

teaching human embryology: Development and evaluation of a methodology”. In: Annals of Anatomy-Anatomischer Anzeiger 192.6 (2010), pp. 388–395.

[14] Finian Mwalongo et al. “State-of-the-Art Report in Web-based Visualization”. In: Com-puter graphics forum. Vol. 35. 3. Wiley Online Library. 2016, pp. 553–575.

[15] _{OpenGL Arcball Tutorial. June 2020. url: https://en.wikibooks.org/wiki/OpenGL_} Programming/Modern_OpenGL_Tutorial_Arcball.

[16] _{Paraview. June 2020. url: https://www.paraview.org/.}

[17] _{plane in point normal form. June 2020. url: https://www.kindpng.com/imgv/iJmxJJh_} plane- from- point- normal- vector- plane- math/#gal_plane- from- point- and-normal-vector-plane-math-hd-png-download_iJmxJJh_2925458.png.

(30)

[18] David Poole. Linear algebra: A modern introduction. Cengage Learning, 2014.

[19] Simon Stegmaier et al. “A simple and flexible volume rendering framework for graphics-hardware-based raycasting”. In: Fourth International Workshop on Volume Graphics, 2005. IEEE. 2005, pp. 187–241.

[20] The visible embryo(Online). Electronic Visualization Lab, University of Illinois. June 2020. url: https://www.evl.uic.edu/entry.php?id=1754.

[21] Denice Tuinhof. “The Potential of Augmented Reality as Educational Aid in Ultrasound-Training, Master thesis Information Studies, University of Amsterdam”. In: (2019). [22] _{Unfold. Utanalog, Ceramic Utah Teapot. June 2020. url: http : / / unfold . be / pages /}

utanalog.html.

[23] _{Will Usher. webGl volume raycaster. May 2020. url: https://github.com/Twinklebear/} webgl-volume-raycaster.

[24] Tim Vernon and Daniel Peckham. “The benefits of 3D modelling and animation in medical teaching”. In: Journal of Audiovisual media in Medicine 25.4 (2002), pp. 142–148. [25] _{Vertex Shaders. May 2020. url:}

https://www.nvidia.com/en-us/drivers/feature-vertexshader/.

[26] _{WebGL: 2D and 3D graphics for the web. June 2020. url: https://developer.mozilla.} org/en-US/docs/Web/API/WebGL_API.

[27] Guido de Wert and Christine Mummery. “Human embryonic stem cells: research, ethics and policy”. In: Human reproduction 18.4 (2003), pp. 672–682.

[28] Kaissar Yammine and Claudio Violato. “The effectiveness of physical models in teaching anatomy: a meta-analysis of comparative studies”. In: Advances in Health Sciences Educa-tion 21.4 (2016), pp. 883–895.

[29] _{Fei Yang. freehand ultrasound reconstruction. June 2020. url: https://www.researchgate.} net / figure / Freehand ultrasound reconstruction experiment on in vivo -hepatic-data-set-a-Some_fig5_50596164.

Webgebaseerde visualisatie van ultrasound-afbeeldingen

Bachelor Informatica