如何确定WebGL和GLSL版本？

Question

我该调用哪些GL API或SL内部宏来确定当前浏览器支持的WebGL版本（例如1 vs 2）和SL规范版本（例如1.x vs 3.x）。

- Jeff Saremi

Answer 1

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

您可以像这样查询支持的着色器语言：

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)"

- Jeff Saremi

Answer 2

检查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版本=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。

- gman