Presented to you by Bill Chen, Horio Hu, James Kelly, Jiewen Wu.
Introduction
The theme of this HCI project is to “Design for Another World”, in which we aimed to utilize the power of virtual reality to construct the feeling of visiting an impossible place. To meet this goal, we created an immersive 3-D scene: an underwater dragon palace inspired by the Palace of the Dragon King from the famous literature Journey to the West.
Demo Video
Ideation
At first, we came up with multiple ideas including creating a virtual reality riding tour experience in a mysterious setting, a virtual camping experience with white noise, or a crowded bar setting that provides the users a break from the COVID social distancing.
With these ideas in mind, we decided to explore the available resources and technology before choosing a theme for our project. After exploring various online resources for 3-D models and tutorials, we found some of our ideas difficult to implement due to time and technology constraints. Given the short time frame, we needed to pursue a project that was simple yet elegant, using only the models that were available online.
Having three Chinese international students in the team, we ended up going with the idea of constructing a virtual reality setting based on a traditional Chinese tale that showcases the beauty of Chinese art and culture. The Dragon King of the East Sea, Ao Guang, is a famous character featured in different traditional works of literature including Fengshen Yanyi and Journey to the West. His palace is also an important setting where lots of stories take place. Thus, we decided to build a virtual reality scene of the underwater Dragon King Palace, which is feasible and meaningful at the same time.
To implement this virtual reality scene, we used the A-Frame framework, Glitch, and open-source 3-D models from Sketchfab.
For our visual design, we looked up some sample elements related to underwater palace:
Visual Design
We first aimed to find a proper background for our setting. Through following several different A-Frame examples online, we learned that the background of a virtual environment uses a sky-texture and a ground-texture. It was difficult for us to find underwater-themed pictures to use as the background textures that have the proper dimension we needed: the sky-texture looked better as a panoramic picture and the ground-texture looked better as a square. Thus, we painted our own using the digital painting tool Procreate. After testing how it looked in the virtual environment, we improved upon it by adding lights, bubbles, seagrasses to make it more fit to the overall style.
The setting consists of 3-D models of five major Chinese style buildings, decorations such as a Chinese chessboard, and many different sea creatures including sea turtles, sharks, groups of fish, and jellyfishes.
In order to set the scene more vividly, we added some animations on the models. There are groups of fish swimming around and passing by.
Visual Control
According to the A-Frame documentation, a camera in the virtual reality scene should usually be positioned at the average height of human eye level (1.6 meters). Thus, our camera is positioned at the center of the setting with a height attribute of 1.6.
Since this scene has 3-D models of different sizes, we would like to give control to our users to change the perspective of their view. We used the orbit control for our scene, so the users who do not have any VR equipment can still easily adjust the zoom factor and the view angle of the camera by dragging and scrolling with a mouse.
Audio & Sound
The background music is a song called Drunken Dream by Lin Hai who is known as one of the best music composers in China. Drunken Dream has a mysterious prelude followed by a classical Chinese melody. Led by the traditional stringed instrument zither and harmonized by the Chinese bamboo flute, this song creates a Yin-Yang complement which brings the feeling of balance, harmony, and peacefulness to our scene.
Prototype feedback and thoughts
After we presented our work to the class, we received some feedback from Dr. Evan Peck and our classmates. Reflecting on our current VR scene:
Our strengths are:
- High quality music background. An immersive experience always requires a good taste of music that provides extra atmosphere in the background.
- Themed models. All buildings are built in a consistent style so views can recognize this place right away.
- Vivid animation to make the scene look more “alive”. We added some basic animations on the sea creatures so the general scene is dynamic and similar to the real world.
However, some of the missing elements include:
- A dragon. The owner of the palace is missing in our scene due to the time constraint. He is definitely welcomed, so once he figures out his schedule, he might come out and give us a surprise.
- A trail for visual controls. It is still a little difficult for the users to navigate through our scenes on the web. If we had more time, we would consider adding a trail as the tour guidance so viewers can enjoy the view of the palace with more control on their side.
- Some floating bubbles on the screen to make the scene look more realistic. Of course, there are bubbles in the ground! We know physics! However, we only implemented them in the background and they are not as obvious to spot on.
- The most important thing that was missing in our scene is the Ruyi Jingu Bang (click on the link to learn more about the tale) that was supposed to be stored in the Dragon Palace before the Monkey King, Sun Wukong, came and took it. Right now, it seems like it is still held by Sun Wukong. After they make it to the West, maybe it will be returned to the east sea and show up in our scene to calm the east sea.
What would we improve
Reflecting on our final product, there are a few features we might work on in the future that would improve the overall user experience of our project. One thing is that our sea creature models currently move in a fashion that seems a little unnatural. For example, our shark model “swims” by just statically moving in a straight line, without motions like flipping the fins or wagging its tail. Another thing could be to implement more fishes that swim around in our scene and to assign some random swimming routes for them.
Unfortunately, we didn’t have a chance to add these fancy features to our model. One of the challenges we faced was that none of us had any previous experience with virtual reality or 3-D models, so it was a steep learning curve for all of us. However, we only had two weeks to work on the whole design and development process. We also encountered some technical issues due to the A-Frame library itself, for example the lack of the options to dynamically change camera options (wasd-control/ orbit-control) as users proceed and also, as mentioned previously, the lack of an easier way for designers to easily manipulate the motions.
Conclusion
Overall, our team enjoyed a lot during the process of exploring different models and different functions with the A-Frame framework. As for our ultimate goal, we tried our best to present a vivid Dragon Palace to our users, based on the description in Journey to the West. After carefully choosing all the architectures, the animals, and the audios, we are glad that the theme of our project adheres to the traditional Chinese culture in terms of its style and feel. Although there are multiple potential improvements we can make in the future to enhance the user experience, the current project fulfills our goal in a beautiful way. Hope you like our project, A Tale of the Dragon Palace, and enjoy wandering around in our Dragon Palace scene!