╔═══════════════════════════════════════════════════════════════╗
║ ║
║ 3D NEURAL NETWORK VISUALIZER ║
║ Visualize, Understand, and Explore Deep Learning ║
║ Architectures in Stunning 3D ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
Transform complex neural networks into interactive 3D visualizations
Understanding neural network architectures shouldn't require hours of staring at text files or static diagrams. 3D Neural Network Visualizer brings your models to life with:
- Beautiful 3D Rendering → See every layer, connection, and parameter in stunning detail
- Real-Time Interaction → Rotate, zoom, and explore your networks like never before
- Deep Insights → Click on layers to see detailed parameter information
- Multiple Formats → Support for PyTorch, ONNX, Keras, and custom
.nn3dformat - Zero Setup → Drag and drop your model files and start visualizing instantly
- Smart Layouts → Choose from layered, circular, hierarchical, or force-directed layouts
Tip
Try the live demo at threednn-visualiser.onrender.com to see it in action without any installation!
- 3D Layer Geometry → Each layer type renders as a distinct 3D shape (boxes, spheres, custom geometries)
- Connection Styles → Multiple edge rendering options (lines, bezier curves, 3D tubes, arrows)
- Color Coding → Automatic color assignment based on layer categories
- Level of Detail → Optimized rendering for networks with thousands of layers
- Orbit Navigation → Intuitive mouse controls for rotation and panning
- Layer Selection → Click any layer to view detailed information
- Hover Tooltips → Quick parameter preview on mouse hover
- Keyboard Shortcuts → Fast access to common operations
- Layered → Traditional left-to-right topological layout
- Force-Directed → Physics-based spring simulation
- Circular → Nodes arranged in circular patterns
- Hierarchical → Tree-like arrangement based on network depth
- Python Exporters → Convert PyTorch, ONNX, and Keras models to
.nn3dformat - REST API → Backend service for model parsing and analysis
- Extensible Architecture → Easy to add new layer types and visualizations
Visit the live demo: https://threednn-visualiser.onrender.com/
Simply drag and drop your model files to start visualizing!
Note
The online demo supports all major model formats including ONNX, PyTorch, Keras, and the native .nn3d format.
# Clone the repository
git clone https://github.com/VishalPainjane/3dNN_Visualiser.git
cd 3dNN_Visualiser
# Start with Docker Compose
docker-compose up --build
# Access the application
# Frontend: http://localhost:3000
# Backend API: http://localhost:8000
# API Docs: http://localhost:8000/docsImportant
Ensure Docker and Docker Compose are installed on your system before running these commands.
Prerequisites:
- Node.js 18+
- Python 3.11+
- npm or yarn
Frontend Setup:
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5173Backend Setup:
# Navigate to backend directory
cd backend
# Install Python dependencies
pip install -r requirements.txt
# Start FastAPI server
uvicorn app.main:app --reload --port 8000
# API available at http://localhost:8000| Format | Extension | Support Level | Notes |
|---|---|---|---|
| ONNX | .onnx |
Full | Parsed directly in browser |
| PyTorch | .pt, .pth, .ckpt |
Full | Via Python backend/exporter |
| Keras/TF | .h5, .hdf5 |
Full | Via Python backend/exporter |
| TensorFlow SavedModel | .pb |
Full | Via Python backend |
| Native | .nn3d, .json |
Full | Native format with full features |
| SafeTensors | .safetensors |
Partial | Structure inferred from weights |
Warning
Models without explicit graph structure (e.g., PyTorch state_dicts) will be visualized as 3D weight matrices rather than architectural graphs.
- Drag & Drop → Drag any supported model file onto the drop zone
- Click to Upload → Click the drop zone and browse for files
- Try Samples → Use the included examples in
samples/directory
| Action | Control |
|---|---|
| Rotate View | Left Mouse + Drag |
| Pan View | Right Mouse + Drag |
| Zoom | Mouse Wheel |
| Select Layer | Left Click on Layer |
| Quick Info | Hover over Layer |
| Key | Action |
|---|---|
1-4 |
Switch layout (1=Layered, 2=Force, 3=Circular, 4=Hierarchical) |
L |
Toggle layer labels |
E |
Toggle edge visibility |
R |
Reset camera to default view |
Esc |
Deselect current layer |
Space |
Toggle auto-rotation |
Tip
Press ? or H at any time to view the full list of keyboard shortcuts in the application.
Convert your PyTorch, ONNX, or Keras models to the .nn3d format:
cd exporters/python
pip install -e .from nn3d_exporter import PyTorchExporter
import torch
import torch.nn as nn
# Define your model
model = nn.Sequential(
nn.Conv2d(3, 64, kernel_size=3),
nn.ReLU(),
nn.MaxPool2d(2),
nn.Flatten(),
nn.Linear(64 * 31 * 31, 10)
)
# Create exporter
exporter = PyTorchExporter(model, "My CNN Model")
# Trace with example input
exporter.trace(torch.randn(1, 3, 64, 64))
# Save to .nn3d format
exporter.save("my_model.nn3d")from nn3d_exporter import ONNXExporter
# Export from ONNX file
exporter = ONNXExporter.from_file("model.onnx", "My Model")
exporter.save("model.nn3d")Note
The Python exporter automatically traces the computational graph and extracts layer parameters. For dynamic models, ensure you provide representative input tensors.
The .nn3d format is a JSON-based schema designed for neural network visualization:
{
"version": "1.0.0",
"metadata": {
"name": "ResNet-50",
"framework": "pytorch",
"totalParams": 25557032,
"created": "2025-01-15T10:30:00Z"
},
"graph": {
"nodes": [
{
"id": "conv1",
"type": "conv2d",
"name": "Input Convolution",
"params": {
"inChannels": 3,
"outChannels": 64,
"kernelSize": [7, 7],
"stride": [2, 2]
},
"outputShape": [1, 64, 112, 112]
}
],
"edges": [
{"source": "input", "target": "conv1"}
]
},
"visualization": {
"layout": "layered",
"theme": "dark"
}
}View Full Schema Documentation →
┌─────────────┬─────────────┬──────────────┬──────────┐
│ Frontend │ Backend │ Visualization│ Tools │
├─────────────┼─────────────┼──────────────┼──────────┤
│ React 18 │ FastAPI │ Three.js │ Docker │
│ TypeScript │ Python 3.11 │ @r3f/fiber │ Git │
│ Vite │ Uvicorn │ @r3f/drei │ GitHub │
│ Zustand │ Pydantic │ WebGL │ Render │
└─────────────┴─────────────┴──────────────┴──────────┘
3dNN_Visualiser/
├── backend/ # Python FastAPI backend
│ ├── app/
│ │ ├── main.py # API entry point
│ │ ├── models/ # Pydantic models
│ │ └── parsers/ # Model format parsers
│ └── requirements.txt
├── frontend/ # React frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ │ ├── layers/ # 3D layer geometries
│ │ │ ├── edges/ # Connection rendering
│ │ │ └── ui/ # UI overlays
│ │ ├── core/ # State management
│ │ ├── schema/ # .nn3d types
│ │ └── App.tsx
│ └── package.json
├── exporters/
│ └── python/ # Python export package
│ ├── nn3d_exporter/
│ └── setup.py
├── samples/ # Example .nn3d files
├── docs/ # Documentation
├── docker-compose.yml
├── README.md
└── LICENSE
Computer Vision
- CNNs → ResNet, VGG, Inception, DenseNet, EfficientNet, MobileNet
- Object Detection → YOLO, R-CNN, Faster R-CNN, SSD, RetinaNet
- Segmentation → U-Net, Mask R-CNN, DeepLab, SegNet
- GANs → StyleGAN, CycleGAN, Pix2Pix
Natural Language Processing
- Transformers → BERT, GPT, T5, BART, RoBERTa
- LLMs → GPT-3/4, LLaMA, Claude, Mistral
- Seq2Seq → LSTM, GRU, Attention models
- Embeddings → Word2Vec, GloVe, FastText
Audio & Speech
- ASR → Wav2Vec, Whisper, DeepSpeech
- TTS → Tacotron, WaveNet, FastSpeech
Multimodal
- Vision-Language → CLIP, DALL-E, Flamingo, BLIP
- Video → TimeSformer, VideoMAE
We love contributions! Whether it's bug fixes, new features, or documentation improvements - all contributions are welcome.
1. Fork the repository
↓
2. Create your feature branch
git checkout -b feature/AmazingFeature
↓
3. Commit your changes
git commit -m 'Add some AmazingFeature'
↓
4. Push to the branch
git push origin feature/AmazingFeature
↓
5. Open a Pull Request
- Follow the existing code style
- Write clear commit messages
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting PR
Important
Please read our Contributing Guide before submitting pull requests. All contributions must follow our code of conduct.
[x] Core 3D visualization engine
[x] Support for major deep learning frameworks
[x] Interactive layer exploration
[x] Python exporters for PyTorch/ONNX/Keras
[ ] Model comparison mode (side-by-side)
[ ] Animation of forward/backward passes
[ ] Performance profiling visualization
[ ] Collaborative sharing features
[ ] Mobile app (iOS/Android)
[ ] VSCode extension
[ ] Training metrics overlay
[ ] Export to Unity/Unreal Engine
| Network Size | Layers | Parameters | Load Time | FPS |
|---|---|---|---|---|
| Small (MLP) | 10-50 | <1M | <1s | 60 |
| Medium (ResNet) | 50-200 | 1M-50M | 1-3s | 60 |
| Large (BERT) | 200-500 | 50M-200M | 3-8s | 45-60 |
| XL (GPT-3) | 500+ | 200M+ | 10-20s | 30-45 |
Note
Performance metrics tested on Chrome 120, MacBook Pro M1, 16GB RAM. Your results may vary based on hardware and browser.
Model not loading?
[!CAUTION] Large model files (>500MB) may take significant time to load or cause browser memory issues.
Solutions:
- Ensure your model file is in a supported format
- Check browser console for error messages
- Try converting to ONNX or .nn3d format first
- For large models, consider using the Python exporter
Slow performance?
Optimization tips:
- Reduce the number of visible edges
- Use simpler layout algorithms
- Close other browser tabs
- Enable hardware acceleration in browser settings
Backend API not responding?
Debugging steps:
- Check if backend service is running:
http://localhost:8000/docs - Verify Python dependencies are installed
- Check firewall settings
- Look at backend logs for error messages
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 Vishal Painjane
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...
This project wouldn't be possible without these amazing open-source projects:
- Three.js → 3D graphics library
- React Three Fiber → React renderer for Three.js
- ONNX → Open Neural Network Exchange format
- PyTorch → Deep learning framework
- FastAPI → Modern Python web framework
- React → UI framework
Special thanks to all contributors who have helped shape this project!
Tip
If you find this project helpful, please consider giving it a star! It helps others discover the project and motivates continued development.
╔═══════════════════════════════════════════════════════════════╗
║ If you found this helpful, please star the repository! ║
╚═══════════════════════════════════════════════════════════════╝
Made with < /> by Vishal Painjane