By Erika Davis, Ziyi Wang, and Natalie Le Huenen
This project is open source. View the entire project on GitHub:
https://github.com/natalielh/unity_window_house
Project Description:
Window House is an interactive digital world where viewers explore surreal fictional environments. Our aim was to create something that’s timeless and can be experienced universally. Free of any form of language, all interactions involve visual and auditory symbols. From there, viewers are encouraged to create their own interpretations. Visual aesthetics and pleasant ambient music are emphasized to create a sense of harmony. The environmental design and architecture also reflects the dreamlike quality of existing fantasy worlds found in digital games. The lighting is exaggerated to make the environment feel more dynamic, and also gives the viewer a hint as to where to proceed to the next area. Glowing ‘portals’ fill the screen with light and transport the viewer upon interaction.
One particular theme we wanted to look at is adding unexpected movement to objects that are always static in the real world. Experimenting with digital tools allows us to explore interactions that are physically impossible. Building our world using Unity allowed us to adapt modified 3d game physics and mechanics to our custom use.
Window House aims to create a deep feeling of mystery and curiosity. We decided to continue developing upon our original project, which was a single room filled with mysterious pots, acting as “windows” allowing you to peer into different worlds. Images on pottery (something that is always still in the real world) move and come to life when you approach or look at them.
Process:
3D modelling the first scene
Experimenting with lighting and post-processing effects
Experimenting with Unity’s “Post-Processing Stack” allowed us to boost the look of ambient lighting in the scenes and push the detailing to its highest potential. Creating a filmic look, adding a ‘glow’ to the lights, creating a subtle lens-dirt effect and adding a slight vignette helps add immersion.
Using baked lighting involves rendering lighting effects and applying them as textures to models in the scene. We used baked lighting and light probes for a more realistic effect.
Light cookies are black-and-white textures used to represent the light cast by emitters onto objects in the scene. We created custom light cookies to tweak the appearance of all window and portal lights in the scenes.
Programming movement into the textures: Adding movement to the art on the pottery involved modifying the ‘offset’ value of each texture every frame. Achieving a ‘parallax scrolling’ effect involves setting the scrolling speed value of each texture at different values, giving the illusion of 3d movement.
Parallax scrolling in a texture
Creating transparent rectangular textures to wrap around meshes
Programming player interaction: The pottery reacts to the player’s movement. The texture-offsetting algorithm stores all the data about the player’s 3d position, the player’s viewing angle, and the 3d position of each pot. To simplify calculations, this 3d data is projected onto a 2d surface where all the vector calculations happen.
The custom script accepts values to tweak the calculations to create a result that feels the most intuitive for viewers.
View the texture offsetter script:
https://github.com/natalielh/unity_window_house/blob/master/unityproj_windowhouse/Assets/Scripts/PotTextureOffsetter.cs
A glowing portal
Transitioning the player between the three scenes involves using a ‘portal’ system. Upon colliding with hitboxes designated as portal colliders, the next scene is loaded.
View the scene transition script:
https://github.com/natalielh/unity_window_house/blob/master/unityproj_windowhouse/Assets/Scripts/LoadOnCollision.cs
The animated window light
Creating the animated window light involved making a keyframe animation for the light’s rotation and colour. This lets players witness the passage of time more dynamically. The “Volumetric Fog” package was also added to add to the effect.
Creating water
We used a modified version of our texture offsetter script to animate the fountain water. A simple water texture is wrapped around a cylinder model with the top and bottom faces removed, and is scrolled to give the illusion of falling water. A water splashing sound effect is also present in the center of the fountain. The closer to the fountain the viewer is, the more prominent the sound effect is.
Creating the second scene:
Final images of the second scene
Studying and testing the structure of different vaults in Rhino
Creating the staircase
Putting little parts together
Modeling columns
The second scene is a very open space allowing you to look at the stars outside. They move across the sky very quickly, similar to the rotating light in the first scene. This is accomplished by offsetting the skybox’s texture every frame.
An early view of the starry skybox outdoors
Creating the third scene:
The skybox of the third scene was hand-painted and also rotates. The scene uses light and fog tweaked to match the skybox, creating an intense sense of depth for the monolithic structure.
A view of the final scene
Walking on the bottom creates a feeling of ‘floating’ as you can float over empty holes in the architecture.
Builds:
Builds for Windows and Mac:
https://drive.google.com/open?id=1yfnGI5cHmBL-O3G3Oee-MWvk4zVo-hDF