This project is an educational experience I worked on during the Summer of 2016. A fellow developer and I built the experience in Unity according to the specifications of a team of designers. Using a 3D scale model of the U.S.S. Eisenhower "Ike", users are able to navigate through various 360º videos to learn more about the life of Ike's sailors and the might of its machines. My contributions to the project are detailed below:
FIRST TIME USER EXPERIENCE
In order to introduce users to what may be their first experience on the HTC Vive, I created a quick tutorial experience. Users learn a quick teleportation method, how to point-and-click at features in the experience, and how to use the radial menu. When they are finished, users are presented with the main interactive. I programmed this experience in Unity C# and modeled the environment in Maya.
The most iconic part of the experience, the main scene features a scale model carrier with which users can interact, launching aircraft and exploring elements of the ship. Users can teleport around the platform for better views, and even physically duck below the ship to see the underside.
My contribution to the scene includes the platform model, custom shaders (for transitions, glow, and water), and the aircraft and UI animations. The biggest challenge here was accomplishing a novel yet intuitive interaction using the 'laser pointer,' especially with regard to hitboxes and animation times. These were fine-tuned with repeated user testing.
CUSTOM WATER SHADER
When a designer wanted a fluid feature that reacted to intersecting objects in real time, I had to find an approach which avoided full-on fluid simulation. To achieve the desired effect, I created a water shader from scratch with a programmatically placable wake.
The swells and ripples are created by two overlapping layers of scaled Perlin noise, sampled and added to determine vertex height, color, and normal. The roughness and speed, as well as the location of the parabolic wake texture can be changed in the Unity Editor or via script to simulate the effect of an obstacle in moving water.
VARIABLE RESOLUTION SHADER
In order to realize a specific photo transition within the editor, I created a shader whose sample resolution could be adjusted in real time. The shader accepts two pixel dimensions. When a pixel is sampled, the shader snaps its color to that of the nearest point divisible by those dimensions.
This effect could be applied to any geometry, but it should be noted that this effect will occur in screen space, not world space. Below is a video of resolution and opacity being increased over time as a photo fade-in transition.
RADIAL TOUCH MENU
To navigate the experience, I implemented a world space menu based around the controller. The elements glow brighter as the user hovers near them, and can be selected by pushing the controller through them. Below is an early capture of this menu.
To quickly revisit a previously viewed video or photosphere, I implemented a designer's gallery view, which users can swipe through easily. Users select their desired link with the same laser pointer interaction as used on the main UI.