How to determine WebGL and GLSL version? - glsl

Question

What calls I could make to determine WebGL version support (eg 1 vs 2) and also SL specification version (eg. 1.x vs 3.x) in the current browser.
Do you know which calls I must make using the GL api? or Macros inside the SL?

Answer 1

I wanted to add some of my own discoveries here too in case they come useful for others:
You can query the supporting shader language like this:
gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
"WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)"
And if you have a context and you don't know how you got it you can query it using:
gl.getParameter(gl.VERSION);
"WebGL 1.0 (OpenGL ES 2.0 Chromium)"

Answer 2

to check for WebGL2
const gl = someCanvas.getContext("webgl2");
if (!gl) { .. no webgl2 }
to check for WebGL1
const gl = someCanvas.getContext("webgl");
if (!gl) { ... no webgl }
GLSL there is nothing to check for. WebGL1 supports GLSL ES 1.0. WebGL2 supports both GLSL ES 1.0 and GLSL ES 3.0 period.
If you want to write a shader that compiles in both GLSL ES 1.0 and GLSL ES 3.0, well, you actually can't without string manipulation in JavaScript since the first line in a GLSL ES 3.0 shader must be
#version 300 es
In other words you can't check "if GLSL VERSION = 3" since you're required to declare the version you're using as the first line.
There's also probably not much reason to write shaders that work in both. Since if you want a shader that runs in both WebGL1 and WebGL2 then just use GLSL ES 1.0 The reason you'd choose to use GLSL ES 3.0 is to use features that don't exist in GLSL ES 1.0.
If you actually do want to do it I'd recommend using string manipulation in JavaScript. If you want to do it in GLSL then you can use the __VERSION__ macro as in
#if __VERSION__ == 300
...glsl es 3.00 code ...
#else
...glsl es 1.00 code ...
#
But of course you still have to manually prepend #version 300 es at the top to actually get GLSL ES 3.0