如何确定WebGL和GLSL版本？

Question

在确定当前浏览器中的WebGL版本支持（例如1 vs 2）以及SL规范版本（例如1.x vs 3.x）时，我该怎么做。

您知道我必须使用GL API进行哪些调用吗？或SL中的宏？

Answer 1

检查WebGL2

const gl = someCanvas.getContext("webgl2");
if (!gl) { .. no webgl2 }

检查WebGL1

const gl = someCanvas.getContext("webgl");
if (!gl) { ... no webgl }

GLSL没有要检查的内容。 WebGL1支持GLSL ES 1.0。 WebGL2支持GLSL ES 1.0和GLSL ES 3.0期间。

如果您要编写在GLSL ES 1.0和GLSL ES 3.0中都可以编译的着色器，那么实际上，您不能在JavaScript中没有字符串操作，因为GLSL ES 3.0着色器的第一行必须是

#version 300 es

换句话说，您不能检查“如果GLSL VERSION = 3”，因为您需要声明要用作第一行的版本。

编写同时在这两种方法中使用的着色器可能也没有太多理由。因为如果您想要同时在WebGL1和WebGL2中运行的着色器，则只需使用GLSL ES 1.0。选择使用GLSL ES 3.0的原因是要使用GLSL ES 1.0中不存在的功能。

如果您确实想这样做，建议您在JavaScript中使用字符串操作。如果要在GLSL中执行此操作，则可以使用__VERSION__宏，如

#if __VERSION__ == 300
  ...glsl es 3.00 code ...
#else
  ...glsl es 1.00 code ...
#

但是，当然，您仍然必须在顶部手动#version 300 es才能真正获得GLSL ES 3.0

Answer 2

我也想在这里添加一些自己的发现，以防它们对其他人有用：

您可以查询支持着色器的语言，如下所示：

gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
"WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)"

如果您有上下文但又不知道如何获取，则可以使用以下命令进行查询：

gl.getParameter(gl.VERSION);
"WebGL 1.0 (OpenGL ES 2.0 Chromium)"