Exploring Codecity: Building a 3D Metaverse Code Analysis Tool with WebXR

Codecity 3D Visualization

Codecity is a software‑analysis environment that visualizes a codebase as an interactive 3D city: classes become buildings, packages become districts. The original research by Richard Wettel (2007) used 2D treemap rendering.

CodeCity is an integrated environment for software analysis in which a software system is visualized as an interactive, navigable 3D city. Classes are represented as buildings, packages as the areas containing those buildings, and the visible attributes describe a selected set of software metrics.

Implementation

D3.js

processes source data and generates a treemap layout that provides hierarchical positions and metric‑based dimensions. Three.js consumes the treemap output to construct a WebGL scene, creates building meshes, applies height/size based on lines of code, change frequency, etc., and adds WebXR support for VR/AR headsets.

GitHub Actions workflow builds the static assets, runs linting/tests (currently TBD), and deploys the site to GitHub Pages.

Live demo is hosted at https://phodal.github.io/codecity/ and the source code is available at https://github.com/phodal/codecity.

Digital Twin Mapping

The same principle can be treated as a digital twin: code metrics (line count, churn, hierarchy) are stored as virtual properties in the cloud and synchronized with the 3D representation. Azure IoT’s device‑twin service and the Eclipse Ditto framework illustrate the pattern of storing metadata, reporting state, synchronizing long‑running workflows, and querying configuration.

Technical Requirements and Tools

WebGL performance is comparable to native GPU applications, making Three.js suitable for real‑time VR rendering.

WebXR API enables headset‑agnostic immersion; Firefox’s WebXR simulator can be used for development before a physical device is available.

For developers familiar with Unity or Unreal Engine, similar visualizations can be built more quickly, though those platforms are commercial.

Relevant Images