Realtime Collaboration on 3D in the Browser
Problem Statement
Design of a multi-purpose space for working with 3D content
My role & contribution
I led a team of 3 designers to shape Sunglass as a multifaceted 3D workspace. The problems I solved for Sunglass were:
1. Design of a collaborate workspace
2. Designing interaction framework for running apps on 3D models
3. Design of an embeddable '3D Player'
4. A design system for Sunglass
Workspace
A multi-purpose space
As an environment, Sunglass' interface was meant to be as less of the interface as could be possible. Call-to-actions were visually minimum on the screen and allowed for the 3D objects to be the primary focus.
To make the UI bold yet invisible, I employed a black-yellow colour scheme with the highest contrast possible but also with a slight transparency.
The 3 main purposes for which the Sunglass stage was to be used was:
1. Broadcasting the space
2. Managing & navigating the space
3. Managing models in the space
Space tree to work with information in 3D models
3D models, as with much other visual work created using software is comprised of groups and layers and needs an efficient way to deal with this hierarchy of information. Every 3D model, being comprised of models in groups and at multiple levels, could be worked on in isolation, and were placed in their own spaces. This hierarchy of spaces in Sunglass was termed as a 'space tree'.
Spaces could be worked on in isolation or, in-turn be 'baked' or fused into a single space as well.
An illustration of the space tree being navigated into to then switch to another space for isolated editing
A snapshot of the space tree in-use to navigate to a specific space or to take space-based actions
Economisation of space and information for a dynamic environment
The Sunglass interface offered quite a comprehensive set of features and functions to users. For this reason, one of the problems to be solved was for the reduction of interface area. The way I achieved this was by making the information pieces modular, floating and collapsible.
Draggability of toolbars and menus
To optimise and customise the usage of space in the UI, I added draggability to the Sunglass UI. The key operation elements and menus in the UI could be dragged and positioned anywhere.
Sunglass Apps
On top of the environment in which one could work with 3D content, Sunglass had an app store in which developers brought in apps ranging from basic functions like rendering, etc., to running simulations such as computational fluid dynamics.
As powerful as desktop apps
It would also be possible for the user to be able to run an application (and generate results) on a part of the entire 3D composition. The way this could be done was by 'adding (+)' an application to a part of the 3D composition.
An example workflow of an app is shown below in which a user could select a part of the UI, choose a Render app and then render a part of the contents of the environment with specified lighting settings.
To begin with, apps are available in the stage, to be accessed from the object menu and selected and applied to the object.
Once an app is selected from the menu, it appears on the selected object and can now be run.
An example of a render app which will render a 2D image of a selected area of the model.
Every app added to the stage and assigned to an object had a settings pane which would allow any customisations before the app was run.
Shown below is the settings for the Render app inside Sunglass
Once the settings have been configured and the app is run, the user can view the progress of the app run or stop it just in case.
To enable multiple apps to be added in the same environment, I designed a minimise-able module which let a user view app run progress and manage settings without taking up too much space on the canvas
Sunglass Player
An Interactive showcase of 3D content
The most common method that 3D designers (architects, 3D modellers, etc) used to showcase their content was to show snapshots of their 3D models or environments.
Enter Sunglass Player, the new way of presenting your 3D content online. The Player allows for:
1. Embedding of the 3D object from the Sunglass stage into your website or your blog
2. Basic operations such as rotate, pan, zoom and auto-rotate
The player interface allowed for basic operations on the stage, such as zooming, panning, orbiting and playing a basic rotating model presentation
The user could also save and showcase models in specific views in the stage, which the Sunglass player can present
The model could also be shared as an embeddable from the player itself
Some press coverage for Sunglass: