Grad Project Support Documentation

VR Gallery Project Showcase.

During this project, I have experienced goal changes, a lack of equipment, and design issues. But in the end, I think I covered most of the issues, and the final outcome is satisfying. I will divide the process into three parts to talk about this entire project process.

The change of project goal

It is really unfortunate that because of COVID-19, the NEST studio pushed all the gallery exhibitions to next semester. On plan, there would be several visual art designs like posters, and flyers but the fact is I really do not have such opportunities to finish these.

Under this situation, I started to change the design aspect of my project from visual design to a web-based VR gallery design. In the meanwhile, keep the flow of art creations, and found a way to combine these two together. This idea came from the big picture of the Covid is still hurting the real world a lot. Traditional art exhibitions are limited because of this. I was hoping maybe the visual gallery could become a checkpoint as a platform to hold art exhibitions and become an entrance for people to keep in touch with the arts but still keep social distance.

The design process and technology

The entire VR gallery was built based on the A-frame library. A-frame is a web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, and mobile platforms. This is a great web-based 3D render engine I learned from the Web-Font End class this semester. Because of the web-based property, it almost could run on any device that has access to the Internet.

The sketches held in this gallery are all drawn by myself. Their inspirations and ideas are all from the main theme of the NEST gallery, which is exploring the relationship between nature and humans. Based on these I created several sketches which all want to show my understanding of the harmony or conflicts between humans and nature.

The gallery design process is different from the regular web front page design. This project is focused on how to arrange the entities in the 3D space and make the scene look better than the logic part of how a web page works. The only most important logic script is about how to control the video in the gallery play and pause.

The script controls the video

I tried different color light combinations in the gallery, the gallery model itself is in a sci-fi style, not like the traditional art gallery. I chose this gallery because the art pieces I made are all black and white sketches, the dark theme will not catch the audience’s attention away from the art.

The first version of the VR gallery

The light color choice is a little bit more tricky than I thought. In the very beginning, I wanted to use warm light which is more close to the real gallery choice. However, the warm yellow light made the sense more complicated and “dirty” than I expected. Therefore, I tried different color choices, and in the end, the cold blue light worked with the gallery best.

The warm yellow theme

The cold blue theme

The art creation part was also painful at the very beginning. I did not have a professional studio to use, so recording the processing footage was not an option at that time. I tried to take enough pictures of the creation process but it just made the documentation messy and hard to read.

One opportunity came during the Thanksgiving break, I went to visit my friend who has an art studio to use. He helped me set up a camera to record the entire drawing process. After further video edit, the footage is controlled in length which is suitable for showcase and hold in the VR gallery. I am satisfied with this way of showing my working process for the art part.

The drawing process

The roadblocks or issues

Back to A-frame. I mentioned it is a web-based 3D rendering platform. Handy, pick response, and cross-platform are the advantages it has. But it also sacrifices some of the performances that other traditional 3D rendering engines have. A-frame cannot load and render models with very detailed light effects and texture. The gallery model I prepared for this project was designed with built-in light effects and light reflected ground texture. But the A-frame model can just keep the very basic model structure and very low quality of ground texture.

The model I prepared

The model I prepared

Because of this issue, I tried problem shooting, trying to add the texture and light effect back to the scene, but the result was not satisfying. A-frame is more suitable for rendering a relatively low-quality polygonal 3D model with no extra light effect. I prepared a backup gallery model for testing, the result is still the same.

The backup model

I gave up the idea of using complacent textures and lights to make the scene look more realistic. By using the built-in lights and camera control, I tried to slide the focal point onto the art pieces but not the environment that much.

Conclusion

Thank ATLAS for such great resources, I can get in touch with the newest tech who can help me finish this project. If I could have more time and energy, I definitely would polish this project better. Switch different models, create more interactive parts, or have more art creations. However, the experience I have during this project is very valuable for me. I learned what I should do when facing roadblocks, learned more about web front coding knowledge, and most importantly, one meaningful test of combining art with technology.