New: Add WebGL renderer#109
Merged
Merged
Conversation
tonilastre
approved these changes
Jul 15, 2026
|
|
||
| const program = gl.createProgram(); | ||
| if (!program) { | ||
| throw new OrbError('Failed to create program.'); |
Contributor
There was a problem hiding this comment.
Suggested change
| throw new OrbError('Failed to create program.'); | |
| throw new OrbError('Failed to create GL program.'); |
Having only program seems too generic. Same for the error below.
Comment on lines
+33
to
+34
| private _dirty = false; | ||
| private _textureAllocated = false; |
Contributor
There was a problem hiding this comment.
Nitpicking, but do want these to start with _is...
Contributor
There was a problem hiding this comment.
Btw do you need this file because it is empty?
Comment on lines
+8
to
+17
| export interface LabelAtlasEntry { | ||
| u0: number; | ||
| v0: number; | ||
| u1: number; | ||
| v1: number; | ||
| pxWidth: number; | ||
| pxHeight: number; | ||
| } | ||
|
|
||
| interface Shelf { |
Comment on lines
+30
to
+31
| private _dirty = false; | ||
| private _textureAllocated = false; |
Contributor
There was a problem hiding this comment.
Similar comment as with previous class about boolean vars
| super.terminate(); | ||
|
|
||
| const gl = this._gl; | ||
| if (gl) { |
Contributor
There was a problem hiding this comment.
Maybe an early return here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

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
RendererType.WEBGL) — selectable per view, drawn with custom GLSL shaders for nodes, edges, and labels (src/renderer/webgl/).image-atlas.ts) and label cache (label-cache.ts) so textures/text can be batched.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.d3-simulator-engineis 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:
Opt into GPU layout:
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.