One Subsea
At Somo Digital I helped to create a multi-user installation. The purpose of the app was to demonstrate the capabilities of various deep sea oil extraction apparatuses. The user are able to move around the environment with gestures on a touch-screen interface towards hotspots, that would then display information about the machinery. The information was populated by a Content Management System.
The program utilised the following plugins and external sources.
- Suimono Water System: A water rendering plugin for Unity.
- Gestureworks: A multitouch and multiuser software SDK that allowed connection with external touchscreen peripherals.
- Contentful: An off-the-shelf CMS system.
There were 4 different versions of the program.
- Cube ran on several different screens on four different machines arranged in a cube. Shown in the video above.
- Table ran on a single flat-screen machine, but allowed for four users to use the program at the same time, by splitting the screen into quarters.
- Laptop is a stripped-down, lower fidelity version of the program, aimed at running on seperate laptops. This version did not utilise Gestureworks or Suimono.
- iPad is similar to the Laptop version, but aimed at running on iPads. This version also did not utilise Gestureworks or Suimono.
I was in charge of the following areas:
- User Interface
- CMS
User Interface
The User Interface was primarily driven by Hotspots and menus. Hotspots would be the first layer of the wheel, followed by Wheels, Carousels and finally, information was presented within Cards.
Since all the information was driven by the CMS, the code structure behind the UI had to be made generic to allow the UI to be populated with the correct information.
Selecting a hotspot would open a Wheel. Wheels are essentially the first layer of menus of information. Each wheel was specific to each hotspot and would present relevant options. The wheels would spin slowly and could be spun manually by flicking them, and the user would select an option by clicking a segment.
As stated, the UI had to be generic, so the code created each segment by taking a prefab of a circle and dividing it by the number of submenus (segments), and then populating the text fields.
After the user selects a segment, they are shown the "Carousel".
The user can swipe left and right on the carousel to rotate it. The carousel is made up of cards, which contain the primary information on the products.
Plain text is on every card on the left-hand side, but media on the right-hand side could also be conveyed in up to four other ways:
- Image: A single image on the card that can be expanded and viewed.
- Array of Images: An array of images that could be scrolled through.
- Spinner: These represented various models of equipment that the client developed. By swiping left and right and the model would spin accordingly. These were the most complex to develop. Because of the high fidelity demanded by the client, they could not be represented as 3D models, instead they were delivered to the developers as a series of 360 images, produced from CAD software. They took up a huge amount of memory and thus had to be loaded asynchronously at runtime. Furthermore, since each image had to be ordered correctly, named accordingly and were also too large to transfer via CMS, they were stored locally within the software. Users could only select from a dropdown list of spinner options when using the CMS for this option.
- Video: A video could be played and expanded. These were developed with Movie Textures. In retrospect, since MovieTextures use the CPU to decode videos, rather than the GPU, we should have found an alternative, such as the AVPro plugin.
Content Management System
The CMS used in this project was an off-the-shelf product called Contentful. Contentful allowed a developer to design the template of the content. I made it to replicate the UI System above, with Hotspots being the roots of the content, followed by wheels, carousels, and cards being the final leaves in the heirarchy. This means that a user of the CMS could select a hotspot, and add a wheel populated with some text in each segment, then add a carousel with cards around it. Cards had fields for title, text and all media described above.
On the Unity End, Contentful could be accessed with a REST API. Using Unity WWW calls, I could parse the returned JSON into serialized Data. I comparmentalised this process into a set of stages:
- ProductionOrPreview: This was the very first screen, asking the user if they wanted to use a Production Key or Preview key (published or unpublished content).
- Requesting: This was the requesting of the JSON files. A flaw in Contentful meant that only 1000 entries of each JSON could be requested at a time, so I split the main call to content of each type and called them seperately. Once this is done the JSONs are parsed and the contents are stored in data.
- Downloading: This stage downloads and saves all of the assets one after another from the links provided in the JSON.
- ShowNonResolvable: If an error occurs during any of the above, then an error will be dispayed to the user.
This process will occur just after the program starts up.