2D Architectural Drawings

IFClite can generate 2D architectural drawings from 3D IFC models, including section cuts, floor plans, and elevations. The @ifc-lite/drawing-2d package produces vector SVG output with proper architectural conventions.

What It Generates

From any 3D IFC model, you can produce:

• Floor plans - Horizontal section cuts at a specified height
• Section cuts - Vertical sections through the model
• Elevations - Projected views from a direction

Each drawing includes:

Element	Description
Cut lines	Bold lines where geometry intersects the section plane
Projection lines	Visible geometry beyond the cut plane
Hidden lines	Occluded geometry rendered as dashed lines
Hatching	Material-based fill patterns (concrete, masonry, insulation, etc.)
Architectural symbols	Door swings, window frames, stair arrows
Annotations	Dimensions and labels

Quick Start

Generating a Floor Plan

import { generateFloorPlan } from '@ifc-lite/drawing-2d';

// generateFloorPlan(meshes: MeshData[], elevation: number, options?)
const drawing = await generateFloorPlan(meshData, 1.2, {
  includeHiddenLines: true,
  includeProjection: true,
});

console.log(`${drawing.stats.cutLineCount} cut lines`);
console.log(`${drawing.stats.projectionLineCount} projection lines`);

Generating a Section

import { generateSection, createSectionConfig } from '@ifc-lite/drawing-2d';

// createSectionConfig(axis, position, options?)
const config = createSectionConfig('z', 5.0);

// generateSection(meshes: MeshData[], axis: 'x' | 'z', position: number, options?)
const drawing = await generateSection(meshData, 'z', 5.0);

SVG Export

import { exportToSVG } from '@ifc-lite/drawing-2d';

const svg = exportToSVG(drawing, {
  showHatching: true,
  showHiddenLines: true,
  scale: { name: '1:100', factor: 100 },
  title: 'Ground Floor Plan',
});

// svg is a string of SVG markup
document.getElementById('drawing').innerHTML = svg;

Drawing Sheets

For presentation-ready output, drawings can be placed on sheets with frames and title blocks:

import {
  createFrame,
  createTitleBlock,
  renderFrame,
  renderTitleBlock,
  renderScaleBar,
  PAPER_SIZE_REGISTRY,
} from '@ifc-lite/drawing-2d';

// Create an A1 landscape sheet
const paper = PAPER_SIZE_REGISTRY.find(p => p.name === 'A1');
const frame = createFrame({ paper, orientation: 'landscape' });
const titleBlock = createTitleBlock({
  projectName: 'Office Building',
  drawingTitle: 'Ground Floor Plan',
  scale: '1:100',
  drawnBy: 'Architect',
  date: '2026-02-07',
});

// Render to SVG
const frameSvg = renderFrame(frame);
const titleBlockSvg = renderTitleBlock(titleBlock);
const scaleBarSvg = renderScaleBar({ scale: 100, units: 'm' });

Graphic Overrides

Control how elements appear in 2D drawings using graphic override presets:

import { createOverrideEngine, ARCHITECTURAL_PRESET } from '@ifc-lite/drawing-2d';

const engine = createOverrideEngine();

// Apply a built-in preset
engine.applyPreset(ARCHITECTURAL_PRESET);
// Available: VIEW_3D_PRESET, ARCHITECTURAL_PRESET, FIRE_SAFETY_PRESET,
//           STRUCTURAL_PRESET, MEP_PRESET, MONOCHROME_PRESET

// Or add custom rules
engine.addRule({
  id: 'highlight-walls',
  name: 'Highlight Load-Bearing Walls',
  enabled: true,
  priority: 1,
  criteria: { type: 'ifcType', value: 'IFCWALL' },
  style: { lineWeight: 0.5, color: '#FF0000' },
});

Architectural Symbols

The package generates proper architectural symbols:

Symbol	Description
Door swings	Arc showing door opening direction and angle
Sliding doors	Arrow showing sliding direction
Window frames	Double-line representation with glass
Stair arrows	Direction arrows with UP/DOWN labels

import { generateDoorSymbol, generateWindowSymbol } from '@ifc-lite/drawing-2d';

const doorSvg = generateDoorSymbol({ width: 0.9, angle: 90, swing: 'left' });
const windowSvg = generateWindowSymbol({ width: 1.2, type: 'casement' });

GPU Acceleration

For large models, section cutting can be GPU-accelerated:

import { GPUSectionCutter, isGPUComputeAvailable } from '@ifc-lite/drawing-2d';

if (await isGPUComputeAvailable()) {
  const cutter = new GPUSectionCutter(gpuDevice);
  const result = await cutter.cut(meshData, sectionConfig);
}

Viewer Integration

In the IFClite viewer:

1. Activate section plane - Position a section plane in the 3D view
2. Open 2D panel - The 2D drawing panel shows the section cut
3. Toggle layers - Show/hide cut lines, projection, hidden lines, hatching
4. Annotate - Add measurements, polygon areas, text boxes, and revision clouds
5. Select & edit - Click annotations to select, drag to move, Delete to remove
6. Graphic overrides - Apply presets to change element appearance
7. Export SVG - Download the drawing as vector SVG

Annotation Tools

Tool	Description	Shortcuts
Distance Measure	Click two points to measure distance	Shift = lock axis
Area Measure	Click polygon vertices, close near first point or double-click	Shift = orthogonal
Text Box	Click to place, type text, Enter to confirm	Double-click to re-edit
Revision Cloud	Click two corners to define rectangle	Shift = square
Select / Pan	Click annotations to select, drag to move	Escape = exit tool / deselect

Annotation Selection

When using the Select / Pan tool (or after pressing Escape to exit a creation tool):

• Click any annotation to select it (blue dashed border with corner handles)
• Drag the selected annotation to reposition it
• Delete or Backspace to remove the selected annotation
• Double-click a text annotation to re-enter edit mode
• Escape to deselect or exit annotation tools

Display Options

Option	Default	Description
Hidden lines	On	Show occluded geometry as dashed lines
Hatching	On	Material-based fill patterns
Annotations	On	Dimensions and labels
3D overlay	On	Show section plane position in 3D view
Scale	1:100	Drawing scale for dimensions
Symbolic representations	Off	Use authored Plan/Annotation representations when available