Code Logic 3D Visualizer
A powerful VSCode extension that provides real-time 3D visualization of your code's architecture and logic using Three.js.
🚀 Features
- Real-time 3D Mapping: Instantly visualizes your code as you type, creating a living map of your logic.
- Universal Language Support: Robust parsing for JavaScript, TypeScript, Python, Rust, Go, C++, Java, PHP, Shell, and more.
- Logical Block Envelopes: Visualizes code blocks (functions, classes) as translucent 3D volumes that group related logic.
- Complexity Analysis: Sphere sizes dynamically represent cyclomatic complexity, helping you identify "hot spots" in your code.
- Force-Directed Layout: An organic 3D graph that organizes itself based on parent-child relationships and code structure.
- Interactive Navigation: Click any 3D node to instantly jump to the corresponding line in your editor.
- Metrics Dashboard: Real-time stats on total complexity, average complexity, lines of code, and node counts.
- Visual Cues: Subtle pulsing animations and glow effects for errors and active nodes.
🛠️ How to Use
- Install the extension from the VSCode Marketplace.
- Open any code file in your editor.
- Launch the Viewer:
- Click the Pulse icon (⚡) in the editor title bar (top right).
- OR run the command
Start Real-Time Logic Viewer from the Command Palette (Ctrl+Shift+P).
- Explore: Rotate the 3D scene with your mouse, hover over nodes for details, and click to navigate.
📦 Publishing & Packaging
To prepare this extension for the VSCode Marketplace:
- Install
vsce:
npm install -g @vscode/vsce
- Login to Azure DevOps: Create a Personal Access Token (PAT) and a publisher account on the Marketplace.
- Package the extension:
vsce package
This will generate a .vsix file in your root directory.
- Publish:
vsce publish
🏗️ Technical Architecture
- Rendering Engine: Three.js (r128) with custom shaders and materials.
- Parsing Engine: Advanced regex-based universal parser with indentation-aware hierarchy management.
- Physics Simulation: Custom 3D Force-Directed simulation for organic layout.
- Communication Layer: VSCode Webview API for low-latency, real-time data synchronization.
📄 License
MIT © Mohit Choudhary
| |