Clairvue

Overview

Clairvue is a developer tool that visualizes AWS accounts as a cityscape to aid in development and operation of cloud based infrastructures.

Users provided the application a set of AWS keys with read access to EC2 services. Using those keys clairvue would generate a cityscape that represented eavh ARN based resource in the users account (vpcs, subnets, security groups, nacls, route tables, load balancers, igw, etc.).

• Instances: buildings
• NACL: tool booth over highway offramps entering subnet
• Subnets: neighborhood of hex cells, roads connecting instances
• VPCs: districts of hexcells with a highway connecting to neighborhoods
• Account: city comprised of districts

Users could interact with resources to see details (instance type, name, security rules) and visualize open network routes between instances.

Design

The main focus was mapping abstract/complex topics of cloud based resouces to easy to understand real life metaphors (Ex: subnet = neighborhood, instance = building). The goal was to save companies money by giving them a dashboard that anyone could understand and talk about.

My Role

Full Stack Software Engineer

Featured Work

Procedural City Layout Generation

A brute force approach to rendering a city left a lot of open space. This required users to pan the camera around a lot to get the information they were looking for. We needed to pack city districts as tightly as possible (sphere packing problem).

To address this issue I wrote a custom hexcell based physics engine and coupled it with poisson sampling. Each hexcell that made up a city district represented a collider. When placed in the world each collider was tracking within a quadTree to allow efficent spatial queries of nearby colliders. Each collider has a mass equal to the number of hexcells it encapsulates.

The algorithm for city district placement is as follows:

1. Calcualate maximum required cells to encapsulate bounding boxes of district colliders
2. Calculate circle large enough to fit required cells plus a buffer amount
3. For each district sample a random position withing the circle (poisson sampling). To increase deteminism of placement use seed generated from AWS account ID and run simulation in order of VPC (district) ids
4. Run physics engine simulation steps until no districts overlap

The physics simulation is as follows:

1. For each collider query quadTree for potentially overlapping districts (using bounding box of collider)
2. Check if cells within districts overlap
3. If cells overlap (collision) shift the collider with lower mass away in the relative directions of their origins. Shift amount is equal to amount of overlap

I like to think of this approach as similar to what happens if you pour out a bag of objects into a circular dish. They objects collider and shift each other around based on their mass.

Prodcedural Road Mesh Generation

In clairvue buildings within the same neighborhood are connected via roads. Buildings in different neighborhoods connect via the highway of the district.

I wrote a mesh generation libary (utilizing UnityEngine.Mesh) capable of generating road/highway meshes to connect buildings. I used Astar Pathfinding to determine the pathways between buildings and generate (network) traffic visualzations along roads.

AWS Lambda Backend API

To retrieve user AWS account information I developed a AWS Lambda severless backend written in python (deployed via terraform). The backend supported:

• account creation
• authentication
• retirval of AWS account information via AWS apis (vpcs, subnets, security groups, nacls, route tables, load balancers, etc.)

Synced HTML/Unity UI

Built UI system that Projected HTML UI onto screenspace ScreenSpace unity canvases. Allowed for development of HTML/CSS/JS UI that invoked C# callbacks within unity runtime.

This was originally developed for overlaying of stripe iframes to avoid CCI complicane issues.