siyuan-note/siyuan · error · Error

WebGL2 is unavailable

Error message

WebGL2 is unavailable

What it means

GraphWebGLRenderer constructor guard: canvas.getContext("webgl2", ...) returned null, meaning the browser or GPU driver cannot provide a WebGL2 context for the graph. The primary hardware-accelerated graph renderer cannot start.

Solutions

1. Enable hardware acceleration in the browser/Electron settings
2. Update GPU drivers or switch browsers to regain WebGL2 support
3. Fall back to the canvas 2D graph renderer when WebGL2 is unavailable

When it happens

Trigger: Thrown at app/src/layout/dock/graph/webglRenderer.ts:223 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of siyuan-note/siyuan@8641553a1f (2026-09-11). Data as JSON: /api/errors/61c49d952df47870. Report an issue: GitHub.

Appendix: source

Thrown at app/src/layout/dock/graph/webglRenderer.ts:223

    private highlightLine = new Float32Array([0, 0, 0, 1]);
    private highlightPoint = new Float32Array([0, 0, 0, 1]);
    private nodeColors = new Float32Array();
    private nodeStates = new Float32Array();
    private positionVersion = -1;
    private selectionVersion = -1;
    private styleVersion = -1;

    constructor(canvas: HTMLCanvasElement) {
        const gl = canvas.getContext("webgl2", {
            alpha: true,
            antialias: true,
            depth: false,
            premultipliedAlpha: true,
            preserveDrawingBuffer: false,
            stencil: false,
        });
        if (!gl) {
            throw new Error("WebGL2 is unavailable");
        }
        this.canvas = canvas;
        this.gl = gl;
        this.nodeProgram = this.createProgram(NODE_VERTEX_SHADER, NODE_FRAGMENT_SHADER);
        this.edgeProgram = this.createProgram(EDGE_VERTEX_SHADER, EDGE_FRAGMENT_SHADER);
        this.arrowProgram = this.createProgram(ARROW_VERTEX_SHADER, ARROW_FRAGMENT_SHADER);
        this.nodeVao = this.requireValue(gl.createVertexArray());
        this.edgeVao = this.requireValue(gl.createVertexArray());
        this.arrowVao = this.requireValue(gl.createVertexArray());
        this.nodePositionBuffer = this.createBuffer();
        this.nodeSizeBuffer = this.createBuffer();
        this.nodeColorBuffer = this.createBuffer();
        this.nodeStateBuffer = this.createBuffer();
        this.edgeEndpointBuffer = this.createBuffer();
        this.edgeColorBuffer = this.createBuffer();
        this.edgeStateBuffer = this.createBuffer();
        this.edgeReferenceBuffer = this.createBuffer();
        this.edgeTargetSizeBuffer = this.createBuffer();

View on GitHub (pinned to 8641553a1f)