When Duy Nguyen decided to develop a web-based interactive art portfolio for his Senior Project, he wanted to leverage the free web hosting provided via his GitHub repository.
Could he produce a virtual art gallery that would enable anyone to walk around objects as well as observe flat surfaces? At the end of the semester, he gave a demo of what could be achieved.
The overall design of the project enables users to wander through a three-dimensional world. They use simple mouse controls to turn and keystrokes to move forward, backward, left and right. Duy encapsulated his world within a skybox that provides the illusion of an open-air brick walled art exhibit.
Two-dimensional art pieces hang from the brick walls, while three-dimensional objects are placed on the surface or hover in the sky. Duy created maze-like boundaries which provide wall space on which to place artwork and courtyards on which to place objects. He created a sense of realism through a “bounce-back” effect when someone runs into a wall.
For the user, the overall effect of the demo is similar to moving through a video game filled with artwork. The user is intrigued to investigate when something new catches their interest.
Duy Nguyen
His code had to manage the camera, to position its view as the user moves it around the portfolio. The effect is as if the user themselves are moving through the various galleries created by the scene. All pieces are rendered in real time, with artwork pieces becoming more highly defined as the user moves close. Likewise, Duy fabricated a “fogging” effect to make items in the distance to lack focus. The result is a pleasing 3D effect.
For the user, the overall effect of the demo is similar to moving through a video game filled with artwork. The user is intrigued to investigate when something new catches their interest.
Creating this effect required a mechanism to transport the camera position within a 3D space. In his presentation, Duy showed how he fashioned javascript code from three.js libraries to handle the job. His code was set up to handle objects files, to edit and extend boundaries and to transport the camera within the virtual space.
In his project presentation, Duy mentioned the challenges he faces scaling artwork for use within the system. “I had to handle objects with multiple texture files. For instance, I put a tree in the middle of one room. The texture of the trunk differs from the texture of the leaves. For complex objects, these texture files have to be placed and rendered as needed.”
“The framework for display given by this demo shows how compelling a virtual portfolio can be. Enabling users to move around the space is far easier than what I’ve seen using traditional methods.”
While GitHub provided a directory structure that enabled rendering scenes through a unique URL, it currently enforces a 2GB file size limit on any object it stores. Therefore, a 3D object with high polygon counts can’t be stored this way. Future work on such a portfolio would benefit with guidelines for suppliers of objects to reduce the complexity of their objects, much as they would when building objects for use within a game engine.
The demo kindled speculations about what such a 3D portfolio space might become. “It would be wonderful if this project was extended to accommodate student artwork”, said CS and Software Engineering department chair Mohan Shah. “The framework for display given by this demo shows how compelling a virtual portfolio can be. Enabling users to move around the space is far easier than what I’ve seen using traditional methods.”
