Collaborative Virtual Environements

CollaborativeCollaborativeCollaborativeCollaborative VirtualVirtualVirtualVirtual EnvironmentsEnvironmentsEnvironmentsEnvironments forforforfor UrbanUrbanUrbanUrbanRegenerationRegenerationRegenerationRegeneration andandandand PublicPublicPublicPublicParticipationParticipationParticipationParticipation inininin PlanningPlanningPlanningPlanning

By: B00186941; B00199575; B00194062; B00188838; B00199601For: Dr. Daniel Livingstone

Date: 17/05/2013

Website URL: http://webdev.student.uws.ac.uk/students/cvegroups/cvebuchan/

Collaborative Virtual EnvironmentsAssignment 2 Report

Collaborative Virtual Environments 2 Buchan Group

IntroductionIntroductionIntroductionIntroductionThis project aimed to develop a collaborative virtual environment utilizing a virtual world. Thisvirtual environment is designed to aid the urban regeneration of Paisley and had to be capableof using public participation in the planning process. The main problem that had to be tackled ishow the public could easily interpret and interact with an environment that represented Paisley.To tackle this problem, selected areas of Paisley had to be chosen to represent the town andmanipulated to include areas where people could collaborate. This virtual environmenthowever would not be able to promote collaboration on its own, it would also have to have awebsite along with it that can be accessed through the virtual environment itself.

The end product should be a virtual environment created within OpenSim with models thatrepresent part of the center of Paisley. This area includes Paisley Abbey, Paisley Town Hall, andthe garden next to the Town Hall. Each of these areas have been outfitted to be usedcollaboratively with chair for avatars, internal web browsers with links to the website, a table togive the illusion of an office type environment, and a message board for people to post theirsuggestions.

This document covers the design, implementation, and evaluation of both the virtualenvironment and website.

DesignDesignDesignDesignProjectProjectProjectProject ChoiceChoiceChoiceChoiceThe aim of this project is to redevelop an area of Paisley town centre to support the Plan forPaisley 2020 scheme. The focus of it is to regenerate and transform an area of Paisley toencourage future business, housing and entertainment venues to be built, bringing interestback into the town. The assignment is to design a 3 dimensional model of a section of Paisley,which will allow for multiple users to explore the area online. The second objective of theproject is to design and build a website to work alongside the 3 dimensional model, hostinginstructions and information on how to join and where to download the resources required. Itis also to incorporate information about each member of the group and the tasks they wereinvolved in, along with providing a guestbook for visitors to say what they think about theplanned redevelopment.

This style of project was selected as it most suited the skills that our group currently possessed,due to consisting of a mixture of game development students and information technology



students. The next stage of the project was to determine the most suitable technology to beused in order to successfully complete our aim. After a group discussion and after looking atdifferent technologies available to us to use such as Open Wonderland, Second Life and alsoMineCraft our group finally came to the decision to use the software OpenSim in order tocreate the 3 dimensional model of Paisley. The area which was agreed upon was that of PaisleyAbbey, Town Hall and also the bridge across White Cart Water to the town Dunn square garden,including the statues within this area. It would also include a collaborative area for users toexpress their ideas on areas that need redeveloped within the Paisley area, along with buildingitems to demonstrate their ideas.

The website will be built using html and CSS files and uploaded to the university server using anFTP program such as FileZilla. In means of the report a standard word document would be usedby each member to write their section of the report. These would then be joined together in aGoogle document.

ProjectProjectProjectProject ManagementManagementManagementManagementThe group decided to use Google docs in order to create the documentation that was requiredfor the project, this allowed all members of the group to access and amend the document atthe same time while not affecting each other’s work. It was also possible to see who hadcontributed to which sections easily through this technology. To aid communication betweenall members to was decided that a Facebook group page would be most successful. This meansof communication allowed for only members of the group to see the post, it also recognisedwho had seen any comments made, to ensure everyone was keeping up to date with alldiscussions online. By using Facebook it meant if someone had an idea they could post itstraight away for all users to see, without having to wait for everyone to come online, as wouldbe required with other communication tools such as Skype. The group met every Wednesdaymorning during the course of the project to have informal meetings. These allowed any issuesor problems during the previous week to be addressed and to ensure all members were onschedule for the work.

By using the social networking site, Facebook, as our main communication it enabled a recordof all comments to be maintained, and also had the facility of telling all members who had seena message to ensure that everyone was keeping up to date with the work. It was decided that agroup leader would be beneficial to the group to distribute work evenly and make sure that allmembers of the group were doing their share of the work.



Discussions taking place on the social networking site Facebook (we created a private group tocollaborate)

One of the first tasks the group leader did with support from the rest of the group was to divideup the tasks of the building within OpenSim, the website and also the report. These tasks weresplit according to the skills that members possessed, and also if any members of the groupwanted to work on a particular element of the project. By dividing the tasks equally between allmembers of the group it allowed everyone to work individually on their sections during theweek at times which suited them. By assigning tasks in this way it is hoped that it will allow for asuccessful completion of the project which we has been assigned to the group.

DesignDesignDesignDesign ofofofof mainmainmainmain deliverabledeliverabledeliverabledeliverableThe creation of our collaborative virtual world began with the design stage. We eachcontributed to the discussion when attempting to decide what to do with the area we hadavailable in OpenSim. The initial topics discussed were to create a model of the town centreand surrounding aspects of the town which could be of interest to users. We had all been inPaisley before and had experiences of all the relevant areas of the town - such as the library,the town hall, the abbey, the town centre. After some debate, we agreed that the Dunn squaregarden, the town hall and Paisley abbey would make a presentable combination of engrossingand informative elements of the town to put into our collaborative virtual environment. In theOpen Sim we also decided to put an area for collaborating about the town and how users couldinteract and re-design the town. Each element of our design was going to be made to scale toprovide the users with a more immersive experience.



We used the plan view of google maps to decide what areas would be most suitable to design in the CVE.The purple rectangle indicates the area size we had been assigned and everything inside of it was what

we agreed to develop

The first aspect of the Open Sim area we had to ensure was in place, was the realisticpositioning of the garden, town hall and abbey. Colin made a texture map of the entire areafrom google maps and placed it into the sim to make the environment a large map of Paisleytown centre. It was then easier to plot the area where the buildings and scenery would belocated. After the map was created, we each could start developing the prearranged areas wewere going to develop.

EnvironmentEnvironmentEnvironmentEnvironment designdesigndesigndesignOur team’s collaboration took place in the form of meetings (formal and informal) during the 12weeks of development. We each learned skills relevant to Open Sim during the initial weeksand eventually buildings and scenery began to emerge in the Open Sim world. The environmentdesign was to feature a collaborative area which was agreed by all of us. We decided the bestplace to situate the collaborative materials such as whiteboards and internet sections forworking on redesigning Paisley was adjacent to the abbey. The abbey was to be a eye catchingbuilding (as it is in reality) which prompted the collaboration area to be situated next to it. Thegarden and abbey would be the prominent aspects of the elegance of Paisley to invite the usersto learn more about the town and encourage them to think about the town and reinvent thesurrounding area(s).

Jamie took the role of researching the garden area and creating it. Dunn Square - is a gardennamed after Sir William Dunn Bart who was an MP for Paisley. The garden area features some



beautiful flower beds, trees, walls and statues. One of these statues is of Queen Victoria andone of a lady with children. Dun Square is used today as a place to walk through and embracethe scenery/statues and what is particularly striking is that the garden is situated in the towncentre. It sits directly across from the town hall with its nicely styled architecture and the canalwhich flows through Paisley under a bridge which adds to the beauty of the town. The gardenarea can be accessed on the main street and via 2 staircases.

The inscriptions which are present on the statues had to be recreated as hovering text whichwould appear when a user got in range of the statute (similar to in real life, if someone were toapproach it to investigate) The garden area was built from a template of the area from googlemaps which was placed in the Open Sim area we had available and then placing each piece ofscenery in the correct location: built using basic shapes such as cuboids to add walls and otherdetails to the area.

The script made to produce a text hovering above the statues was:1 default {2 state_entry() {3 llSetText("Victoria Dei Cratia reincina et imperatorix Praestatisma MDCCCXXXVII -

MDCCCCI",<1,20,20>,1);4 }5 }

One particular issue with the design of the garden area was trying to merge the other designelements on a lower position on the y axis in Open Sim with Dunn Square on a higher positionon the y axis. The walls had to be extruded upwards to allow for a staircase which leads downto the garden to be implemented. A sloping gradient pavement was also put in place to allowusers to travel downwards to the town hall and other areas



.

David took the role of the modeler of the Paisley town hall alongside Colin who created theinterior and collaborative elements within. The design featured the creation of the walls andthe styled exterior of the building itself. The town hall has two entrances and is ratheraesthetically pleasing and grandiose in real life. Therefore, in consideration of the buildingspresence in the town, the building was built to accommodate collaboration via lecture theatreinside the town hall allowing for users to take seats and listen to people discuss aspects of theirintent for the redesign of the town. A board is also situated at the front of the lecture theatrewhich can allow for numerous tasks to be highlighted to an audience. For instance a video couldbe show on the screen or images on websites to communicate better to the users what theymean. In addition to the lecture theatre is a separate smaller room accessible via two stairwellsnear the main entrance of the town hall. It provides much of the same functionality as providedin the lecture theatre but for a smaller audience. The town hall is accessible via a bridge whichgoes over the canal that runs through Paisley. The structure was created by designing eachsection of the building by referring to google street view and thinking of memories of thebuilding having seen the structure of the building in person. Some views on google street viewlimited the view of the building however which was challenging.



Another part of the town that was created is Paisley Abbey. This was designed andimplemented by Claude. The design of the abbey was achieved by copying the architecture viasome photographs collated by Claude. The abbey was established in 1499 by Walter Fitzalanand built by 13 monks, of which one was supposedly saint Mirin.

The detail of the brickwork and style of the abbies exterior shell was made with brick texturesand a variety of 3D shapes available to build in Open Sim. The interiour of the abbey involvedhollowing the block of the building to allow editing the interiour of the abbey. Inside containsdecorative pews which were custom made with the Open Sim tools, as was the pulpit. TheLights which hang from the ceiling and light up the interiour were inserted from pre-mademodels and positioned as they would be in the abbey. When it was completed a sign-post wasadded to the area stating that it was the abbey and next to it was the entrance. The abbiespurpose in the collaborative virtual environment was to draw the attention of the users toadmire the magnificent structure. The design of the abbey may therefore inspire or influencepeople to design better buildings when they collaborate and re-invent the town. This was alsothe reason why a collaboration area was built adjacent to the abbey. Streetlights and the



surrounding path-ways leading to the collaborative area adjacent to the abbey were thenadded to complete the area.

The collaborative area was designed and created by Lynn. It was created to allow a space withinthe world to communicate development of new designs of the town by users of ourcollaborative virtual environment.Various features were implemented in the collaboration areasuch as the bulletin board, a neatly designed area for table and chairs (for formal meetings), awebsite board and a board containing basic instructions for new users wanting to start buildingtheir designs in the Open Sim. The bulletin board is used for organising user collaboration anddefining details of the work that they partake in together. It could also be used forannouncements for users, for example, if a user is offline they can leave a note on the bulletinboard for them to check when the log in again to access the virtual Paisley. Secondly, there is awebsite board which allows the users to access the internet in the Open Sim without exiting thearea. It provides access to our website. Certain details on the website can be used from thisboard in the collaboration area to communicate or find out important information concerningtheir work with re-designing Paisley. Most crucially, new users will benefit from the instructionboard which can help them learn how to use the collaborative virtual environment withoutexiting the world to find information on the internet or in self help books.



The script made to produce the instruction board was:1 integer LISTENING_CHANNEL = 40;23 string LISTENING_CHANNEL_STRING = "40";45 integer CHARS_WIDTH = 75;67 addGraffiti(string message)8 {9 while (llStringLength(message) > CHARS_WIDTH)10 {11 text += "\n\n\n\n\n\n\n\n" + llGetSubString(message, 0, CHARS_WIDTH - 1);12 message = llDeleteSubString(message, 0, CHARS_WIDTH - 1);13 }1415 text += "\n\n\n\n\n\n\n\n" + message;16 }1718 clearGraffiti()19 {20 text = "";21 }2223 draw()24 {25 //llSay(0, text);26 string drawList = "PenColour BLACK; MoveTo 15,50; FontSize 24; Text " + text + ";";2728 osSetDynamicTextureData("", "vector", drawList, "1024", 0);29 }3031 default32 {33 state_entry()34 {35 llSetText(36 "Instructions on building in OpenSim",37 <0.0, 1.0, 0.0>, 1.0);3839 llListen(LISTENING_CHANNEL, "", NULL_KEY, "");4041 addGraffiti("To build in open sim right click on the area and select 'create' select the shape of the object

you wish to create. You can also change the size, colour and texture along with more advancedtechniques such as making objects hollow. ");

42 addGraffiti("");43 addGraffiti("Please use the space around to try building for yourself and what you would like to see in the

redevelopment of Paisley");44 draw();



45 }4647 listen(integer channel, string name, key id, string message)48 {49 if (message == "!clear")50 {51 clearGraffiti();52 draw();53 }54 else55 {56 addGraffiti(message);57 }5859 draw();60 }61 }

The script made to produce the bulletin board was:

1 string text = "";23 integer LISTENING_CHANNEL = 43;45 string LISTENING_CHANNEL_STRING = "43";67 integer CHARS_WIDTH = 100;89 addGraffiti(string message)10 {11 while (llStringLength(message) > CHARS_WIDTH)12 {13 text += "\n\n\n\n\n\n\n\n" + llGetSubString(message, 0, CHARS_WIDTH - 1);14 message = llDeleteSubString(message, 0, CHARS_WIDTH - 1);15 }1617 text += "\n\n\n\n\n\n\n\n" + message;18 }1920 clearGraffiti()21 {22 text = "";23 }2425 draw()26 {27 string drawList = "PenColour BLACK; MoveTo 15,50; FontSize 22; Text " + text + "";28



29 osSetDynamicTextureData("", "vector", drawList, "1024", 0);30 }3132 default33 {34 state_entry()35 {36 llSetText(37 "Say /" + LISTENING_CHANNEL_STRING + " <message> to add text."38 + " Say /" + LISTENING_CHANNEL_STRING39 + " !clear to clear board",40 <0.0, 1.0, 0.0>, 1.0);4142 llListen(LISTENING_CHANNEL, "", NULL_KEY, "");4344 addGraffiti("Please leave your comments or visit our website guestbook.");45 draw();46 }4748 listen(integer channel, string name, key id, string message)49 {50 if (message == "!clear")51 {52 clearGraffiti();53 llListen(LISTENING_CHANNEL, "", NULL_KEY, "");5455 addGraffiti("Please leave your comments or visit our website guestbook.");56 draw();57 }58 else59 {60 addGraffiti(message);61 }6263 draw();64 }



DesignDesignDesignDesign ofofofof secondarysecondarysecondarysecondary deliverablesdeliverablesdeliverablesdeliverablesBesides the prototype implementation within OpenSim, is an accompanying webpage forintroduction to the prototype, and instructions for guests to explain how to join/visit theimplementation within OpenSim. The webpage is a simple implementation, and requires verylittle scripting expertise and will make use primarily of static HTML pages.

As the BSc Computing degree provides more experience with web technologies, the role of thedesign and implementation for the accompanying webpage was that of Colin’s and Lynn’s. Noparticular split-up of this work was agreed, but in the end Colin’s involvement mainly tookshape in the layout and design of the webpage, while Lynn took the initiative to create a simplescripted guestbook page, and supplying the text/image content of most pages.

StructureStructureStructureStructureThe website will include four main pages, as follows:

● index(.html)● join(.html)● about(.html)● guestbook(.aspx)



Index/join/about are static pages, while guestbook will require server-side scripting, throughthe use of ASP.NET/Visual Basic linked to a Microsoft Access 2003 database. The site structureuses a “randomly accessible sequence” meaning that all pages will be directly accessible fromany page.

Assets of the webpage will be stored in a hierarchical structure, with viewable pages in thepublic root, while external assets required by the pages will be stored in appropriate sub-folders (css/js/db/img) within a folder named “assets”.

ContentContentContentContent DesignDesignDesignDesignShared layout - All pages will share a basic layout, with a main container of about ~600px width,centered on the page. As well, the use of the dark coloured navigation bar at the top of thewindow, stretching the full width of the window will be visible. Navigation bar containing whitelinks to the right, with each having a sizeable margin separating them.

Index - Acts as an introductory page to the project. As the top of the page will be the first item auser sees, a small splash page will be used to show critical information (short video showing theproject, large button to instructions, and brief explanation of project). Underneath will be moredetailed information of the project.

Join - Simple content, explaining how to join the project, from selecting a viewer, to connectingand teleporting to the correct area. Text content should be accompanied with images to assistthe user with visual aids.

About - Page detailing information about our group, and how work was split and the rolesassociated with each member.

Guestbook - Basic scripted page, with a form input, and display of database contentsunderneath.



ScreenScreenScreenScreen DesignsDesignsDesignsDesignsShared layout

Index



JoinJoin will utilize the container and simply have instructions from top to bottom.

AboutPage will have a div element resembling the following for each member, each one under thelast.

GuestbookA form, with a table below, both separated by a line in the middle.

PrototypePrototypePrototypePrototype EvaluationEvaluationEvaluationEvaluationWebsiteWebsiteWebsiteWebsiteThe development of the website was split between two members of the group who hadexperience in the creation and development of websites. The website was developed to giveinformation of the project which was developed, and instructions on how to install the softwarerequired to view the virtual environment. It also provided information on each member of thegroup and the sections of the project they were involved in for the successful completion of theproject. One of the more difficult parts of the website was designing and building a guestbookwhich would allow users to leave their view on the work. This would not only have to beaccessible from the website, but also be able to be added to from within the virtualenvironment. The way this section was built was by integrating an ASP.Net page into thewebsite and using a database to save any comments. This page was then edited with HTML toensure a unified layout and design across the whole website. One of the areas which weremore difficult was the layout of the images and videos which are embedded within the website.This slight issue was resolved as one of the members working on the website was able toamend the layout so that the images and text were positioned correctly.



EnvironmentEnvironmentEnvironmentEnvironmentThe virtual environment was designed to represent the area of Dunn Square, Paisley Abbey andTown Hall, and also the gardens and bridge over the White Cart Water. The environment alsoincludes an area for users to show their designs for redevelopment by either building itemsand/or write on the bulletin boards with what they would like to see included in theredevelopment of Paisley. The collaboration area also includes an interactive wall whichaccesses the group website while within the environment.

One of the issues which were encountered during the building the 3 dimensional virtualenvironments was time issues. This was due to all members of the group also having to focuson other pieces of coursework and exams. This was resolved by enabling each member of thegroup to work on the areas they were assigned individually at times which suited them. Toensure everyone was on target a weekly meeting was held to go over progress and future workwhich would be required. For the week of submission two meetings were held to enable workto be checked and to confirm with everyone that the work was ready for submission.

AbbeyAbbeyAbbeyAbbeyThe role of building the Abbey fell on one member of the group, a “primary builder” of theteam. The abbey is the largest single building/object as part of the prototype and a beautifuland hard to reproduce landmark of Paisley.

Problems encountered during the building of the Abbey involved the problematic task ofgetting every single primitive shape to line up with each other in a flawless manner. In addition,judging the size of these shapes and making them scale appropriately with what should be thesize of the real Abbey was a difficult task. The “viewer” programs do allow the direct entering ofdimensions in metres which may have helped.

When the map is in night mode, the interior of the abbey was far too dark. To remedy this, a re-design of the implementation was required, and the need to find some method of lighting theinterior was sought after and found. Through the use of the build menu, primitive objects canhave a light property to light surroundings. Smaller problems encountered included finding outhow to quickly duplicate objects (shift + drag), and the act of putting textures on multipleobjects in a way that the building appears as one single object, instead of mismatched.

Improvements that could be made, could have included:



● Acquiring blueprints of the Abbey, so that a more accurate build/scale could beachieved.

● Small details on the Abbeys walls could have been added for a prettier and moreaccurate model.

● Real windows could have been added, so that the interior for example is visible from theoutside.

● Use of more accurate/nicer looking textures● Interior pews could give better appearance inside instead of modified chairs.

GardenGardenGardenGardenCreating the bridge across to the town hall proved challenging. The method that we choose atthe beginning of the project was to have all the elements of the town on the same gradient(180 degrees). When I noticed that the staircase leading down into the garden would berequired, it caused a need to redesign the garden and connect the bridge by raising it on the yaxis and building a sloping ground to the level of the pathment leading to the town hall andbeyond.

The scale-ability of the garden area also proved difficult. But thanks to the mapping of the pathtexture I was able to re-create the appropriate layout of the garden(eg. the wall leading downinto the town)

Improvements to the garden area. The statues would have been created if we had more time.Also, the slope that the garden was built on is a memisis of the actual slope that features in thegarden in real life. I believe that if we had more time and planned it out a little better, we couldhave implemented a more realistic gradient to coincide with the other elements in the 3Dcollaborative environment

TownTownTownTown HallHallHallHallA number of problems were encountered. In the case of the exterior, there was difficulty infinding textures which accurately were similar to the actual town hall. At this current time,there appears to be construction or renovation work on the building, meaning the possibility ofvisiting it for research purposes is not realistic due to scaffolding covering the exterior. Thismeant there was a reliance on third party images, such as those provided through StreetViewby Google, with certain angles unavailable. The ease of mistakenly deleting an object byaccident was far too common, and unfortunately there was no way to undo.



Of the interior, the height of the staircases for the conference hall has made the ceiling tooshort, usually leading to camera clipping issues or seeing through walls. A lot of the interior hasempty space which could have been better furnished. While there is an interactive elementavailable for use by say a lecturer or a manager, it’s not the most reliable element nor perfectlyfunctional. Due to the way the element loads a unique page on every user's machine, it alsomeans the lecturer can’t control what a user sees, the viewers would be expected to interactwith it. It may overload services such as Google Docs as well.

Improvements could include the use of more accurate textures, perhaps acquired from thebuilding itself. The walls are not completely lined up and could thus be improved to connecttogether better. Design could be improved with better research details to better keep it to scaleand measurements, and the use of actual windows.

ConclusionConclusionConclusionConclusionThe idea of the project was to develop a collaborative virtual environment using Opensim. Theproject was aimed to aid the urban regeneration of paisley, the part of Paisley we made wasThe Abbey, the town hall and the gardens. The project was to be able to have the publicparticipate in the planning process, the problem presented was for the public to easilycollaborate and interact with each other and objects of the area. To tackle this problem acollaboration area and a lecture hall filled with seats and an interactive whiteboard was to beincluded. A website that could be used to register to the Opensim server and leave commentsabout the server. The website was also to contain a video of the area being used and a shorttour of the place.

The finished project contained a functional collaborative virtual environment. The Abbeydesigned by Claude and built by Claude presents the Abbey the way is from the exterior andgives access to the interior that may not be true to the real abbey but gives the idea of what itlooks like. The Town Hall designed and built by David gives the idea of the shape, size and lookof the town hall. The interior, done by Colin and part by David, includes a big lecture hall and aninteractive whiteboard, and the upper floor contains a office table and a smaller interactivewhiteboard to be used for a more private meeting. The garden and surrounding areas done byJamie and Lynn show how paisley looks like now and gives the opportunity to change it to seewhat it could be. The website done by Colin and Lynn provides a video tour of the area in use.An introduction to the project and a link to this document. the website also includes who wasinvolved and what they done. It also contains a section allowing new user to join the server anda guestbook that allows comments on the area to be posted.



In conclusion the project that was set out to be done was done well. All aspects that were to becovered was built and designed by the the whole group and the group were in contact witheach other throughout all stages via Facebook, Opensim and Google Docs.

Documents

Collaborative Virtual Environements