Overview

OpenCAD brings native CAD and GIS file viewing to Visual Studio Code. Open IFC, DXF, KML, KMZ, and Shapefile files directly in your editor with full 3D interactive visualization — no external software required.

Built for architects, engineers, GIS professionals, and developers working with Building Information Modeling (BIM) and geospatial data.

Supported Formats

Features

• 🖥️ Native VS Code Integration — Opens CAD/GIS files as a custom editor tab, just like any other file
• 🎮 Interactive 3D Viewer — Orbit, pan, and zoom with mouse controls
• 📐 Multi-Format Support — IFC, DXF, KML/KMZ, Shapefiles — one extension for all your CAD and GIS files
• 🔩 IfcOpenShell Powered — Uses the battle-tested IfcOpenShell C++ geometry engine for IFC parsing
• 🗂️ Layer Support — DXF layers and GIS feature attributes preserved with correct colors
• 🌍 Geographic Projection — KML/KMZ and Shapefile coordinates automatically projected from lat/lon to local 3D space
• 🔧 Toolbar Controls — Wireframe mode, camera reset, fit-to-view, projection toggle
• 🎨 Theme-Aware — Adapts to your VS Code color theme
• 📊 Model Info — Displays element count and file details
• 🪶 Lightweight — IFC conversion auto-downloads IfcConvert on first use (~20 MB, one-time); all other formats need zero external dependencies

Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
3. Search for "OpenCAD"
4. Click Install

From Command Line

code --install-extension kamaljarada.opencad

From VSIX

Download the latest .vsix from Releases, then:

code --install-extension opencad-*.vsix

Usage

Open a File

Simply open any .ifc, .dxf, .dwg, .kml, .kmz, or .shp file in VS Code — OpenCAD automatically activates and displays the 3D visualization.

Format Notes

Viewer Controls

Commands

Open the Command Palette (Ctrl+Shift+P) and type "OpenCAD":

Settings

Architecture

OpenCAD
├── src/
│   ├── extension.ts              # VS Code extension entry point
│   ├── cadEditorProvider.ts      # Unified custom editor for all formats
│   ├── ifcConvertManager.ts      # Downloads & runs IfcConvert binary
│   ├── types/                    # Shared type definitions
│   │   └── geometry.ts           # GeometryData, GeometryEntity types
│   ├── converters/               # Format-specific converters
│   │   ├── converter.ts          # FormatConverter interface
│   │   ├── converterRegistry.ts  # Extension → converter mapping
│   │   ├── ifcConverter.ts       # IFC → GLB (via IfcConvert)
│   │   ├── dxfConverter.ts       # DXF → GeometryData (via dxf npm)
│   │   ├── kmlConverter.ts       # KML/KMZ → GeometryData
│   │   ├── shapefileConverter.ts # Shapefile → GeometryData
│   │   └── geoUtils.ts           # Geographic projection utilities
│   └── webview/
│       ├── main.ts               # Webview entry & message handling
│       ├── viewer.ts             # Three.js scene, GLB + geometry loading
│       ├── geometryRenderer.ts   # GeometryData → Three.js objects
│       └── toolbar.ts            # Toolbar button handlers
├── samples/                      # Real-world test files for each format
├── tests/                        # Converter test scripts
├── .github/workflows/
│   ├── ci.yml                    # CI: lint, build, test
│   └── release.yml               # Release: package, publish
└── assets/                       # Icons and static assets

How It Works

OpenCAD uses a converter abstraction with two rendering paths:

IFC path:

1. User opens .ifc file → Extension downloads IfcConvert (one-time)
2. IfcConvert converts IFC to GLB (binary glTF)
3. GLB data sent to webview → Three.js GLTFLoader renders the 3D model

Geometry path (DXF, KML, Shapefile):

1. User opens file → Extension parses with format-specific npm library
2. Parsed data converted to intermediate GeometryData (lines, polygons, arcs, circles, text)
3. For GIS formats, coordinates projected from lat/lon to local Cartesian (meters)
4. GeometryData sent to webview → GeometryRenderer builds Three.js objects

Technology Stack

• IfcOpenShell — C++ IFC geometry engine (via IfcConvert CLI)
• Three.js — 3D rendering engine
• dxf — DXF file parser
• @mapbox/togeojson — KML/GPX to GeoJSON converter
• shapefile — Shapefile parser
• Webpack — Module bundling for extension and webview
• TypeScript — Type-safe development
• Bun — Fast JavaScript runtime and package manager

Development

Prerequisites

• Bun >= 1.0
• VS Code >= 1.85.0

Setup

# Clone the repository
git clone https://github.com/kjarada/OpenCAD.git
cd OpenCAD

# Install dependencies
bun install

# Build the extension
bun run build

# Watch for changes during development
bun run watch

Running Locally

1. Open the project in VS Code
2. Press F5 to launch the Extension Development Host
3. Open any .ifc, .dxf, .kml, .kmz, or .shp file in the new VS Code window

Running Tests

# Test converter parsing (requires bun)
bun tests/test-converters.ts

# Test full converter pipeline
bun tests/test-full-pipeline.ts

# Test edge cases (29 tests)
bun tests/test-edge-cases.ts

Building a VSIX Package

bun run package

Release Process

Releases are automated via GitHub Actions:

1. Create a version tag:

   # Update version in package.json, then tag
   git tag v0.3.0
   
   # Push with tags
   git push origin master --tags
   

2. Automated pipeline:

   • Builds and lints the project
   • Packages the .vsix extension
   • Creates a GitHub Release with release notes
   • Publishes to the VS Code Marketplace
   • Publishes to Open VSX Registry

Setting Up Publishing

To enable automated publishing, add these secrets to your GitHub repository:

Contributing

Contributions are welcome! Please read our Contributing Guidelines before submitting a pull request.

Roadmap

• [x] DXF File Support — View AutoCAD DXF files with layer support
• [x] KML/KMZ Support — View Google Earth geospatial data
• [x] Shapefile Support — View ESRI Shapefile GIS data
• [ ] DWG File Support — Native DWG parsing (currently experimental)
• [ ] IFC Property Inspector — View element properties in a sidebar panel
• [ ] Element Selection — Click to select and highlight individual elements
• [ ] Layer Toggle — Show/hide individual layers in DXF and GIS files
• [ ] Section Planes — Cut through the model with clipping planes
• [ ] Measurement Tool — Measure distances between points
• [ ] STEP File Support — View STEP/STP CAD files
• [ ] Model Tree — Hierarchical view of IFC spatial structure
• [ ] Export Snapshots — Export viewport as PNG/SVG
• [ ] Multi-model — Load and compare multiple files

License

This project is licensed under the MIT License — see the LICENSE file for details.

Acknowledgments

• IfcOpenShell — The open-source C++ IFC geometry engine that powers IFC conversion
• Three.js — The 3D library that makes browser-based visualization possible
• buildingSMART — Maintainers of the IFC standard
• dxf — DXF parser for Node.js/browser
• @mapbox/togeojson — KML to GeoJSON conversion
• shapefile — Shapefile to GeoJSON conversion