Skip to content

New: Add WebGL renderer#109

Open
AlexIchenskiy wants to merge 6 commits into
release/1.0.0from
new/add-webgl-renderer
Open

New: Add WebGL renderer#109
AlexIchenskiy wants to merge 6 commits into
release/1.0.0from
new/add-webgl-renderer

Conversation

@AlexIchenskiy

Copy link
Copy Markdown

This PR introduces an alternative WebGL renderer alongside the existing Canvas renderer, plus a refactor of the layout/simulator engine to support it. The Canvas renderer remains the default, WebGL is fully optional.

The goal is better rendering performance on larger graphs by offloading node/edge/label drawing to the GPU via custom GLSL shaders, and optionally running force-directed layout on the GPU as well.

What's included

  • WebGL renderer (RendererType.WEBGL) — selectable per view, drawn with custom GLSL shaders for nodes, edges, and labels (src/renderer/webgl/).
  • Node images & labels on the GPU — image atlas (image-atlas.ts) and label cache (label-cache.ts) so textures/text can be batched.
  • Improved node/shape geometry options for the WebGL path.
  • GPU force layout engine (gpu-force-layout-engine.ts) — runs the force simulation in WebGL2 with a quadtree/Barnes-Hut approximation. Automatically falls back to the CPU force engine if WebGL2 is unavailable.
  • Layout engine refactor — the old d3-simulator-engine is replaced by a set of pluggable engines (force, circular, grid, hierarchical) behind a factory.

Documentation

Documentation for the WebGL renderer and the new layout engines is still lacking - the APIs may still change while this stabilizes, so docs will be filled in once everything is done and confirmed.

Usage

Opt into the WebGL renderer when creating a view:

const orb = new Orb.OrbView(container, {
  render: { type: 'webgl' },
});

Opt into GPU layout:

const orb = new Orb.OrbView(container, {
  render: { type: 'webgl' },
  layout: { type: 'force', options: { useGPU: true } },
});

Note on stability

This adds a WebGL rendering path, which should be considered experimental and potentially fragile. It depends on GPU/driver behavior and WebGL2 support, so rendering may differ across browsers, GPUs, parameters, and device pixel ratios, and can fail, look different or require cherry-picking for stable results where the Canvas renderer would not. The Canvas renderer remains the stable default and is unchanged in behavior.

@AlexIchenskiy AlexIchenskiy self-assigned this Jun 16, 2026
@AlexIchenskiy AlexIchenskiy changed the base branch from main to release/1.0.0 June 16, 2026 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant