Show/Hide Mobile Menu

Aero Blocks

23.05.2022

This is a prototype of an iOS app for children that allows them to build stuff with virtual blocks in augmented reality. You tap on a detected horizontal or vertical plane to place a ground plane and on that you can place blocks. New blocks can be placed by tapping on the face of an existing block. You can select from 4 different block types and 5 different colours. Blocks can be rotated or deleted with swipe gestures. The whole model can be scaled, rotated or moved with two finger gestures. You can build models that are taller than yourself by moving the model below the ground plane.

Technologies Used
RealityKit, SwiftUI, Maya

Placing Blocks

When you tap on a detected AR plane a ground plane mesh is created procedurally that is the extents of the AR plane. When you tap on this ground plane I work out which cell the raycast intersects and place a block. When you tap on a block I work out which face of the block the raycast intersects and use that to figure out where the new block should go. Blocks are assigned a material depending on what the current colour is.

User Interface

I wanted to take up as little screen real estate as possible for the user interface which means that the buttons need to be on the shorter side of the screen regardless of the orientation of the device. In landscape orientation the buttons by default would be on the longer side. In SwiftUI I render one of two layouts depending on the orientation of the device to get the result I wanted.

Aero Blocks UI Layout iOS

Undo System

Every time the user creates, deletes, rotates or changes the colour of a block I record a pair of operations and place them on the undo stack. The first operation is the undo operation and the second is the redo operation. When the user presses the undo button I carry out the undo operation at the top of the stack, remove it and place it on the redo stack. When they press the redo button I do the opposite. The redo stack is cleared when the user carries out a new action.