Collaborative Virtual Environments for Urban Regeneration and Public Participation in Planning
By: B00186941; B00199575; B00194062; B00188838; B00199601 For: Dr. Daniel Livingstone
Date: 17/05/2013 Website URL: http://webdev.student.uws.ac.uk/students/cvegroups/cvebuchan/
Collaborative Virtual Environments Assignment 2 Report Introduction This project aimed to develop a collaborative virtual environment utilizing a virtual world. This virtual environment is designed to aid the urban regeneration of Paisley and had to be capable of using public participation in the planning process. The main problem that had to be tackled is how 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 and manipulated to include areas where people could collaborate. This virtual environment however would not be able to promote collaboration on its own, it would also have to have a website 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 that represent part of the center of Paisley. This area includes Paisley Abbey, Paisley Town Hall, and the garden next to the Town Hall. Each of these areas have been outfitted to be used collaboratively with chair for avatars, internal web browsers with links to the website, a table to give the illusion of an office type environment, and a message board for people to post their suggestions. This document covers the design, implementation, and evaluation of both the virtual environment and website.
Design Project Choice The aim of this project is to redevelop an area of Paisley town centre to support the Plan for Paisley 2020 scheme. The focus of it is to regenerate and transform an area of Paisley to encourage future business, housing and entertainment venues to be built, bringing interest back 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 the project is to design and build a website to work alongside the 3 dimensional model, hosting instructions and information on how to join and where to download the resources required. It is also to incorporate information about each member of the group and the tasks they were involved in, along with providing a guestbook for visitors to say what they think about the planned 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 Collaborative Virtual Environments
2
Buchan Group
Collaborative Virtual Environments Assignment 2 Report students. The next stage of the project was to determine the most suitable technology to be used in order to successfully complete our aim. After a group discussion and after looking at different technologies available to us to use such as Open Wonderland, Second Life and also MineCraft our group finally came to the decision to use the software OpenSim in order to create the 3 dimensional model of Paisley. The area which was agreed upon was that of Paisley Abbey, 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 to express their ideas on areas that need redeveloped within the Paisley area, along with building items to demonstrate their ideas. The website will be built using html and CSS files and uploaded to the university server using an FTP program such as FileZilla. In means of the report a standard word document would be used by each member to write their section of the report. These would then be joined together in a Google document.
Project Management The group decided to use Google docs in order to create the documentation that was required for the project, this allowed all members of the group to access and amend the document at the same time while not affecting each other’s work. It was also possible to see who had contributed to which sections easily through this technology. To aid communication between all members to was decided that a Facebook group page would be most successful. This means of communication allowed for only members of the group to see the post, it also recognised who had seen any comments made, to ensure everyone was keeping up to date with all discussions online. By using Facebook it meant if someone had an idea they could post it straight away for all users to see, without having to wait for everyone to come online, as would be required with other communication tools such as Skype. The group met every Wednesday morning during the course of the project to have informal meetings. These allowed any issues or problems during the previous week to be addressed and to ensure all members were on schedule for the work. By using the social networking site, Facebook, as our main communication it enabled a record of all comments to be maintained, and also had the facility of telling all members who had seen a message to ensure that everyone was keeping up to date with the work. It was decided that a group leader would be beneficial to the group to distribute work evenly and make sure that all members of the group were doing their share of the work.
Collaborative Virtual Environments
3
Buchan Group
Collaborative Virtual Environments Assignment 2 Report
Discussions taking place on the social networking site Facebook (we created a private group to collaborate)
One of the first tasks the group leader did with support from the rest of the group was to divide up the tasks of the building within OpenSim, the website and also the report. These tasks were split according to the skills that members possessed, and also if any members of the group wanted to work on a particular element of the project. By dividing the tasks equally between all members of the group it allowed everyone to work individually on their sections during the week at times which suited them. By assigning tasks in this way it is hoped that it will allow for a successful completion of the project which we has been assigned to the group.
Design of main deliverable The creation of our collaborative virtual world began with the design stage. We each contributed to the discussion when attempting to decide what to do with the area we had available in OpenSim. The initial topics discussed were to create a model of the town centre and surrounding aspects of the town which could be of interest to users. We had all been in Paisley 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 square garden, the town hall and Paisley abbey would make a presentable combination of engrossing and informative elements of the town to put into our collaborative virtual environment. In the Open Sim we also decided to put an area for collaborating about the town and how users could interact and re-design the town. Each element of our design was going to be made to scale to provide the users with a more immersive experience.
Collaborative Virtual Environments
4
Buchan Group
Collaborative Virtual Environments Assignment 2 Report
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 realistic positioning of the garden, town hall and abbey. Colin made a texture map of the entire area from google maps and placed it into the sim to make the environment a large map of Paisley town centre. It was then easier to plot the area where the buildings and scenery would be located. After the map was created, we each could start developing the prearranged areas we were going to develop.
Environment design Our team’s collaboration took place in the form of meetings (formal and informal) during the 12 weeks of development. We each learned skills relevant to Open Sim during the initial weeks and eventually buildings and scenery began to emerge in the Open Sim world. The environment design was to feature a collaborative area which was agreed by all of us. We decided the best place to situate the collaborative materials such as whiteboards and internet sections for working on redesigning Paisley was adjacent to the abbey. The abbey was to be a eye catching building (as it is in reality) which prompted the collaboration area to be situated next to it. The garden and abbey would be the prominent aspects of the elegance of Paisley to invite the users to learn more about the town and encourage them to think about the town and reinvent the surrounding area(s). Jamie took the role of researching the garden area and creating it. Dunn Square - is a garden named after Sir William Dunn Bart who was an MP for Paisley. The garden area features some Collaborative Virtual Environments
5
Buchan Group
Collaborative Virtual Environments Assignment 2 Report beautiful flower beds, trees, walls and statues. One of these statues is of Queen Victoria and one of a lady with children. Dun Square is used today as a place to walk through and embrace the scenery/statues and what is particularly striking is that the garden is situated in the town centre. It sits directly across from the town hall with its nicely styled architecture and the canal which flows through Paisley under a bridge which adds to the beauty of the town. The garden area 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 which would appear when a user got in range of the statute (similar to in real life, if someone were to approach it to investigate) The garden area was built from a template of the area from google maps which was placed in the Open Sim area we had available and then placing each piece of scenery in the correct location: built using basic shapes such as cuboids to add walls and other details to the area. The script made to produce a text hovering above the statues was: 1 2 3 4 5
default { state_entry() { llSetText("Victoria Dei Cratia reincina et imperatorix Praestatisma MDCCCXXXVII MDCCCCI",<1,20,20>,1); } }
One particular issue with the design of the garden area was trying to merge the other design elements on a lower position on the y axis in Open Sim with Dunn Square on a higher position on the y axis. The walls had to be extruded upwards to allow for a staircase which leads down to the garden to be implemented. A sloping gradient pavement was also put in place to allow users to travel downwards to the town hall and other areas
Collaborative Virtual Environments
6
Buchan Group
Collaborative Virtual Environments Assignment 2 Report
. David took the role of the modeler of the Paisley town hall alongside Colin who created the interior and collaborative elements within. The design featured the creation of the walls and the styled exterior of the building itself. The town hall has two entrances and is rather aesthetically pleasing and grandiose in real life. Therefore, in consideration of the buildings presence in the town, the building was built to accommodate collaboration via lecture theatre inside the town hall allowing for users to take seats and listen to people discuss aspects of their intent for the redesign of the town. A board is also situated at the front of the lecture theatre which can allow for numerous tasks to be highlighted to an audience. For instance a video could be show on the screen or images on websites to communicate better to the users what they mean. In addition to the lecture theatre is a separate smaller room accessible via two stairwells near the main entrance of the town hall. It provides much of the same functionality as provided in the lecture theatre but for a smaller audience. The town hall is accessible via a bridge which goes over the canal that runs through Paisley. The structure was created by designing each section of the building by referring to google street view and thinking of memories of the building having seen the structure of the building in person. Some views on google street view limited the view of the building however which was challenging.
Collaborative Virtual Environments
7
Buchan Group
Collaborative Virtual Environments Assignment 2 Report
Another part of the town that was created is Paisley Abbey. This was designed and implemented by Claude. The design of the abbey was achieved by copying the architecture via some photographs collated by Claude. The abbey was established in 1499 by Walter Fitzalan and 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 textures and a variety of 3D shapes available to build in Open Sim. The interiour of the abbey involved hollowing the block of the building to allow editing the interiour of the abbey. Inside contains decorative pews which were custom made with the Open Sim tools, as was the pulpit. The Lights which hang from the ceiling and light up the interiour were inserted from pre-made models and positioned as they would be in the abbey. When it was completed a sign-post was added to the area stating that it was the abbey and next to it was the entrance. The abbies purpose in the collaborative virtual environment was to draw the attention of the users to admire the magnificent structure. The design of the abbey may therefore inspire or influence people to design better buildings when they collaborate and re-invent the town. This was also the reason why a collaboration area was built adjacent to the abbey. Streetlights and the
Collaborative Virtual Environments
8
Buchan Group
Collaborative Virtual Environments Assignment 2 Report surrounding path-ways leading to the collaborative area adjacent to the abbey were then added to complete the area.
The collaborative area was designed and created by Lynn. It was created to allow a space within the world to communicate development of new designs of the town by users of our collaborative virtual environment.Various features were implemented in the collaboration area such as the bulletin board, a neatly designed area for table and chairs (for formal meetings), a website board and a board containing basic instructions for new users wanting to start building their designs in the Open Sim. The bulletin board is used for organising user collaboration and defining details of the work that they partake in together. It could also be used for announcements for users, for example, if a user is offline they can leave a note on the bulletin board for them to check when the log in again to access the virtual Paisley. Secondly, there is a website board which allows the users to access the internet in the Open Sim without exiting the area. It provides access to our website. Certain details on the website can be used from this board in the collaboration area to communicate or find out important information concerning their work with re-designing Paisley. Most crucially, new users will benefit from the instruction board which can help them learn how to use the collaborative virtual environment without exiting the world to find information on the internet or in self help books. Collaborative Virtual Environments
9
Buchan Group
Collaborative Virtual Environments Assignment 2 Report The script made to produce the instruction board was: 1
integer LISTENING_CHANNEL = 40;
2 3
string LISTENING_CHANNEL_STRING = "40";
4 5
integer CHARS_WIDTH = 75;
6 7 8 9 10 11 12 13
addGraffiti(string message) { while (llStringLength(message) > CHARS_WIDTH) { \n\n text += "\n\n \n\n" + llGetSubString(message, 0, CHARS_WIDTH - 1); message = llDeleteSubString(message, 0, CHARS_WIDTH - 1); }
14 15 16
\n\n text += "\n\n \n\n" + message; }
17
clearGraffiti() { 20 text = ""; 21 } 18 19
22
draw() { 25 //llSay(0, text); 26 string drawList = "PenColour BLACK; MoveTo 15,50; FontSize 24; Text " + text + ";"; 23 24
27 28 29
osSetDynamicTextureData("", "vector", drawList, "1024", 0); }
30 31 32 33 34 35 36 37
default { state_entry() { llSetText( "Instructions on building in OpenSim", <0.0, 1.0, 0.0>, 1.0);
38 39
llListen(LISTENING_CHANNEL, "", NULL_KEY, "");
40
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 advanced techniques 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(); 41
Collaborative Virtual Environments
10
Buchan Group
Collaborative Virtual Environments Assignment 2 Report 45
}
46 47 48 49 50 51 52 53 54 55 56 57
listen(integer channel, string name, key id, string message) { if (message == "!clear") { clearGraffiti(); draw(); } else { addGraffiti(message); }
58
draw(); 60 } 61 } 59
The script made to produce the bulletin board was: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
string text = ""; integer LISTENING_CHANNEL = 43; string LISTENING_CHANNEL_STRING = "43"; integer CHARS_WIDTH = 100; addGraffiti(string message) { while (llStringLength(message) > CHARS_WIDTH) { \n\n text += "\n\n \n\n" + llGetSubString(message, 0, CHARS_WIDTH - 1); message = llDeleteSubString(message, 0, CHARS_WIDTH - 1); } \n\n text += "\n\n \n\n" + message; } clearGraffiti() { text = ""; } draw() { string drawList = "PenColour BLACK; MoveTo 15,50; FontSize 22; Text " + text + "";
Collaborative Virtual Environments
11
Buchan Group
Collaborative Virtual Environments Assignment 2 Report 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
osSetDynamicTextureData("", "vector", drawList, "1024", 0); } default { state_entry() { llSetText( "Say /" + LISTENING_CHANNEL_STRING + " <message> to add text." + " Say /" + LISTENING_CHANNEL_STRING + " !clear to clear board", <0.0, 1.0, 0.0>, 1.0); llListen(LISTENING_CHANNEL, "", NULL_KEY, ""); addGraffiti("Please leave your comments or visit our website guestbook."); draw(); } listen(integer channel, string name, key id, string message) { if (message == "!clear") { clearGraffiti(); llListen(LISTENING_CHANNEL, "", NULL_KEY, ""); addGraffiti("Please leave your comments or visit our website guestbook."); draw(); } else { addGraffiti(message); } draw(); }
Collaborative Virtual Environments
12
Buchan Group
Collaborative Virtual Environments Assignment 2 Report
Design of secondary deliverables Besides the prototype implementation within OpenSim, is an accompanying webpage for introduction to the prototype, and instructions for guests to explain how to join/visit the implementation within OpenSim. The webpage is a simple implementation, and requires very little 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 the design and implementation for the accompanying webpage was that of Colin’s and Lynn’s. No particular split-up of this work was agreed, but in the end Colin’s involvement mainly took shape in the layout and design of the webpage, while Lynn took the initiative to create a simple scripted guestbook page, and supplying the text/image content of most pages.
Structure The website will include four main pages, as follows: ● index(.html) ● join(.html) ● about(.html) ● guestbook(.aspx)
Collaborative Virtual Environments
13
Buchan Group
Collaborative Virtual Environments Assignment 2 Report Index/join/about are static pages, while guestbook will require server-side scripting, through the use of ASP.NET/Visual Basic linked to a Microsoft Access 2003 database. The site structure uses a “randomly accessible sequence” meaning that all pages will be directly accessible from any page. Assets of the webpage will be stored in a hierarchical structure, with viewable pages in the public root, while external assets required by the pages will be stored in appropriate subfolders (css/js/db/img) within a folder named “assets”.
Content Design Shared 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 the window, stretching the full width of the window will be visible. Navigation bar containing white links 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 a user sees, a small splash page will be used to show critical information (short video showing the project, large button to instructions, and brief explanation of project). Underneath will be more detailed information of the project. Join - Simple content, explaining how to join the project, from selecting a viewer, to connecting and teleporting to the correct area. Text content should be accompanied with images to assist the user with visual aids. About - Page detailing information about our group, and how work was split and the roles associated with each member. Guestbook - Basic scripted page, with a form input, and display of database contents underneath.
Collaborative Virtual Environments
14
Buchan Group
Collaborative Virtual Environments Assignment 2 Report Screen Designs Shared layout
Index
Collaborative Virtual Environments
15
Buchan Group
Collaborative Virtual Environments Assignment 2 Report Join Join will utilize the container and simply have instructions from top to bottom. About Page will have a div element resembling the following for each member, each one under the last.
Guestbook A form, with a table below, both separated by a line in the middle.
Prototype Evaluation Website The development of the website was split between two members of the group who had experience in the creation and development of websites. The website was developed to give information of the project which was developed, and instructions on how to install the software required to view the virtual environment. It also provided information on each member of the group and the sections of the project they were involved in for the successful completion of the project. One of the more difficult parts of the website was designing and building a guestbook which would allow users to leave their view on the work. This would not only have to be accessible from the website, but also be able to be added to from within the virtual environment. The way this section was built was by integrating an ASP.Net page into the website and using a database to save any comments. This page was then edited with HTML to ensure a unified layout and design across the whole website. One of the areas which were more 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 to amend the layout so that the images and text were positioned correctly.
Collaborative Virtual Environments
16
Buchan Group
Collaborative Virtual Environments Assignment 2 Report Environment The virtual environment was designed to represent the area of Dunn Square, Paisley Abbey and Town Hall, and also the gardens and bridge over the White Cart Water. The environment also includes an area for users to show their designs for redevelopment by either building items and/or write on the bulletin boards with what they would like to see included in the redevelopment of Paisley. The collaboration area also includes an interactive wall which accesses the group website while within the environment. One of the issues which were encountered during the building the 3 dimensional virtual environments was time issues. This was due to all members of the group also having to focus on other pieces of coursework and exams. This was resolved by enabling each member of the group to work on the areas they were assigned individually at times which suited them. To ensure everyone was on target a weekly meeting was held to go over progress and future work which would be required. For the week of submission two meetings were held to enable work to be checked and to confirm with everyone that the work was ready for submission.
Abbey The role of building the Abbey fell on one member of the group, a “primary builder” of the team. The abbey is the largest single building/object as part of the prototype and a beautiful and hard to reproduce landmark of Paisley. Problems encountered during the building of the Abbey involved the problematic task of getting 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 the size of the real Abbey was a difficult task. The “viewer” programs do allow the direct entering of dimensions 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 redesign of the implementation was required, and the need to find some method of lighting the interior was sought after and found. Through the use of the build menu, primitive objects can have a light property to light surroundings. Smaller problems encountered included finding out how to quickly duplicate objects (shift + drag), and the act of putting textures on multiple objects in a way that the building appears as one single object, instead of mismatched. Improvements that could be made, could have included:
Collaborative Virtual Environments
17
Buchan Group
Collaborative Virtual Environments Assignment 2 Report ● ● ● ● ●
Acquiring blueprints of the Abbey, so that a more accurate build/scale could be achieved. Small details on the Abbeys walls could have been added for a prettier and more accurate model. Real windows could have been added, so that the interior for example is visible from the outside. Use of more accurate/nicer looking textures Interior pews could give better appearance inside instead of modified chairs.
Garden Creating the bridge across to the town hall proved challenging. The method that we choose at the 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 be required, it caused a need to redesign the garden and connect the bridge by raising it on the y axis and building a sloping ground to the level of the pathment leading to the town hall and beyond. The scale-ability of the garden area also proved difficult. But thanks to the mapping of the path texture I was able to re-create the appropriate layout of the garden(eg. the wall leading down into 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 the garden in real life. I believe that if we had more time and planned it out a little better, we could have implemented a more realistic gradient to coincide with the other elements in the 3D collaborative environment
Town Hall A number of problems were encountered. In the case of the exterior, there was difficulty in finding 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 of visiting it for research purposes is not realistic due to scaffolding covering the exterior. This meant there was a reliance on third party images, such as those provided through StreetView by Google, with certain angles unavailable. The ease of mistakenly deleting an object by accident was far too common, and unfortunately there was no way to undo.
Collaborative Virtual Environments
18
Buchan Group
Collaborative Virtual Environments Assignment 2 Report Of the interior, the height of the staircases for the conference hall has made the ceiling too short, usually leading to camera clipping issues or seeing through walls. A lot of the interior has empty space which could have been better furnished. While there is an interactive element available for use by say a lecturer or a manager, itâ&#x20AC;&#x2122;s not the most reliable element nor perfectly functional. Due to the way the element loads a unique page on every user's machine, it also means the lecturer canâ&#x20AC;&#x2122;t control what a user sees, the viewers would be expected to interact with it. It may overload services such as Google Docs as well. Improvements could include the use of more accurate textures, perhaps acquired from the building itself. The walls are not completely lined up and could thus be improved to connect together better. Design could be improved with better research details to better keep it to scale and measurements, and the use of actual windows.
Conclusion The idea of the project was to develop a collaborative virtual environment using Opensim. The project was aimed to aid the urban regeneration of paisley, the part of Paisley we made was The Abbey, the town hall and the gardens. The project was to be able to have the public participate in the planning process, the problem presented was for the public to easily collaborate and interact with each other and objects of the area. To tackle this problem a collaboration area and a lecture hall filled with seats and an interactive whiteboard was to be included. A website that could be used to register to the Opensim server and leave comments about the server. The website was also to contain a video of the area being used and a short tour of the place. The finished project contained a functional collaborative virtual environment. The Abbey designed by Claude and built by Claude presents the Abbey the way is from the exterior and gives access to the interior that may not be true to the real abbey but gives the idea of what it looks like. The Town Hall designed and built by David gives the idea of the shape, size and look of the town hall. The interior, done by Colin and part by David, includes a big lecture hall and an interactive whiteboard, and the upper floor contains a office table and a smaller interactive whiteboard to be used for a more private meeting. The garden and surrounding areas done by Jamie and Lynn show how paisley looks like now and gives the opportunity to change it to see what 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 was involved and what they done. It also contains a section allowing new user to join the server and a guestbook that allows comments on the area to be posted. Collaborative Virtual Environments
19
Buchan Group
Collaborative Virtual Environments Assignment 2 Report In conclusion the project that was set out to be done was done well. All aspects that were to be covered was built and designed by the the whole group and the group were in contact with each other throughout all stages via Facebook, Opensim and Google Docs.
Collaborative Virtual Environments
20
Buchan Group