Design for Another World — Virtual Reality Beach Scene
Summary
In this design sprint, we explored virtual reality to consider what it will be like when computation can transport us to another place. We discussed that the business and pace of the real world can easily produce negative emotions in a person who’s trying to juggle many tasks and in terminally ill patients struggling with life everyday that create stress, anxiety, and lack of relaxation, which stifle creativity and peacefulness. So, we set out to create an environment for a person to escape all of that for a minute and have a chance to relax and explore a peaceful beach. Below is a short video exploring the 3D environment:
Design Ideation
Brainstorming
Since this project was very open-ended, we wanted to get creative with some ideas, but at the same time, we wanted to develop a meaningful impact on its users. We also wanted to make sure our ideas were practical based on the amount of time and skills we had. So, we looked at examples on the A-frame example site to help us trigger our ideas and view our available tools. Below are a list of virtual reality ideas we brainstormed:
- A calm environment for terminally ill patients or stressed individuals
- An egg hunt on the WPI campus for students during finals to relieve their stress
- Display WPI in the future to help people visualize what it would be like
- Interactive virtual reality dancing game to uplift someone feeling down
- A cable car that would tour around a city like Boston for people who are unable to go but would love to tour the area
- An improved echo360 that lets students, who can’t attend class, zoom in and view the whole classroom
We eventually went with the idea of developing a virtual reality scene that represents a peaceful environment for ill or stressed people as we thought it would have the biggest impact on a wide variety of people. Next, we started researching what areas to demonstrate to create the most serene scene for the users.
Initial Design
According to scientific studies, it has been shown that being near water creates a peaceful and relaxing environment, which is exactly what we sought to create for users of our virtual reality project. It’s a visually stimulating place that induces positive emotions in humans, both by the sight of the color blue (which is a color we are naturally attracted to and encourages creativity and rest) as well as the sound of water (which gives you a chance to calm down and focus internally).
Thus, via our research, we settled on a peaceful beach environment that’s populated with objects that a person can walk around in and explore, so that they may escape the business of the world and relax on a beach with the positive emotions it produces via the sights and sounds.
Realization Design
We decided to settle on our design we developed during our initial design phase as we liked the look, feel, and idea of it. Below are some finalized features or operations we thought of adding and a focus on where we wanted to take this virtual reality design:
We initially thought about adding sound, more pictures, color, and a feature to move around so that we could research more about how to implement these features. In addition, we thought it would be cool to allow users to test our environment with Virtual Reality Goggles which is what we tried in our next phase.
Formative User Testing
We wanted to test our concept with users, who were stressed about finals week as it was fast approaching at WPI, to gauge more opinions about how to improve our idea. We integrated a 360 degree virtual reality picture of a beach into the provided HTML code on glitch associated with A-frame and asked users to look through a headset to test it. Below are a list of suggestions they gave us:
- Great concept of setting up a beach environment, it helped calm me down
- Add sound and objects to make the experience more natural
- Would be nice to be able to walk around and explore the scene
- Have animations of certain items to make it even more interesting
- Include text/instructions in a visible location for better user usability and intuition
Final Product
When we started to implement our design, we came across some hurdles in our development stage of our project. The first challenge was that none of us had experience with virtual reality, let alone A-frame and glitch. We started looking into examples and ideas early so that gave us an opportunity to familiarize ourselves better with the technicalities. Moreover, there were a lot of tutorials on using glitch which again helped us a lot with the coding details. We also found the base code that we used in our formative user testing phase to build off of which aided in the process. The second challenge we had was to make sure to find object (.obj) files for our images as that is the best and easiest thing to incorporate into A-frame. As a result, it narrowed down what we could include in our project and made it harder to find compatible objects. We came across a site called Turbosquid that allowed us to search different objects and the file type we wanted. Our next objective was to figure out how to build our virtual scene and integrate these objects into it.
Development
To get a basic virtual scene going, we first found this website to link to any background pictures we wanted. We had to make sure to search “equirectangular 360” beach pictures, the most compatible type of image for VR applications. Then we used the given “img” attributes in HTML to upload our pictures on glitch and provided the link we created in the previous step. Next, we used the “a-sky” attribute for our sky scene and the “a-plane” attribute for our ground or ocean texture with the required parameters such as width, height, rotation and source. The resulting figure is below:
Our next concern was figuring out how to place the models we obtained into the virtual reality beach scene. We followed the steps above, but this time uploading an object file and providing that link using the “a-asset-item” attribute. Then we used the “a-entity” attribute to add the various parameters, most importantly position, color, file type, rotation, and scale. It was tough to guess-and-check on the position for so many objects so we found that the debugger was useful:
In addition to adding objects, we wanted to include some more of the suggestions our users gave us during the formative user testing phase into our design. We added sound for the beach waves, the dolphins, and the trees to create an illusion to make the user feel they were actually there. We also added a better title, “Look Around the Beach VR”, to increase user usability. There was also a built in movability function in which we could use our keyboard to move around the scene. The following are some snip-its of our final code for this project:
Final Design
After encountering some hardships and setbacks, we were able to deliver a working product. We added more objects using the process above to our environment to make it feel more natural. Here is the resulting 360 degree virtual reality scene:
We also wanted to add some animations as per the user’s feedback to the dolphins for example, but we were unable to get it to look natural on screen. We decided we could use animations to further expand on the project later on once we got more experience with glitch and A-frame to liven up the seagulls, beach ball, or sailboats.
Overall, we were satisfied with our Beach Scene Virtual Design since it fulfilled our overarching goal of providing calmness to the user given the time and skills we had to develop it.
Feedback
We had our demo day for this project on 4/30 where we demonstrated our design to various other students in our HCI class. We got a lot of comments on where the design went well and where we could improve using the “I Like, I Wish, What if” format. Many students liked the wave and dolphin sounds from our beach environment and commented that it feels natural, the concept as a whole of creating a beach scene for terminally ill or stressed individuals, and the appropriate use of objects in our scene. Some areas students thought we could work on were adding animations for the crab, birds, and even dolphin, there were more interactiveness for the user, and increase the quality and texture of the objects.
Looking Back
In the future, there are areas where we can refine our design for the Virtual Reality Beach Scene. As mentioned before, we could add movement for some animals on the beach scene to entertain the users. We could also get rid of the click and drag feature and make it only operational on the keyboard. We could make it more interactive by letting the user drive a boat or the jet ski in the ocean for example. Moreover, we could improve the color and texture of the trees to make it look more natural.
Overall, if we had more time to explore the technicalities of glitch and A-frame, we could develop the skills needed to expand on this project further to create a more natural beach environment for the user.
