SpatialFlow: Prototype Development

Design ProcessPrototype DevelopmentContext Review

April 14, 2020

Setting up interactive city nodes. Pointing at a node will make the city appear in the holographic dome.
Users can point and make hand movements to spin the globe.

April 5, 2020

Progress of existing data in the city planner. A holographic model of Toronto was acquired using map data exported as a 3D model. I used BlenderGIS to convert satellite data into 3D models with the elevation you see here. In order to occlude buildings outside of the holographic dome, I created a custom stencil shader system. I used the StencilPortalRoomCube Unity project for reference.

March 27, 2020

The Acropolis of ancient Greece is now part of SpatialFlow. Users will eventually be able to choose parts of the world, set a time period, and view the cities and architecture of the time! If you want to create a city inspired by ancient Greek architecture, you now can. I used open-source 3D models of the Acropolis, available on BlendSwap.
A hologram of the Parthenon.
A floating globe. In the future, users will be able to point to a city to view it in front of them.

March 13, 2020

The next iteration of the city planner station. It’s possible to reach the different areas, and rotate the entire table for a better view.
Another view. The connection points are generated on the fly.
Construction of the dome in Blender.
It’s now easier to connect and disconnect nodes by dragging their holographic spheres.
Demo nodes positioned in the office. Nodes which have translatable data can be connected and disconnected via grabbing or pointing.

February 28, 2020

A functional city planner section. Users can move buildings through a grab interaction, and snap them to a grid. I set up a collider system for detecting and snapping object placements.

February 14, 2020

Setting up lighting for the virtual scene.
I developed multiplayer avatar and connection functionality. It’s now possible to see other users in your virtual office. I used the PlayoVR Unity project as a reference.
A user testing session of SpatialFlow Alpha.

February 3, 2020

A new layout for the SpatialFlow virtual office, with various 3D models of furniture.
Setting up components for the office scene.
Setting up the SpatialFlow virtual office.

Work-in-Progress Note as of January 24, 2020:

Summary of Process and Prototype to Date:

The SpatialFlow project began with an initial contextual review on the history of computer and programming interfaces, including visual programming. I uncovered keywords aiding my research, such as spatial computing, mixed reality, speculative design, iterative design, and skeuomorphism. Current industry standard 2D, VR and AR interfaces were also reviewed, noting critiques of each. Some notable examples are Rhino’s Grasshopper plugin, Unreal Engine’s material node editor, and Oculus Rift’s menu interface. Through discussing with students of various programming skill levels, I uncovered one purpose where I can see great room for improvement – visual programming in order to create 3d structures or models, such as in architectural software such as Rhino.

My sketch of some spatial node inputs.

I began prototyping and user testing using paper, moving to 3D models using Blender, to a 360 degree panoramic render, to Unity, using an Oculus Rift integration allowing for interaction. At the moment, users are placed inside an office room in VR, with the ability to move connected node blocks in the air, and press buttons to change the holographic display grid in the center of the room. Almost all of this interaction has been programmed in Unity. The current prototype does have limitations: the user cannot yet open up new 3D menus, manipulate the building blocks to create a different output, or collaborate with another person.

Plans to Develop the Project:

I plan on creating more visualizations so that users trying the VR prototype will get a better sense of the speculative workspace. I will create renders in which creatives are performing different tasks holographically, such as music composition, sculpting, animation, and level and environment design. The SpatialFlow visual programming interface could be one aspect of this room, shown being used for the creation of game logic or 3D structures and shaders. With the VR prototype, I am currently looking into tools that allow for multiple users to work in the same virtual room. I plan on dedicating a short amount of time into this to allow for a very basic level of functionality – if it turns out to be overly cumbersome, I will prioritize the depth of single-user interactions instead. Ideally, users will be able to actually ‘program’ to create an output using the 3D objects. If I am unable to have a high level of functionality with this, the VR prototype currently does allow users to move blocks around and manipulate the display grid. I would be able to have users load many different pre-created variations and scenarios of the user interface to be explored with more basic interactions instead.

January 4, 2020

Moodboards for the office.

November 22, 2019

Different placeholder buttons are set up to toggle and move the grid display. This lays the groundwork for making the prototype fully interactable in the future.

November 15, 2019

Setting up Unity materials in order to change the colour of the grid and interconnecting lines.
Setting up VR-interactable demo nodes.

November 8, 2019

Generating the grid using an algorithm which can be controlled by the user. The grid areas can be toggled on and off.

November 1, 2019

Implementing the ability for users to see different placeholder objects connected as a ‘laser’.

October 25, 2019

A VRTK hand.
Setting up the sky and surrounding lighting in Unity. Later on in the prototyping process, it will be important for users to work in a pleasant working environment that reminds them of a real office.

October 18, 2019

Setting up Virtual Reality Toolkit (VRTK) and basic lighting in the scene.

October 11, 2019

Setting up 3D models to work properly inside Unity.

October 4, 2019

I began the interactive prototype by implementing version control before I began programming my software. This has allowed me to go back to previous versions of my tool in the engine, reflecting on how my user testing logs have influenced SpatialFlow over time.

September 27, 2019

Learning how to do 360 degree panoramic renders in Blender.
Iterative designs of the interactive area. These were used with a Google Cardboard to validate the initial prototype.

September 20, 2019

A 3D sketch capturing the feel of the nodes.
3D modelling the office area.

September 10, 2019

An early sketch of the various forms a collaborative spatial computing environment may take.

Back to Design Process