Skip to main content

​
What is IGraphics?

IGraphics is iPlug2’s graphics framework that provides a cross-platform abstraction layer for building plugin user interfaces. It offers GPU-accelerated rendering with two backend options: NanoVG (lightweight) and Skia (feature-rich).

NanoVG Backend

Lightweight, OpenGL/Metal-based rendering ideal for most plugins

Skia Backend

Google’s 2D graphics library with advanced rendering capabilities

​
Key Features

GPU Accelerated

Hardware-accelerated rendering using OpenGL, Metal, or Skia

Cross-Platform

Works on macOS, Windows, iOS, and Web (WASM)

High DPI Support

Automatic scaling for retina/4K displays

Rich Control Library

Extensive collection of knobs, sliders, switches, and visualizations

​
Architecture

IGraphics follows a control-based architecture where your UI is composed of IControl objects: 
class IGraphics {
  // Main drawing context
  // Owns all controls
  // Handles mouse/keyboard events
  // Manages drawing backends
};

class IControl {
  // Base class for all UI widgets
  // Handles user interaction
  // Links to plugin parameters
};

​
Drawing Backends Comparison

FeatureNanoVGSkia
SizeLightweight (~200KB)Heavyweight (~2-3MB)
QualityGoodExcellent
Text RenderingBasicAdvanced (multi-line, paragraph layout)
DependenciesMinimalRequires Skia library
PerformanceFastSlower but more features
Best ForMost pluginsHigh-end graphics needs
NanoVG is the recommended starting point - it’s fast, lightweight, and sufficient for most plugin UIs.

​
Backend Selection

Backends are selected at compile time using preprocessor definitions: NanoVG: 
#define IGRAPHICS_NANOVG 1
#define IGRAPHICS_GL2 1  // or IGRAPHICS_GL3, IGRAPHICS_METAL
Skia: 
#define IGRAPHICS_SKIA 1

​
Basic Graphics Context

The main IGraphics context provides drawing primitives: 
void IGraphics::DrawRect(const IColor& color, const IRECT& bounds, 
                          const IBlend* pBlend, float thickness);

void IGraphics::FillCircle(const IColor& color, float cx, float cy, float r, 
                           const IBlend* pBlend);

void IGraphics::DrawLine(const IColor& color, float x1, float y1, 
                         float x2, float y2, const IBlend* pBlend, float thickness);

​
Advanced Path Drawing

IGraphics provides a path-based drawing API for complex shapes: 
pGraphics->PathClear();
pGraphics->PathMoveTo(x1, y1);
pGraphics->PathLineTo(x2, y2);
pGraphics->PathArc(cx, cy, radius, startAngle, endAngle);
pGraphics->PathClose();
pGraphics->PathStroke(IColor(255, 0, 0), 2.0f);
// or
pGraphics->PathFill(IPattern(COLOR_BLUE));

​
Platform Integration

IGraphics handles platform-specific differences automatically: 
// Mouse cursor management
void HideMouseCursor(bool hide = true, bool lock = true);
ECursor SetMouseCursor(ECursor cursorType = ECursor::ARROW);

// Clipboard operations
bool GetTextFromClipboard(WDL_String& str);
bool SetTextInClipboard(const char* str);

// File dialogs
void PromptForFile(WDL_String& fileName, WDL_String& path, 
                   EFileAction action, const char* ext);
void PromptForColor(IColor& color, const char* str);

// Platform views (native UI embedding)
void AttachPlatformView(const IRECT& r, void* pView);
void RemovePlatformView(void* pView);

​
Resource Management

IGraphics manages bitmaps, SVGs, and fonts: 
// Load resources
const IBitmap knobBitmap = pGraphics->LoadBitmap("knob.png", 60); // 60 frames
const ISVG logo = pGraphics->LoadSVG("logo.svg");
pGraphics->LoadFont("Roboto-Regular", "Roboto-Regular.ttf");

// Scale for high-DPI
IBitmap scaledBitmap = pGraphics->GetScaledBitmap(knobBitmap);

// Manual bitmap caching
pGraphics->RetainBitmap(bitmap, "cache_name");
pGraphics->ReleaseBitmap(bitmap);

​
Coordinate System

IGraphics uses a top-left origin coordinate system:
  • Origin: Top-left corner (0, 0)
  • X-axis: Increases to the right
  • Y-axis: Increases downward
  • Rectangles: IRECT(left, top, right, bottom)
IRECT bounds(0, 0, 100, 100); // 100x100 square at origin
float width = bounds.W();      // 100
float height = bounds.H();     // 100
float centerX = bounds.MW();   // 50
float centerY = bounds.MH();   // 50

​
Drawing Context Access

Access the underlying backend context for advanced operations: 
NVGcontext* ctx = static_cast<NVGcontext*>(pGraphics->GetDrawContext());
// Use NanoVG API directly
nvgBeginPath(ctx);
nvgCircle(ctx, x, y, radius);
nvgFillColor(ctx, nvgRGBA(255, 0, 0, 255));
nvgFill(ctx);
Direct backend access breaks cross-platform compatibility. Use sparingly and document backend requirements.

​
Next Steps

Getting Started

Set up your first IGraphics UI

Drawing Backends

Learn about NanoVG vs Skia

Controls

Explore the control library

Custom Controls

Build your own widgets