TechnicalDrawingPlugin

Generates CAD-style technical drawings from the current scene: visible edges as solid lines, hidden edges as dashed or ghosted lines, optional silhouette emphasis, orthographic view presets, and PNG/SVG export.

Usage

import { ViewerCore, TechnicalDrawingPlugin } from "@optellix/xviewr-sdk";

const viewer = new ViewerCore(container, config);
await viewer.ready();
await viewer.loadPlugin(new TechnicalDrawingPlugin());

const drawing = viewer.pluginManager.getPlugin("technical-drawing") as TechnicalDrawingPlugin;
const result = await drawing.generateDrawing({ viewType: "front" });
await drawing.exportDrawing("png", "front-view");

Service dependencies: rendering, camera, material. Optional: selection, commands. When commands is present, the plugin declares its commands via getCommands() and BasePlugin registers them (generate-drawing, export-drawing, export-svg, and others). generate-drawing constrains viewType with enum: ["current", "front", "right", "top"]. The bodies live in src/plugins/technical-drawing/commands.ts.

Public API

Method	Description
generateDrawing(config?)	Generate a drawing with the current (or merged) config. Returns DrawingResult.
exportDrawing(format?, filename?)	Export the last generated drawing. format currently supports "png".
exportSVG(options?)	Generate and export an SVG of the current scene edges.
updateConfiguration(config)	Partial update of DrawingConfig. Validates and propagates to edge generator and material manager.
getConfiguration()	Current DrawingConfig.
getPerformanceStats()	PerformanceStats with last/avg generation time, cache hit rate, memory usage.
getCapabilities()	CapabilityReport (WebGL2, depth textures, max texture size, etc.).
clearCaches()	Clear edge cache and render targets.
togglePanel(show?)	Open/close the plugin UI panel (placeholder).
setEpsilonSettings(partial)	Tune depth testing epsilons.
getEpsilonSettings()	Current epsilon settings merged with defaults.
diagnoseDepthIssues()	Log depth buffer diagnostics.
debugShowLinesInMainScene()	Inject the generated edges as a red LineSegments into the main scene for inspection.
removeDebugLines()	Remove debug lines.

exportSVG options:

{
  filename?: string;
  backgroundColor?: string;
  includeHidden?: boolean;
  dpi?: number;
}

Types

DrawingConfig

interface DrawingConfig {
  viewType: "current" | "front" | "right" | "top";
  preserveCameraView?: boolean;
  visibleWeight: number;
  hiddenStyle: "dashed" | "ghosted";
  hiddenWeight: number;
  dashSize: number;
  gapSize: number;
  ghostOpacity: number;
  showHiddenLines: boolean;
  silhouetteEnabled: boolean;
  silhouetteWeight: number;
  targetObjects: "all" | "selection";
  useSelectionMode: boolean;
  creaseAngle: number;
  applySectionPlanes: boolean;
  resolution: { width: number; height: number };
  objectAwareHiding?: boolean;
  depthLayers?: number;
  enableCaching: boolean;
  batchSize?: number;
  useWireframe: boolean;
  epsilonSettings?: {
    orthoScaleFactor?: number;
    orthoMinEpsilon?: number;
    orthoMaxEpsilon?: number;
    perspectiveNearFactor?: number;
    perspectiveSceneFactor?: number;
    perspectiveMinEpsilon?: number;
    perspectiveMaxEpsilon?: number;
  };
}

DrawingResult

interface DrawingResult {
  texture: THREE.Texture;          // final composed drawing
  visibleTexture?: THREE.Texture;
  hiddenTexture?: THREE.Texture;
  silhouetteTexture?: THREE.Texture;
  metadata: {
    generationTime: number;
    edgeCount: { visible: number; hidden: number; silhouette: number; total: number };
    objectCount: number;
    resolution: { width: number; height: number };
    viewMatrix: THREE.Matrix4;
    projectionMatrix: THREE.Matrix4;
    boundingBox: THREE.Box3;
  };
}

Events

Event	Payload
hiddenline:activated	{ capabilities }
hiddenline:deactivated	none
hiddenline:drawing-generated	{ result, generationTime, config }
hiddenline:config-updated	{ oldConfig, newConfig }
hiddenline:caches-cleared	none
hiddenline:panel-toggled	{ isOpen }

Example

const drawing = viewer.pluginManager.getPlugin("technical-drawing") as TechnicalDrawingPlugin;

drawing.updateConfiguration({
  viewType: "front",
  resolution: { width: 2000, height: 2000 },
  visibleWeight: 1.5,
  hiddenWeight: 0.8,
  showHiddenLines: true,
  creaseAngle: 25,
});

const result = await drawing.generateDrawing();
console.log(result.metadata.edgeCount);

await drawing.exportDrawing("png", "part-front");
await drawing.exportSVG({ filename: "part-front", backgroundColor: "#ffffff" });