WebScylla:A3DWebApplicationtoVisualisetheColonisationofan ArtificialReef

BenjaminT.FrancisandRobertJ.Stone DepartmentofElectrical,Electronic&ComputerEngineering UniversityofBirmingham,UK btf527@bham.ac.ukandr.j.stone@bham.ac.uk Abstract

Scylla is Europe's first artificial reef and was created by the scuttling of a former Royal Navy frigate off the UK coast in Cornwall. As well as being a popular attraction for divers, the colonisationofthereefisofgreatinteresttomarinebiologists.A recent research programme undertaken by the University of BirminghaminconjunctionwiththeNationalMarineAquarium (NMA)hasdeliveredaninteractive3DmodeloftheScylla.The aim of this program is to promote a greater educational and scientificunderstandingofthefragilityofmarineecosystems.In its current form, the Virtual Scylla exists as a kioskbased exhibit,resultinginonlylimitedhandsonaccessbyvisitorstothe NMA. eXtensible 3D (X3D) is a royaltyfree standard which makesitpossibletodeliverinteractive3DcontentovertheWorld Wide Web. X3D has previously been used for scientific visualisation in many academic fields. The WebScylla project aimstocreateanX3DversionoftheVirtualScyllawhichcanbe delivered over the Web for use as an extensible scientific and educational tool. A web application framework following the ModelViewController(MVC)designpatternisusedtorapidly develop a 3D web application to visualise colonisation data relatingthe Scylla reefwhichisstoredinarelationaldatabase. AJAX techniques are used to create a highly interactive and responsive user interface to this application using a hybrid of XHTML and X3D components. It is concluded that MVC frameworkscanbeapowerfultoolfortherapiddevelopmentof 3D web applications and are particularly suited to datacentric applications.Problemsencounteredand lessonslearnedinclude issues in developing effective user interfaces for visualisation tools using interactive computer graphics and a discussion of somelimitationsofexistingX3Dimplementations. CRCategories:H3.5[OnlineInformationServices]:Webbased services Keywords:X3D,visualisation,marinebiology,modelview controller,AJAX

1Introduction 1.1Background
HMS Scylla is a former Royal Navy frigate, purchased by the UK'sNationalMarineAquarium(NMA)inPlymouthandscuttled in 2004 in Whitsand Bay, South East Cornwall to become Europe's first artificial reef [TwoFour Productions Ltd. 2004; Leece2006]. Theartificialreefhasnowbeencolonisedbyahugevarietyof marine life and is a popular attraction for international diving communities[NationalMarineAquarium2005].Thereefisalsoa richscientificresourceforspecialistsfromtheNationalMarine AquariumandMarineBiologicalAssociationinnearbyPlymouth. The Scylla Reefcantellexpertsmuchaboutmarineecosystems andcoastlinewaterconditionsandprovidestrongindicatorsofthe effectsofclimatechange[Stone2007]. Virtual Scylla isaproject by the University of Birmingham to buildsoftwaremodellingtoolswhichallowlongtermevaluation and prediction of how factors such as colonisation dynamics, environmental changes, pollution and physical decay affect the conditionofthereefanditsecosystems[Stoneetal.2009].Real time visual and behavioural simulation techniques based on contemporary games engine technologies are being used to presenttheresultsoftheresearchinaformsuitableforsupporting furtherscientificworkandeducationalawareness. A3Dcomputermodelofthe Scylla hasbeencreatedusingthe industry standard 3ds Max modelling tool based on a physical scalemodel,imagesandplansofthevessel,togetherwithvideo andsonarmaterialculledfromrecentremotelyoperatedvehicle (ROV)andRoyalNavyOceanographicsurveys.Thismodelhas been imported into the CryEngine games engine and later the Quest3D realtime3Denvironmentdevelopmenttooltocreatea realistic VirtualScylla environment.Thisincludesascaledand textured Scylla model,anunderwaterambienceusinglighting, foggingandparticleeffectsandasimplemodelofanROVwhich canbecontrolledusingagamepadcontroller. Inworkingtowardsthegoalofdevelopingaccuratesimulationsof marine ecosystems, a collection of custom software libraries calledtheGELenginehavebeendevelopedtovisualisetheresults ofaseriesofexperimentsintosimulationcomplexityinartificial life[White2008].Thisworkhasalsoresultedinthecreationofa climatechangegametobeusedasaneducationalresourceat theNMA.

Copyright 2009 by the Association for Computing Machinery, Inc. Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, to republish, to post on servers, or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from Permissions Dept, ACM Inc., fax +1 (212) 869-0481 or e-mail permissions@acm.org. Web3D 2009, Darmstadt, Germany, June 16 17, 2009. 2009 ACM 978-1-60558-432-4/09/0006 $10.00

167

1.2Aims&Objectives
Currently, in order to use the Virtual Scylla environment it is necessarytoinstallalocalcopyofacustomgraphicsengineor commercial games engine on a compatible Personal Computer andloadasetofstaticdataintotheenvironment.TheWebScylla project described in this paper aims to create a version of the VirtualScylla whichcanbedeliveredovertheWorldWideWeb foruseasanextensiblescientificandeducationaltool. Webapplicationsareabletotransferaninteractiverepresentation ofdatafromacentraldatabaseovertheInternetusingstandard data formats for rich text and multimedia and the ubiquitous HypertextTransferProtocol. By using the Web3D Consortium's royaltyfree eXtensible 3D (X3D)standard,itispossibletodeliverinteractive3Dmodelsas partofawebapplicationinordertocreatemuchmorepowerful visualisationsofdatathanispossiblewithmorecommonlyused markuplanguages. X3D has previously been used for scientific visualisations in manyacademicfieldsincludingcomputerscience[McIntoshetal. 2005], psychology [Geroimenko and Geroimenko 2000] and geology [Gelautz et al. 2004]. The WebScylla project aims to applythismethodtoanapplicationinmarinebiologybycreating an interactive 3D model of an artificial reef which can be deliveredoverthewebandbyprovidingademonstratorofitsuse throughthevisualisationofcolonisationdata.

OncethedataentertheMarLINdatabase,theycanbesearchedon anationwidebasisusinganXHTMLWebinterfaceandvisualised on a 2D map using SVG. However, the GPS location data recordedwerenotaccurateenoughtocreateameaningfulspatial visualisationonthescaleofamodelofthereef. Finallythisanalysisresultedinasetofuserrequirementsforthe proposednewsystemwhichwouldincludea3Dvisualisationof dataandameansforuserstoreportsightingsdirectlyviatheWeb application.

3Design 3.1ArchitectureDesign
Polys [2005] describes several publishing paradigms for X3D includingtheIdentityParadigm,theCompositionParadigm,the PipelineParadigmandtheHybridParadigmwhichdrawfromthe techniquescommonlyusedinWebapplicationdevelopment.Polys statesthatthecomposition paradigm is generallyaccomplished withthreecomponents:astructuredtemplate,adatasourceanda servertechnologysuchasSSI,PHP,JSPorPerltocomposethe templatewiththedata. AnincreasinglypopulararchitectureforWebapplicationsusesa variationofthecompositionparadigmbasedontheMVC(Model ViewController)designpatternwhichoriginatedintheSmalltalk programminglanguageatXeroxPARC[Burbeck1987]. TheMVCdesignpatternisparticularlysuitedtoadatacentric applicationbasedonarelationaldatabasebecauseitisableto abstractthedatabaseintoanobjectbaseddatamodelinorderto utiliseObjectOrientedprogramming.Thedatamodelcanthenbe visualised by the user via a view object and a controller objectisresponsibleforinterpretinguseractionsandupdatingthe modelandtheviewaccordingly.

1.3Methodology
Thispaperisalinearoverviewofthecumulativeanalysis,design andimplementationworkwhichoccurredoverthecourseofan iterative software development project. The project itself went through stages of Inception, Elaboration, Construction and Transitiontothenewsystemandeachoftheseiterationsinvolved someaspectofanalysis,design,implementationandtesting.This projectmethodologyapproximatestheRationalUnifiedProcess [Boochetal.1999].

2Analysis
The project began with a User & Task Analysis [Hackos and Redish1998]ofthetasksofrecordingandviewingcolonisation datarelatingtotheScyllareefandananalysisofthedatacurrently available. This included identifying stakeholders, analysing the workflowofhowdatacurrentlypassesbetweenusersandsystems, building user and environment profiles, recording use cases of existingsystemsandgeneratingauser/taskmatrix.Colonisation datafromtheNMA(NationalMarineAquarium)andtheMBA (Marine Biological Association) was acquired and analysed, includingtheentityrelationshipsofthecurrent MarLIN (Marine LifeInformationNetwork)database. It was discovered that the existing system for divers to report sightings of species on the reef is predominantly paperbased, with the data being manually verified and entered into the MarLIN databasebystaffattheMBA.Photographicevidenceis sometimes transmitted electronically to support the sightings.

Fig1:ServerArchitecture Fig. 1 shows the main software components of the WebScylla serverarchitecturedesign.TheMVCframeworkabstractsaway fromtheunderlyingHTTPserver,databaseserverandOperating Systemsothatthedevelopercanconcentrateondevelopingthe applicationitself.Implementationdetailsincludedinthediagram aredescribedinsection4,butallofthecomponentsunderneath

168

the MVC framework can safely be swapped out for alternative compatible components without the need to alter the main WebScyllaapplication. AnothernotableaspectoftheWebScyllaarchitecturedesignisthe useofAsynchronousJavaScriptandXML.TheX3Dexportofthe Scyllamodel(discussedinsection4)totals1.7Mbinsize.Whilst this is a reasonably acceptable oneoff download size on a broadbandconnection,itmaybecomeafrustratingexercisefor theendusershouldtheentiremodelhavetobereloadedevery timeachangeismadetothe3Denvironment. AJAXtechniquesarebecomingincreasinglypopularinmodern interactive Web applications because they allow part of aWeb pagetobeupdatedwithouttheneedtoreloadtheentirepage.This is achieved using an XMLHTTPRequest which is an HTTP RequestthatcanbetriggeredbyJavaScript(moreformallycalled ECMAScript).ThisallowsasnippetofXMLtobedownloaded fromawebserverandforaportionofthepagetobeupdated accordingly. WebScyllautilisesthesetechniquesandadaptsthemforusewith X3D.TheScyllamodelitselfisdownloadedonlyoncetotheX3D browser,butthevisualisationelementsofthesceneareaddedand removed dynamically using JavaScript. The user is able to set parametersintheuserinterfaceandthentriggeraquerytothe database. JavaScript sends a request to the server for an X3D representation of the results of the query which is then dynamicallyupdatedinthescene.

3.2DataModel
The data model for WebScylla is simple in comparison to the existing MarLIN database, but is based on the types of data submittedviathecurrentpapersystemusedbydiverstoreport sightingsofspecies.Fig.3showsanEntityRelationshipdiagram of the data model whichisrepresented as a seriesofmodel objects within the WebScylla system and persists within a relationaldatabase.

Fig3:DataModel

3.3UserInterfaceDesign
OneoftheaimsoftheWebScyllaprojectistoprovideanexample useoftheScyllamodelforscientificvisualisation.Thetaskofthe userinterface,then,istoprovideameaningfulvisualisationof colonisation data stored in the database as described in the previous section and to allow the user to interact with that visualisationinrealtime. Tufte [1983] describes desirable qualities of graphics used to represent data. These include not only displaying the data, but displayingitinsuchawayastoinducetheviewertothinkabout thecontentitself,ratherthanthetechnologicalmethodbywhich thegraphicdesignisproduced.Indoingso,itisimportantnotto distort the data, but to encourage the comparison of different piecesofdataandtorevealthedataatseverallevelsofdetail, fromabroadoverviewtothefinestructure. Polys[2005]notestheaddedcomplicationsinvisualisationusing interactive computer graphics. These include added challenges relatingtoinputandactionsmadebytheuserandtheneedfor objectstodepictaffordancesfortheseactions.Polyssuggeststhe useofvisualmarkerstodescribepiecesofdataina3Dscene and states that the mappings between data and corresponding visualmarkersmustbebothcomputableandcomprehensibleby the user. He also describes functions such as zooming, filtering and the ability to request detail on demand all methodsofdrillingdownfromahighleveloverviewtoitemsof

Fig2:ViewArchitecture Fig. 2 shows that the view itself consists of several different resourceswhichareeachacquiredfromtheserverbytheWeb browser and interact with each other at runtime. The main XHTML page is first requested from the server, which then includeslinkstotheotherresourcesthatneedtobedownloaded. TheseincludeaCascadingStyleSheet(CSS)toaddstylestothe XHTMLpage,theX3Dscene,aJavaScriptscriptandalsovarious raster images (not shown here). Once the resources are downloadedandrendered,theJavaScriptbeginstoexecuteand coordinatesmodificationstotheviewbasedonuseractions.It implementsthesechangesbyasynchronouslyacquiringdatafrom theserverviaaRESTfulAPI[Fielding2000]andmodifying theviewaccordinglythroughinterfacestotheXHTMLandX3D resourcesviatheDocumentObjectModel(DOM)andScene AccessInterface(SAI)respectively.

169

interestandfurtherdetails. TheuserinterfacedesignshowninFig.4attemptstotakeallof these qualities into account and to arrive at a design which is consistentwiththecapabilitiesofX3D.

a pointingdeviceusingtheX3Dviewerinordertozoominon areas of interest. When the user clicks on a particular marker, information about the corresponding sighting is dynamically acquired from the server and displayed below the model. This includes a photograph and information about the species, includinglinkstomoreinformation.Italsoincludesinformation abouttheparticularsightingandaboutthediveduringwhichthe sightingtookplace.Bothofthesemethodsallowtheusertodrill downfromanoverviewtospecificdetails.

4Implementation 4.1ChosenFramework
Django is an Open Source Web application framework which applies the MVC design pattern to the development of Web applications(thoughitusesthetermsModel,TemplateandView ratherthanModel,ViewandController).Itisimplementedinthe Pythonprogramminglanguageandwaschosenbecauseitisone of the more mature MVC frameworks with a well developed featureset.

Fig4:UserInterfaceDesign TheuserinterfaceconsistsofXHTMLformelements,anX3D sceneandanareainwhichtodisplaydetailedinformationabout sightings of species. The user can set filters to visualise colonisationdatabasedoncertainparameters.Theseincludethe daterangeofsightingsandtheconfidenceofidentificationand theresultscanalsobefilteredtoonlyincludecertaingroupsof species. Thevisualisationofthesightingsthemselvesisachievedbyaset of colourcoded, translucent spheres acting as markers. This approach was thought to be more flexible than an alternative approachconsidered,whichinvolvedcolouringinsectionsofthe hull.Thepositionofthesphereindicatestheapproximatelocation ofasighting.Thecolourofthesphererepresentsthegroupto whichthespeciesbelongs.Thesizeofthesphererepresentsthe numberofspecimenssighted.Thesphere'sdiameterisaproduct of the number sighted and the average diameter of a single specimenofthatspeciesasspecifiedintheMarLINdatabase. The spherical markers afford a clickingformoreinformation actionbychangingthecursorintoapointingdevicewhentheyare hovered over and by changing their material render from translucenttocompletelyopaque.Thespheresaretranslucentso that one sphere does not entirely block the view of another, therebydistortingthedata. X3Dcouldhavebeenusedtocreateaccurate3Drepresentations ofspecies,exhibitingalevelofgeometricandbehaviouralrealism sufficienttocreatetheimpressionofalivingreef.Instead,the chosen visualisation is abstract rather than exhibiting visual realisminordertoemphasiseinformationalcontentratherthan visualeffects.Experimentationwasmadewithfogandlighting effects to give an underwater ambience as with the current Virtual Scylla environment. However, whilst these effects were aestheticallyeffectiveitwasfeltthattheytendedtodistractfrom orobscurethecontentratherthanenhanceit. TheuserisabletonavigatetheScyllamodelin3dimensionswith

4.2ModelImplementation
Implementingthedatamodelwasverystraightforwardusingthe Django frameworkandwassimplyacaseofcodingthevarious dataentitiesasobjectsinthePythonprogramminglanguage.An exampleisshownbelow.
classSpeciesGroup(models.Model): group_id=models.AutoField(primary_key=True) name=models.CharField(Name,max_length=255) info_url=models.URLField(InformationURL, max_length=255) colour_code=models.CharField(ColourCode, max_length=6)

AlthoughMySQLwasusedinthisinstance,Djangocangenerate theunderlyingdatabaseinarangeofrelationaldatabaseengines and provides a standard data access API which abstracts away fromanyunderlyingenginewithastandardsetofdatatypes. Djangoprovidesalargecollectionofusefuldatatypessuchasa URLField which are automatically created as an appropriate datatypeintheunderlyingdatabaseandalsoprovideahostof validationfeatures. Djangoprovides anautomaticallygenerated administratorWebinterfacetotheimplementeddatamodelwhich utilises this validation and allows data in the database to be viewedandmodified.

170

4.3ViewImplementation
Thefirsttaskwastoconverttheexisting3DSMaxScyllamodel into X3D format. Several automated methods of achieving this conversionwereconsidered,includingapotentialmigrationpath viatheCOLLADAformat.Intheendthemostsuccessfulresults wereachievedbyimportingthe3DSmodelintoVivatyStudioand exporting as X3D. This process converted the geometryof the modelintoagroupofX3Dindexedfacesets,andalsopreserved themultipleviewpointsdefinedinthemodel. With the basic Scylla template in place, the next step was to implement the XHTML user interface elements. This took the formoftwomainXHTMLtemplatesonewhichcontainedthe formelementstoenterfilteringparametersandembeddedthe3D scene,andasecondwhichwouldcontainsightingdetails.ACSS stylesheetwasalsocreatedtodefinethelayoutandpresentationof theXHTMLinterfaceelements. Finally,thevisualisationmarkerswereimplementedasaseparate X3Dtemplate. As well asthe markuplanguage beingused, Django templates includeaspecialsetoftagswhichallowdatafromthedatabaseto becomposedwiththetemplate. Thecodeextractbelowshowsatemplatewhichwouldcompose an XHTML unordered list with details of a particular sighting fromthedatabase.Thevariablestocomposewiththetemplateare markedupwithdoublecurlybrackets.
<ul> <li><strong>Reporter:</strong>{{reporter}}</li> <li><strong>Count:</strong>{{count}}</li> <li><strong>Description:</strong>{{desc}}</li> </ul>

(r'^sighting/(\d)/$','webscylla.views.sighting')

Intheexampleabove,anyrequesttoaURIwhichconsistsofthe string sighting/ followed by an integer is passed to the sightingcontrolleralongwiththeintegerspecified. OnceanHTTPrequestpassestoacontroller,thecontrollerhas twomainfunctions.First,thecontrollerfetchesadatasetfromthe database based on the parameters passed to it in the HTTP request.Belowisanexampleofalineofcodewhichutilisesthe DjangodataaccessAPItoquerythedatabasefordatarelatingtoa particularsightingbasedonasightingIDandplacethatdatainan object.
sighting=Sighting.objects.get(sighting_id=s)

Next,thecontrollerrendersthatdatasettotherelevanttemplate anddefinestheMIMEtypeoftheresourcetobesentbacktothe Web browser that requested it. Below is an example of the sighting object from earlier being passed to template sighting.htmwiththeMIMEtypetext/html.
returnrender_to_response('sighting.htm', {sighting:sighting} mimetype=text/html)

TheexamplesgivenhereareforXHTMLforsimplicity,butthe factthattheMIMEtypeoftheresourcereturnedcanbespecified meansthatthesesametechniquescanbeappliedtoX3D.This againisaverypowerfultechniquefordynamicallygeneratingan X3Dscenefromadatabase. This technique is used to dynamically generate the position, colour, size and hyperlink of sighting markers within the X3D scene,togeneratethelistofcolourcodedspeciesgroupsforthe filtering user interface and to generate the details of sightings whichareloadedwhenauserclicksonamarker.

Aswellasthebasiccompositionofvariablesintoatemplateas shownabove,othertemplatingtagsincludefunctionalitysuchas iteration or selection. This means that a list of values can be passedtothetemplate,andanXMLelementcreatedforeachitem inthelist.Thisfeatureisusedtocreatethevisualisationmarkers inX3D.TheuseofthemoreadvancedDjangotemplatetagsin conjunction with X3D markup is a very powerful method of dynamicallygeneratinganX3Dscene.

4.5SAI&AJAX3D
By scaling up the simple techniques described so far to more complexexamples,abasicsynchronoussystemwascreatedwhich wascapableofacceptinguserinputoffilterparameters,fetching relevantdatafromthedatabaseandgeneratinganX3Dsceneto visualisethatdata. Whatwasnowmissingwastheabilitytoclickonaparticular spherical marker to drill down to details of the corresponding sighting.Also,inthedesignsectionitwasmentionedthatAJAX techniquesshouldbeusedtodynamicallyaddandremoveobjects fromthe3Dscene,insteadofhavingtoreloadthesceneevery timeachangewasmade. To implement these features, the AJAX3D library was used in conjunctionwithX3D'sSceneAccessInterface(SAI).AJAX3Dis asmallJavaScriptlibrarywhichhelpsthedevelopertointeract withanX3DscenefromtheoutsideviatheSAI.Thisincludesthe abilitytodynamicallychangea3DscenefromJavaScript,listen foreventsinthesceneandsendasynchronousHTTPrequeststoa

4.4ControllerImplementation
The controllers are implemented as Django views, but also includethedefinitionofaURIschema.WhenanHTTPrequest reachesthe Django application,theURIiscomparedagainsta seriesofregularexpressionsinturnuntilamatchisfound.Ifa match is found then the request is passed on to a particular controller(Djangoview). This behaviour is defined by a list of Python tuples which associate a regular expression with a particular controller, an exampleisgivenbelow.

171

WebserverforsnippetsofX3Dtobeaddedintothescenegraph. Theinitialimplementationtoallowtheusertoclickonamarker todrilldowntofurtherdetailsutilisedaTouchSensornodeanda correspondingJavaScriptlistenerforeachmarker.Thesequence ofeventswasasfollows: TheuserclicksonamarkerusingaTouchSensorrelated tothemarkergeometry 2. TheJavaScriptlistenerregistersanisActiveboolean eventfromtheTouchSensor 3. JavaScriptcodesendsanXMLHTTPRequesttothe servertorequestasnippetofXHTMLdescribingthe detailsofthecorrespondingsighting. 4. ThesnippetofXHTMLisaddedtotheXHTMLpage viatheDocumentObjectModel(DOM). Thismethodworkedverywellforasinglemarkerandlistener,but when scaled up to a large number of dynamically generated markers, problems were experienced. These problems are discussedfurtherinsection5. In order to allow markers in the scene to be updated without havingtoreloadthewholescene,the AJAX3D librarywasused again.Whentheuserclickedonthevisualisebutton,insteadof theXHTMLformbeingsubmittedintheusualway,theaction was interpreted by JavaScript. The sequence of events was as follows: TheuserfillsouttheXHTMLformelementswithfilter parametersandclicksthevisualisebutton. 2. JavaScriptregistersthatthebuttonhasbeenclicked, readsthecontentsoftheHTMLformelementsviathe DOMandgeneratesaURIstringtoformanHTTPGET requestcontainingthespecifiedparameters. 3. JavaScriptsendsanXMLHTTPRequesttotheserver withthegeneratedURIstringtorequestasetofresults inX3Dformat. 4. Theserverqueriesthedatabasebasedontheparameters storedintheHTTPGETURI,composesanX3D markerstemplatewiththequeryresultsandreturnsthe resultstotheWebbrowserwiththeMIMEtype model/x3dxml. 5. JavaScriptreceivestheX3Dstringfromtheserver, turnsitintoX3DusinganAJAX3Dhelperfunction, removesthepreviousgroupofmarkersandaddsthe resultingX3DnodesintothescenegraphviatheSAI. Thisfunctionalitywassuccessfullyimplemented,buttherewere difficultiesinstep5whicharediscussedinsection5. 1. 1.

Django supports a wide range of database servers and Web serversonalmostanyplatformthatcanrunPython.TheMarine BiologicalAssociationhaskindlyofferedtohostWebScyllaupon theproject'scompletion.

Fig5:CurrentImplementation

5ProblemsEncountered 5.1FreeWRLRendering
Whenthe3DSMaxmodeloftheScyllawasexportedtoX3D,it wasfoundnottorendercorrectlyintheFreeWRLX3Dvieweron eitherLinuxorOSX.Themodelwastestedinthe Octaga and VivatyviewersinOSXandWindowsrespectivelyandwasfound to render correctly. Upon sending a detailed report to the FreeWRL mailinglist,itwasdiscoveredthattheexported Scylla model demonstrated a known bug in FreeWRL calculating the near/farplanesintheviewfrustrum.TheScylla modelwasused asatestcasebyJohnA.Stewartwhohadbeenworkingonthis pieceofthe FreeWRL codeandwasabletosuccessfullyrender themodelinadevelopmentversionofthecode.Thiscodehas sincebeenreleasedandtheScyllamodelrenderscorrectlyinthe currentversionofFreeWRL.

5.2VivatyConditionalGET
During the development of the WebScylla application, it was found that the Vivaty Player browser plugin would not render certain dynamically generated content. The Wireshark packet sniffer tool was used to analyse the HTTP packets being sent between the Web browser & plugin and the Web server to diagnosetheproblem. It was discovered that the problem was being caused because Django (andlater Apache)wasnotincludingaLastModified headerwithHTTPresponses,presumablybecauseofthedynamic natureofthecontent.ForsomereasontheVivatypluginsendsa secondaryHTTPGETwithaconditionalclausebasedontheLast ModifieddatereturnedintheresponsetothefirstGETsentbythe hostbrowser.Thismeantthattheplugininadvertentlydownloaded theX3Dresourcetwicebecauseitreceiveda200OKresponse

4.6DeploymentPlans
Atthetimeofwriting WebScylla isnearingcompletionandwill soon be deployed into production, a screenshot of the current implementationisshowninFig.5. Django hasitsowninternal HTTP server for use during development, but a more robust solutionisrequiredwhenanapplicationgoesintoproduction.A successfultestdeploymentofWebScyllahasbeencarriedoutona Debian GNU/Linux server running the Apache HTTP server, MySQLdatabaseserverandPython.

172

insteadofthe304NOTMODIFIEDresponseitexpectedand subsequentlyhung. ThefactthattheVivatypluginhungundercertainconditionswas reported to Vivaty. In the mean time, a workaround was implemented by enabling some Django middleware which intercepts the HTTP response and spoofs a 304 NOT MODIFIEDresponsetoallconditionalGETs.

groupofmarkerscouldbedynamicallyaddedtothescene,the previousgroupofmarkersfirstneededtoberemoved. OnesolutiontothisproblemproposedontheAJAX3Dforumsis tokeeptrackoftheaddednodesinaJavaScriptarrayforlater access,thoughitwasnotclearhowthiswouldbeachieved. An alternative detailed solution was proposed by Douglas du Boulay,alsoontheAJAX3Dforums,whichimplementedaddand deletefunctionalityforaspecificpointinthescenegraphusinga Prototype node. This solution was rather elaborate but worked well,thoughitwasindicatedthatatleasttwoX3Dviewersseem toexhibitmemoryleakswhenthismethodisused.

5.3EventListeners
Asmentionedinsection4.5,inordertodetectwhenauserclicked on a marker in the WebScylla 3D visualisation, a JavaScript listenerwasregisteredwiththeX3DSAI. TheWebScyllaapplicationrequiredthataTouchSensorbeadded toalargenumberofdynamicallygeneratedmarkersinthe3D sceneandthatJavaScriptcouldidentifywhichmarkerhadbeen clickedinordertocarryouttheappropriateaction.However,it wasdiscoveredthataseparateJavaScriptlistenerisrequiredfor each event source, so a single listener could not listen for all eventsandidentifythesource.BecausetheTouchSensornodes aredynamicallyaddedintothescene,theirnumberisnotknown untilaftertheJavaScriptscripthasbeenacquiredfromtheserver, andtheirnumberchangesduringtheapplication'suse. As aresultof discussionson theX3DPublic mailinglist,two potential solutions to the problem were proposed. The first proposalinvolveddynamicallygeneratingJavaScriptcodeusing Pythonontheserverside,whichturnedoutnottobepossibledue tothefactthatthemarkersthemselveswereaddedbyJavaScript aftertheinitialscenehadloaded. ThesecondproposedsolutioninvolvedroutingisActiveevents fromalltheTouchSensorstoasingleScriptnodewhichwould then in turn fire events to an external script via the SAI. An elaboratesolutionwasdesignedbyroutingtogetherTouchSensor, BooleanFilterandIntegerTriggernodestoasingleScriptnodebut unfortunately this was not successfully implemented. The implementationwasmadedifficultbyalackofusefuldebugging information from the Vivaty browser plugin and a lack of documentationonSAIcallbackfunctions. Eventually a much more crude system was implemented using AnchornodestoreplacetheelaborateTouchSensoreventrouting system.Asimpleanchorisassociatedwiththemarkergeometry whichwhenclicked,loadsanXHTMLpagesynchronouslyintoa targetXHTMLframe.

5.5Crossplatformsupport
Difficulties were experienced in implementing an application which would work for multiple X3D viewers on multiple platforms. ThesedifficultiesincludeddiscrepanciesbetweenwhichMIME typesandfileextensionstouseforX3Dscenes,theuseofnon standardJavaScriptcallstotheSAIusedintheAJAX3Dlibrary,a generallackofdocumentationandstandardisationfortheexternal SAIandinconsistentbehaviourofAnchortagswhenlinkingtoan externalWebresource.

6Conclusions 6.1LessonsLearned
Inconclusion,aModelViewControllerWebframeworkcanbea powerfultoolforrapidlydeveloping3DWebapplications.This approachisparticularlysuitedtodatacentricapplicationsbased aroundarelationaldatabase. The MVC design pattern can be seen as a variation on the CompositionPublishingParadigmforX3Dwhichtakesadvantage ofObjectOrientedmethodologiesandclearlyseparatesdata,logic and presentation. An MVC framework abstracts away from a particulardatabaseserverandWebserver,allowingthedeveloper toconcentrateondevelopingtheapplicationitselfandproviding multipledeploymentoptions. AJAXtechniquescansuccessfullybeappliedtoX3Dapplications tocreateahighlyinteractiveandresponsiveuserinterface.Using AJAXmeansthatpartsofthescenegraphcanbedynamically alteredwithouthavingtoreloadtheentirescene.JavaScriptcan beusedtocoordinateinteractionbetweenanXHTMLdocument, anX3DsceneandaWebservertocreateaWebapplicationusing ahybridoftechnologies. Therearecertainbasictaskswhichareverydifficulttoachieve with current implementations of X3D's external Scene Access Interface. These include updating and deleting dynamically generatednodesinthescenegraphandlisteningforeventsfrom multiplesensornodes.Workcouldbedonetoimprovefeatures andstandardisationinthisarea. Whendesigningauserinterfaceforascientificvisualisationtool

5.4RemovingDynamicallyGeneratedNodes
Tutorialsonthe AJAX3D Websitedescribehowtodynamically addnodesintotheX3DscenegraphviatheexternalSAIusing JavaScript.Whattheydon'tdescribeishowtoupdateorremove thosenodesoncetheyhavebeenadded.ItappearsthattheSAI providesnoeasymethodofachievingthis,asnoreferencetothe dynamicallycreatednodesexistsoncetheyhavebeenaddedtothe scene. This was a problem for WebScylla because before an updated

173

care must be taken to create an interface which emphasises contentratherthanthetechnologyusedtopresentit.Theuseof interactive computergraphics forscientific visualisationcreates newopportunitiesforpowerfulvisualisationswhichallowtheuser toeasilydrilldownfromahighleveloverviewtospecificdetails. However,thistechnologyalsobringswithitnewchallengessuch ashowtodepictaffordancesofvirtualobjects. ThedeclarativestyleX3Dusestoembedlogicina3Dscenecan seemunusualforWebdeveloperswhohavelearntbestpractices whichpromoteastrictseparationofdata,logicandpresentation. BecausepresentationisthemainpurposeofX3D,itisnotreally possibletoseparatedataandpresentation,butperhapsitcouldbe possible to separate geometry from materials and textures by usingCSStodescribetheappearanceofanobject. X3DisapowerfulXMLbasedformatfordeliveringinteractive 3DgraphicsovertheWorldWideWebandsoftwaretoolsexistto facilitatethemigrationof3Dmodelingdatafromothercommon dataformats.

7Acknowledgements
The authors would like to thank Dan Lear of the Marine Biological Asssociation and Deborah Snelling of the National Marine Aquarium for their much appreciated help as subject matterexperts.

8References
BOOCH,G.,JACOBSON,I.,ANDRUMBAUGH,J.1999.TheUnified SoftwareDevelopmentProcess.AddisonWesley. BURBECK,S.1987.ApplicationsProgramminginSmalltalk80: HowtoUseModelViewController(MVC).SoftsmartsInc. FIELDING,R.T.2000.ArchitecturalStylesand theDesignofNetworkbasedSoftwareArchitectures,PhD thesis,UniversityofCalifornia,Irvine. GELAUTZ,M.,BRANDEJSKI,M.KILZER,F.,ANDAMELUNG,F.2004. Webbasedvisualizationandanimationofgeospatialdata usingX3D,InProceedingsofthe2004IEEEInternational GeoscienceandRemoteSensingSymposium(IGARSS'04),7, 47734775. GEROIMENKO,V.,ANDGEROIMENKO,L.2000.VisualisingHuman ConsciousnessContentusingJava3D/X3Dand PsychologicalTechniques,InProceedingsofthe2000IEEE ConferenceonInformationVisualization,London,UK. 529532. HACKOS,J.,ANDREDISH,J.1998.UserandTaskAnalysisfor InterfaceDesign.Wiley. LEECE,M.2006.SinkingaFrigate.Ingenia,29,2732. MCINTOSH,P.,HAMILTON,M.,ANDVANSCHYNDEL,R.2005.X3D UML:enablingadvancedUMLvisualisationthroughX3D. InProceedingsoftheTenthinternationalConferenceon3D WebTechnology,Bangor,UK.135142. NATIONALMARINEAQUARIUM[2005]FriendsofScyllaNews3. Newsletter.Plymouth,UK. POLYS,N.F.2005.PublishingParadigmsforX3D,InGeroimenko, V.,Chen,C.(ed.)VisualizingInformationUsingSVGand X3D:XMLbasedTechnologiesfortheXMLbasedWeb. Springer.UK.153180. STONE,R.2007.VirtualScylla,UT2:TheMagazineoftheSociety forUnderwaterTechnology,2,2,3032.

6.2Futurework
Theapplicationdescribedinthispaperonlyscratchesthesurface ofthecapabilitiesofX3Dandthereisgreatpotentialforfuture work.Forexample,theanimationfeaturesofX3Dcouldbeused asaneffectivetoolforvisualisingtrendsinthecolonisationofthe Scyllareef. Spherical markers are used to represent sightings of species as partofWebScylla's3Dvisualisation.Thecurrentimplementation appliesalinearscalingtothediameterofthespheretorepresent thenumberofspecimenssighted.Applyingacubicscalingmight giveamorefaithfulrepresentationofthephysicalspacetakenup byparticularspeciesonthereef. Manyoftheproblemsexperiencedintheimplementationofthe WebScylla application were caused by attempting to create a hybriduserinterfaceusingelementsofbothXHTMLandX3D. Futureworkcouldinvestigatebuildingauserinterfacewhichruns entirely inside an X3D browser, perhaps using a headsup displayforsomeoftheinteraction. Insection2itwasnotedthatthelocationdatacurrentlystoredfor sightings of a species is not accurate enough for meaningful visualisation. For the purposes of demonstrating the system, arbitrarylocationshadtobeaddedtoexistingsightingdata.Atthe timeofwriting,workisbeingcarriedouttocreateaninterface wherebydiverscanreportsightingsofspeciesdirectlyusingthe Webapplication,specifyingpreciselocationsofsightingsin3D spaceusinganinteractive3Dinterface.Thiswillnotonlyprovide afasterandmoredirectroutefordiverstoreportsightings,but could even have the effect of improving the precision of the recordeddata. ItishopedthatWebScyllawillprovideahighlyextensiblesystem whichcouldbeusedforvisualisingallkindsofdatarelatingtothe Scylla reefandsurroundingareainthefuture. Django isavery capableandflexibletoolwhichshouldbeofgreathelptoany futurework.

STONE,R.,WHITE,D.,GUEST,R.ANDFRANCIS,B.2009.TheVirtual Scylla:Anexplorationofseriousgames,artificiallifeand simulationcomplexity,VirtualRealityJournal13,1,1325.

174

TUFTE,E.R.,1983.TheVisualDisplayofQuantitative Information,GraphicsPress,Cheshire,Connecticut. TWOFOURPRODUCTIONSLTD2004.TheSinkingofScylla:The CreationofaReef.Documentary.TwofourProductionsLtd. UK.

WHITE,D.2008.DevelopingArtificialLifeSimulationsofMarine BiologyandExploringMeasuresofComplexity.In ProceedingsofEMS'08:TheSecondUKSIMEuropean SymposiumonComputerModelingandSimulation

175

176