Picking mode prevents use of GLSL 3 ES shaders

[cafour]

Using GLSL 3 ES causes shader compilation errors due to the prepended #define PICKING_MODE line.

Sigma.js version: 3.0.0 Graphology version: 0.25.4 Operating System: Windows 11 Web browser: Firefox 133.0.3, Chrome 131.0.6778.205

Steps to reproduce

1. Implement a custom node program relying on Sigma's Program<U, N, E, G>.
2. Use GLSL 3 ES in the shaders -- i.e. shaders start with the #version 300 es directive.
3. Use the newly created program to render a node.

Expected behavior

Shaders should be able to be written in GLSL 3 ES.

Actual behavior

Uncaught Error: loadShader: error while compiling the shader:
ERROR: 0:2: 'version' : #version directive must occur before anything else, except for comments and white space
ERROR: 0:6: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:7: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:8: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:9: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:15: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:16: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:17: 'out' : storage qualifier supported in GLSL ES 3.00 and above only

#define PICKING_MODE
#version 300 es

precision mediump float;

...

Note

I bumped into this issue while upgrading my project from 3.0.0-alpha3 to 3.0.0. So far, I have worked around it by using a custom version of Program<U, N, E, G> that, instead of PICKING_PREFIX + SHADER_SOURCE, uses this function:

const PICKING_PREFIX = `#define PICKING_MODE\n`;

const GLSL_300_PREFIX = `#version 300 es`;

function prependPickingPrefix(source: string): string {
    const firstNewLine = source.indexOf("\n");
    const firstLine = firstNewLine === -1
        ? source
        : source.substring(0, firstNewLine)
            .replaceAll(/\s+/g, " ")
            .trim()
            .toLowerCase();
    const otherLines = firstNewLine === -1 ? "" : source.substring(firstNewLine);
    
    return firstLine == GLSL_300_PREFIX
        ? GLSL_300_PREFIX + "\n" + PICKING_PREFIX + otherLines
        : PICKING_PREFIX + otherLines
}

It's not pretty, but it works for now.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jacomyal]

This issue is very legit, I just couldn't find the time to tackle it properly yet.